html文档结构是浏览器解析渲染的强制契约：必须首行唯一声明，须带lang属性（如lang="zh-cn"），须紧接开头且早于，缺一将致怪异模式、乱码、dom不可用或seo失效。
HTML文档结构不是“可选写法”，而是浏览器解析和渲染页面的强制契约。漏掉或把<code>和写错层级，轻则样式错乱，重则脚本不执行、SEO失效。
为什么必须放在第一行
它不是HTML标签，而是告诉浏览器：“用标准模式解析，别退回怪异模式（Quirks Mode）”。一旦前面有空格、BOM字符或注释，浏览器就可能降级为怪异模式——这时box-sizing、vertical-align等行为全都不一样，连document.body都可能为null。
- ✅ 正确：文件开头第一字符就是
- ❌ 错误：
<!-- 注释 --> 或 <code>\ufeff（UTF-8 BOM） - ⚠️ 注意：Node.js生成HTML时，
fs.writeFileSync()默认不带BOM，但某些编辑器保存会悄悄加BOM
lang属性到底要不要设
不设lang不是语法错误，但会影响屏幕阅读器发音、搜索引擎语义判断，甚至CSS里的:lang()伪类无法匹配。中文页面必须写，不能简写成zh或留空。
- ✅ 推荐：
（中国大陆）、zh-TW（台湾）、en-US - ❌ 常见错误：
（无效值）、（等同于未声明） - ⚠️ 影响：Chrome DevTools 的“Accessibility”面板会标红提示缺失
lang
<meta charset="UTF-8">为什么必须在<title></title>之前
浏览器从上到下解析HTML，遇到第一个<meta charset>才确定编码方式。如果它在<title></title>之后，<title></title>里的中文就会被当成乱码解码一次，再被修正——此时页面标题栏已显示乱码，刷新也救不回来。
- ✅ 位置：必须是
内**最早**的标签之一，紧接<title></title>前或后均可，但绝不能晚于<title></title> - ❌ 错误顺序：
<title>测试页</title> <meta charset="UTF-8"> - ⚠️ 补充：
<meta>的charset属性只能用于，且一个文档只允许出现一次
<script></script>吗？放了会怎样
可以放，但行为和放在底部完全不同：它会阻塞HTML解析，直到脚本下载并执行完。如果脚本里调用document.write()或直接操作document.body，大概率报错——因为还没开始解析。
- ✅ 安全做法：
<script src="init.js" defer></script>（延迟执行）或<script src="init.js" type="module"></script>（自动defer） - ❌ 高危写法：
<script>console.log(document.body)</script>（此时document.body === null） - ⚠️ 性能影响：未加
defer或async的<script></script>在中，会使首屏时间（FCP）明显变长
真正容易被忽略的，是<meta name="viewport">在移动端的必要性——没有它，iOS Safari会以980px宽度渲染，文字小得看不清，缩放交互也异常。这和结构看似无关，却是现代HTML文档实际生效的隐性门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
