HTML文档结构是严格父子关系的树状模型，<head>和<body>必须为<html>的直系子元素，<title>只能在<head>内且仅含文本，<p>不可在<head>中，否则浏览器会静默修正。

HTML文档结构不是随意拼凑的标签堆叠，而是一棵有严格父子与兄弟关系的树。写错层级，浏览器不会报错，但会静默修正——你写的 <p> 被塞进 <head>，它会被自动挪到 <body> 开头；<title> 放在 <body> 里，就只是普通文本，根本不会变成浏览器标签页标题。

<head> 和 <body> 必须是 <html> 的直接子元素

这是 HTML 规范强制要求的层级关系。中间插任何东西（空格、注释、<p>、<div>）都会触发浏览器纠错逻辑：

• Chrome/Firefox 会把非法内容移到 <body> 开头，并在开发者工具中显示一个匿名文本节点（#document 下多出一行灰色文字）
• <meta charset="UTF-8"> 若被挤到 <body> 里，中文极大概率乱码
• <title> 若不在 <head> 内，SEO 工具抓不到，页面标题栏也不生效
• 哪怕只多一个换行或空格，也属于“非直系子元素”，同样触发修正

<title> 只能出现在 <head> 中且仅含纯文本

<title> 是语义专用容器，不是样式容器。它不支持嵌套任何标签，也不允许子元素：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 写成 <title><strong>首页</strong></title> —— 浏览器只提取文字 “首页”，<strong> 被忽略
• 多个 <title> 标签时，仅第一个生效，后续全部丢弃
• <title> 出现在 <body> 中，会作为普通段落渲染在页面上，而非设置标签栏标题

<p> 不能作为 <head> 的子元素

<p> 是流式内容元素，设计目标就是承载正文段落。它的合法父元素必须是块级容器，比如 <body>、<section>、<article> 等：

立即学习“前端免费学习笔记（深入）”；

• <p> 出现在 <head> 中，浏览器会把它移出并插入 <body> 开头（不是报错，是静默迁移）
• <p> 内部不能再嵌套 <div>、<h1> 或另一个 <p> —— HTML5 允许部分嵌套，但多数场景下会导致验证失败或 CSS 选择器失效
• 常见误用：<head><p>SEO 描述</p></head> —— 实际效果是页面顶部突然冒出一行“SEO 描述”

真正容易被忽略的，不是“该不该写”，而是“写了但没生效”——因为浏览器替你改了，你却没意识到 DOM 已被重排。检查结构，别只看源码，一定要打开开发者工具看实时 DOM 树。