欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML基本知识

程序员文章站 2022-03-21 21:44:44
1.HTML简介【了解】 1.1Hyper text markup language 超文本标记语言 超文本：可以对文本进行格式化编辑，还有文本的链接等等，具有传统文本不具备的特性 标记：html上所有操作都是通过标记实现，标记就是标签 语言 ：不需要编译，运行在浏览器上面 1.2HTML基本思想 ......

1.html简介【了解】

 

1.1hyper text markup language 超文本标记语言

  • 超文本：可以对文本进行格式化编辑，还有文本的链接等等，具有传统文本不具备的特性
  • 标记：html上所有操作都是通过标记实现，标记就是标签
  • 语言 ：不需要编译，运行在浏览器上面

1.2html基本思想

  • 通过标签包裹内容
  • 使用不同标签和标签的属性来修改包裹内容的样式

 

 

2.html组成结构【了解】

 

2.1文档声明

<!--html5格式，doctype-document type （默认）-->
<!doctype html> 

<!--html4.0.1格式, dtd-文档结构描述 xml/接口开发-->
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">

2.2html标签

<html></html>

2.3head标签

主要属性：

  • base ：设置基本的信息;设置超链接的打开方式（超链接可以在当前页打开或者在一个页面打开） 
    <!--target设置为_self/_blank-->
<!--在新页面打开超链接-->
<base target="_blank">

<!--在当前页面打开超链接-->
<base target="_self">
  • meta ：设置页面的一些内容信息（基本不怎么用） 
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
  • link ：引入外部资源，导入一个css 
    <!-- rel规定当前文档与被链接文档的关系 -->
<link rel="stylesheet" type="text/css" href="theme.css" />
  • title : 页面标题 
    <title>这是一个标题</title>

2.4body标签

<body></body>

页面的主要内容都在body内，body标签是必不可少的。建议html开发直接使用editplus，没有必要使用eclipse；而jsp需要在集成开发平台上开发，因为jsp的本质是java->servlet，而jsp要编译为class的，所以需要jvm（java虚拟机 java virtual machine），也需要jdk（java开发工具包 java development kit）。

 

 

3.html常用的标签

 

3.1文字标签和注释【了解】

<!-- size:1-7的数字,超过了7,就是7 -->
<!-- color:两种表示方式,英文单词或者#rgb（6位16进制数，每两位表示一种颜色）-->
<font size="2" color="red"></font>

<!-- 这是html的注释 -->

3.2列表标签【了解】

列表分为基本列表，无序列表和有序列表

  • 基本列表： 
    <dl>
    <dt>java1班</dt>
    <dt>java2班</dt>
    <dt>java3班</dt>
    <dt>java4班</dt>
</dl>
  • 有序列表： 
    <!-- type 属性 1|a|i -->
<ol type="1">
    <li>java1班</li>
    <li>java2班</li>
    <li>java3班</li>
    <li>java4班</li>
</ol>
  • 无序列表： 
    <!-- type: 圆点，空心圆，或者实心圆 -->
<ul>
    <li>java1班</li>
    <li>java2班</li>
    <li>java3班</li>
    <li>java4班</li>
</ul>

3.3图片标签

<img src="图片的路径"/>

路径【重点】

  • 绝对路径：完整路径，包括http+ip或者盘符

　　　　如:e:\code\html\image\huge_girlfriend.png

  • 相对路径：相对自己的路径

 

相对路径的书写方法:

首先，搞清楚自己在什么地方,以e:\code\html\html1.html为例
有三种情况：
（1）你的目标文件和你自己在同一个文件夹下面，直接使用
（2）你的目标文件在你同一级的文件夹下（下层文件）
　　e:\code\html\image\huge_girlfriend.png
　　e:\code\html\html1.html
　　相对路径:image/huge_girlfriend2.png
（3）你的目标文件在你上一级的文件夹下（上层文件）
　　相对路径:../huge_girlfriend2.png

3.4超链接<a></a>

  • 链接资源 
    <!-- target :定义超链接资源打开的方式
_self:在当前页面打开
_blank:空白页面打开 -->
<!-- 如果不链接任何东西，href="#" -->
<a href="" target="_blank">查看用户信息</a>
  • 定位资源 
    <!-- 定义一个资源位置 -->
<a name="top"><font color="red">顶部</font></a>

<!-- 链接到资源位置 -->
<a href="#top">回到顶部</a>

3.5表格<table></table>【重点】

  • 由行和列组成

　　　 <tr></tr>  table row
　　　没有列,表的列遵循最多原则：表的列的数量以行中最多的单元格为准。
　　　 <td></td>  单元格

  • 有表头。

　　　 <th></th>  table head 表头具有一个样式：加粗居中
　　　写在tr标签中

  • 一些对表的基本操作：

　　　分割线：属性border

　　　单元格间隙：cellspacing

　　　对齐：align left|center|right 可以加到table|tr|td上，加到对应的标签上面标示该标签的子标签或者包含的内容的对齐方式

　合并单元格：
　　两种情况：取值：数字
　　1.按照行合并 rowspan 当前单元格占几行
　　2.按列合并 colspan 当前单元格占几列

  • 标题 <caption></caption> 

3.6表单<form ></form>【最重要】

　　提交数据到服务端的页面。

  • 属性： 
    <!--action="" 提交的表单地址
method="" 表单提交方式 ：get/post -->
<form action="" method="post"></form>

　　　get/post方式的区别：

(1)get方式是把请求参数加在访问路径后面，post不是

(2)get方式不安全,直接在访问路径里面就能看到所有的参数；post安全性好

(3)get方式提交的参数数量/长度是有限制的（不超过1024字节）；post没有。

  • 输入项：用户可以输入内容，html大部分的表单是通过input标签来实现的。
  • 基本输入项： 
    <input type="text" />
  • 密码输入项： 
    <input type="password"/>
  • 单选框 ： 
    <!-- 必须要有name属性,并且name属性必须相同 -->
<input type="radio" name="sex" value="0"/>男
<input value="1" type="radio" name="sex"/>女
  • 多选框 ： 
    <!-- 必须要有name属性,并且name属性必须相同 -->
<input type="checkbox" name="hobby"/>睡觉 
<input type="checkbox" name="hobby"/>吃饭
<input type="checkbox" name="hobby"/>打豆豆
  • 文本输入域： <textarea cols="" rows=""/
  • 下拉框： 
    <select name="birth">
    <option>1998</option>
    <option>1997</option>
    <option>1996</option>
</select>
  • 文件 【重要】 :文件上传下载 
    <input type="file"/>
  • 提交按钮  <input type="sumbit"/> 
  • 使用图片提交  <input type="image" src=""/> 
  • 普通按钮 
    <!-- 和js配合使用 -->
<input type="button" value="我只是一个普通按钮"/>

3.7其他标签

b,i,u :跟word一样
div:区域块, 自动加上换行
span:行块, 在span里面的标签元素在一行

3.8框架标签【了解】

　　现在基本不使用,基本都是使用div+css

<!-- frameset标签   不能写在body里面 -->
<!-- 属性：rows:行  cols:列  -->
<!-- 前80行为第一部分，剩下的给第二部分 -->
<frameset name="big_frameset" rows="80,*">
    <frame name="top" src="top.html"></frame> 
    <frameset cols="40,*">
        <frame name="small_left" src="left.html"></frame> 
        <frame name="small_right" src="right.html"></frame> 
    </frameset>
</frameset>

 

上一篇： 小米12Pro如何设置关机密码 关机密码设置方法

下一篇： day20_步入百万年薪的第二十天——规范化目录

推荐阅读