HTML文档是树状结构，<head>和<body>必须为<html>的强制直系子元素，否则浏览器会静默修正；<title>只能在<head>内且仅含文本；<p>不可在<head>中，其合法父元素为<body>等流式容器。
HTML文档结构不是扁平拼凑，而是有明确父子与兄弟关系的树状模型；写错嵌套或放错位置，轻则渲染异常，重则被浏览器静默修正甚至丢弃内容。
为什么 <head> 和 <body> 必须是 <html> 的直接子元素
浏览器解析 HTML 时严格按规范校验结构。<head> 和 <body> 是 <html> 的**强制直系子标签**，中间不能插入任何其他元素（包括空格、注释、<p> 或 <div>）。否则：
- Chrome/Firefox 会把非法内容移到
<body>开头，并在开发者工具中显示“#document”下多出一个匿名文本节点 -
<title>若不在<head>内，页面标题可能不生效，SEO 工具抓不到 -
<meta charset="UTF-8">若被挤到<body>里，中文很可能乱码
<title> 只能出现在 <head> 里，且不能嵌套任何标签
<title> 是纯文本容器，语义上只允许直接子节点为字符数据（即不能包含 <strong>、<span>、<br> 等任何标签）：
- 写成
<title><em>首页</em></title>—— 浏览器会忽略<em>，只取文字“首页” - 若
<title>出现在<body>中，它会被当成普通文本渲染在页面上，而非设为标签栏标题 - 多个
<title>标签时，仅第一个生效，后续被忽略
<p> 不能作为 <head> 的子元素，但可嵌套在 <body> 内几乎所有块级容器中
<p> 是典型的**流式内容元素**，设计初衷就是承载正文段落。它的合法父元素包括 <body>、<article>、<section>、<footer> 等，但绝不能是 <head>、<title>、<script> 或 <style>：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 误写
<head><p>说明文字</p></head>—— 浏览器会自动把<p>移出<head>并插入<body>开头 -
<p>内部不能再嵌套<div>、<h1>、<p>等块级元素（HTML5 允许部分嵌套，但多数场景下会导致验证失败或样式错乱） - 想让段落有语义分组？用
<section>或<article>包一层，而不是强行塞进<head>
DOM树视角下，<html> 是唯一根，所有标签都必须落在其子树中
打开 Chrome DevTools → Elements 面板，你会看到一棵以 <html> 为顶点的树。任何脱离这棵树的标签（比如写在 <html> 外的 <p>、或两个 <html> 并存），都会被浏览器重新组织：
- 孤立的
<p>hello</p>（没包在<html>里）→ 自动包裹成<html><body><p>hello</p></body></html> - 重复的
<html>→ 后续所有内容归入第一个<html>的<body>，第二个<html>被当作无效文本丢弃 - 忘记闭合
<head>，直接写<body>→ 浏览器自动补全</head>，但若中间有脚本，执行时机可能意外提前
真正容易被忽略的是：这些“自动修复”不会报错，但会悄悄改变你预期的 DOM 结构和 CSS 作用域——调试时务必看 Elements 面板里的实际树形，而不是你写的源码。
