[前端三剑客之HTML]HTML常用标签整合
一、HTML结构
下图是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的。
-
（1）文档声明：
-
（2）html标签对：
-
（3）head标签对：
-
（4）body标签对：
![[前端三剑客之HTML]HTML常用标签整合_第1张图片](http://img.e-com-net.com/image/info8/212eae9eeabf471a977e2f699a6f598b.jpg)
二、head标签
在HTML中，一般来说，只有6个标签能放在head标签内。
（1）title标签
（2）meta标签 name、http-equiv
（3）link标签
（4）style标签
（5）script标签
（6）base标签
三、文本标签
- 标题标签：h1、h2、h3、h4、h5、h6 eg:
…
- 段落标签：
- 换行标签：
- 粗体标签：strong、b
- 斜体标签：em、cite、i
- 上标标签：sup
- 下标标签：sub
- 中划线标签：s
- 下划线标签：u
- 大字号标签：big
- 小字号标签：small
- 水平线标签：
- 分块标签：
四、块元素和行内元素
块元素（block） ：独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行，其内部可以容纳其他块元素和行内元素。
行内元素（inline） ：可以与其他行内元素位于同一行，其内部可以容纳其他行内元素，但不可以容纳块元素。
表1 HTML常见块元素
块元素 说明 h1~h6 标题元素 p 段落元素 div div元素 hr 水平线 ol 有序列表 ul 无序列表 表2 HTML常见行内元素
行内元素 说明 strong 粗体元素 em 斜体元素 a 超链接 span 常用行内元素，结合CSS定义样式 - 标题标签：h1、h2、h3、h4、h5、h6 eg:
五、特殊符号
| 特殊符号 | 说明 | 代码 |
|---|---|---|
" |
双引号（英文） | " |
‘ |
左单引号 | ‘ |
’ |
右单引号 | ’ |
× |
乘号 | × |
÷ |
除号 | ÷ |
> |
大于号 | > |
< |
小于号 | < |
& |
“与”符号 | & |
— |
长破折号 | — |
| | | 竖线 | | |
§ |
分节符 | § |
|---|---|---|
© |
版权符 | © |
® |
注册商标 | ® |
™ |
商标 | ™ |
€ |
欧元 | € |
£ |
英镑 | £ |
¥ |
日元 | ¥ |
° |
度 | ° |
六、列表元素
有序列表：
<ol>
<li>列表项li>
<li>列表项li>
<li>列表项li>
ol>
ol，即ordered list（有序列表）；li，即list（列表项）。
- 标签的子标签只能是li标签，不能是其他标签。
-
（1）表格：table标签
-
（2）行：tr标签
-
（3）单元格：td标签
-
（4）表格标题：caption
-
（5）表头单元格：th
<table> <caption>表格标题caption> <tr> <th>表头单元格1th> <th>表头单元格2th> tr> <tr> <td>表行单元格1td> <td>表行单元格2td> tr> <tr> <td>表行单元格3td> <td>表行单元格4td> tr> table>tr，指的是table row（表格行）；td，指的是table data cell（表格单元格）。
和表示整个表格的开始和结束，和表示行的开始和结束，而和表示单元格的开始和结束。
在表格中，有多少组“”，就表示有多少行。
表格语义化：thead、tbody、tfoot标签
表格合并列：colspan； 表格合并行：rowlspan
八、图片标签（img）
（1）src属性（必选）：即所谓的“图片路径”，指的就是“图片地址”，这两个叫法是一样的意思。任何一个图片必须指定src属性才可显示，src是img标签必不可少的属性。
（2）alt属性（必选）: 图片无法显示后，此时可以看到浏览器会显示alt的提示文字。
（3）title属性（可选）：当我们把鼠标移到图片上时，就会显示title中的提示文字 。
<img src="" alt="" title="" />（4）图片格式：
（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
（3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。
无序列表：
<ul>
<li>列表项li>
<li>列表项li>
<li>列表项li>
ul>
ul，即unordered list（无序列表）。li，即list（列表项）。
ul标签的子标签也只能是li标签，不能是其他标签。 ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。
定义列表：
<dl>
<dt>名词dt>
<dd>描述dd>
……
dl>
dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。
七、表格元素
在HTML中，一个表格一般会由以下几个部分组成。
九：超链接（hyperlink ）
(1)href属性表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。
(2)target属性:默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，使用target属性来定义超链接打开窗口的方式。
<a href="链接地址" target="打开方式">>文本或图片a>
常用target属性取值：
| 属性值 | 说明 |
|---|---|
| _self | 默认值，在原来窗口打开链接 |
| _blank | 在新窗口打开链接 |
| _parent | 在父窗口打开链接 |
| _top | 在顶层窗口打开超链接 |
（3）锚点链接：点击某一个超链接，然后它就会跳到当前页面的某一部分。 a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。
十：表单元素
在HTML中，表单指的是文本框、按钮、单选框、复选框、下拉列表等的统称。 表单标签有5种：form、input、textarea、select和option。
从外观上来划分，表单可以分为以下8种。
（1）单行文本框
（2）密码文本框
（3）单选框
（4）复选框
（5）按钮
（6）文件上传
（7）多行文本框
（8）下拉列表
【1】form标签属性
在HTML中，form标签常用属性如下表所示。
| 属性 | 说明 |
|---|---|
| name | 表单名称 |
| method | 提交方式 |
| action | 提交地址 |
| target | 打开方式 |
| enctype | 编码方式 |
1．name属性
在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。
举例：
2．method属性
在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。
get的安全性较差，而post的安全性较好，故实际开发中，使用post较多。
举例：
3．action属性
在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。
举例：
4．target属性
form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。
举例：
5．enctype属性
在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。
【2】input标签
input是自闭合标签，它是没有结束符号的。其中type属性取值如下表所示。
![[前端三剑客之HTML]HTML常用标签整合_第2张图片](http://img.e-com-net.com/image/info8/7aedc0694cbe45de93f8d5d65b52840f.jpg)
【3】单行文本框
单行文本框是使用input标签来实现的，其中type属性取值为“text”。
单行文本框常用属性如下表所示。对于元素属性的定义，是没有先后顺序的。
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值，也就是默认情况下文本框 |
| size | 设置文本框的长度 |
| maxlength | 设置文本框中最多可以输入的字符数 |
【4】密码文本框
密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过它们是有着本质上的区别的：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。其中type属性取值为“password”。
【5】单选框
单选框也是使用input标签来实现的，其中type属性取值为“radio”。
name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
form>
body>
html>
浏览器预览效果如下图所示。
如果想要在默认情况下，让第一个单选框选中，可以使用checked属性来实现。
没有加上name属性，当我们选取的时候，会发现可以同时选中两个选项 ，因此在实际开发中，对于同一组的单选框，必须要设置一个相同的name，这样才会把这些选项归为同一个组上面。
【6】复选框
复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。
语法：
说明：
name属性表示复选框所在的组名，而value表示复选框的取值。跟单选框一样，这两个属性也必须要设置。
复选框中的name跟单选框中的name都是用来设置“组名”的，表示该选项位于哪一组中。
两者都设置name属性，为什么单选框只能选中一项，而复选框可以选择多项呢？这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（说白了就是根据type属性取值来识别）。如果是单选框组，就只能选择一项；如果是复选框组，就可以选择多项。
想在默认情况下，让复选框某几项选中，我们也可以使用checked属性来实现。这一点跟单选框是一样的。
【7】按钮
普通按钮一般情况下都是配合JavaScript来进行各种操作的。
value的取值就是按钮上的文字。
（1）提交按钮：
（2）重置按钮：
重置按钮一般用来清除用户在表单中输入的内容。
提交按钮和重置按钮都是针对当前所在form标签而言的
（1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。
（2）提交按钮一般都是用来给服务器提交数据的。
（3）重置按钮一般用来清除用户在表单中输入的内容。
【8】文件上传组件
文件上传也是使用input标签来实现的，其中type属性取值为file。
在线测试
浏览器预览效果如下图所示。
【9】多行文本框
多行文本框使用的是textarea标签，而不是input标签。
多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。
【10】下拉列表
下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，我们可以把下拉列表看成是一种“特殊的无序列表”。
select标签常用属性有两个，如下表所示。
| 属性 | 说明 |
|---|---|
| multiple | 设置下拉列表可以选择多项 |
| size | 设置下拉列表显示几个列表项，取值为整数 |
option标签常用属性也有两个，如下表所示。
| 属性 | 说明 |
|---|---|
| selected | 是否选中 |
| value | 选项值 |