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