所谓“十个黄金法则”，核心是四个不可妥协的底层动作：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 键跳转顺序也会错乱。
立即学习“前端免费学习笔记（深入）”；
-
<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" alt="编写高效HTML的十个黄金法则" > - 缩进统一用两个空格，禁用 tab —— VS Code 默认设置里要关掉 “Insert Spaces” 以外的选项
- 自闭合标签不加斜杠：
<img alt="编写高效HTML的十个黄金法则" >可以，<img alt="编写高效HTML的十个黄金法则" >是 XML 习惯，在 HTML5 中多余且易引发解析歧义
真正难的不是记住哪条是第几条，而是在组件化开发中——比如用 Web Components 或 Vue/React 封装一个 <card></card>，它内部是否维持了语义层级？lang 是否继承父级？doctype 是否被 Shadow DOM 隔离影响？这些边界场景，才是“黄金法则”照不到的暗区。
