缺失或写错会直接触发怪异模式，导致盒模型、浮动清除、css布局等行为退化为ie5.5风格，必须位于文档首行且前面不能有任何字符。
浏览器解析出错时， 缺失或写错会直接触发怪异模式
没有 或写成 <code>（小写）、<code>..>（过时 DTD）时，现代浏览器（Chrome、Firefox、Edge）仍可能降级到怪异模式。这不是“偶尔失效”，而是明确的解析行为：怪异模式下 box-sizing 默认是 content-box，width 和 height 不包含 padding/border，浮动清除、行高计算、表格布局都会和标准模式不一致。
常见现象包括：margin-top 失效、父容器高度塌陷、vertical-align 行为异常、CSS Grid/Flex 布局完全不生效。这类问题往往查半天样式，最后发现是 漏了或拼错了。
必须全大写 <code>DOCTYPE，且必须是文档第一行、最前面（前面不能有空格、BOM、注释）- 不要用 XHTML 的 DTD（如
..>），它会强制 XML 解析规则，导致 script 标签闭合错误、自闭合标签报错 - 验证方式：打开开发者工具 → Elements 面板顶部看 “Rendered as: Standards mode” 还是 “Quirks mode”
lang 属性缺失会让屏幕阅读器和搜索引擎“读错”页面
不只是摆设。它直接影响：
- 语音合成引擎选择中文发音词典，否则可能按英文规则读“联系我们”成 /kənˈtækt ʌs/
- 搜索引擎判断页面主语言，影响多语言站点的索引归属（比如
lang="en"页面不会出现在中文搜索结果前列） - 浏览器自动翻译功能是否启用及翻译质量（Chrome 对
lang不匹配的页面常跳过翻译） - 部分 CSS 伪类（如
:lang(zh)）和 hyphenation 断字规则依赖该属性
注意：lang 应设在 根标签上；子元素如 <blockquote></blockquote> 引用外语内容时，可单独加 lang="en" 覆盖。
语义化标签缺失，<div> 套娃让辅助技术“看不见”结构
<p>当所有区块都用 <code><div class="header">、<code><div class="nav">、<code><div class="main"> 时，屏幕阅读器无法识别导航区、主内容区、侧边栏——它只读出“div”“div”“div”，用户得手动遍历几十个 div 才能找到正文。
<p>实际影响不止于无障碍：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>SEO：Google 明确使用 <code><main></main>、<article></article> 等标签判断内容权重，纯 <div> 结构的页面摘要提取更差
<li>维护成本：改版时要翻 class 名找“哪个 div 是 footer”，而 <code><footer></footer> 一目了然
<nav></nav> 有隐式 ARIA role，对 <div class="nav"> 没有
<p>别迷信“CSS 可以模拟一切”。语义不是视觉效果，是机器可理解的结构信号。</p>
<h3>
<code><meta charset="UTF-8"> 放错位置会导致页面开头就乱码
<meta charset="UTF-8"> 必须放在 最前面——在 <title></title>、其他 <meta>、<link> 之前。原因：浏览器解析 HTML 时，一旦遇到非 ASCII 字符（如中文标题），就会回溯查找第一个 charset 声明；如果前面有 <title>网页标题</title>，而 <meta> 在后面，浏览器已用默认编码（通常是 ISO-8859-1）解码了标题，再看到 <meta> 也无力回天。
典型症状：页面顶部出现 符号，且仅限前几行文字；刷新后有时消失（缓存干扰），但根源不变。
- VS Code 中可通过文件右下角编码显示确认是否为 UTF-8 with BOM —— BOM 会破坏
<meta>的“最前”要求，务必保存为 UTF-8 无 BOM - Node.js 服务端返回 HTTP header 中的
Content-Type: text/html; charset=utf-8可覆盖 HTML 内声明，但两者应保持一致，避免冲突
真正难的不是记住这些规则，而是它们彼此咬合：缺 会让后续所有结构解析偏移；<code>lang 错了，语义标签的 ARIA role 就失去上下文；<meta charset> 晚了一行，整个页面标题就先乱码再重绘。它们不是孤立条款，是浏览器解析流水线上的关键卡点。
