HTML文档结构是严格解析契约：<!DOCTYPE html>必须顶格首行，否则触发怪异模式；<meta charset="UTF-8">须置于<head>最前，否则中文乱码；<html lang="zh-CN">不可省略，否则影响读屏、SEO及CSS语言选择器。
直接说结论：HTML文档结构不是“搭积木”，而是必须严格遵循的解析契约——<!DOCTYPE html> 缺失或错位，浏览器就可能降级到怪异模式；<head> 里漏掉 <meta charset="UTF-8">，中文会乱码；<html lang="zh-CN"> 不写，屏幕阅读器和搜索引擎就难准确理解页面语言。
为什么 <!DOCTYPE html> 必须放在第一行？
它不是可选注释，而是浏览器的“解析开关”。没有它，或前面有空格、BOM、注释，IE 和旧版 Edge 会触发怪异模式（Quirks Mode），导致盒模型、浮动、字体渲染全乱套。
- 常见错误：用记事本保存时选了“ANSI”编码，开头自动加了 BOM 字节，肉眼看不见但破坏了
<!DOCTYPE html>的位置 - VS Code 用户：新建文件后先按
Ctrl+Shift+P→ “Change Encoding” → 选UTF-8（无 BOM）再写代码 - 验证方式：右键网页 → “查看网页源代码”，确认第一行且仅此一行是
<!DOCTYPE html>
<meta charset="UTF-8"> 放错位置会怎样？
它必须在 <head> 内、且尽可能靠前（最好第二行），否则浏览器已开始解析后续标签时还没读到编码声明，中文标题、段落就会显示为方块或问号。
- 错误写法：
<title>我的页面</title><meta charset="UTF-8">——<title>已被解析，乱码已发生 - 正确顺序：
<meta charset="UTF-8">→<meta name="viewport">→<title> - 注意：不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 只认charset属性
<html lang="zh-CN"> 不只是“可读性优化”
这个属性直接影响语音朗读、拼写检查、搜索引擎语义分析。不写或写错（如 lang="cn"），NVDA 等读屏软件可能用英文发音读中文，Google 也可能误判页面目标市场。
立即学习“前端免费学习笔记（深入）”；
- 值必须是 IETF 语言标签，中文推荐用
zh-CN（简体）、zh-TW（繁体），别写zh或chinese - 如果页面含多语言内容（比如中英混排），可在局部元素上覆盖：例如
<span lang="en">React</span> - 部分 CMS 或静态站生成器会默认忽略这个属性，手动补上比依赖工具更可靠
最容易被跳过的其实是 <meta name="viewport"> —— 它不报错，但没它，移动端页面会缩成一团，用户得双指放大才能看清文字。这个细节在桌面开发时容易被遗忘，却直接决定手机用户的第一印象。
