HTML 标签速查表 - HTML 常用标签与属性大全
手写页面时，HTML 决定的是这份文档能被谁读懂：搜索引擎按标签层级判断内容权重，读屏器按 DOM 顺序决定朗读次序，而这两者都会被一串无语义的 div 抹平。这张表按文档结构、文本格式化、列表、链接与图片、表格、表单、语义化标签分组，把每个标签的默认行为、可用属性与不该用的场景摆在一起。判断依据是三个问题：这个元素在无样式时还讲不讲得通结构、它能不能被搜索引擎单独索引、键盘与读屏能不能顺畅到达。什么时候翻它：从零搭一个不依赖框架的落地页、写 form 的原生校验与 label 关联、处理表格的表头与作用域、或者做邮件模板这类必须手写标记的场景。与 React 或 Vue 的区别不在语法而在职责——框架只负责渲染单个组件，这份表管的是整篇文档的骨架与可访问性基线。
典型使用场景
面向手写静态页面、维护老项目或需要把文档结构写规范的前端开发者。本表按「结构 → 语义 → 交互」三条线组织：文档结构一节给出 DOCTYPE、meta charset、title 这套必须齐的基础配置；文本格式化与列表部分强调语义标签的选择，而不是拿 div 加样式硬凑；表格部分说明 thead/tbody/th/td 的分工与 colspan、rowspan 的跨格用法；表单部分覆盖 input 的类型化校验、label 的 for 关联以及 button 的 type；最后是 header/nav/main/article/section/aside/footer 这套语义化标签的选型原则，可访问性与 SEO 都依赖它。
文档结构 Document Structure 8
<!DOCTYPE html><html lang="zh-CN"><head>...</head><meta charset="UTF-8"><title>页面标题</title><link rel="stylesheet" href="style.css"><script src="script.js"></script><body>...</body>文本格式化 Text Formatting 9
<h1>~<h6><p>段落</p><strong>粗体</strong><em>斜体</em><br><hr><blockquote>引用</blockquote><code>行内代码</code><pre>预格式化文本</pre>列表 Lists 3
<ul><li>无序列表项</li></ul><ol><li>有序列表项</li></ol><dl><dt>术语</dt><dd>描述</dd></dl>链接与图片 Links & Images 6
<a href="url">链接文本</a><a href="url" target="_blank"><a href="#id">页内锚点</a><img src="image.jpg" alt="描述"><img src="..." width="300" height="200"><figure><img><figcaption>说明</figcaption></figure>表格 Tables 7
<table>...</table><thead><tr><th>表头</th></tr></thead><tbody><tr><td>数据</td></tr></tbody><tr>行</tr><th>表头单元格</th><td>数据单元格</td>colspan="2" / rowspan="2"表单 Forms 10
<form action="/submit" method="POST"><input type="text" name="username"><input type="password" name="pwd"><input type="email" name="email"><input type="checkbox" name="agree"><input type="radio" name="gender"><textarea name="message"></textarea><select><option>选项</option></select><button type="submit">提交</button><label for="id">标签</label>语义化标签 Semantic Tags 9
<header>页头</header><nav>导航</nav><main>主内容</main><article>文章</article><section>章节</section><aside>侧边栏</aside><footer>页脚</footer><div>通用块级容器</div><span>通用行内容器</span>参数矩阵
| 参数 | 作用 | 示例 |
|---|---|---|
<!DOCTYPE html> | HTML5 文档声明，必须写在首行 | <!DOCTYPE html> |
<html lang="zh-CN"> | 根元素，lang 决定读屏发音与翻译提示 | <html lang="zh-CN"> |
<meta charset="UTF-8"> | 字符编码，缺失会导致中文乱码 | <meta charset="UTF-8"> |
<title> | 页面标题，显示在浏览器标签并被搜索引擎采用 | <title>页面标题</title> |
<link rel="stylesheet"> | 引入外部样式表 | <link rel="stylesheet" href="style.css"> |
<script src></script> | 引入外部脚本 | <script src="script.js"></script> |
<strong> / <em> | 语义化强调：重要性与侧重 | <strong>必填</strong> |
<pre> / <code> | 保留空格与换行的代码展示 | <pre>代码块</pre> |
<ul> / <ol> / <dl> | 无序、有序、定义列表 | <ol><li>第一步</li></ol> |
target="_blank" | 在新窗口/标签打开链接 | <a href="url" target="_blank">链接</a> |
href="#id" | 页内锚点跳转 | <a href="#intro">介绍</a> |
alt 属性 | 图片替代文本，缺失会影响可访问性与 SEO | <img src="a.jpg" alt="架构图"> |
width / height | 指定图片尺寸，减少布局抖动 | <img src="a.jpg" width="300" height="200"> |
colspan / rowspan | 表格单元格跨列 / 跨行 | <td colspan="2">合计</td> |
input type | 按类型提供自动校验（text/password/email） | <input type="email" name="email"> |
label for | 把标签与输入框关联，点击标签即可聚焦 | <label for="id">标签</label> |
button type | 区分提交与普通按钮 | <button type="submit">提交</button> |
<main> / <nav> / <aside> | 主内容 / 导航 / 辅助内容分区 | <main>主内容</main> |
易错点与避坑指南
现象页面中文全部显示成乱码方块
原因缺少 `<meta charset="UTF-8">`，或它被放到了其它会输出内容的标签之后。
处置把 charset 声明放在 `<head>` 的最前面，确保解析器在读到任何正文前就知道编码。
现象读屏软件念不出表单字段名，或点击文字光标不聚焦输入框
原因输入框没有用 `label` 的 `for` 关联，屏幕阅读器只能读到没有语义的名字。
处置为每个输入框配一个 `for` 指向其 `id` 的 `<label>`，并把提示文字写进 label 而不是占位符。
现象图片加载失败或网络慢时页面大块留白、布局跳动
原因`<img>` 没有 `alt` 也未声明尺寸，浏览器无法预留空间。
处置补上描述性的 `alt`，并按实际比例写 `width` / `height`。
现象SEO 检查或无障碍审计报「缺少 landmark 区域」
原因整页都用 `div` 搭建，没有使用 `header`/`nav`/`main`/`footer` 这类语义化标签。
处置把页面骨架替换成语义标签，`main` 在一个页面里保持唯一，其余无法归类的块再退回 `div`。
现象表格在窄屏上挤成一团，单元格内容互相覆盖
原因该用 `thead`/`th` 表达的结构被写成了普通 `td`，屏幕阅读器也无法关联表头与数据。
处置表头统一用 `thead` + `th`，数据行用 `tbody` + `td`，跨格场景用 `colspan` / `rowspan` 显式声明。
现象表单里点任何按钮都会提交，包括本来只想当普通按钮的那个
原因`<button>` 缺省就是 `type="submit"`，样式上看不出区别。
处置明确写 `type="submit"` 或 `type="button"`，让语义与外观一致。
现象代码示例里的缩进和换行全被吃掉，显示成一行
原因代码放进了普通 `<p>`，HTML 会把连续空白折叠成一个空格。
处置改用 `<pre>` 保留原始排版，行内片段才用 `<code>`。
排障路径
1确认文档骨架与关键元信息是否齐备
grep -nE '<!DOCTYPE html>|<meta charset|<title>|<html lang' index.html四类声明都应出现在文件靠前位置；缺 charset 就是乱码的直接原因。
2检查是否漏写了图片的 alt 属性
grep -c '<img' index.html && grep -n '<img' index.html逐条核对每个 img 是否都有 alt，纯装饰图可写空 alt 以便读屏跳过。
3确认页面只有一个 main 区域
grep -c '<main' index.html输出为 1 才符合规范，多于 1 说明页面骨架被复制粘贴错了。
4核对输入框是否都有对应 label
grep -oE 'name="[^"]+"' index.html输出的 name 列表应与 label for 指向的 id 一一对应，缺一个就是漏关联。
5检查未闭合或错配的标签
python -c "from html.parser import HTMLParser; HTMLParser().feed(open('index.html', encoding='utf-8').read())"把文件喂给标准库解析器，能快速发现标签错配导致的结构塌陷。
命令示例
语义骨架：一屏内容只放一个 main
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
</body>
</html>html lang 和 meta charset 必须放在 head 最前面：中文页面少了 lang 会让读屏软件按英文发音，少了 charset 且位置靠后会出现乱码。语义标签不是样式容器——布局请交给 CSS。
可访问的数据表格：表头、作用域与合并
<table>
<thead>
<tr><th scope="col">姓名</th><th scope="col">年龄</th></tr>
</thead>
<tbody>
<tr><td>Tom</td><td>25</td></tr>
<tr><td>Jerry</td><td colspan="2">合并两列</td></tr>
</tbody>
</table>thead/th 让读屏软件在念每个单元格时能报出所属列名；scope="col" 显式声明作用域比依赖默认推断可靠。colspan/rowspan 会让后续行的列对应关系错位，改表格前先想清楚合并范围。
表单：label 与输入框靠 for 绑定
<form action="/submit" method="POST">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<select name="gender"><option>男</option></select>
<button type="submit">提交</button>
</form>label 的 for 必须等于 input 的 id，点文字即可聚焦输入框，读屏软件也靠这个关联播报控件名。input 的 name 才是提交时真正发出去的字段名：缺 name 的输入框，无论用户填了什么都会被静默丢弃。
图片必带 alt，并给出确定尺寸
<img src="image.jpg" alt="服务器机房机柜全景">
<img src="chart.png" alt="月度转化率折线图" width="300" height="200">
<figure>
<img src="diagram.png" alt="请求链路示意图">
<figcaption>图 1：一次请求经过的三层缓存</figcaption>
</figure>纯装饰图写 alt=""（明确表示无内容），信息图写描述而不是文件名——「image.jpg」对读屏用户毫无意义。width/height 预留了布局空间，避免图片加载完成时的页面跳动（CLS）。
常见坑与注意事项
- img 漏写 alt：读屏软件只会念出文件名，纯装饰图应写 alt="" 明确标记无内容，漏写会被判为无障碍缺陷。
- a 标签用 target="_blank" 却没写 rel="noopener"：新页面能通过 window.opener 反向操作原页面，存在安全风险；始终补全 rel="noopener noreferrer"。
- table 里直接放文字而不包 tr/td：浏览器会自动纠错生成 tbody，结构静默变形，样式和读屏顺序一起错乱，排查时极难定位。
- meta charset 放在 head 靠后位置或写 charset="gb2312"：浏览器在读到它之前已按默认编码解析，中文直接乱码，必须是 head 内靠前的 UTF-8。
- 表单控件没有 name 属性：提交时该字段不会出现在请求体里，后端永远收到空值，而页面上看不出任何异常。
- 用 h1~h6 的字号差当样式工具（跳级使用、为了「好看」用 h3 装小标题）：屏幕阅读器依赖标题层级构建导航大纲，跳级会让用户完全失去结构感。
提示
- img 标签必须加 alt 属性，提升可访问性和 SEO。
- 表单输入框建议加 label 关联，提升可访问性。
- 优先使用语义化标签（header/nav/main 等），而不是全部用 div。
- label 的 for 指向 input 的 id 才算真正关联，只把 label 包住输入框在部分读屏器上仍会被当成独立元素。
- 表格的 th 要标 scope="row" 或 "col"，再给复杂表头加 headers 关联，数据表的可访问性才成立。
- a 标签没有 href 就不是链接，只放 href="#" 会抢走焦点却不跳转，无跳转需求应直接用 button。
常见问题
什么时候该用语义化标签，什么时候 div 就够了？
凡是能对上语义的就用语义标签：页头 header、导航 nav、主体 main（全页唯一）、独立内容 article、分区 section、辅助内容 aside、页脚 footer。这些标签自带无障碍与 SEO 价值，辅助技术能直接识别。只有在确实没有合适语义、或纯粹为了布局与挂样式时才用 div（块级）和 span（行内）。典型错误是整页全 div，屏幕阅读器读起来没有任何结构线索。
<code> 和 <pre> 到底差在哪？
<code> 是行内元素，用来标记短代码片段，比如变量名或命令，它只改变字体样式，不影响周围文字的换行；<pre> 是块级元素，预格式化文本，浏览器会原样保留空格、缩进和换行。展示多行代码时两者常搭配：`<pre><code>...</code></pre>`，用 pre 管住缩进，用 code 保留等宽字体的语义。想在 pre 里带行号，可以把每行包在 <span> 里并配合 <code>。
表单输入框一定要配 label 吗？
要。`for` 属性和输入框的 `id` 一一对应后，用户点击标签文字即可聚焦输入框，屏幕阅读器也能正确播报控件名称，这是无障碍的基本要求。写法是 `<label for="username">用户名</label>` 配 `<input type="text" id="username" name="username">`。另外按类型选控件：邮箱用 `type="email"` 触发自动校验，多行用 `<textarea>`，一组复选用 `name` 相同的 checkbox，提交按钮用 `<button type="submit">`。
表格里的单元格怎么跨行跨列？
用 colspan 和 rowspan 属性，它们加在 th 或 td 上。`colspan="2"` 表示横向占两列，适合表头合并；`rowspan="2"` 表示纵向占两行，适合左侧分类列。结构上记得把表头放进 `<thead><tr><th>`，数据行放进 `<tbody><tr><td>`，既利于样式也利于无障碍读屏。跨列跨行时先想清楚占位的那一行或一列要删掉哪个单元格，否则列数对不上会出现错位。
图片忘了写 alt 会怎么样？
两个后果：屏幕阅读器只能读出文件名或直接跳过，看图的用户失去关键信息；搜索引擎也拿不到图片语义。写法是 `<img src="image.jpg" alt="描述">`，纯装饰图可以 `alt=""` 明确标为无内容，而不是省略属性。图片要固定占位尺寸避免布局抖动，用 `width="300" height="200"`；需要配文字说明时用 `<figure>` 包住 img 并加 `<figcaption>`，语义比一个裸 img 完整得多。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。