HTML 标签速查
HTML 常用标签速查表：标签名、用途与说明，覆盖结构、文本、表单、多媒体等。
纯浏览器本地运行，数据不上传服务器
| 标签 | 名称 | 说明 |
|---|---|---|
html | 根元素 | HTML 文档的根 |
head | 头部 | 元数据容器 |
body | 主体 | 页面可见内容 |
title | 标题 | 浏览器标签页标题 |
meta | 元数据 | 字符集、描述、视口等 |
link | 外部资源 | 引入 CSS、图标 |
style | 样式 | 内嵌 CSS |
script | 脚本 | JavaScript |
div | 分区 | 块级容器 |
span | 行内 | 行内容器 |
p | 段落 | 文本段落 |
h1-h6 | 标题 | 六级标题 |
a | 链接 | 超链接 |
img | 图片 | 嵌入图像 |
ul | 无序列表 | 圆点列表 |
ol | 有序列表 | 数字列表 |
li | 列表项 | 列表条目 |
table | 表格 | 表格容器 |
thead | 表头 | 表格头部 |
tbody | 表体 | 表格主体 |
tr | 表格行 | 行 |
th | 表头单元格 | 加粗居中的单元格 |
td | 数据单元格 | 普通单元格 |
form | 表单 | 表单容器 |
input | 输入 | 文本框、按钮、复选框等 |
textarea | 多行文本 | 多行输入框 |
select | 下拉框 | 选项列表 |
option | 选项 | 下拉选项 |
button | 按钮 | 可点击按钮 |
label | 标签 | 表单控件说明 |
iframe | 内嵌框架 | 嵌入其他页面 |
video | 视频 | 视频播放 |
audio | 音频 | 音频播放 |
canvas | 画布 | 绘图区域 |
svg | 矢量图 | 可缩放矢量图形 |
header | 页眉 | 语义化头部 |
footer | 页脚 | 语义化底部 |
nav | 导航 | 导航区域 |
main | 主体 | 主要内容 |
section | 区块 | 文档分节 |
article | 文章 | 独立内容 |
aside | 侧栏 | 附属内容 |
figure | 图文 | 插图容器 |
figcaption | 图注 | 插图说明 |
strong | 强调 | 加粗 |
em | 斜体 | 强调斜体 |
b | 加粗 | 纯样式加粗 |
i | 斜体 | 纯样式斜体 |
u | 下划线 | 下划线文本 |
s | 删除线 | 删除线文本 |
code | 代码 | 行内代码 |
pre | 预格式 | 保留空白 |
blockquote | 引用 | 长引用 |
q | 短引用 | 行内引用 |
hr | 分隔线 | 水平线 |
br | 换行 | 强制换行 |
small | 小字 | 次要文字 |
sub | 下标 | 下标文字 |
sup | 上标 | 上标文字 |
mark | 高亮 | 标记文字 |
details | 折叠 | 可展开详情 |
summary | 折叠标题 | 详情标题 |
dialog | 对话框 | 模态框 |
datalist | 数据列表 | 输入建议 |
progress | 进度 | 进度条 |
meter | 度量 | 范围指示 |
time | 时间 | 时间语义 |
address | 地址 | 联系信息 |
map | 图像映射 | 可点击区域 |
area | 映射区域 | 映射热点 |
template | 模板 | HTML 模板 |
noscript | 无脚本 | 禁用 JS 时显示 |
使用说明
- 表格列出常用 HTML 标签及其用途说明。
- 按语义分组：结构（header/nav/main）、文本（p/strong/em）、表单（form/input）、媒体（img/video）等。
- 写页面时优先使用语义化标签，对 SEO 和无障碍友好。
常见问题
div 和语义标签怎么选？
能表达含义时优先用语义标签（nav、article、aside 等），它们对搜索引擎和无障碍工具更友好；div/span 只是通用容器，留给没有合适语义的场景。
details/summary 需要 JS 吗？
不需要，它们是原生的折叠交互元素，浏览器内置展开/收起行为，还能配合 CSS 定制样式，非常适合 FAQ 场景。
dialog 元素兼容性如何？
现代浏览器均已支持原生 dialog（模态框），配合 showModal() 可替代自建弹窗，自带焦点管理和 Esc 关闭，无需额外 JS 库。