所谓“十个黄金法则”，核心是四个不可妥协的底层动作：doctype必须写对、lang属性不能省、语义标签得用对地方、结构缩进和引号必须统一；其余九成是这四点的延伸或补漏。

直接说结论：所谓“十个黄金法则”，不是要你背十条教条，而是抓住四个不可妥协的底层动作——doctype必须写对、lang属性不能省、语义标签得用对地方、结构缩进和引号必须统一。其余所谓“法则”，90%是这四点的延伸或补漏。

必须在第一行写

浏览器看到这个声明，才敢用标准模式渲染。缺它，哪怕只少一个空格，IE 和旧版 Safari 就可能降级到怪异模式（Quirks Mode），box-sizing、flex 行为全乱套，调试时根本找不到源头。

• 别写成 （小写 doctype）——虽然多数浏览器能容错，但 W3C 验证器会报 warning，CI 流水线可能卡住
• 别混用 XHTML 声明，比如 ——HTML5 不认这套，反而触发兼容性降级
• 生成脚手架时务必检查模板，默认值有时是空的，尤其 Node.js 模板引擎（如 EJS、Pug）容易漏掉这一行

lang 属性不是可选项，是可访问性刚需

不加 lang，屏幕阅读器读中文可能切到英文发音引擎，数字、标点、专有名词全念错；搜索引擎也难准确识别页面主语言，影响多语言站点的索引权重。

• 根元素必须带，例如 ，不要写成 lang="zh" 或 lang="cn" —— IETF 语言标签有明确规范，zh-CN 才被主流辅助技术识别
• 局部语言切换要用 lang 再声明，比如引一段英文文献：<blockquote lang="en-US">...</blockquote>
• 服务端渲染时注意动态插入的 lang 值是否被 XSS 过滤器误删（常见于 React SSR 或 Next.js 的 dangerouslySetInnerHTML 场景）

用 <header></header>、<nav></nav>、<main></main> 替代无意义的 <div> <p>这不是为了“看起来高级”，而是让浏览器内置的无障碍 API 能自动建立 DOM 语义树。不用语义标签，<code>document.querySelector('main') 查不到内容，aria-labelledby 关联失效，键盘用户 Tab 键跳转顺序也会错乱。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• <main></main> 在整个页面中只能出现一次，且不能嵌套在 <article></article> 或 <aside></aside> 里
• <section></section> 必须有可见标题（<h2></h2>~<h6></h6>），否则语义断裂，会被 Lighthouse 标为“结构性缺陷”
• 别为了“结构清晰”硬套语义标签，比如把轮播图容器包进 <aside></aside>——它本不属于附属内容，该用 <section></section> + role="region" 显式标注

缩进、引号、大小写必须项目级统一

看似是风格问题，实则影响自动化工具链。Prettier、ESLint HTML 插件、CI 中的格式校验都依赖一致的语法习惯。一旦混用单双引号、大小写标签、tab/spaces 缩进，pre-commit hook 就可能把整个文件重排，造成无意义的 Git diff 爆炸。

• 所有属性值强制双引号：class="btn btn-primary"，不是 class='btn'，更不是 class=btn
• 标签名、属性名全部小写：<img src="a.jpg" alt="logo">，不是 <img src="a.jpg">
• 缩进统一用两个空格，禁用 tab —— VS Code 默认设置里要关掉 “Insert Spaces” 以外的选项
• 自闭合标签不加斜杠：<img> 可以，<img> 是 XML 习惯，在 HTML5 中多余且易引发解析歧义

真正难的不是记住哪条是第几条，而是在组件化开发中——比如用 Web Components 或 Vue/React 封装一个 <card></card>，它内部是否维持了语义层级？lang 是否继承父级？doctype 是否被 Shadow DOM 隔离影响？这些边界场景，才是“黄金法则”照不到的暗区。