HTML 标签速查表
HTML 标签（Tag）速查：结构、文本、表单、媒体与语义化标签的名称与中文说明，写页面时快速查阅。
| 标签 | 含义 |
|---|---|
| <a> | 锚点 / 超链接，跳转或锚定 |
| <img> | 嵌入图片，src 指定地址，alt 提供替代文本 |
| <div> | 块级通用容器，无语义 |
| <span> | 行内通用容器，无语义 |
| <p> | 段落 |
| <h1>-<h6> | 标题，h1 最重要，逐级递减 |
| <ul> | 无序列表，配合 <li> |
| <ol> | 有序列表，配合 <li> |
| <li> | 列表项 |
| <table> | 表格，配合 thead/tbody/tr/th/td |
| <thead> | 表格头部 |
| <tbody> | 表格主体 |
| <tr> | 表格行 |
| <th> | 表头单元格 |
| <td> | 表格数据单元格 |
| <form> | 表单容器，action 指定提交地址 |
| <input> | 输入控件，type 决定类型 |
| <button> | 按钮 |
| <label> | 表单控件的文本标签 |
| <select> | 下拉选择框 |
| <textarea> | 多行文本输入 |
| <link> | 引入外部资源（如样式表），常在 head 中 |
| <meta> | 文档元信息（字符集、视口、SEO） |
| <script> | 嵌入或引用 JavaScript |
| <style> | 内联 CSS 样式 |
| <header> | 页头语义区块 |
| <footer> | 页脚语义区块 |
| <nav> | 导航语义区块 |
| <section> | 文档中的独立章节 |
| <article> | 独立可分发的内容块（如文章） |
| <main> | 页面主体内容（每页一个） |
| <br> | 换行（空元素） |
| <hr> | 主题分隔线（空元素） |
| <strong> | 强调，语义上加粗 |
| <em> | 强调，语义上斜体 |
| <code> | 行内代码片段 |
| <pre> | 预格式化文本，保留空白 |
| <blockquote> | 块级引用 |
| <iframe> | 内嵌另一个文档/页面 |
| <video> | 嵌入视频 |
| <audio> | 嵌入音频 |
| <canvas> | 通过脚本绘制图形 |
| <svg> | 可缩放矢量图形 |
常见问题
块级元素和行内元素有什么区别？
<div>、<p>、<h1>、<section> 等块级元素独占一行、可设宽高；<span>、<a>、<strong>、<code> 等行内元素只占据内容宽度、不强制换行。现代布局更多用 CSS 控制，但理解语义仍有帮助。
<div> 和 <section> 怎么选？
没有语义内容时用 <div>；当内容是一个有主题的独立章节（通常带标题）时用 <section>。盲目用 <div> 会损失可访问性与 SEO 结构，但也不要为每个容器都套 <section>。
语义化标签对 SEO 有什么用？
<header>、<nav>、<main>、<article>、<footer> 等语义标签帮助搜索引擎和辅助技术理解页面结构，利于内容抓取与可访问性评分，比纯 <div> 更有信息量。
空元素（void element）有哪些？
没有闭合标签的元素，如 <img>、<br>、<hr>、<input>、<link>、<meta>。它们不能包含子节点，书写时也不写结束标签（HTML5 中可省略 /）。