HTML标签分类方式

HTML标签分类

HTML标签(HTML元素)根据不同的分类方式可以大致分为下面几类:

按闭合特征分类

单标签元素

单标签元素,也叫空标签或空元素,指没有内容的标签,在开始标签中自动闭合。
常见的空标签有:<br />、<hr />、 <img />、 <input />、<area />、 <base />、 <link />、 <meta />等。

双标签元素

双标签元素,也叫闭合标签元素,是由开始标签和结束标签组成的一对标签,它可以嵌套和承载内容。
例如:<div> </div>、<p> </p>、<html> </html>、<h1> </h1>、<span> </span>等。

按显示模式分类

行内元素

行内元素(inline-level)也称内联元素,不占有独立的区域,靠自身字体大小和图像尺寸支撑大小,常用于控制页面中文本的样式。

行内元素特点:

  1. 本身属性为 display:inline;
  2. 与相邻行内元素在同一行上;
  3. 对其设置宽、高、垂直方向的padding、margin值无效,但水平方向设置padding、margin值有效;
  4. 默认宽度是本身内容的宽度;
  5. 行内元素只能容纳文本或者其他行内元素(a特殊,链接中不可再放链接),不可在其中嵌套其他块级元素;

常见行内元素有:

标签 描述
<a> 定义超文本链接
<b> 定义文本粗体
<em> 定义强调文本
<i> 定义斜体字
<span> 定义文档中的节
<strong> 定义强调文本
块级元素

块级元素(block-level),每个元素单独占一整行或者多整行,通常用于进行大布局(大结构)的搭建。

块级元素特点:

  1. 本身属性为 display:block;
  2. 每个块级元素独占一行,每个块级元素都会从新的一行开始,从上到下排布;
  3. 可以设置宽高、内、外边距值;
  4. 若不设置宽度和高度 ,则宽度默认为父级元素的宽度(100%),高度根据内容大小自动填充;
  5. 块级元素大多都可以容纳行内元素(内联元素 )和其他块级元素;

常见块级元素有:

标签 描述
<div> 定义文档中的节
<p> 定义段落
<form> 定义HTML文档的表单
<table> 定义表格
<hr> 定义水平线
<h1> to <h6> 定义 HTML 标题
<dl>、<dt>、<dd> 定义列表、列表中的项目、列表中项目的描述
<ol>、<ul>、<li> 定义有序列表、无序列表、列表的项目
行内块元素

行内块元素(inline-block),综合了行内元素和块级元素的特性,对象呈是inline的呈现方式,对象的内容是block样式。

行内块元素特点:

  1. 本身属性为:display:inline-block;
  2. 与相邻行内元素、行内块元素在同一行上,排列方式为从左到右;
  3. 元素之间默认有间距;
  4. 可以设置宽高、内、外边距值;
  5. 默认宽度是本身内容的宽度;

常见行内块元素有:

标签 描述
<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)

相关推荐