<head>和<body>必须是<html>的强制直系子元素，中间不可插入空格、注释或任何标签；<title>仅能位于<head>内且只含纯文本；<p>不得在<head>中，也不能嵌套块级元素。
HTML标签不是随便堆砌的字符串，它们必须严格嵌套在特定位置才能被浏览器正确识别和渲染。写错层级，轻则样式失效，重则内容被静默丢弃或挪到
开头。为什么 <head> 和 <body> 必须是 <html> 的直接子元素
浏览器解析时会强制校验结构：<head> 和 <body> 是 <html> 的强制直系子标签，中间不能插任何东西——哪怕一个空格、一行注释、一个 <p> 或 <div> 都不行。
- Chrome/Firefox 会把非法内容自动移到
<body>开头，并在开发者工具里显示为“#document”下的匿名文本节点 -
<meta charset="UTF-8">如果被挤进<body>，中文很可能乱码 -
<title>若不在<head>内，页面标题栏不显示，SEO 工具也抓不到
<p> 为什么不能放在 <head> 里
<p> 是流式内容元素，设计上只允许出现在 <body> 及其合法容器中（比如 <section>、<article>、<footer>），绝不能是 <head> 的子元素。
- 浏览器会直接把它从
<head>中“踢”出来，塞到<body>开头渲染 -
<p>内部也不能嵌套<div>、<h1>、另一个<p>—— HTML5 虽然放宽了部分限制，但多数场景下会导致验证失败或样式错乱 - 它不是“看起来像段落就行”，而是语义上代表一段独立正文，必须在文档流中按顺序出现
<title> 只能放纯文本，不能嵌套任何标签
<title> 是纯文本容器，语义上只接受字符数据，不能包含 <strong>、<span>、<em> 等任何子标签。
立即学习“前端免费学习笔记（深入）”；
- 写成
<title><strong>首页</strong></title>，浏览器只会提取“首页”两个字，忽略所有标签 - 如果
<title>出现在<body>里，它会被当成普通文本渲染在页面上，而不是设为浏览器标签栏标题 - 多个
<title>标签时，仅第一个生效，后续全部被忽略
真正容易被忽略的是：标签关系不是视觉对齐问题，而是树状结构的强制约束。写错一次嵌套，可能不会报错，但会悄悄破坏可访问性、SEO 和未来维护的确定性。
