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