副标题不应嵌入标题标签内，而应通过语义化html结构（如class="subtitle"）与主标题并列，配合css样式统一呈现；必要时用aria-labelledby建立逻辑关联，确保seo友好与无障碍可访问。
标题标签本身不直接“包含”副标题，但通过语义化组合与结构设计，能让主标题和副标题共同构成逻辑清晰、机器可读、人眼易辨的视觉大纲。关键不是把副标题塞进
里，而是让两者在HTML结构中各司其职、彼此呼应。
用+
+
明确分工
主标题用
表达页面唯一核心主题；副标题不用任何标签，而用带语义类名的（如class="subtitle"）紧随其后。这样既避免破坏大纲层级，又保留文本独立性。
-
响应式网页设计入门
是主干，进入文档大纲
-
涵盖断点设置、流体网格与移动优先实践
不参与大纲，但提供补充说明
- CSS中统一控制.subtitle的字体大小、行高和颜色，视觉上形成一组，但DOM结构干净
用包裹带副标题的完整内容单元
当某块内容（如“部署步骤”“用户反馈”）既有主标题又有说明性副标题时，应将其整体放入，并用起始——因为必须有标题才能具备语义价值。
- 错误写法：
部署步骤
适用于Docker环境的快速上线流程
… → 语义缺失，屏幕阅读器不可见
- 正确写法：
部署步骤
适用于Docker环境的快速上线流程
…
- 子节若需再分层，内部用
，而非跳到或重复
避免用或伪元素替代真实语义
已被标准废弃，虽部分浏览器仍渲染，但Lighthouse会报错，且不被现代辅助技术可靠识别；CSS伪元素（::after）生成的副标题不进DOM，对SEO和屏幕阅读器完全不可见。
- 不要写：
产品发布
2026夏季旗舰版
- 不要依赖：
产品发布
+ CSS content: "2026夏季旗舰版";
- 真正需要传达信息的副标题，必须是真实HTML文本节点
用ARIA强化逻辑隶属关系（必要时）
当副标题位于非标准位置（如卡片顶部、模态框标题栏），无法自然紧邻
时，可用aria-labelledby建立隐式关联。
- 给副标题段落设id="card-subtitle"
- 给主内容容器（如
或）加 aria-labelledby="card-subtitle"
- 确保副标题文本本身具有描述性，而非“点击查看”之类空泛表述
（如class="subtitle"）紧随其后。这样既避免破坏大纲层级，又保留文本独立性。
-
响应式网页设计入门
是主干，进入文档大纲 -
涵盖断点设置、流体网格与移动优先实践
不参与大纲，但提供补充说明 - CSS中统一控制.subtitle的字体大小、行高和颜色，视觉上形成一组，但DOM结构干净
用包裹带副标题的完整内容单元
当某块内容（如“部署步骤”“用户反馈”）既有主标题又有说明性副标题时，应将其整体放入起始——因为
- 错误写法：→ 语义缺失，屏幕阅读器不可见
部署步骤
适用于Docker环境的快速上线流程
… - 正确写法：
部署步骤
适用于Docker环境的快速上线流程
… - 子节若需再分层，内部用
，而非跳到
或重复
避免用或伪元素替代真实语义
已被标准废弃，虽部分浏览器仍渲染，但Lighthouse会报错，且不被现代辅助技术可靠识别；CSS伪元素（::after）生成的副标题不进DOM，对SEO和屏幕阅读器完全不可见。
- 不要写：
产品发布
2026夏季旗舰版
- 不要依赖：
产品发布
+ CSS content: "2026夏季旗舰版"; - 真正需要传达信息的副标题，必须是真实HTML文本节点
用ARIA强化逻辑隶属关系（必要时）
当副标题位于非标准位置（如卡片顶部、模态框标题栏），无法自然紧邻
时，可用aria-labelledby建立隐式关联。
- 给副标题段落设id="card-subtitle"
- 给主内容容器（如
或）加 aria-labelledby="card-subtitle"
- 确保副标题文本本身具有描述性，而非“点击查看”之类空泛表述
）加 aria-labelledby="card-subtitle"
- 确保副标题文本本身具有描述性，而非“点击查看”之类空泛表述
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
