大家好欢迎继续我们的HTML学习之旅。上一节我们认识了HTML的基本骨架和标签分类今天我们来深入了解一下块级元素——它们是网页布局中最核心、最常用的“积木”。一、什么是块级标签块级标签是构成网页结构的主力军它们有以下显著特点独占一行每个块级元素都会从新的一行开始并占据一整行的空间。可设置宽高你可以通过CSS为其指定宽度和高度。宽度默认100%如果不设置宽度它会自动填满父容器的宽度。高度由内容撑开默认情况下它的高度由其内部的内容决定。二、基础块级标签详解1. 标题标签h1~h6用于表示不同级别的标题h1语义最重h6语义最轻。特点独占一行自带加粗效果。上下有默认的外边距。字号从h1到h6逐级减小。使用规范一个页面通常只使用一次​h1标签常用于网站Logo或主标题这对SEO搜索引擎优化很重要。标题标签应该按照层级合理使用不要跳级例如h1后面直接用h3。h1一级标题 - 网站主标题/h1 h2二级标题 - 章节标题/h2 h3三级标题 - 小节标题/h3 !-- ... -- h6六级标题/h62. 段落标签p用于定义一个文本段落是包裹大段文字的首选。特点上下有16像素的默认外边距。非常重要p标签内部不能包裹块级标签如div、h1等只能包含文字、行内元素或行内块元素。p这是一个标准的段落文本。浏览器会自动在段落前后添加一些间距让文章看起来更清晰。/p p这是第二个段落展示了段落标签的换行效果。/p3. 居中标签center已废弃这个标签曾经用于让内容水平居中显示但在HTML5 中已被废弃。现在强烈建议使用 CSS 来实现居中效果。/* 推荐使用CSS实现居中 */ .center-content { text-align: center; }4. 标题分组标签hgroup用于将一组相关的标题如主标题和副标题组合在一起形成一个逻辑整体。hgroup h2静夜思/h2 h3唐 · 李白/h3 /hgroup5. 通用容器标签divdiv是块级元素中最重要的一个它是一个无语义的通用容器。使用场景用于布局将页面划分成不同的区域。用于分组把功能相近的元素放在一起方便统一管理样式或脚本。div classproduct-card h3商品名称/h3 p商品描述信息.../p p价格¥99.00/p /div6. 换行标签br用于在文本中强制换行。它是一个空标签自结束标签不需要闭合。第一行文字br 第二行文字另起一行7. 水平分割线hr用于在视觉上分隔不同主题的内容块。h2第一部分背景介绍/h2 p一些背景信息.../p hr h2第二部分核心内容/h2 p核心内容详情.../p三、HTML5 新增的结构标签语义化标签HTML5 引入了许多具有明确语义的块级标签用来替代部分div让代码更具可读性和结构化。1. 页面整体结构标签标签语义使用场景header页眉/头部通常包含Logo、导航、搜索框等main页面主体内容每个页面只应使用一次包含核心内容footer页脚/底部通常包含版权信息、联系方式、友情链接等header网页头部区域/header main网页主体内容区域/main footer网页底部区域/footer2. 内容结构标签标签语义使用场景nav导航链接区域主导航、侧边栏导航aside侧边栏/附属信息广告、相关文章、目录article独立的内容单元博客文章、新闻稿件、论坛帖子section通用的内容区块文章内的章节、页面的分区header nav顶部导航/nav /header main article h2文章标题/h2 section h3第一节/h3 p第一节内容.../p /section section h3第二节/h3 p第二节内容.../p /section /article aside h3相关链接/h3 ul li链接一/li li链接二/li /ul /aside /main footer p© 2026 我的博客. All rights reserved./p /footer四、列表标签列表是组织有序列或无序列项目的常用方式。1. 有序列表olli用于表示有明确顺序的项目列表。默认样式​ 上下16px外边距左侧40px内边距带有数字序号1, 2, 3...。ol li第一步打开冰箱门/li li第二步把大象放进冰箱/li li第三步关上冰箱门/li /ol2. 无序列表ulli用于表示没有特定顺序的项目列表。默认样式​ 上下16px外边距左侧40px内边距带有实心圆点标记。ul li苹果/li li香蕉/li li橙子/li /ul3. 定义列表dldtdd用于表示术语及其定义的列表类似于词典。默认样式​ 上下16px外边距dd有40px的左外边距。dl dtHTML/dt dd超文本标记语言用于创建网页结构。/dd dtCSS/dt dd层叠样式表用于控制网页的外观。/dd /dl4. 列表使用注意事项严格嵌套ol和ul的直接子元素只能是li同理dl的直接子元素只能是dt和dd。去除默认样式在实际开发中我们经常用 CSS 去掉列表的默认样式如list-style: none; padding: 0;只保留其语义结构。修改项目符号可以通过type属性修改。ol:1默认数字,a小写字母,A大写字母,i小写罗马数字,I大写罗马数字ul:disc默认实心圆,square方块,circle空心圆五、一个重要概念titlevsh1这两个都是标题但作用完全不同标签位置作用重要性titlehead中定义浏览器标签栏显示的标题也是搜索引擎结果中的标题。整个页面语义最重​h1body中定义页面内容的可见主标题。页面内容中语义最重​简单来说title是给搜索引擎和浏览器看的h1是给用户看的。六、HTML编写规范语义化优先选择合适的标签来表达内容含义而不是只用div和span。避免不规范嵌套牢记p内不能放块级元素a内不能放a。代码整洁合理缩进适当注释提高代码可维护性。总结今天我们学习了最常用的块级标签包括基础的标题、段落、容器以及HTML5带来的语义化结构标签和三种列表。掌握了这些你已经可以用HTML搭建出一个结构清晰的网页骨架了下一节我们将探索行内标签和行内块标签img敬请期待。