以下是针对 HTML 学习笔记 的超详细标签体系与应用指南（基于 HTML5 / Living Standard 2025–2026 现状）。
我会按功能分类组织（参考 MDN + W3C 的分组方式），而不是单纯字母顺序，这样更适合系统学习和实际应用。每个大类都会标注：
- 核心标签（高频 / 必须掌握）
- 语义化价值（对 SEO / 无障碍 / 可读性影响）
- 典型使用场景
- 常见陷阱 / 最佳实践
1. 文档结构与根元素（Document Skeleton）
| 标签 | 是否成对 | 语义价值 | 说明 & 推荐用法 | 常见属性示例 |
|---|---|---|---|---|
<!DOCTYPE html> | 单标签 | 高 | 必须放在第一行，声明 HTML5 文档类型 | — |
<html> | 成对 | 高 | 整个文档根元素，唯一一个顶级元素 | lang="zh-CN" 或 lang="en" |
<head> | 成对 | 高 | 元数据区（不显示在页面上） | — |
<body> | 成对 | 高 | 可见内容区 | — |
<title> | 成对 | 高 | 页面标题（浏览器标签页 + 搜索引擎标题） | — |
最佳实践：
- 始终写
<!DOCTYPE html> <html lang="zh-CN">或lang="en-US"（对屏幕阅读器和 SEO 至关重要）
2. 元数据 / 头部内容（Metadata / Head Content）
| 标签 | 成对/单 | 语义价值 | 主要用途 | 高频属性 |
|---|---|---|---|---|
<meta> | 单 | 高 | 元数据（字符集、视口、描述、关键词等） | charset="UTF-8"name="viewport"name="description" |
<link> | 单 | 高 | 引入外部资源（CSS、图标、预加载等） | rel="stylesheet" / rel="icon" / rel="preconnect" |
<style> | 成对 | 中 | 内联 CSS（小型项目或动态注入用） | — |
<script> | 成对 | 高 | 引入或内联 JavaScript | src、defer、async、type="module" |
<base> | 单 | 低 | 设置页面所有相对 URL 的基准路径（很少用） | href、target |
<noscript> | 成对 | 中 | 当浏览器禁用 JS 时显示的内容 | — |
2025–2026 高频写法（移动优先 + 性能优化）：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="你的页面描述，150字以内">
<title>页面标题 | 站点名</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<script defer src="app.js"></script>
</head>3. 语义化布局结构（HTML5 Semantic Structure）——最重要的一类！
| 标签 | 成对 | 语义价值 | 典型使用场景 | 注意事项 / 最佳实践 |
|---|---|---|---|---|
<header> | 成对 | 高 | 站点/文章/区块的头部（logo、导航、标题） | 页面可以有多个 <header> |
<nav> | 成对 | 高 | 导航链接区域（主菜单、侧边栏导航、面包屑） | 不要把所有链接都放 <nav>，只放主要导航 |
<main> | 成对 | 高 | 文档的主要内容（只能出现一次） | 不要嵌套在 <article> 或 <aside> 里 |
<article> | 成对 | 高 | 独立、可独立分发的完整内容（文章、帖子、卡片） | 可嵌套 <header>、<footer> |
<section> | 成对 | 中 | 主题相关的分组（通常配标题） | 必须有标题（h2~h6），否则考虑用 <div> |
<aside> | 成对 | 中 | 与主内容间接相关的补充内容（侧边栏、广告、引用） | — |
<footer> | 成对 | 高 | 页脚 / 文章结尾信息（版权、作者、相关链接） | 页面可有多个 |
推荐现代页面骨架（2025 主流写法）：
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<header>
<h1>文章标题</h1>
<p class="meta">作者 · 日期</p>
</header>
<section>
<h2>第一部分</h2>
...
</section>
</article>
<aside>
<h2>相关阅读</h2>
...
</aside>
</main>
<footer>
<p>© 2026 重阳的笔记</p>
</footer>
</body>4. 文本内容与排版（Text-level Semantics）
| 类别 | 高频标签 | 语义价值 | 说明 & 推荐场景 |
|---|---|---|---|
| 标题 | <h1> ~ <h6> | 高 | 层级清晰，h1 通常只出现一次 |
| 段落 | <p> | 高 | 普通段落文本 |
| 强调 | <strong> / <em> | 高 | 重要 / 着重语气（不要只用 <b> / <i>） |
| 视觉样式 | <b>、<i>、<u>、<s>、<sub>、<sup> | 低 | 纯视觉，无语义时用；优先用 CSS |
| 其他语义 | <mark>、<small>、<del>、<ins>、<code>、<pre>、<kbd>、<samp>、<var>、<abbr>、<dfn>、<q>、<blockquote>、<cite> | 中~高 | 根据实际含义选择，不要滥用 <div> |
推荐：用 <strong> 表示重要内容，用 <em> 表示强调语气。
5. 列表（Lists）
| 标签 | 成对 | 典型场景 |
|---|---|---|
<ul> | 成对 | 无序列表（bullet） |
<ol> | 成对 | 有序列表（数字/字母） |
<li> | 成对 | 列表项 |
<dl> | 成对 | 定义列表（术语 + 解释） |
<dt> | 成对 | 定义术语 |
<dd> | 成对 | 术语的描述 |
6. 链接 & 媒体（Links & Media）
| 标签 | 成对/单 | 高频属性 | 场景 |
|---|---|---|---|
<a> | 成对 | href, target, rel="noopener noreferrer" | 超链接 |
<img> | 单 | src, alt, loading="lazy", width, height | 图片（alt 必填！） |
<picture> | 成对 | — | 响应式图片（配合 <source>） |
<source> | 单 | srcset, media, type | 媒体源 |
<figure> + <figcaption> | 成对 | — | 带说明的媒体（图表、代码、视频等） |
<video> | 成对 | controls, autoplay, muted, loop | 视频 |
<audio> | 成对 | 同上 | 音频 |
<iframe> | 成对 | src, loading="lazy", title | 嵌入第三方内容（地图、视频等） |
7. 表单（Forms）——交互核心
| 标签 | 说明 | 高频属性 / 子元素 |
|---|---|---|
<form> | 表单容器 | action, method="get/post" |
<input> | 各种输入框 | type="text/email/password/tel/number/search/date/file/checkbox/radio/submit..." |
<label> | 输入框的标签（提升可访问性） | for="id" |
<select> + <option> + <optgroup> | 下拉菜单 | — |
<textarea> | 多行文本 | rows, cols |
<button> | 按钮（推荐） | type="submit/reset/button" |
<fieldset> + <legend> | 分组表单项 | — |
<datalist> | 输入建议列表 | 与 <input list="id"> 配合 |
8. 表格（Tables）——结构化数据
| 标签 | 说明 |
|---|---|
<table> | 表格容器 |
<thead> | 表头 |
<tbody> | 主体 |
<tfoot> | 表尾 |
<tr> | 行 |
<th> | 表头单元格 |
<td> | 数据单元格 |
<caption> | 表格标题（放最前面） |
最佳实践：用 scope="col/row" 在 <th> 上提升无障碍。
9. 其他重要 / 新兴标签（2025 视角）
<dialog>→ 原生模态对话框<details>+<summary>→ 可展开/折叠内容（FAQ 神器）<progress>/<meter>→ 进度条 / 量表<time>→ 机器可读时间（SEO 加分）<search>→ 搜索区域（HTML 5.2+，逐渐普及）
快速总结：优先级学习路径（建议顺序）
- 文档结构 + 语义布局（html/head/body + header/nav/main/article/section/footer）
- 文本 & 标题（h1~h6, p, strong, em, code, pre）
- 链接 & 图片（a, img, picture）
- 列表（ul/ol/dl）
- 表单（form/input/label/button）
- 表格（table + thead/tbody）
- 多媒体（video/audio/iframe）
- 交互增强（details/dialog/progress）
如果你想针对某一类标签（比如表单、语义布局、响应式图片）继续深入，或者想要典型页面完整代码模板，直接告诉我～
