符合w3c标准的html文档必须守住四个不可妥协的结构锚点：doctype须首行全小写无前置内容；lang属性须用bcp 47规范精确标注于html标签；meta charset="utf-8"须紧接在head内最前；main标签全局唯一且不得嵌套于其他语义容器中。
要组织一个符合W3C标准的HTML文档，关键不是堆砌标签，而是守住几个不可妥协的结构锚点：DOCTYPE必须是第一行第一个字符、lang属性必须精确且出现在html>上、meta charset必须紧接在内部最前面、main只能有一个且不能嵌套在语义容器里。这些不是“建议”，浏览器和辅助技术会按规则硬执行，错一处，乱一片。
DOCTYPE必须独占首行，全小写，零前置
这是整个文档的“启动开关”。只要它前面有哪怕一个空格、BOM、注释或PHP输出，浏览器立刻进怪异模式（document.compatMode === "BackCompat"），Flex塌陷、margin折叠失效、盒模型错乱——所有现代布局都可能失灵。
- ✅ 正确写法：
，单独一行，全小写，无任何前置内容 - ❌ 常见错误：
<!-- 注释 -->、<code><?php echo '<!DOCTYPE html>'; ?>、、文件开头带UTF-8 BOM - ⚠️ 编辑器设置务必选“UTF-8 without BOM”，VS Code需手动关闭BOM选项
根元素必须带BCP 47规范的lang属性
不是锦上添花，而是屏幕阅读器朗读、拼写检查、搜索引擎语言识别的依据。设错或缺失，中文会被读成拼音，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从第一行就开始乱码，后面加多少次也救不回来。<ul> <li>✅ 正确顺序：第1行 DOCTYPE → 第2行 → 第3行 <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></main></code>是键盘用户按<kbd>Alt+Shift+M</kbd>或辅助技术一键跳转到主要内容区的唯一锚点。违反规则等于主动屏蔽残障用户。</p> <ul> <li>✅ 整个页面只允许一个<code><main></main></code>，且必须直接包裹主体内容</li> <li>❌ 不能嵌套在<header>、<footer>、<nav>、<aside>等语义容器内部</aside></nav></footer></header> </li> <li>? 模块化片段（如组件、卡片、侧边栏）请用<section>或<article>，别用<main></main></article></section> </li> </ul>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
