必须按顺序写全五项：doctype顶格首行、html带lang属性、meta charset在title前、title存在、body闭合；否则触发怪异模式、document.body为空、domcontentloaded延迟、seo不收录。
直接用这五项，缺一不可，顺序也不能错——否则浏览器可能进怪异模式、document.body为空、DOMContentLoaded延迟触发，甚至搜索引擎不收录。
DOCTYPE 必须顶格首行，不能有空格或注释
浏览器靠它判断是否启用标准渲染模式。写成 是唯一安全写法；<code> 或 <code> 虽然也认，但大小写混用易引发团队协作混乱；任何前置空格、BOM 字符或注释（比如 <code><!-- comment -->）都会让 <code>document.compatMode 变成 "BackCompat"，即怪异模式。
- 错误示例：
<!-- page start --> - 正确姿势：新建文件后第一行就敲
，光标紧贴行首 - VS Code 用户可直接输入
!+ Tab 触发 Emmet 模板，自动生成带 lang 的完整结构
lang 属性
不加 lang 不影响页面显示，但会让屏幕阅读器无法切换中文语音引擎，也削弱 SEO 中的地域相关性识别。值推荐用 zh-CN（不是 zh 或 zh-cn），因为部分旧辅助技术对短格式支持不稳定。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
是最稳妥写法 - 不要写成
或 - 如果页面含多语言内容（如中英混排），主语言仍设为
zh-CN，局部用<span lang="en"></span>切换
<meta charset> 必须在 <title></title> 之前
这是最容易被忽略却后果最直接的一条：<meta charset="UTF-8"> 如果放在 <title></title> 后面，浏览器会先按默认编码（通常是 ISO-8859-1）解析标题，导致中文标题显示为乱码——你刷新十次都一样。
- 顺序铁律：
<meta charset="UTF-8">→<title></title>→ 其他<meta>（如viewport） - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 只认charset简写形式 - VS Code 保存文件时务必选 “UTF-8 无 BOM”，否则
charset声明可能失效
写成 或 不闭合，是 XHTML 时代的遗留习惯。HTML5 解析器会尝试自动补全，但补全位置不可控——可能把后续脚本塞进 执行，也可能把内联样式挂错位置。
- 必须写成
，哪怕里面只放一个<div id="app"></div> - 服务端渲染（SSR）场景下，
document.getElementById("app")在脚本执行时返回null的常见原因，就是没闭合或 DOM 未完全加载 - 如果真要留空，就写
<!-- empty -->，确保结构完整
真正卡住人的从来不是“怎么写”，而是“为什么非得这么写”——比如 charset 位置错了，标题乱码；lang 缺了，无障碍测试直接 fail；body 没闭合，JS 查 DOM 就查不到。这些不是规范教条，是浏览器实际解析时的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
