<!DOCTYPE html>必须是文档第一个非空白字符，否则浏览器立即进入怪异模式；前置空格、注释、BOM均会破坏其有效性，导致盒模型异常、CSS特性失效及DOM行为偏差。
DOCTYPE 必须顶格写在第一行，否则浏览器会进怪异模式，box-sizing 失效、position: sticky 不工作、甚至 document.title 读不出来——这不是警告，是真实发生的渲染事故。
为什么 <!DOCTYPE html> 不能有空行、注释或 BOM？
浏览器一读到非空白字符就决定解析模式。前面哪怕一个空格、一行注释、或者 UTF-8 BOM 字节（\uFEFF），IE 和旧 WebKit 内核直接切进怪异模式；现代浏览器虽能“容错”，但 SSR hydration、CSS 动画触发、甚至某些 IntersectionObserver 行为都会出偏差。
-
VS Code输入!+Tab生成的模板最可靠，别手动删换行或加空格 - CI 流程里常校验
<!DOCTYPE html>是否严格小写+无空格，失败即阻断部署 - 服务端模板（如 EJS、Nunjucks）输出时，确保
doctype前无console.log、debugger或空格拼接
<html lang="zh-CN"> 为什么不能写成 lang="" 或 lang="zh"？
空值 lang="" 等价于未声明，屏幕阅读器按 undefined 处理；只写 zh 会让语音合成引擎默认用台湾腔或日语发音逻辑，拼写检查器匹配不到简体词库，Google 搜索也倾向返回繁体结果。
- 动态语言切换场景（如 i18n 路由），
lang值必须和服务端渲染输出一致，否则 React/Vue hydration 会因 DOM 差异报错 - 嵌套英文内容时，直接用
<p lang="en">API response</p>覆盖，不用额外设xml:lang - 不要用
<html lang="zh">—— BCP 47 标准要求地区码明确，zh-CN是唯一稳妥写法
<meta charset="UTF-8"> 为什么必须卡在 <head> 开头 1024 字节内？
浏览器只扫描 <head> 前 1024 字节来确定字符集。如果它被 <title>、JS 注释或构建工具插入的调试代码挡在后面，中文就会显示为 ，且该乱码不可逆（刷新也不恢复）。
立即学习“前端免费学习笔记（深入）”；
- 推荐顺序：
<meta charset="UTF-8">→<meta name="viewport">→<title> - 别用已废弃的
<meta http-equiv="Content-Type">，Chrome 120+ 会忽略 - 大小写敏感：
UTF-8正确，utf8或UTF8都不行；短横可选，但UTF必须大写，8小写
语义化标签不是“可选装饰”，而是 DOM 渲染链的关键节点
<main> 被跳过、<header> 套 <div>、<article> 里塞广告位——这些写法不会让页面立刻崩，但会让 document.querySelector('main') 返回 null、让屏幕阅读器跳过核心内容、让 Lighthouse 的 SEO 分数掉到 30 以下。
-
<main>每页只能有一个，且不能嵌套在<article>或<section>里 -
<img>必须带src和alt，空alt=""表示“纯装饰图”，非空则需描述图像作用而非外观 -
<h1>到<h6>必须层级连续，<h1>后直接跟<h3>会导致大纲断裂，影响无障碍导航
最容易被忽略的其实是顺序：不是“写了就行”，而是 DOCTYPE、lang、charset、viewport、title 这五项必须严格按序出现——少一个或位置错，后续所有 DOM 操作和样式计算都可能偏离预期。
