必须顶格写在第一行且前面不能有任何字符，否则浏览器会进入怪异模式，导致box-sizing失效、position:sticky不生效、getboundingclientrect异常；因其解析时仅扫描开头非空白字符即决定渲染模式，bom、注释或空格均触发quirks mode。
!DOCTYPE html 必须顶格写在第一行，前面不能有任何字符（包括 BOM、空格、注释），否则浏览器进怪异模式，box-sizing 失效、position: sticky 不工作、getBoundingClientRect 返回异常值。
为什么 !DOCTYPE html 不能有前导内容
浏览器一读到非空白字符就决定渲染模式。哪怕开头是 <!-- 注释 --> 或一个看不见的 UTF-8 BOM（EF BB BF），IE 和旧 Safari 就会强制触发 Quirks Mode。现代 Chrome 虽能“宽容”处理，但 Lighthouse 审计会报错，微信内置浏览器仍按老规则 fallback。
- 检查方法：用
hexdump -C your.html | head -n 1看前三个字节是不是3c 21 44（即） - VS Code 右下角确认编码是
UTF-8，不是UTF-8 with BOM - 别手敲 —— 输入
!后按 Tab，让 Emmet 自动补全标准模板
写 zh-CN，不是 zh、cn、zh_CN 或 zh-ch。BCP 47 标准要求语言子标签用连字符分隔，地区码必须大写。
-
lang="zh"会让屏幕阅读器默认用繁体发音逻辑，拼写检查器匹配不到简体词库 -
lang=""等价于未声明，搜索引擎忽略语言信号 - 局部英文内容直接套
<p lang="en">API response</p>，不用额外加xml:lang - SSR 场景下，服务端输出的
lang值必须和前端 hydration 一致，否则 React/Vue 报 DOM mismatch
<meta charset="UTF-8"> 为什么必须紧贴
浏览器只扫描 前 1024 字节来确定编码。如果它被 <title></title> 或 JS 注释挡在后面，中文就会变成方框，且刷新也无法恢复。
- 推荐顺序：
<meta charset="UTF-8">→<meta name="viewport">→<title></title> - 别写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 已废弃，Chrome 120+ 直接忽略 - 大小写敏感：
UTF-8正确，utf8或utf-8（小写 u）可能被部分解析器拒识 - 服务器响应头不能替代它 —— HTTP 头可被覆盖或缺失，
<meta>是最终兜底
<title></title> 不是装饰，漏掉会直接影响 SEO 和可访问性
没 <title></title>，浏览器标签页显示“无标题文档”，用户无法识别当前页面；更重要的是，所有主流爬虫把 <title></title> 当作页面主关键词源，缺失等于放弃搜索排名。
- 长度控制在 30–60 字符（含空格），过长会被截断
- SPA 场景下，不要靠 JS 动态注入 —— 首屏 HTML 必须包含真实
<title></title>，否则 SSR hydration 失败 - 每个页面的
<title></title>必须唯一，重复会导致 Google 降权
真正容易被忽略的是三件事：BOM 字节藏在文件开头看不见、lang 值拼错后屏幕阅读器静默失败、<meta charset> 放错位置导致整页中文不可逆乱码 —— 这些问题不会报 JS 错误，但会让 QA 或残障用户直接卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
