标准HTML文档结构是浏览器解析和渲染的硬性契约，缺任一核心标签（如、、）均会触发怪异模式，导致CSS失效、Flex错乱、乱码或DOM操作失败。
标准HTML文档结构不是“可选模板”，而是浏览器解析和渲染的硬性契约——缺一个标签，就可能触发怪异模式（Quirks Mode），导致CSS失效、Flex布局错乱、甚至document.getElementById报错。
为什么必须放在第一行且不能带空格
它不是注释，也不是可有可无的声明。浏览器在读取第一行时就决定解析模式：触发标准模式；任何前置空格、BOM字符、注释或换行都会让它失效，退回到Quirks Mode。
- 常见错误：VS Code保存时自动加BOM，或复制粘贴带不可见字符
- 验证方法：用
curl -s your-page.html | head -n1确认首行是否纯文本 - 大小写不敏感，但
或<code>也合法；别写<code><?xml version="1.0" encoding="UTF-8"?>——XML声明会直接让DOCTYPE失效
lang属性到底影响什么
它不只给SEO看，更直接影响屏幕阅读器发音、CSS伪类:lang()匹配、部分字体fallback逻辑，甚至某些浏览器的拼写检查。
- 值必须是BCP 47标准格式，
zh太模糊，zh-CN或zh-TW才准确 - 如果页面混用中英文，可在局部覆盖：
<span lang="en">API</span> - 没写
lang时默认为und（未定义），此时:lang(zh)规则完全不生效
<meta charset="UTF-8">为什么必须在<title></title>之前
浏览器解析HTML是流式进行的。一旦遇到非ASCII字符（比如中文标题），而<meta charset>还没读到，就会按默认编码（通常是ISO-8859-1）解码，造成乱码——且这个过程不可逆。
立即学习“前端免费学习笔记（深入）”；
- 位置要求：必须在
内、且是前几个标签之一；官方建议放在<title></title>之前，越靠前越安全 - 不要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——这是HTML4写法，冗余且易被忽略 - UTF-8是唯一推荐编码；别用
GBK或UTF-16，后者需BOM且兼容性差
<script></script>的位置陷阱
脚本在开头执行时，DOM树往往没构建完，document.getElementById找不到元素是常态，不是代码写错了。
- 最稳妥做法：把
<script></script>放在前，确保DOM已就绪 - 如果必须放
，加defer属性：<script defer src="app.js"></script>——它会等DOM解析完成再执行 -
async适合独立模块（如统计脚本），但执行时机不确定，不能依赖DOM - 现代写法可配合
DOMContentLoaded事件，但前提是脚本本身已加载完成
真正容易被忽略的，是<meta name="viewport">缺失导致移动端页面缩放异常——它不会报错，但用户看到的是缩放错乱的桌面版布局，调试时根本想不到是这里的问题。
