缺<!DOCTYPE html>会导致浏览器进入怪异模式，使document.body为null；缺<html>、<head>或<body>标签（或拼接截断）也会直接导致document.body为null，三者任一缺失即表明HTML结构不完整。
哪些标签缺了会导致 document.body 为空
浏览器解析 HTML 时，<html>、<head>、<body> 这三个标签哪怕省略，它也会自动补全；但补全逻辑不可控——比如把 <script> 塞进 <head> 里提前执行，而你本意是等 DOM 加载完再跑。真正不能缺的是：<!DOCTYPE html> 和 <meta charset="UTF-8">（且必须在 <title> 之前）。
-
<!DOCTYPE html>缺失 → 浏览器进入怪异模式（Quirks Mode），document.body可能为null，DOMContentLoaded延迟甚至不触发 -
<meta charset="UTF-8">缺失或位置错（比如写在<title>后）→ 中文标题/文本乱码，SEO 抓取失败，无障碍工具读不出正确字符 -
<html lang="zh-CN">不是强制要求，但缺了会影响屏幕阅读器语种切换、搜索引擎语言识别，属于“可运行但不合规”
为什么 <meta charset> 必须放在 <title> 前面
浏览器按顺序解析 HTML，遇到 <title> 就立刻读取其内容并渲染到标签栏；如果此时还没看到 <meta charset="UTF-8">，它会按默认编码（通常是 ISO-8859-1）解码，中文就变成 。等后面遇到 <meta charset> 时，标题早已渲染完毕，改不了。
- 实操验证：把
<meta charset="UTF-8">移到<title>后，打开页面看标签栏——中文标题显示为方块或问号 - VS Code 输入
!再回车生成的骨架，默认就把<meta charset>放在<title>前，不是巧合，是规范强制要求 - 注意：
<meta>标签本身不闭合（HTML5 允许省略/），写成<meta charset="UTF-8">即可，不用<meta charset="UTF-8" />
lang 属性写不写、怎么写才不算白填
lang 是 <html> 的属性，不是独立标签，但它直接影响多语言支持和可访问性。只写 lang="zh" 不够，推荐用 lang="zh-CN" 或 lang="zh-TW" 明确地区变体。
- 屏幕阅读器靠它切换发音规则（比如“北京”在简体中文和繁体中文环境读音不同）
- Google 搜索引擎用它判断页面目标市场，
lang="en"页面不会优先推给中文用户 - 写成
<html lang="">或<html lang="auto">等同于没写，浏览器无法推断，应避免 - 嵌套内容若语言不同，可用局部
lang覆盖，例如：<p lang="en">Hello</p>
自动补全机制到底补了啥、补得对不对
浏览器确实会补 <head> 和 <body>，但补的位置和内容取决于你写的第一个非注释标签。比如你直接写 <p>hello</p>，浏览器会把它塞进自动生成的 <body>；但如果你先写 <script>console.log(1)</script>，它可能塞进 <head>，导致脚本在 DOM 构建前执行——而这时 document.body 还不存在。
立即学习“前端免费学习笔记（深入）”；
- 典型错误现象：
Cannot read property 'appendChild' of null，根源往往是脚本执行时document.body尚未生成 - 补全不保证语义正确：
<nav>、<main>这类语义标签浏览器不会帮你补，缺了就是缺了，无障碍工具直接跳过该区域 - 验证方式：打开 DevTools → Elements 面板，看左侧 DOM 树是否完整呈现
<head>和<body>，而不是只有灰色虚线框
<html>”，而是 <meta charset> 的位置和 lang 的具体值——这两处出错，页面能打开，但 SEO、无障碍、多语言支持全掉链子。 
