HTML标签层级由规范强制定义，非缩进决定；写错嵌套会触发浏览器静默修正甚至丢弃内容：<head>和<body>必须为<html>的强制直系子元素，中间不可插入任何内容；<title>只能在<head>内且仅含文本；<p>不可在<head>中，其合法父元素为<body>等流式容器；<main>必须唯一且为<body>直接子元素，不得嵌套于<section>等语义标签内。
HTML标签的层级关系不是靠缩进决定的，而是由规范强制定义的父子/兄弟关系；写错嵌套位置，浏览器不会报错，但会静默修正甚至丢弃内容。
为什么 <head> 和 <body> 必须是 <html> 的直接子元素
浏览器解析时严格按标准校验结构。<head> 和 <body> 是 <html> 的强制直系子标签，中间不能插任何东西——包括空格、注释、<p> 或 <div>。
- Chrome/Firefox 会把非法内容移到
<body>开头，并在开发者工具里显示一个匿名文本节点（#text） -
<title>若被挤到<body>里，它就变成普通文字渲染，而不是页面标题 -
<meta charset="UTF-8">落在<body>中，中文大概率乱码 - 哪怕只多一个换行符或空格，也可能触发浏览器的自动修复逻辑，导致 DOM 结构与源码不一致
<p> 为什么不能放在 <head> 里
<p> 是流式内容元素，语义上只允许作为 <body> 及其子容器（如 <section>、<article>、<footer>）的子元素。
- 如果硬写成
<head><p>test</p></head>，浏览器会把它移出<head>，塞进<body>开头 -
<p>内部不能嵌套<div>、<h1>、另一个<p>—— HTML5 允许极少数例外（如<span>），但多数场景下会导致验证失败或样式错乱 - 它的合法父元素列表是固定的，不是“能放进去就等于能用”
<main> 为什么不能套在 <section> 里
<main> 表示整个文档中唯一、可独立分发的核心内容区，W3C 明确禁止它被 <section>、<article>、<header>、<footer> 等语义边界标签包裹。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<section><main></main></section>—— 浏览器不报错，但语义失效，<main>的“唯一性”被破坏 - 正确做法：主干内容直接用
<main>包裹，内部再用<section>划分小节 - 实际影响：屏幕阅读器可能跳过
<main>的快捷导航，SEO 工具可能降权该区块 -
<main>在整个文档中只能出现一次，且不能是<body>的孙级或更深节点
怎么一眼看穿真实嵌套层级
缩进只是人眼辅助手段，真正要确认层级，得看浏览器 DevTools 中渲染后的 DOM 树，而不是源码格式。
-
<body>下首层缩进元素就是主干起点（如<header>、<main>、<div class="container">） -
<img>、<input>这类自闭合标签一定属于某个容器的子级，哪怕源码里没写闭合或缩进混乱 -
<svg>或<canvas>内部可能有完整子树，不能当成“原子标签”忽略 - 多个
<div>堆叠时，优先查class或id，再结合语义标签反推意图，而非凭空猜父子关系
最常被忽略的是：浏览器静默修正后，DOM 结构和你写的源码已经不同了。调试时盯着 DevTools 的 Elements 面板看，比反复检查缩进更可靠。
