一、回顾与本篇目标
在第一篇中，你写出了人生第一个 HTML 页面，并逐行理解了 <!DOCTYPE html>、<html>、<head>、<body>、<h1> 和 <p> 这六个标签的含义。
但一个真正的网页不可能只有标题和段落。你需要知道如何写出层级分明的标题结构、如何在文字中间换行、如何加一条分隔线、如何在代码里写注释给自己看。更重要的是，你需要理解一个贯穿整个前端布局领域的核心概念——块级元素与行内元素。
本篇的目标：
- 掌握
<h1>到<h6>的完整标题体系 - 学会使用
<br>（换行）和<hr>（水平线） - 学会写 HTML 注释
<!-- --> - 彻底理解块级元素和行内元素的区别
学完这一篇，你就能写出结构清晰、层次分明的文章型网页。
二、标题体系：从 <h1> 到 <h6>
HTML 提供了六级标题，从 <h1> 到 <h6>。数字越小，层级越高，浏览器默认渲染的字号也越大。
先看一段完整的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题体系演示</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>在浏览器中打开这个文件，你会看到六行字，从上到下逐级变小。一级标题最大最醒目，六级标题最小。
标题的核心规则
- 一个页面只有一个
<h1>。搜索引擎会把<h1>的内容当作整个页面最核心的主题，用多个<h1>会让搜索引擎困惑。 - 标题层级不能跳跃。就像写一本书，不能第一章下面直接接第三章。正确的结构是：
<h1>下面接<h2>，<h2>下面接<h3>，依此类推。不要从<h2>直接跳到<h5>。 - 标题是块级元素，每个标题默认独占一行，标题之间上下堆叠。
正确与错误示范
正确的层级结构：
<h1>前端开发入门</h1>
<h2>第一章：HTML 基础</h2>
<h3>1.1 什么是 HTML</h3>
<h3>1.2 HTML 标签的结构</h3>
<h2>第二章：CSS 基础</h2>
<h3>2.1 什么是 CSS</h3>
<h3>2.2 选择器入门</h3>错误的层级结构（不要这样写）：
<h1>前端开发入门</h1>
<h3>第一章：HTML 基础</h3> <!-- 跳过了 h2 -->
<h5>1.1 什么是 HTML</h5> <!-- 跳过了 h4 -->层级跳跃不仅让页面结构混乱，还会影响搜索引擎对页面内容的理解。
三、换行标签：<br>
你可能会有一个疑问：如果在 HTML 代码里直接按回车键换行，浏览器会换行吗？
答案是：不会。
看这个例子：
<p>这是第一行。
这是第二行。
这是第三行。</p>你在代码里写了三行文字，中间还打了回车。但在浏览器里，它们会全部挤在同一行显示。
原因：浏览器会把 HTML 代码里的换行符、连续空格都压缩成一个空格。这是一种设计选择——让你可以自由地用换行和缩进来组织代码的排版，而不影响最终页面的显示效果。
如果你确实需要在段落内部换行，就要用 <br> 标签。
<br> 的用法
<br>是英文 break（断开）的缩写。- 它是单标签，没有闭合标签。写法就是
<br>（在 XHTML 时代也写作<br />，效果一样，HTML5 中两种都可以）。 - 它表示在此处插入一个换行符，后面的内容会另起一行显示。
示例：
<p>这是第一行。<br>这是第二行。<br>这是第三行。</p>在浏览器中，这三句话会分别显示在三行上，但它们仍然属于同一个段落。
<br> 和 <p> 的区别
初学者常犯的混淆：该用 <p> 还是 <br>？
- 语义上不同：
<p>表示“一个新的段落”，是两个独立的语义块。<br>只表示“在当前段落内部换行”，不产生新的语义块。 - 间距不同：浏览器默认会给
<p>之间加上较大的上下间距，而<br>只是让文字换到下一行，行与行之间是正常的行间距，没有额外的段落间距。
举个例子，一首诗应该用 <br>，因为每句诗属于同一个语义整体；一篇新闻的各个段落应该用 <p>，因为它们是独立的逻辑单元。
用 <br> 写诗：
<p>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>四、水平线标签：<hr>
<hr> 是英文 horizontal rule（水平线）的缩写。
- 它也是单标签，没有闭合标签。
- 作用：在页面上画一条横跨整行的水平分割线，用来在视觉上分隔不同主题的内容。
示例：
<h2>第一节：HTML 基础</h2>
<p>这是第一节的内容。</p>
<hr>
<h2>第二节：CSS 基础</h2>
<p>这是第二节的内容。</p>在浏览器中，两个章节之间会出现一条灰色横线，告诉读者“上面一个话题结束了，下面是一个新话题”。
默认样式是一条灰色的细线，但你可以用 CSS 来改变它的颜色、粗细、宽度等。这些我们在 CSS 篇再讲。
五、注释标签：<!-- -->
注释是写给人看的内容，浏览器会完全忽略它，不会显示在页面上。
写法：
<!-- 这是注释，浏览器不会显示 -->注释的常见用途：
- 标记代码区块：在长文件中写注释来标记“从这里开始是导航栏”、“这里是页脚”等，方便自己日后维护。
- 暂时隐藏内容：当你不想删除某段代码但又想暂时让它不显示时，可以用注释包裹起来。
- 记录待办事项：比如
<!-- TODO：这里还需要添加一个图片 -->。
完整示例：
<body>
<!-- 页面头部开始 -->
<h1>我的博客</h1>
<p>欢迎来到我的个人博客。</p>
<!-- 页面头部结束 -->
<hr>
<!-- TODO：这里稍后要加一篇文章 -->
<!--
<p>这段代码暂时不需要，先注释掉。</p>
-->
</body>在浏览器中打开这个页面，你只能看到标题、欢迎语和水平线。所有写在 <!-- --> 里的内容都不可见。
注意事项：
- 注释不能嵌套。你不能在注释里再写一个注释。
- 不要在注释里包含两条连续的短横线
--（除了开始和结束标记本身）。
六、本篇核心概念：块级元素 vs 行内元素
这是 HTML 和 CSS 中最重要的概念之一。理解它，你就能明白为什么有些标签会“自动换行”，有些不会。
什么是块级元素
块级元素（block-level element）有以下特征：
- 独占一行。无论内容多短，它后面的内容都会被“挤”到下一行。
- 宽度默认撑满父容器。如果不设置宽度，它会自动伸展到父元素的整个宽度。
- 可以设置宽高。你可以用 CSS 来指定它的宽度和高度。
我们目前学过的块级元素：
<h1>到<h6><p><hr>（水平线也是一个块级元素）<div>（下一篇会学）
什么是行内元素
行内元素（inline element）有以下特征：
- 不换行。多个行内元素会排列在同一行，直到这一行排不下才自动折行。
- 宽度由内容决定。元素有多宽，取决于里面内容的长度，不会自动撑满父容器。
- 不能直接设置宽高（这一点在 CSS 篇会深入讲）。
我们目前还没有正式学行内元素，但可以先预告一下，常见的行内元素有：
<a>（超链接）<span>（通用行内容器）<strong>（加粗强调）<em>（斜体强调）<img>（图片，比较特殊，属于行内替换元素）
一张对比表
| 特性 | 块级元素 | 行内元素 |
|---|---|---|
| 是否独占一行 | 是 | 否，和其他元素排列在同一行 |
| 默认宽度 | 撑满父容器 | 由内容决定 |
| 能否设置宽高 | 能 | 不能（特殊元素除外） |
| 典型代表 | <h1>、<p>、<div> |
<a>、<span>、<strong> |
视觉化理解
想象你正在 Word 里排版：
- 块级元素 就像是按了回车键后产生的新段落——它总是另起一行开始。
- 行内元素 就像是在同一个段落里，给某几个字加粗或加下划线——它不影响整体换行，只是改变了行内一部分内容的样式。
这个概念在下一篇讲链接和图片时会变得更加直观，因为你会亲眼看到：链接可以和周围的文字排在同一行，而标题和段落总是独占一行。
七、本篇完整代码示例
下面是一段综合运用了本篇所有标签的代码。请你手敲一遍，然后在浏览器中查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第二篇综合练习</title>
</head>
<body>
<!-- 文章主标题 -->
<h1>我的学习笔记</h1>
<!-- 第一个章节 -->
<h2>一、HTML 标题</h2>
<p>HTML 提供了六级标题，从 h1 到 h6。数字越小，层级越高。</p>
<p>
一般来说，<br>
一个页面只有一个 h1，<br>
其余标题按层级嵌套使用。
</p>
<hr>
<!-- 第二个章节 -->
<h2>二、换行与分隔线</h2>
<p>br 标签用于段落内部换行。</p>
<p>hr 标签用于不同主题之间的视觉分隔。</p>
<hr>
<!-- 第三个章节 -->
<h2>三、块级元素与行内元素</h2>
<p>块级元素独占一行，行内元素和其他元素共处一行。</p>
<!-- TODO：后面学了 a 标签后，在这里补充一个行内元素的例子 -->
</body>
</html>八、本篇动手练习
练习 1：标题层级练习
新建一个文件 practice2-1.html，用正确的标题层级写出你的个人简介结构：
<h1>关于我</h1>
<h2>基本信息</h2>
<h3>姓名</h3>
<h3>所在地</h3>
<h2>兴趣爱好</h2>
<h3>阅读</h3>
<h3>编程</h3>练习 2：br 和 p 的区别练习
新建 practice2-2.html，用 <br> 写一首你喜欢的诗或歌词。然后用 <p> 写三段文字。对比浏览器中两者的间距差异。
练习 3：综合练习
新建 practice2-3.html，手敲上面第七节的完整代码。然后做以下修改：
- 在每个
<hr>前面加一行注释，说明这条分隔线的作用。 - 在最后的 TODO 注释下面，自己加一个
<h3>和一段<p>。 - 故意把
<!-- -->写成<!--- --->或漏掉一个短横线，看看浏览器会不会显示出注释内容。
九、本篇小结
这一篇你学会了：
- 六级标题
<h1>到<h6>的正确使用方式和层级规则 <br>用于段落内部换行，<p>用于区分段落<hr>用于插入水平分隔线<!-- -->用于写注释，浏览器不显示- 块级元素（如
<h1>、<p>）独占一行，宽度撑满父容器 - 行内元素（如
<a>、<span>）不换行，宽度由内容决定
你现在已经能用 HTML 写出一篇结构清晰、层级分明、有换行有分隔线、还带注释的文章型网页了。虽然还缺图片和链接，但纯文字内容的组织能力你已经具备了。
下一篇预告
下一篇，我们将学习三个在实际网页中使用频率极高的标签：超链接 <a>（让你的页面能跳转到其他页面）、图片 <img>（让你能展示图像）、以及列表 <ul> 和 <ol>（让你能写出带项目符号或编号的列表）。我们还会学习通用的块级容器 <div> 和行内容器 <span>，它们是 CSS 布局的基石。你还会亲眼验证块级元素和行内元素的区别是如何在真实标签上体现的。
前端·零基础入门专题，每周更新。
暂无评论内容