一个HTML文档必须且只能有一对<html>标签，它是整个文档的根元素和解析起点；<head>中不可放置可见内容，否则会被浏览器自动迁移或导致结构异常；所有用户可见内容必须严格置于<body>内。
<html> 必须有且仅有一个，它不是可选的“包装容器”，而是浏览器解析整个文档的起点。没它，<head> 和 <body> 就失去上下文，部分浏览器会降级到怪异模式，样式错乱、JS行为异常都可能由此触发。
为什么 <head> 里不能放可见内容
浏览器在构建渲染树前，先解析 <head> 并执行其中的 <meta>、<title>、<link>、<script> 等指令——这些操作不产出像素，只做准备。把 <p> 或 <div> 塞进 <head>，HTML 解析器会自动将其“踢出”到 <body> 开头（或创建隐式 <body>），但这个修复不可靠，尤其在 SSR 或静态生成场景下容易导致 DOM 结构与预期不符。
-
<title>只影响标签页标题和 SEO，不参与布局 -
<meta charset="utf-8">必须早于任何文本内容，否则中文等非 ASCII 字符可能乱码 -
<script>放在<head>里默认同步阻塞，建议加defer或移至</body>前
<body> 以外的内容不会被渲染，但可能被解析
严格来说，HTML 允许在 <html> 根标签下直接写文本或注释（比如 <html>hello<head></head><body></body></html>），但这些内容既不在 <head> 也不在 <body> 中，浏览器会忽略渲染，DOM 中也找不到对应节点。更危险的是：某些构建工具（如 Webpack + html-webpack-plugin）会把这类“游离内容”直接丢弃，导致上线后内容消失。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有用户可见内容必须包裹在
<body>内，哪怕只是空格或换行 -
<!-- 注释 -->在<html>外或<head>/<body>外会被保留为文档注释，但不影响 DOM - 自闭合标签如
<img>、<br>不需要<body>包裹，但必须出现在<body>内部才有效
DOM 树的叶子节点不等于 HTML 的末级标签
所谓“叶子标签”，不是指嵌套最深的标签，而是指没有子节点的元素节点（如 <img src="x">、<br>、纯文本节点）。但注意：<strong>text</strong> 的叶子是文本节点，不是 <strong>；<div><p>hi</p></div> 的叶子是 "hi"，不是 <p>。DOM 树真正闭环的判断依据是：每个元素都有明确父节点（除 <html>），且所有路径最终收敛到 <html> —— 这个闭环不是靠“写满所有层级”实现的，而是靠解析器自动补全缺失结构（如自动闭合未结束的 <p>）和规范约束（如 <head> 与 <body> 互斥）。
立即学习“前端免费学习笔记（深入）”；
- 浏览器容错机制会补全很多错误，但补全逻辑各引擎不同（WebKit / Blink / Gecko），别依赖它
- 用
document.documentElement获取<html>，用document.body获取<body>，它们永远存在，哪怕源码漏写了 - 验证结构是否合规，优先看浏览器开发者工具里的 Elements 面板，而不是肉眼数标签对
真正容易被忽略的，是 <head> 和 <body> 的边界语义——它们不是视觉分区，而是解析阶段的职责划分。写错位置的内容，可能“看起来正常”，但会在 SSR、SEO、无障碍访问中暴露问题。
