判断html标签是块级还是行内，应依据浏览器默认渲染行为和html规范定义；块级元素独占一行、可设宽高和内外边距，行内元素仅占内容宽、不可设height及上下margin，替换元素（如）表现特殊，真实display值需用getcomputedstyle获取。
怎么判断一个 HTML 标签是块级还是行内？
看浏览器默认渲染行为和规范定义，不是看它“长得像不像”容器。块级元素（如 <div>、<code><p></p>）天生独占一行，能设宽高、内外边距；行内元素（如 <span></span>、<a></a>）只占内容宽度，不能直接设 height、margin-top/bottom，也不会换行。
-
<img alt="html语句嵌套怎么区分块级行内_嵌套类型说明【说明】" >、<input>是替换元素，表现像行内但可设宽高，别误当纯行内处理 -
<button></button>默认是行内级（display: inline-block），但很多样式会覆盖它，实际常当块级用 - 用
getComputedStyle(el).display在控制台查真实值，比背列表更可靠
哪些嵌套是非法的、浏览器会自动修复？
HTML 解析器遇到非法嵌套（比如 <p></p> 里放 <div>）不会报错，而是静默修正 DOM 结构——这正是最坑的地方：你写的和最终生效的不是一回事。
<ul><li>
<code><p></p> 内部禁止直接嵌套 <div>、<code><h1></h1>、<p></p>，否则浏览器会把前一个 <p></p> 自动闭合
<li> 只能放在 <ul></ul> 或 <ol></ol> 里，外面包个 <div> 不违法，但放 <code><table> 外面就会被截断
<li>
<code> 里写 <script></script> 是合法的，但放 <div> 就会被移到 <code> 开头
display 值怎么影响嵌套逻辑？
CSS 的 display 会改写元素的“盒类型”，但不改变 HTML 的嵌套合法性检查——解析阶段早于样式计算，所以 display: block 不会让 <span></span> 被允许包 <div>。
<ul>
<li>
<code><span style="display: block"></span> 视觉上像块级，仍不能合法嵌套 <p></p>，否则结构仍被浏览器修正
<div style="display: inline"> 会失去块级特性（比如换行），但它在 DOM 中仍是块级语义，不影响校验
<li>真正影响嵌套容错的是 HTML5 内容模型（如 <code>phrasing content vs flow content），不是 CSS怎么快速验证嵌套是否合规？
靠人眼或编辑器高亮不可靠，得用工具链确认解析结果。DevTools 的 Elements 面板显示的是修正后的 DOM，不是你写的源码。
立即学习“前端免费学习笔记（深入）”；
- 用
document.body.innerHTML查看运行时实际结构，对比原始字符串 - VSC 插件 “Auto Close Tag” 或 “HTMLHint” 能标出部分静态违规，但覆盖不全
- 服务端渲染时用
parse5或jsdom模拟解析，比前端更早暴露问题
