浏览器严格校验<html>子节点，<head>和<body>必须为其直接子元素；若中间夹杂空格、注释或<p>等非法内容，浏览器会将其“踢”入<body>开头，导致<meta>乱码、<title>失效、SEO受损及DOM结构错乱。
HTML标签不是随便嵌套的，浏览器会按规范强制修正错误结构，但修正后的行为往往和你预期不一致——比如把错放的 <p> 移到 <body> 开头，或者直接丢弃非法位置的 <title>。
为什么 <head> 和 <body> 必须是 <html> 的直接子元素
浏览器解析时会严格校验 <html> 的子节点。只要中间夹了空格、注释、<p> 或 <div>，就违反规范：
- Chrome/Firefox 会把非法内容“踢”进
<body>开头，并在开发者工具里显示一个匿名文本节点（#document下多出一层） -
<meta charset="UTF-8">如果被挤到<body>里，中文大概率乱码 -
<title>若不在<head>内，页面标签栏不显示标题，SEO 工具也抓不到
<title> 只能放 <head> 里，且不能嵌套任何标签
<title> 是纯文本容器，语义上只接受字符数据：
- 写成
<title><strong>首页</strong></title>，浏览器会忽略<strong>，只取文字“首页” - 如果
<title>出现在<body>中，它会被当成普通段落渲染在页面上，而不是设为浏览器标签标题 - 多个
<title>标签时，仅第一个生效，后续全被忽略
<p> 绝对不能作为 <head> 的子元素
<p> 是流式内容元素，合法父元素必须是块级容器（如 <body>、<section>、<article>），但绝不能是 <head>、<title>、<script> 或 <style>：
立即学习“前端免费学习笔记（深入）”；
- 浏览器会自动把
<p>移出<head>，插到<body>开头，导致布局错位 -
<p>内部再嵌套<div>或另一个<p>，多数场景下验证失败，CSS 选择器也可能失效 - 常见误写：
<head><p>测试</p></head>—— 看似无报错，实则结构已被静默破坏
真正容易被忽略的，是那些“没报错却不对”的情况：没有语法错误，但 DOM 树和你写的源码不一致；没有控制台警告，但 SEO 和无障碍访问已经受损。结构层级不是写完能跑就行，而是要和规范对齐——否则修复成本会随着项目变大指数级上升。
