符合W3C标准的HTML文档必须守住四个不可妥协的结构锚点：DOCTYPE须首行全小写无前置内容；lang属性须用BCP 47规范精确标注于html标签；meta charset="UTF-8"须紧接在head内最前；main标签全局唯一且不得嵌套于其他语义容器中。
要组织一个符合W3C标准的HTML文档，关键不是堆砌标签，而是守住几个不可妥协的结构锚点：DOCTYPE必须是第一行第一个字符、lang属性必须精确且出现在上、meta charset必须紧接在内部最前面、main只能有一个且不能嵌套在语义容器里。这些不是“建议”，浏览器和辅助技术会按规则硬执行，错一处，乱一片。
DOCTYPE必须独占首行，全小写，零前置
这是整个文档的“启动开关”。只要它前面有哪怕一个空格、BOM、注释或PHP输出，浏览器立刻进怪异模式（document.compatMode === "BackCompat"），Flex塌陷、margin折叠失效、盒模型错乱——所有现代布局都可能失灵。
- ✅ 正确写法：
<!DOCTYPE html>，单独一行，全小写，无任何前置内容 - ❌ 常见错误：
<!-- 注释 --><!DOCTYPE html>、<?php echo '<!DOCTYPE html>'; ?>、<!doctype HTML>、文件开头带UTF-8 BOM - ⚠️ 编辑器设置务必选“UTF-8 without BOM”，VS Code需手动关闭BOM选项
根元素必须带BCP 47规范的lang属性
<html lang="zh-CN">不是锦上添花，而是屏幕阅读器朗读、拼写检查、搜索引擎语言识别的依据。设错或缺失，中文会被读成拼音，Google搜索结果语言标注错位，无障碍合规直接不达标。
- ✅ 大陆简体用
lang="zh-CN"，台湾繁体用lang="zh-TW" - ❌ 禁用
lang="cn"、lang="ch"、lang="zh"这类非标准值 - ? 局部切换语言可用
<p lang="en">Hello</p>，但避免在上滥用，防止语音引擎频繁切换meta charset必须在head内最前，且值为UTF-8
它决定浏览器解析HTML的初始编码。放错位置（比如写在
后面）或写错格式（如"utf8"缺横杠），中文、emoji从第一行就开始乱码，后面加多少次也救不回来。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>✅ 正确顺序：第1行 DOCTYPE → 第2行 <html lang="zh-CN"> → 第3行 <head><meta charset="UTF-8"></li> <li>❌ 错误写法：<code><meta charset="utf8"></code>（缺横杠）、<code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></code>（HTML5中冗余）</li> <li>? 记住：它是解析起点，不是装饰；它必须是里的第一个标签</li> </ul> <h3>main标签有严格语义约束，不能当div用</h3> <p><code><main></code>是键盘用户按<kbd>Alt+Shift+M</kbd>或辅助技术一键跳转到主要内容区的唯一锚点。违反规则等于主动屏蔽残障用户。</p> <ul> <li>✅ 整个页面只允许一个<code><main></code>，且必须直接包裹主体内容</li> <li>❌ 不能嵌套在<header>、<footer>、<nav>、<aside>等语义容器内部</li> <li>? 模块化片段（如组件、卡片、侧边栏）请用<section>或<article>，别用<main></li> </ul>
