块级标签默认独占一行、自上而下排列，撑满父容器宽度，构成页面骨架；常见标签包括div、p、h1-h6等，display默认为block，支持宽高设置且可嵌套行内或块级元素，但需遵守html语义约束（如p内不可嵌div）。
块级标签怎么影响文档流和视觉布局
块级标签（比如 <p></p>、<div>、<code><h1></h1>）默认占据一整行，前后自动换行，这是它们参与文档流最直接的表现。浏览器渲染时，会把它们按顺序从上到下堆叠，每个块独占一行宽度（除非被 CSS 显式限制），父容器有多宽，它就撑多宽。
这意味着：即使你没写任何 CSS，<div> 和 <code><p></p> 也会天然分隔内容区域；而把多个 <span></span> 放一起，它们可能挤在同一行——块级标签就是靠这个“强制换行+占满行宽”来建立页面骨架的。
- 常见块级标签包括：
<div>、<code><p></p>、<h1></h1>–<h6></h6>、<ul></ul>、<ol></ol>、<li>、<section></section>、<header></header>、<footer></footer>、<article></article> - 它们的
display默认值是block，可通过 CSS 改为inline或flex等，但语义不变 - 嵌套时注意：块级元素可以包含其他块级或行内元素，但
<p></p>里不能放<div>（HTML 规范禁止，浏览器会自动闭合 <code><p></p>）为什么不用 div 套一切，而要用语义化块级标签
单纯用
<div> 也能实现布局，但会丢失结构信息。搜索引擎、屏幕阅读器、甚至开发者自己维护代码时，都依赖标签名理解内容意图。 <p>比如 <code><header></header>不只是个带样式的容器，它明确表示“页面顶部导航区”；<article></article>表示独立可复用的内容单元；<nav></nav>暗示这里是一组导航链接——这些不是装饰，是机器可读的文档结构信号。-
<h1></h1>到<h6></h6>构成标题层级，跳级（如<h2></h2>后直接<h4></h4>）会破坏大纲，影响 SEO 和无障碍访问 -
<section></section>应包裹有共同主题的一组内容，并建议配一个<h2></h2>或更高级标题 -
<aside></aside>表示与主内容相关但可分离的旁注，不是所有侧边栏都适合用它
块级标签在实际排版中容易被忽略的细节
很多问题不是出在“不会用”，而是对默认行为和隐含约束缺乏意识。比如：
-
<p></p>自带上下外边距（margin），连续两个<p></p>之间看起来空很大，其实是 margin 折叠导致的，不是“多了一行空白” -
<hr>是块级自闭合标签，但它没有内容，只画一条线，别试图在里面放文字或子元素 -
<ul></ul>和<ol></ol>默认有左内边距（padding-left）和项目符号，重置样式时要同时清padding和list-style - 用
<div> 做按钮或链接时，记得加 <code>role="button"或tabindex，否则键盘用户无法聚焦——块级本身不带交互语义什么时候该用块级标签，什么时候该用 CSS 控制布局
块级标签解决的是“这是什么”，CSS 解决的是“它长什么样、放在哪”。两者分工明确，混用或替代都会出问题。
例如：想让几个图标横向排列，不该把它们包进
<p></p>再用text-align对齐；而该用<div> 或 <code><nav></nav>包裹，再用display: flex控制流向。反过来，如果一段文字确实是独立段落，就该用<p></p>，而不是用<span></span>加display: block——后者绕过了语义，还增加了维护成本。- 优先选语义化块级标签定义结构，再用 CSS 调整表现
- 避免仅为了“让它换行”而滥用
<div>；也别为了“省一个标签”把标题硬塞进 <code><span></span> - 现代布局（Flex/Grid）常作用于块级容器，但容器本身的语义仍由标签决定，不是由 display 属性覆盖的
真正难的不是记住哪些是块级标签，而是判断某段内容在文档逻辑中“属于什么角色”。一个
<div> 可以是 banner、main、sidebar，但只有加上 <code><header></header>、<main></main>、<aside></aside>，才能让结构真正可解析、可扩展、可维护。
-
