必须位于第一行，否则浏览器可能进入怪异模式导致布局异常；影响屏幕阅读器、拼写检查及css伪类；须置于靠前位置以防中文乱码。
为什么 必须写在第一行？<p>浏览器解析 HTML 时，会先读取文档开头的声明来决定用哪种渲染模式。如果 <code> 缺失、位置不对（比如缩进或前面有空格/注释），浏览器可能进入“怪异模式（Quirks Mode）”，导致 <code><h1></h1>、<p></p> 等标签的默认间距、盒模型行为异常，尤其是 CSS 布局容易错位。
- 它必须是文档最开头的字符，前面不能有任何内容（包括 BOM 字符、空行、
<!-- comment -->）
- 不区分大小写，但惯例全大写加空格，写成
或 <code> 也能识别，可读性差且易被误删
- 不是 HTML 标签，不参与 DOM 构建，所以 JS 里查不到它，也不占
document.children 长度
<!-- comment -->） 或 <code> 也能识别，可读性差且易被误删
document.children 长度这个属性不只为了 SEO，它直接影响屏幕阅读器发音、浏览器拼写检查、字体 fallback 逻辑，甚至部分 CSS 的 :lang() 伪类匹配。
- 中文站点推荐用
zh-CN（简体中文，中国大陆），而非笼统的zh；港澳台用户可能需要zh-HK或zh-TW - 如果整个页面混用中英文，可在局部元素上覆盖：比如
<p lang="en">Hello</p> - 漏写
lang不报错，但 Chrome 开发者工具的“Accessibility”面板会标为 warning，WCAG 合规性检查直接不通过
<meta charset="UTF-8"> 放错位置会导致中文乱码
这行必须放在 内、且尽可能靠前（最好第二行），否则浏览器在解析到中文文本时还没读到编码声明，会按默认编码（如 windows-1252）解码，显示成 或一堆问号。
- 它只能在
里生效，放在中完全无效 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 写法，冗余且易出错 - VS Code 默认保存为 UTF-8 with BOM，某些老服务器会把 BOM 当作页面开头内容，破坏
位置，建议在编辑器设置里关掉 BOM
新手常把
典型错误：把 <h1></h1> 写进 ，或把 <title></title> 放到 里。浏览器不会报错，但语义彻底错乱：<title></title> 在 中只是普通文本，不会出现在浏览器标签页；<h1></h1> 在 中根本不会渲染。
-
只放元数据：字符集、标题、视口、CSS/JS 引入、SEO 相关<meta> -
才是用户真正看到的内容区域，所有可视标签（<h1></h1>～<h6></h6>、<p></p>、<img>、<div>）都该在这儿<li>没有闭合 <code>或通常不影响渲染（浏览器自动补全），但会让代码难以维护，也干扰部分 lint 工具判断
真实项目里，结构松散比语法错误更难调试。一个没 lang 的页面可能看起来完全正常，直到盲人用户打不开，或者某天换了个 CDN 就开始乱码。这些点不在报错里，但在上线后才暴露。
