因为HTML5不基于SGML，无需引用DTD，<!DOCTYPE html>仅用于触发浏览器标准模式，现代浏览器对其识别完全一致；加PUBLIC或SYSTEM声明反而可能触发怪异模式，且必须顶格、无空格、无BOM。
为什么直接写 <!DOCTYPE html> 就够了
现代浏览器对 HTML5 的 <!DOCTYPE html> 识别完全一致，不需要加任何注释、版本号或命名空间。加 html PUBLIC 或 SYSTEM 声明反而可能触发怪异模式（Quirks Mode），尤其在旧版 IE 兼容测试中容易翻车。
常见错误现象：document.compatMode 返回 "BackCompat"，导致盒模型、getBoundingClientRect() 行为异常。
- 永远只用
<!DOCTYPE html>，一行，顶格，无空格 - 不要写
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">这类过时声明 - 不加
lang属性也能运行，但建议补上：<html lang="zh-CN">（影响屏幕阅读器和 SEO）
<head> 里哪些标签真不能少
空白页看似什么也不需要，但漏掉关键元信息会导致调试困难、字体渲染异常、甚至移动端缩放失效。
必须保留的三项：<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1">、<title>。缺任意一个都可能让开发体验打折。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">必须放在<head>最前面（否则可能被浏览器误判编码，出现乱码） -
viewport不写会导致手机端页面默认按 980px 渲染，文字小到看不清 -
<title>虽不影响渲染，但 DevTools 标签页显示为空白，多开几个 tab 后根本分不清哪个是你的页面
为什么 <body> 里可以真的什么也不放
HTML 规范允许空 <body>，浏览器会正常解析并触发 DOMContentLoaded 和 load 事件。很多构建工具生成的 index.html 就是这样——纯骨架，靠 JS 动态挂载内容。
但要注意：空 <body> 下 document.body.innerHTML 是空字符串，document.body.children.length 为 0，这些判断逻辑在初始化脚本中要提前兜底。
- 不需要硬塞
<div id="app"></div>—— 除非你明确要用它作为 React/Vue 的挂载点 - 如果后续要注入 CSS，建议预留
<style>或<link rel="stylesheet">，而不是靠 JS 插入<style>标签（避免 FOUC） - 想快速验证页面是否加载成功？加一行
<script>console.log("page loaded")</script>到<body>底部就行
复制粘贴就能跑的最终极简骨架
以下代码已剔除所有非必要字符，兼容 Chrome/Firefox/Safari/Edge，经 W3C Validator 验证通过：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Blank Page</title> </head> <body> </body> </html>
注意：文件保存时必须用 UTF-8 编码（无 BOM），编辑器选错编码会导致 charset 声明失效；<title> 文本可按需修改，但标签不能省略。
