<head>和<body>必须是<html>的直接子元素，因HTML规范强制要求二者并列作为根元素的唯一合法子节点，中间插入任何内容都会被浏览器静默修正到<body>开头，导致<title>失效、乱码或SEO丢失。
为什么 和 必须是 的直接子元素
浏览器解析 HTML 时会严格校验结构。<head> 和 <body> 是 <html> 的强制直系子元素，中间不能插任何其他标签、文本或空格。否则：
- Chrome/Firefox 会把非法内容（比如一个
<p>或注释）自动移到<body>开头，并在 Elements 面板里显示为匿名文本节点 -
<title>若被挤到<body>里，页面标题栏不会显示，SEO 工具也抓不到 -
<meta charset="UTF-8">若错放在<body>中，中文极大概率乱码
<title> 只能放 <head> 里且不能嵌套标签
<title> 是纯文本容器，语义上只接受字符数据，不支持任何子标签：
- 写成
<title><strong>首页</strong></title>—— 浏览器忽略<strong>，只取文字“首页” - 若
<title>出现在<body>中，它会被当作普通段落渲染在页面上，而非设置标签页标题 - 多个
<title>标签时，仅第一个生效，其余被静默丢弃
<p> 不能出现在 <head> 中，但可嵌套在多数块级容器内
<p> 是流式内容元素，设计目标就是承载正文段落。它的合法父元素包括 <body>、<article>、<section>、<footer> 等，但绝不能是 <head>、<title>、<script> 或 <style>：
- 浏览器会自动把误放在
<head>里的<p>移出并插入<body>开头，DOM 结构与源码不一致 -
<p>内部不能再嵌套<div>、<h1>或另一个<p>—— HTML5 允许极少数例外（如<span>），但多数场景下会导致验证失败或样式错乱
用开发者工具验证 DOM 层级是否真实符合预期
缩进格式只是人眼辅助，浏览器最终按规范生成 DOM 树。实际结构可能和你写的源码不同：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools（F12），切到
Elements面板，观察左侧树形结构 —— 这才是真实 DOM - 特别注意是否有“#text”节点意外出现在
<html>下，那往往是空格、换行或注释导致的非法子节点 - 右键某个标签 → “Edit as HTML”，临时修改后观察是否被浏览器自动修正，就能快速判断嵌套合法性
层级关系不是靠视觉对齐决定的，而是由规范定义的父子约束。写错位置不一定会报错，但后果常是静默失效——比如 SEO 失效、无障碍访问中断、CSS 选择器失效。最稳妥的做法，是写完立刻用 Elements 面板确认真实结构。
