浏览器看到的DOM与源码不一致，是因为HTML解析器按规范自动补全缺失结构、纠正非法嵌套（如p内遇div即闭合p）、合并文本节点，生成的DOM是修正后结果而非原始代码。
为什么浏览器看到的DOM和你写的HTML不一致
这不是你写错了，而是浏览器在解析时做了自动修复。HTML解析器不是“照本宣科”，它会按规范补全缺失结构、纠正嵌套错误、合并连续文本节点。
常见现象包括：<tr>被自动塞进<tbody>里，<p>里意外出现<div>会被截断并闭合前一个<p>，多个换行+空格会被压成单个空格文本节点。
-
<table>系列表格标签有强隐式包裹规则，手写时省略<tbody>没问题，但DOM树里一定存在 -
<p>是“自闭合敏感型”块级元素：它不能包含<div><h1>等块级标签，一旦遇到，浏览器立刻闭合当前<p>再开新元素 - 用
document.body.innerHTML读取时，拿到的是“修复后”的HTML，不是源码——调试时别拿它反推原始结构
哪些标签必须存在，且顺序不能调换
<!DOCTYPE html>必须顶格第一行，后面紧跟着<html lang="zh-CN">；<head>必须在<body>之前；<meta charset="UTF-8">必须出现在<title>之前——顺序错一环，中文标题就乱码，或触发怪异的混杂模式。
- 缺
<head>或<body>，浏览器会自动补，但补的位置不可控（比如脚本可能被塞进<head>执行，而你预期它在<body>末尾） -
<meta name="viewport">没写？移动端页面默认缩放为桌面宽度，用户得双指放大才能看清 -
<title>缺失时，浏览器标签页显示为空白或文件名，SEO直接失效
<main>为什么不能放在<article>或<aside>里面
<main>代表整个页面唯一的主要内容区域，语义上不允许嵌套在任何具有局部上下文边界的标签内。规范明确禁止它作为<article><aside><footer><header><nav>的子元素——否则逻辑矛盾：“全局主内容”怎么同时是“某篇文章的附属内容”？
立即学习“前端免费学习笔记（深入）”；
-
<main>在整个文档中只能出现一次，重复会导致无障碍工具误判 - IE11 不识别
<main>，需用<div role="main">降级，或引入main-polyfill -
<section>可以自由嵌套在<main>里，但它自己必须带<h2>–<h6>标题，否则和<div>无区别
如何快速判断嵌套是否合法
别靠肉眼数缩进，先看三件事：父容器是否允许包含该子元素、子元素是否属于“可中断”类型、有没有交叉嵌套。
- 查MDN文档中每个标签的“Permitted content”字段——比如
<p>只允许内联元素，<span>能放进去，<div>不行 -
<img><input><br>这类自闭合标签，一定是某个块级容器的子级，绝不会独立挂在<body>下 - 交叉嵌套如
<div><p><span><em>text</div></em></span></p>是非法的，解析器会强制闭合并重排，结果不可预测
真正容易被忽略的是：语义标签的边界感比视觉布局更硬。写<div class="main">看着像主内容区，但对屏幕阅读器、搜索引擎、甚至某些CSS重置规则来说，它就是个普通容器——<main>不是样式开关，是结构契约。
