浏览器会自动修正非法html结构，导致dom与源码不一致：如内嵌块级元素会终止标签，中非子元素被移出，自闭合标签加引发层级偏移，影响布局、css和js。
标签里塞
、或
或，浏览器会当场关掉，后续内容变成兄弟节点——你写的结构和实际DOM根本不是一回事。
为什么
里不能放块级元素
HTML规范规定
只能包含phrasing content（文本、<span></span>、@#@#@#@#@#@#@#@#@#@0，但确保内部不含其他交互控件
自闭合标签加>会偏移整个DOM层级
，后续内容变成兄弟节点——你写的结构和实际DOM根本不是一回事。
为什么
里不能放块级元素
HTML规范规定
只能包含phrasing content（文本、<span></span>、@#@#@#@#@#@#@#@#@#@0，但确保内部不含其他交互控件
>会偏移整个DOM层级<img>、<input>、<br>这些void元素，在HTML5中**禁止闭合**。写成<img>会被解析为两个标签：<img src="x">（被忽略）+ （当作普通开标签），后续所有嵌套整体右移一级。
例如：<div>
<img><p>text</p>
</div>
实际DOM变成：<div><img src="a"></div>
<img src="a"><p>text</p>
这种错位极难肉眼发现，尤其在模板字符串拼接或EJS/Jinja2循环中漏闭合时——建议：
- 编辑器启用HTML Linter，实时标出
Element img is not closed - VS Code安装Auto Close Tag插件，但它默认不干预void元素，需手动禁用其对
<img>类标签的自动补全 - 团队统一约定：所有void元素只写
<img>，绝不加/>或
最隐蔽的坑不在嵌套本身，而在浏览器“容错修正”后的DOM和你源码的差异——永远以DevTools的Elements面板为准，而不是你写的HTML文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
