css-html标签分类

发表于 | 分类于

前言

在学习HTML标签和css的时候，会经常碰到，容器标签，文本标签，块级标签，行内标签，行内块标签，文档标签，表格标签，表单标签等等。看到这样，让人眼花缭乱。

说明

目前我知道HTML标签会按照三种方式进行分类。

按照html本身特点

容器标签

容器级的标签可以简单的理解为能嵌套其它所有标签的标签。
常见容器级的标签: div h ul ol dl li dt dd …。

文本标签

文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。
常见文本级的标签:span p buis strong em ins del …。

按照css中的display属性

顶级元素

{ html, body, frameset } 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.

块级标签元素

css中的块级元素基本与html中的容器级标签对应，包括: p div h ul ol dl li dt dd …。

行内标签元素

行内元素也基本与文本标签对应：span buis strong em ins del。

按照标签本身的特点

文档标签

1
2
3
4
5
6
7
8
9
<!DOCTYPE>: 定义文档类型.  
html: 定义HTML文档.'   
head: 定义文档的头部.(头部内包含) :  
(1). `<meta>`: 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词.    
(2). `<base>`:定义页面上的所有链接规定默认地址或默认目标.    
(3). `<title>`: 定义文档的标题.    
(4).  `<link>`: 定义文档与外部资源的关系.    
(5).  `<style>`:定义 HTML 文档样式信息.    
body: 定义文档的主体.(脚本在非必须情况时在主体内容最后)

布局标签&语义化

1
2
3
4
5
6
7
8
9
10
11
12
<div>:定义块级元素.
<span>:定义行业元素.
<header>51:定义区段或页面的页眉.(头部)
<footer>5:定义区段或页面的页脚.(足部)
<section>5:定义文档中的区段.
<article>5:定义文章.
<aside>5:定义页面内容之外的内容.
<details>5:定义元素的细节.
<summary>5:定义 <details> 元素可见的标题.
<dialog>5:定义对话框或窗口.
<nav>5:定义导航.
<hgroup>5:定义标题组

表格标签

1
2
3
4
5
6
7
8
<table>:定义表格.
<thead>:定义页眉.
<tbody>:定义主体.
<tfoot>:定义页脚.
<caption>:定义标题.
<th>:定义表头.
<tr>:定义一行.
<td>:定义单元格

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>:定义表单.(表单包含在form标签中)
<input>:定义输入域.
<textarea>:定义文本域.(多行)
<label>:定义一个控制的标签.(input 元素的标注)
<fieldset>:定义域.
<legend>:定义域的标题.
<select>:定义一个选择列表.
<optgroup>:定义选择组.
<option>:定义下拉 列表的选项.
<button>:定义按钮.(定义围绕表单中元素的边框.)
<fieldset>:定义围绕表单中元素的边框.
<legend>:定义 fieldset 元素的标题.
<fieldset>5:定义选项列表.与input 元素配合使用该元素，来定义 input 可能的值.
<keygen>5:定义表单的密钥对生成器字段.
<output>5:定义不同类型的输出，比如脚本的输出.

列表标签

1
2
3
4
5
6
<ul>:定义无序列表.
<ol>:定义有序列表.
<li>:定义列表项.
<dl>:定义自定义列表.
<dt>:定义自定义列表项.
<dd>:定义自定义的描述.

图像&链接标签

1
2
3
4
5
6
<img>:定义图像.注意加上alt属性
<a>:定义超链接.
<map>:定义图像映射。
<area>:定义图像地图内部的区域.
<figure>5:定义媒介内容的分组.
<figcaption>5:定义 <figure> 元素的标题.

音频/视频

1
2
3
4
<audio>5:定义声音内容.
<source>5:定义媒介源.
<track>5:定义用在媒体播放器中的文本轨道.
<video>5:定义视频.

框架标签

1
<iframe>:内联框架.

格式标签

文章标签

1
2
3
4
5
6
7
8
9
10
11
<h1>-<h6>:定义 HTML 标题.
<p>:定义段落.
<br>:定义换行.
<hr>:定义水平线.
<bdo>:定义文字方向.
<pre>:定义预格式文本.
<abbr>:定义缩写.
<address>:定义文档作者或拥有者的联系信息.
<ins>:定义被插入文本.
<del>:定义被删除文本.
<time>:定义日期/时间.

短语元素标签

1
2
3
4
5
6
7
8
9
10
11
12
<em>:定义强调文本.
<strong>:定义语气更为强烈的强调文本.
<dfn>:定义定义项目.
<code>:定义计算机代码文本.
<samp>:定义计算机代码样本.
<kbd>:定义键盘文本.
<var>:定义文本的变量部分.
<sup>:定义上标文本.
<sub>:定义下标文本.
<cite>:定义引用.
<blockguote>:定义长的引用.
<q>:定义短的引用.

字体样式标签

1
2
3
4
5
<i>:显示斜体文本效果.
<b>:呈现粗体文本效果.
<big>:呈现大号字体效果.
<small>:呈现小号字体效果.
<mark>5:定义有记号的文本.

其它

1
2
3
<canvas>5:定义图形容器，必须使用脚本来绘制图形。
<meter>5:定义预定义范围内的度量.
<progress>5:定义任何类型的任务的进度.