doctype必须顶格首行且无任何前置字符，否则ie等旧浏览器强制进入怪异模式，导致box-sizing失效、sticky不工作、flex错乱；lang属性须精确为zh-cn，charset须在1024字节内紧贴head开头。
DOCTYPE 必须顶格首行且无任何前置字符
浏览器一读到非空白字符就决定解析模式。如果 前有 BOM、空行、注释或 PHP 输出，IE 和部分旧内核会强制进入怪异模式（<code>document.compatMode === "BackCompat"），导致 box-sizing 失效、position: sticky 不工作、Flex 布局错乱——这些不是“偶尔出问题”，而是必然发生。
<!-- 注释 --> ❌-
<?php echo '<!DOCTYPE html>'; ?>❌ 或 <code> ❌（大小写/空格不合规，CI 流程可能阻断部署）- VS Code 默认模板可靠，但手动保存时务必选 “UTF-8 without BOM” ✅
lang 属性必须精确且不可省略
lang 不是装饰属性，它直接影响屏幕阅读器发音、拼写检查器词库匹配、Google 搜索结果语言标注。写错等于主动放弃无障碍和 SEO。
-
✅（大陆简体，BCP 47 合规） -
❌（语音引擎可能用台湾腔或日语逻辑读拼音） -
或❌（IANA 未注册，等价于未声明） - 局部切换语言用
<p lang="en">API response</p>，不要滥用xml:lang - SSR 场景下，服务端输出的
lang值必须与前端 hydration 一致，否则 React/Vue 报 DOM 差异错误
meta charset 必须紧贴 开头且在 1024 字节内
浏览器只扫描 前 1024 字节来确定字符集。一旦错过这个窗口，中文、emoji 一出现就是乱码，刷新也救不回来。
- 正确顺序：
<meta charset="UTF-8">→<meta name="viewport">→<title></title> -
<meta charset="utf8">❌（缺横杠，部分浏览器忽略） -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">❌（HTML5 中冗余，Chrome 120+ 已忽略） - 禁止把
<script></script>或注释放在<meta charset>之前
main 标签的硬性约束常被误用
<main></main> 不是 <div class="main"> 的语义替代品，它是键盘用户跳转主要内容区的唯一锚点。违反规则会导致辅助技术完全绕过核心内容。<ul>
<li>整个文档中只能出现一次 ✅</li>
<li>不能嵌套在 <code><header></header>、<footer></footer>、<nav></nav> 或 <section></section> 内 ❌
<article></article> 混用：<main></main> 是页面级主体，<article></article> 是可独立分发的内容单元（如一篇博客）main 嵌套违规，别只靠肉眼检查实际项目里最容易被忽略的，是 <doctype html></doctype> 和 lang 的组合效应：一个管解析模式，一个管内容解释方式。两者同时缺失，连 document.title 都可能读不准。
