html文档结构是浏览器、搜索引擎和辅助技术共同遵守的契约，doctype必须首行且严格规范，lang属性影响语音、字体和seo，语义化标签承担机器可读责任，meta charset须前置防乱码。
HTML 文档结构不是“写完就能跑”的填空游戏，而是浏览器解析、搜索引擎理解、辅助技术读取的共同契约。不按规范组织，<main></main> 可能被忽略，<h1></h1> 语义可能失效，甚至影响 SEO 和可访问性。
为什么 <doctype html></doctype> 必须放在第一行且不能省略
它不是注释，也不是可选提示——它是告诉浏览器“用 HTML5 标准严格解析后续内容”的唯一开关。省略或错位（比如前面有空格、BOM 字符、XML 声明）会触发怪异模式（Quirks Mode），导致盒模型、字体渲染、Flex 布局行为全部回退到 IE5.5 级别。
必须全小写、无引号、无空格，开头不能有任何字符（包括 UTF-8 BOM）- VS Code 中输入
!+ Tab 自动生成的结构是安全的；手动粘贴时务必检查首行是否干净 - 服务端模板（如 PHP、Jinja）若在
前输出了空白或错误信息，同样触发怪异模式
它不只是给翻译插件看的。屏幕阅读器靠它切换语音引擎和发音规则；浏览器用它优化字体回退（比如中文字体缺失时优先 fallback 到日文/韩文字体）；搜索引擎用它判断页面目标语言区域。
- 值必须是合法的 BCP 47 语言标签，
zh-CN（简体中文）、zh-TW（繁体中文）、en-US不可混用或拼错 - 不要写成
lang="chinese"或lang="zh"—— 后者虽被部分浏览器接受，但缺乏地区信息，影响字体匹配精度 - 嵌套内容若语言切换（如引用英文论文段落），应局部覆盖：
<p lang="en">The result is significant.</p>
为什么现在必须用 <header></header><nav></nav><main></main><footer></footer> 而不是一堆 <div>
<p>语义化标签不是“锦上添花”，而是让机器（搜索引擎爬虫、无障碍工具、自动化测试脚本）能准确识别区块意图。一个仅用 <code><div class="header"> 的页面，在 VoiceOver 中无法直接跳转到导航区，Google 搜索结果页也不会提取出 <code><main></main> 内容作为摘要主体。
-
<main></main> 在整个文档中只能出现一次，且不能嵌套在 <article></article><aside></aside><footer></footer><header></header><nav></nav> 内部
-
<nav></nav> 不等于所有链接集合——只用于主要导航（如顶部菜单、侧边栏目录），页脚版权链接、文章内超链都不属于 <nav></nav>
-
<section></section> 需要有明确标题（<h2></h2> 或更高），否则语义弱于 <div>；纯样式分组请继续用 <code><div>
<h3>
<code><meta charset="UTF-8"> 放错位置会导致中文变乱码
<main></main> 在整个文档中只能出现一次，且不能嵌套在 <article></article><aside></aside><footer></footer><header></header><nav></nav> 内部<nav></nav> 不等于所有链接集合——只用于主要导航（如顶部菜单、侧边栏目录），页脚版权链接、文章内超链都不属于 <nav></nav>
<section></section> 需要有明确标题（<h2></h2> 或更高），否则语义弱于 <div>；纯样式分组请继续用 <code><div>
<h3>
<code><meta charset="UTF-8"> 放错位置会导致中文变乱码这个标签必须出现在 的前 1024 字节内，且越早越好。浏览器一旦开始解析 body 内容，再遇到 charset 声明就来不及修正已读入的字节流。
- 绝对不能放在
<title></title>后面，更不能放在<style></style>或<script></script>之后 - 如果使用 HTTP Header 发送
Content-Type: text/html; charset=utf-8，<meta charset>可省略，但两者冲突时以 HTTP Header 为准 - 生成静态文件时，确认构建工具（如 Vite、Webpack）没在
<meta charset>前注入额外内容（如 sourcemap 注释、调试脚本）
真正难的不是记住标签名，而是理解每个标签背后承载的“契约责任”：它向谁承诺了什么，违背时谁会出错、怎么出错。写完一个页面，不妨用 Chrome DevTools 的 Accessibility 面板检查 heading 结构，或用 Lighthouse 运行“SEO”审计项——那些红色警告，往往比控制台报错更值得优先修复。
