本文整理了HTML5中常用的各种标签，包括文档标签、布局与语义化标签、表格、表单、列表、图像、链接、音频/视频、框架以及格式标签等，帮助开发者快速查找和使用。
HTML 常用标签
按类型整理了一下 HTML 标签列表（包括 HTML5 新标签）以便于查找。
注意：
- 被弃用/被代替的标签不在收纳中。
- 标签后带有“5”的代表为 HTML5 新标签
一. HTML文档标签
| 标签 | 定义... |
|---|---|
<!DOCTYPE> | 文档类型 |
<html> | HTML 文档 |
<head> | 文档头部 |
(1). <meta> | 提供有关页面的元信息（如针对搜索引擎和更新频度的描述和关键词） |
(2). <base> | 页面上的所有链接规定默认地址或默认目标 |
(3). <title> | HTML 文档标题 |
(4). <link> | 文档与外部资源的关系 |
(5). <style> | HTML 文档样式信息 |
<body> | 文档的主体（脚本在非必须情况时总在主体内容最后） |
(1). <script> | 客户端脚本（JavaScript） |
(2). <noscript> | 在脚本未被执行时的替代内容（文本） |
二. 布局标签&语义化
| 标签 | 定义... |
|---|---|
<div> | 块级元素 |
<span> | 行內元素 |
<header> 5 | 区段或页面的页眉（头部） |
<footer> 5 | 区段或页面的页脚（足部） |
<section> 5 | 文档中的区段 |
<article> 5 | 文章 |
<aside> 5 | 页面内容之外的内容（侧边栏） |
<details> 5 | 元素的细节 |
<summary> 5 | <details> 元素可见的标题 |
<dialog> 5 | 对话框或窗口 |
<nav> 5 | 导航 |
<hgroup> 5 | 标题组（已于html5.1弃用） |
注：不要滥用 section 代替 div，section 一般指带有标题的区域（但又不是一篇文章），故绝大部分情况还是使用 div 进行包装。
三. 表格标签
| 标签 | 定义... |
|---|---|
<table> | 表格 |
<thead> | 页眉 |
<tbody> | 主体 |
<tfoot> | 页脚 |
<caption> | 标题 |
<th> | 表头 |
<tr> | 一行 |
<td> | 单元格 |
四. 表单标签
| 标签 | 定义... |
|---|---|
<form> | 表单区域 |
<input> | 输入域 |
<textarea> | 多行文本域 |
<label> | 控制标签（input元素的标注） |
<select> | 选择列表 |
<datalist> 5 | 为input元素产生下拉列表 |
<option> | 选择列表的选项 |
<optgroup> | 选择组 |
<button> | 按钮 |
<fieldset> | 创建围绕表单中元素的边框 |
<legend> | fieldset 元素的标题 |
<keygen> 5 | 表单的密钥对生成器字段 |
<output> 5 | 不同类型的输出，比如脚本的输出 |
五.列表标签
| 标签 | 定义... |
|---|---|
<ul> | 无序列表 |
<ol> | 有序列表 |
<li> | 列表项 |
<dl> | 自定义列表 |
<dt> | 自定义列表项 |
<dd> | 自定义的描述 |
六.图像&链接标签
| 标签 | 定义... |
|---|---|
<img> | 图像（注意加上alt属性） |
<a> | 超链接 |
<map> | 图像映射 |
<area> | 图像地图内部的区域 |
<figure> 5 | 媒介内容的分组 |
<figcaption> 5 | <figure> 元素的标题 |
七.音频/视频
| 标签 | 定义... |
|---|---|
<audio> 5 | 声音内容 |
<source> 5 | 媒介源 |
<track> 5 | 用在媒体播放器中的文本轨道 |
<video> 5 | 视频 |
八.框架标签
| 标签 | 定义... |
|---|---|
<iframe> | 内联框架 |
九.格式标签
1.文章标签
| 标签 | 定义... |
|---|---|
<h1>-<h6> | HTML 标题 |
<p> | 段落 |
<br> | 换行 |
<hr> | 水平线 |
<bdo> | 文字方向 |
<pre> | 预格式文本 |
<abbr> | 缩写（鼠标移至其上显示全称） |
<address> | 文档作者或拥有者的联系信息 |
<ins> | 被插入文本 |
<del> | 被删除文本 |
<time> 5 | 日期/时间 |
2.短语元素标签
| 标签 | 定义... |
|---|---|
<em> | 强调文本 |
<strong> | 语气更为强烈的强调文本 |
<dfn> | 定义定义项目 |
<code> | 计算机代码文本 |
<samp> | 计算机代码样本 |
<kbd> | 键盘文本 |
<var> | 文本的变量部分 |
<sup> | 上标文本 |
<sub> | 下标文本 |
<cite> | 引用 |
<blockguote> | 长的引用 |
<q> | 短的引用 |
3.字体样式标签
| 标签 | 定义... |
|---|---|
<i> | 显示斜体文本效果 |
<b> | 呈现粗体文本效果 |
<big> | 呈现大号字体效果 |
<small> | 呈现小号字体效果 |
<mark> 5 | 定义有记号的文本 |
十.其它
| 标签 | 定义... |
|---|---|
<canvas> 5 | 图形容器，必须使用脚本来绘制图形 |
<meter> 5 | 预定义范围内的度量 |
<progress> 5 | 定义任何类型的任务的进度 |
<embed> 5 | 嵌入内容（如插件） |
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
