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