html5语义标签必须按语义正确使用：用于头部、专指主导航、全页唯一且不可嵌套于等内、须带标题、对应最近区块底部，错误嵌套会破坏可访问性树与seo。
HTML不是“设计语言”，它是定义网页结构和语义的标记语言；所谓“标准指南”的核心，就是用对标签、写对顺序、不绕开浏览器默认解析逻辑。
为什么必须放在第一行且不能少
这一行不是可选注释，而是触发浏览器“标准模式”的开关。漏掉、写错（比如）、或前面有空格/注释，都会让 Chrome/Firefox 切入怪异模式（Quirks Mode），导致盒模型计算错误、Flex 布局失效、<code>getBoundingClientRect() 返回异常值。
- 必须全小写，且紧贴文件开头，前面不能有任何字符（包括 BOM）
- 只认
这一种写法，<code> 或带系统标识的旧式声明已淘汰 - 验证方式：打开开发者工具 → Elements 标签页顶部看是否显示 “Rendered in Standards Mode”
lang 属性到底影响什么
它不控制字体或排版，但直接影响屏幕阅读器发音、搜索引擎对页面语言的识别、以及部分 CSS 伪类（如 :lang(zh)）的行为。设错或留空会导致无障碍测试失败，也会影响百度/Google 的地域化索引。
- 中文站点推荐用
lang="zh-CN"，繁体站用lang="zh-TW"，不要写lang="cn"或lang="ch" - 嵌套内容若语言不同（如英文引用），应局部覆盖：
<blockquote lang="en">...</blockquote> - VS Code 中装 “HTML Boilerplate” 插件可自动补全正确值，避免手误
哪些 HTML5 语义标签不能乱套，否则会破坏可访问性树
像 <header></header>、<nav></nav>、<main></main>、<article></article>、<footer></footer> 不是 <div> 的美化别名，它们在浏览器内部生成特定的 ARIA 角色（如 <code>banner、navigation、main）。滥用或嵌套错误，会让读屏软件跳过关键区块，或把导航栏当成普通容器朗读。
-
<main></main>全文档只能出现一次，且不能嵌套在<article></article>或<aside></aside>内 -
<nav></nav>只用于主要导航链接集合，页脚的“隐私协议”“联系我们”不算主导航，别硬套 -
<section></section>必须有标题（<h2></h2>~<h6></h6>），否则语义断裂，等同于没用
<meta charset="UTF-8"> 放错位置会直接导致乱码
它必须出现在 内、且在所有其他标签（包括 <title></title>）之前。如果放在 <title></title> 后面，某些浏览器会先按默认编码（如 windows-1252）解析 <title></title> 内容，再切换到 UTF-8 —— 导致标题显示为方块，而后续内容正常。
- 验证方法：查看浏览器地址栏标题是否乱码；用 curl -I 看响应头中是否含
charset=UTF-8 - Node.js 模板引擎（如 EJS、Pug）里容易忽略这点，需手动确保
meta在title前渲染 - UTF-8 是唯一被 HTML5 强制要求支持的编码，别用 GBK、ISO-8859-1
真正卡住人的从来不是“会不会写标签”，而是浏览器如何基于这些标签构建 DOM 树、渲染树和可访问性树——三者稍有错位，视觉上看不出问题，但 SEO 和无障碍就直接掉档。
