不加lang="zh-cn"、嵌套、标题跳级——这三类错误任一发生，页面就在渲染安全、可读性、无障碍三方面同时失守。lang必须写在上以确保分词与语音准确；须为直接子元素且唯一；标题必须连续层级（h2后不可直接h4），否则屏幕阅读器导航逻辑塌方。
不加 浏览器和屏幕阅读器（NVDA/VoiceOver）依赖 用户按 H 键逐级跳转时，依赖的是显式存在的 lang="zh-CN"、把 <main></main> 套在 <div> 里、标题跳级（比如 <code><h2></h2> 后直接 <h4></h4>），这三件事只要发生任意一项，页面就在安全、可读性、无障碍三方面同时失守——不是“体验差”，而是基础结构已失效。
为什么
lang="zh-CN" 必须写在 标签上lang 属性决定分词、标点朗读方式和语音引擎。写成 lang="ch" 或漏掉，中文内容大概率被读成日语腔调，或整段跳过；lang="zh" 不符合 IETF 标准，部分 AT 工具会 fallback 到英文。
lang="zh-CN"（简体）、lang="zh-TW"（繁体）或 lang="zh-HK"（港澳），后缀不可省略 上，不能只靠 <meta> 或 JS 动态插入<p lang="en">Hello world</p>
locale 变量，确保 SSR 输出的首屏 HTML 就带对
<main></main> 必须是 的直接子元素且唯一<main></main> 是 W3C 定义的“独立、可分发、可索引”主内容区。一旦嵌套在 <div class="wrapper"> 或 <code><section></section> 里，屏幕阅读器会忽略它，Googlebot 也可能降权。
<div class="container"><main></main></div> —— 这个 <main></main> 在无障碍树里不可见<header></header><main></main><footer></footer>
<main></main> 内部可以有 <header></header> 和 <footer></footer>，但不能再出现第二个 <main></main>
<main></main>
标题层级断裂会让屏幕阅读器用户“掉层”导航
<h1></h1>～<h6></h6> 构成的语义树。如果结构是 <h2>产品介绍</h2>
<h4>规格参数</h4>，中间缺 <h3></h3>，AT 就会认为“产品介绍”章节已结束，后续内容无法被定位。
display: none 隐藏了某个 <h3></h3> 却没删 DOM；第三方组件默认用 <h2></h2> 作卡片标题，嵌套在 <h2></h2> 主区域下aria-hidden="true" + 视觉隐藏类（如 visually-hidden）替代 display: none
<section></section> 应以 <h2></h2> 或更高级别标题开头；HTML5 允许重置层级，但前提是显式提供标题<div role="heading" aria-level="3"> 替代原生标签，除非完全无法改结构
<h3>CI 阶段必须集成 HTMLHint 做自动化校验</h3>
<p>人工检查易遗漏，且无法覆盖 SSR/模板渲染场景。HTMLHint 可在 pre-commit 或 CI 流水线中强制拦截问题，例如 <code>doctype-first、meta-charset-require、attr-lowercase 等规则。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 关键规则建议启用：
doctype-first、lang-require、attr-lowercase、id-class-value、head-script-disabled - VS Code 中安装 HTMLHint 扩展后，编辑时即可实时提示
<main></main>嵌套、lang缺失等严重问题 - Git hooks 中配置 pre-commit 检查，防止带错
lang或嵌套<main></main>的代码合入主干 - 注意：HTMLHint 默认不校验标题层级连续性，需配合 axe-core 或 custom rule 补充
真正难的不是写出合规的 HTML，而是在组件复用、SSR 渲染、多语言切换、第三方库集成这些真实场景里，始终守住 lang、<main></main>、标题层级这三条底线——它们一旦松动，所有后续的 a11y 优化都建立在流沙之上。
