HTML块级元素是页面布局中占据一整行空间的元素，这类元素会在页面中默认以块的形式排列，不会和其他元素在同一行显示，是构建页面结构的核心组成部分。
块级元素的核心特性
块级元素有以下几个明确的特性，通过这些特性可以快速判断一个元素是否为块级元素：
- 默认情况下，块级元素会独占一整行，其宽度默认填充父元素的可用宽度，高度由自身内容决定。
- 块级元素可以设置宽度、高度、内边距和外边距，这些属性都会生效，不会影响其他元素的排列。
- 块级元素内部可以包含其他块级元素或者行内元素，部分特殊的块级元素对嵌套内容有规范要求。
- 块级元素在页面中会以新行的形式开始和结束，前后都会自动换行。
常见的HTML块级元素标签
以下是开发中常用的块级元素标签，每个标签都有对应的使用场景：
| 标签名称 | 标签说明 | 使用场景 |
|---|---|---|
| <div> | 无语义的通用块级容器 | 用于划分页面区域，配合CSS进行布局 |
| <h1>到<h6> | 标题标签，层级从大到小 | 用于展示页面的各级标题 |
| <p> | 段落标签 | 用于包裹文本段落内容 |
| <ul> | 无序列表容器 | 用于展示无顺序的列表内容 |
| <ol> | 有序列表容器 | 用于展示有顺序的列表内容 |
| <li> | 列表项标签 | 用于作为<ul>或<ol>的子元素 |
| <header> | 页头语义标签 | 用于包裹页面的头部区域内容 |
| <footer> | 页脚语义标签 | 用于包裹页面的底部区域内容 |
| <section> | 区域语义标签 | 用于包裹页面中具有独立语义的区域 |
| <article> | 文章语义标签 | 用于包裹独立的文章类内容 |
| <blockquote> | 块级引用标签 | 用于展示大段的引用内容 |
块级元素与行内元素的区别
很多开发者容易混淆块级元素和行内元素，两者的核心差异如下：
- 排列方式：块级元素独占一行，行内元素会和其他行内元素在同一行排列，空间不足时才会换行。
- 属性支持：块级元素支持设置宽高、内外边距，行内元素默认不支持设置宽高，上下外边距通常不生效。
- 嵌套规则：块级元素可以嵌套块级和行内元素，行内元素一般只能嵌套行内元素，不能嵌套块级元素。
块级元素代码示例
以下代码展示了常见块级元素的实际表现，可以直接复制到HTML文件中运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>块级元素示例</title>
<style>
.block-demo {
/* 给块级元素设置边框方便观察 */
border: 1px solid #333;
margin: 10px 0;
padding: 10px;
}
.div-demo {
width: 300px;
height: 100px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h2 class="block-demo">这是h2标题，属于块级元素</h2>
<p class="block-demo">这是p段落，属于块级元素，独占一行</p>
<div class="block-demo div-demo">
这是div容器，设置了宽高，属于块级元素
</div>
<ul class="block-demo">
<li>列表项1，li是块级元素</li>
<li>列表项2，li是块级元素</li>
</ul>
</body>
</html>块级元素的注意事项
在使用块级元素时，需要注意以下几点：
- 不要滥用<div>标签，在语义化要求高的场景中，优先使用<header>、<section>等语义化块级标签。
- 部分块级元素有固定的嵌套规则，比如<ul>和<ol>的直接子元素只能是<li>，不能放置其他标签。
- 通过CSS的
display属性可以将块级元素转换为行内元素或者行内块元素，也可以将行内元素转换为块级元素，开发者可以根据布局需求灵活调整。
HTMLblock_level_element网页布局前端开发修改时间：2026-06-06 17:57:36