HTML文档结构需严格遵循规范：DOCTYPE必须首行无前置字符；lang属性影响无障碍与SEO，中文须用zh-CN；script应defer或置body底部；main元素唯一且不可嵌套于article内；meta charset需在head靠前位置。
HTML文档结构不是“背模板”，而是理解每个部分在浏览器解析、SEO、无障碍和协作中的实际作用。 你写错一个位置，可能让页面加载慢几百毫秒；漏掉lang属性，屏幕阅读器就可能读错中文声调；把嵌套进里，语义就反了——这些都不是“格式错误”，是真实影响交付质量的问题。
DOCTYPE 必须放在第一行，且不能带任何前置空格或注释
浏览器看到非空白字符（哪怕是一个换行符或）出现在之前，就会强制进入怪异模式（Quirks Mode），导致盒模型、百分比计算、字体渲染全部不一致。
- ✅ 正确写法：
必须是文件第一个字符，前后无空格、无BOM、无注释 - ❌ 常见错误：VS Code保存时自动加BOM；Git diff里看不见的UTF-8 BOM；前端脚手架模板里多了一行注释
- ⚠️ 注意：
（小写）也合法，但团队统一用小写更稳妥；这类旧写法已淘汰，别抄老项目
html lang="zh-CN"> 的 lang 属性不是可选项
它不只是给搜索引擎看的。Chrome屏幕阅读器会据此切换TTS语音引擎，iOS VoiceOver会调整断句逻辑，Googlebot也会微调关键词权重分配。没设lang，等于主动放弃无障碍支持和中文SEO基础分。
- ✅ 中文站点必须写
lang="zh-CN"（不是zh或zh-cn，大小写敏感） - ✅ 多语言站点按子页面动态设置，比如英文页用
lang="en-US"，不能全局写死 - ❌ 不要写
lang="zh"——它表示“所有中文变体”，但浏览器无法据此选择具体方言语音，实际效果不如zh-CN
里 script 放错位置会阻塞关键渲染路径
<script src="xxx.js"></script>默认同步加载并执行，如果放在末尾，浏览器会暂停HTML解析，等JS下载+编译+执行完才继续构建DOM树——首屏时间直接拉长。
- ✅ 立即修复：把第三方JS（如统计、埋点）移到
底部；业务核心JS加defer属性（<script defer src="app.js"></script>） - ✅
async只适合完全独立的脚本（如广告SDK），它不保证执行顺序，且可能在DOM未就绪时运行 - ⚠️ 特别注意：
虽然也放，但它不会阻塞HTML解析（只阻塞渲染），这点和<script></script>本质不同
只能出现一次，且不能是 或 的子元素
这是HTML5语义规范的硬性约束。代表整个文档中独一无二的主要内容区域。把它包在里，等于说“这篇文章是整页主要内容”——可如果页面有多个（比如博客列表），逻辑就崩了。
- ✅ 正确结构：
... ... - ❌ 错误写法：
... ... - ⚠️ 工具提示：用 axe 浏览器插件检查，它会直接报
landmark-one-main和landmark-no-duplicate-main两类错误
最容易被忽略的其实是的位置——它必须在里尽可能靠前（最好第二行），否则前面标签里的中文可能被错误解码。这个细节没有报错，但会导致乱码静默发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
