[前端三剑客之HTML]HTML常用标签整合_常用的整合标签-优快云博客

本文详细介绍了HTML的基本结构和常用标签，包括结构标签、文本标签、特殊符号、列表元素、表格元素、超链接、表单元素，以及各元素的属性。重点讲解了form、input、textarea、select和option标签的使用，以及表单数据的提交方法和属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML结构

下图是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的。

（1）文档声明：<!DOCTYPE html>
（2）html标签对：<html></html>
（3）head标签对：<head></head>
（4）body标签对：<body></body>

二、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: <h1>…</h1>
- 段落标签：<p></p>
- 换行标签：<br/>
- 粗体标签：strong、b
- 斜体标签：em、cite、i
- 上标标签：sup
- 下标标签：sub
- 中划线标签：s
- 下划线标签：u
- 大字号标签：big
- 小字号标签：small
- 水平线标签：<hr/>
- 分块标签：<div></div>
四、块元素和行内元素

块元素（block） ：独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行，其内部可以容纳其他块元素和行内元素。

行内元素（inline） ：可以与其他行内元素位于同一行，其内部可以容纳其他行内元素，但不可以容纳块元素。

表1 HTML常见块元素

块元素说明
h1~h6 标题元素
p 段落元素
div div元素
hr 水平线
ol 有序列表
ul 无序列表
表2 HTML常见行内元素

行内元素说明
strong 粗体元素
em 斜体元素
a 超链接
span 常用行内元素，结合CSS定义样式

块元素	说明
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合CSS定义样式

五、特殊符号

**表1 HTML特殊符号**

特殊符号	说明	代码
`"`	双引号（英文）	`"`
`‘`	左单引号	`‘`
`’`	右单引号	`’`
`×`	乘号	`×`
`÷`	除号	`÷`
`>`	大于号	`>`
`<`	小于号	`<`
`&`	“与”符号	`&`
`—`	长破折号	`—`
\|	竖线	\|

`§`	分节符	`§`
`©`	版权符	`©`
`®`	注册商标	`®`
`™`	商标	`™`
`€`	欧元	`€`
`£`	英镑	`£`
`¥`	日元	`¥`
`°`	度	`°`

六、列表元素

有序列表：<ol></ol>

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

ol，即ordered list（有序列表）；li，即list（列表项）。

<ol>标签的子标签只能是li标签，不能是其他标签。

无序列表：<ul></ul>

<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中，一个表格一般会由以下几个部分组成。

（1）表格：table标签
（2）行：tr标签
（3）单元格：td标签
（4）表格标题：caption
（5）表头单元格：th
```
<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </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格式的。

九：超链接（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属性来给表单进行命名。

举例：

<form name="myForm"></form>

2．method属性

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。

get的安全性较差，而post的安全性较好，故实际开发中，使用post较多。

举例：

<form method="post"></form>

3．action属性

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

举例：

<form action="index.php"></form>

4．target属性

form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

举例：

<form target="_blank"></form>

5．enctype属性

在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

【2】input标签

input是自闭合标签，它是没有结束符号的。其中type属性取值如下表所示。

【3】单行文本框

单行文本框是使用input标签来实现的，其中type属性取值为“text”。

单行文本框常用属性如下表所示。对于元素属性的定义，是没有先后顺序的。

属性	说明
value	设置文本框的默认值，也就是默认情况下文本框
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

【4】密码文本框

密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过它们是有着本质上的区别的：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。其中type属性取值为“password”。

【5】单选框

单选框也是使用input标签来实现的，其中type属性取值为“radio”。

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

<!DOCTYPE html>
<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”。单选框只能选择一项，而复选框可以选择多项。

语法：

<input type="checkbox" name="组名" value="取值" />

说明：

name属性表示复选框所在的组名，而value表示复选框的取值。跟单选框一样，这两个属性也必须要设置。

复选框中的name跟单选框中的name都是用来设置“组名”的，表示该选项位于哪一组中。

两者都设置name属性，为什么单选框只能选中一项，而复选框可以选择多项呢？这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（说白了就是根据type属性取值来识别）。如果是单选框组，就只能选择一项；如果是复选框组，就可以选择多项。

想在默认情况下，让复选框某几项选中，我们也可以使用checked属性来实现。这一点跟单选框是一样的。

【7】按钮

普通按钮一般情况下都是配合JavaScript来进行各种操作的。

<input type="button" value="取值" />

value的取值就是按钮上的文字。

（1）提交按钮：

<input type="submit" value="取值" />

（2）重置按钮：

重置按钮一般用来清除用户在表单中输入的内容。

<input type="reset" value="取值" />

提交按钮和重置按钮都是针对当前所在form标签而言的

（1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。

（2）提交按钮一般都是用来给服务器提交数据的。

（3）重置按钮一般用来清除用户在表单中输入的内容。

【8】文件上传组件

文件上传也是使用input标签来实现的，其中type属性取值为file。

<input type="file" />

在线测试<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <input type="file"/>
    </form>
</body>
</html>

浏览器预览效果如下图所示。

【9】多行文本框

多行文本框使用的是textarea标签，而不是input标签。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

【10】下拉列表

下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，我们可以把下拉列表看成是一种“特殊的无序列表”。

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select标签常用属性有两个，如下表所示。

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

option标签常用属性也有两个，如下表所示。

属性	说明
selected	是否选中
value	选项值