HTML 是 W3C 与 WHATWG 维护的开放标准，非行业认证；<!DOCTYPE html> 必首行小写独占，否则触发怪异模式；lang 属性影响无障碍与多语言处理；charset 必须在 head 最前且 UTF-8 无 BOM；<main> 全局唯一且不可嵌套，是无障碍导航关键。
HTML 没有“行业认证标准”这回事，它本身就是 W3C 和 WHATWG 共同维护的开放 Web 标准——不是某家公司或协会颁发的资质，而是浏览器厂商、开发者、工具链共同遵循的事实标准。
为什么 <!DOCTYPE html> 必须写在第一行且不能省略
这个声明不是可选注释，而是触发浏览器“标准模式”的开关。漏掉、写错位置（比如放在 <html> 后面）、或者写成 <!doctype HTML5> 等错误形式，都会让 IE 或旧版 Edge 进入怪异模式（Quirks Mode），导致盒模型、字体渲染、Flex 布局行为全乱。
-
<!DOCTYPE html>必须全小写，无空格，无属性，独占一行 - 它前面不能有任何字符（包括 BOM、空格、注释），否则部分浏览器会忽略
- 不写或写错，
document.compatMode会返回"BackCompat"，而不是"CSS1Compat"
<html lang="zh-CN"> 的 lang 属性到底影响什么
这不是“SEO 锦上添花项”，而是直接影响屏幕阅读器断句、拼写检查、翻译插件识别、甚至 Google 搜索结果的语言标注。设成 lang="zh" 或空值，都可能让中文用户看到英文界面提示；设成 lang="en-US" 却放满中文内容，会导致语音朗读用美式英语念汉字拼音。
- 必须用 IETF 语言标签格式，推荐
zh-CN（简体中文-中国大陆），不用zh-chs或cn - 可局部覆盖：如英文段落加
<p lang="en">Hello</p>，屏幕阅读器会自动切换发音引擎 - 缺失时，浏览器按系统语言 fallback，但
document.documentElement.lang返回空字符串，JS 逻辑容易出错
<meta charset="UTF-8"> 放错位置会直接破坏页面
它必须出现在 <head> 最前面（通常第二行），紧接在 <html> 开始之后。如果被 <title> 或 <script> 挡住，浏览器在解析到中文、 emoji 或特殊符号前已按默认编码（如 ISO-8859-1）解码，后续再声明也无力回天——你看到的乱码已经固化在 DOM 里了。
立即学习“前端免费学习笔记（深入）”；
- 不能写成
<meta charset='utf8'>（缺横杠）、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">（过时且冗余） - 服务端 HTTP Header 中的
Content-Type: text/html; charset=UTF-8优先级更高，但前端仍要双保险写上 - VS Code 等编辑器保存为 UTF-8 无 BOM 是前提，否则 BOM 会卡在
<!DOCTYPE>前面，照样触发怪异模式
<main> 标签不是“可有可无的语义装饰”
它是 ARIA 规范明确要求的导航目标：键盘用户按 Ctrl+Alt+1（Windows NVDA）或 Cmd+Option+O（Mac VoiceOver）能直接跳转到主要内容区。但很多项目把它当成 <div class="main"> 的替代品，忽略了硬性约束。
-
<main>在整个文档中只能出现一次，且不能嵌套在<article>、<aside>、<footer>、<header>、<nav>内部 - 若页面含多个独立文章（如博客列表页），每个
<article>应有自己的<header>和<section>，但<main>仍只包最外层容器 - 不使用
<main>而用<div role="main">也能满足无障碍，但前者更轻量、无需额外 ARIA 声明
真正容易被忽略的是：这些结构规则不是“写完再检查”，而是在敲下第一个 <html> 时就要决定好 lang、charset、viewport 的取值——它们共同构成浏览器解析 HTML 的初始上下文，一旦错，后面所有 DOM 构建、样式计算、JS 执行都在一个偏移的坐标系里运行。
