HTML标签分类方式
HTML标签分类
HTML标签（HTML元素）根据不同的分类方式可以大致分为下面几类：
按闭合特征分类
单标签元素
单标签元素，也叫空标签或空元素，指没有内容的标签，在开始标签中自动闭合。
常见的空标签有：<br />、<hr />、 <img />、 <input />、<area />、 <base />、 <link />、 <meta />等。
双标签元素
双标签元素，也叫闭合标签元素，是由开始标签和结束标签组成的一对标签，它可以嵌套和承载内容。
例如：<div> </div>、<p> </p>、<html> </html>、<h1> </h1>、<span> </span>等。
按显示模式分类
行内元素
行内元素（inline-level）也称内联元素，不占有独立的区域，靠自身字体大小和图像尺寸支撑大小，常用于控制页面中文本的样式。
行内元素特点：
- 本身属性为 display：inline；
- 与相邻行内元素在同一行上；
- 对其设置宽、高、垂直方向的padding、margin值无效，但水平方向设置padding、margin值有效；
- 默认宽度是本身内容的宽度；
- 行内元素只能容纳文本或者其他行内元素（a特殊，链接中不可再放链接），不可在其中嵌套其他块级元素；
常见行内元素有：
| 标签 | 描述 |
|---|---|
<a> |
定义超文本链接 |
<b> |
定义文本粗体 |
<em> |
定义强调文本 |
<i> |
定义斜体字 |
<span> |
定义文档中的节 |
<strong> |
定义强调文本 |
块级元素
块级元素（block-level），每个元素单独占一整行或者多整行，通常用于进行大布局（大结构）的搭建。
块级元素特点：
- 本身属性为 display：block；
- 每个块级元素独占一行，每个块级元素都会从新的一行开始，从上到下排布；
- 可以设置宽高、内、外边距值；
- 若不设置宽度和高度 ，则宽度默认为父级元素的宽度（100%），高度根据内容大小自动填充；
- 块级元素大多都可以容纳行内元素（内联元素 ）和其他块级元素；
常见块级元素有：
| 标签 | 描述 |
|---|---|
<div> |
定义文档中的节 |
<p> |
定义段落 |
<form> |
定义HTML文档的表单 |
<table> |
定义表格 |
<hr> |
定义水平线 |
<h1> to <h6> |
定义 HTML 标题 |
<dl>、<dt>、<dd> |
定义列表、列表中的项目、列表中项目的描述 |
<ol>、<ul>、<li> |
定义有序列表、无序列表、列表的项目 |
行内块元素
行内块元素（inline-block），综合了行内元素和块级元素的特性，对象呈是inline的呈现方式，对象的内容是block样式。
行内块元素特点：
- 本身属性为：display：inline-block；
- 与相邻行内元素、行内块元素在同一行上，排列方式为从左到右；
- 元素之间默认有间距；
- 可以设置宽高、内、外边距值；
- 默认宽度是本身内容的宽度；
常见行内块元素有：
| 标签 | 描述 |
|---|---|
<img> |
定义图像 |
<input> |
定义输入控件 |
元素之间的转化：
- display：block；(将元素转换为块级元素)
- display：inline； (将元素转换为行内元素)
- display：inline-block；（将元素转换为行内块元素）
按功能分类
文档标签元素
常见文档标签元素有：
| 标签 | 描述 |
|---|---|
<!DOCTYPE> |
定义文档类型 |
<html> |
定义HTML文档 |
<head> |
定义文档的头部 |
<meta> |
定义元素可提供的有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键字 |
<base> |
定义页面上的所有链接规定默认地址或默认目标 |
<title> |
定义文档标题 |
<link> |
定义文档与外部资源的关系 |
<style> |
定义HTML文档样式信息 |
<body> |
定义文档的主体 |
<script> |
定义客户端脚本，比如javascript |
排版标签元素
常见文档标签元素有：
| 标签 | 描述 |
|---|---|
<h1> to <h6> |
定义 HTML 标题 |
<p> |
定义一个段落 |
<br> |
定义简单的折行 |
<hr> |
定义水平线 |
<div> |
定义文档中的节 |
<span> |
定义文档中的节 |
文本格式化标签元素
常见文本格式化标签元素有：
| 标签 | 描述 |
|---|---|
<b> |
定义粗体文本（无语义） |
<i> |
定义斜体文本（无语义） |
<s> |
定义加删除线的文本（无语义） |
<u> |
定义下划线文本（无语义） |
<strong> |
定义语气更为强烈的强调文本（有语义） |
<em> |
定义强调文本（有语义） |
<del> |
定义被删除文本（有语义） |
<ins> |
定义被插入文本（有语义） |
<blockquote> |
定义块引用 |
<sub> |
定义下标文本 |
<sup> |
定义上标文本） |
图像标签元素
常见图像标签元素有：
| 标签 | 描述 |
|---|---|
<img> |
定义图像 |
<map> |
定义图像映射 |
<area> |
定义图像地图内部的区域 |
链接标签元素
常见链接标签元素有：
| 标签 | 描述 |
|---|---|
<a> |
定义一个链接 |
<base> |
定义页面中所有链接的默认地址或默认目标 |
<link> |
定义文档与外部资源的关系 |
列表标签元素
常见列表标签元素有：
| 标签 | 描述 |
|---|---|
<ul> |
定义一个无序列表 |
<ol> |
定义一个有序列表 |
<li> |
定义一个列表项 |
<dl> |
定义一个定义列表 |
<dt> |
定义一个定义定义列表中的项目 |
<dd> |
定义定义列表中项目的描述 |
<menu> |
定义菜单列表 |
表格标签元素
常见表格标签元素有：
| 标签 | 描述 |
|---|---|
<table> |
定义一个表格 |
<caption> |
定义表格标题 |
<th> |
定义表格中的表头单元格 |
<tr> |
定义表格中的行 |
<td> |
定义表格中的单元 |
<thead> |
定义表格中的表头内容 |
<tbody> |
定义表格中的主体内容 |
<tfoot> |
定义表格中的表注内容（脚注） |
<col> |
定义表格中一个或多个列的属性值 |
<colgroup> |
定义表格中供格式化的列组 |
表单标签元素
常见表单标签元素有：
| 标签 | 描述 |
|---|---|
<form> |
定义一个 HTML 表单，用于用户输入 |
<input> |
定义一个输入控件 |
<textarea> |
定义多行的文本输入控件 |
<button> |
定义按钮 |
<select> |
定义选择列表（下拉列表） |
<option> |
定义选择列表中的选项 |
<label> |
定义 input 元素的标注 |
<fieldset> |
定义围绕表单中元素的边框 |
<datalist> |
规定了 input 元素可能的选项列表 |
赞 (0)