讲解

标题和段落是网页文字的主体。HTML 提供六级标题：<h1> 到 <h6>，数字越小级别越高、默认字号越大。标题表达的是文档的大纲结构，就像一本书的章、节、小节：<h1> 是页面主题，每页通常只有一个；<h2> 是主要板块；<h3> 是板块下的小节，依此类推。搜索引擎和屏幕阅读器都会依据标题层级理解页面，所以选择标题级别的唯一依据是内容的层级关系，而不是「我想要多大的字」——字号交给 CSS 调。

<p> 是段落元素，网页正文的基本单位。浏览器会自动在段落之间留出间距，所以永远不要用连续多个 <br> 或空段落来「撑开」版式。<br> 是换行，只用于地址、诗歌这类「语义上确实属于同一段、只是要换行」的场景；<hr> 是主题分隔线，表示内容话题的切换，不要把它当装饰线用。

还有两个与空白相关的要点：一是浏览器会把连续的空白（空格、换行、Tab）折叠成一个空格，你在源码里敲一百个空格，页面上也只显示一个——想保留原始的换行与空格排版（比如代码片段、ASCII 画），用 <pre> 预格式化元素；二是不要在标题、段落里塞 <div> 等块级元素，<p> 里只能放行内内容，否则浏览器会自作主张提前闭合段落。

示例

<h1>HTML 教程</h1>
<p>本教程系统讲解 HTML 的核心概念。</p>

<h2>第一章：基础</h2>
<p>第一章介绍文档结构。</p>
<h3>1.1 标题元素</h3>
<p>h1 到 h6 共六级。</p>

<h2>第二章：进阶</h2>
<p>第二章介绍语义化。</p>

<hr />

<!-- pre 保留原始空白，适合代码与排版文本 -->
<pre>
姓名    分数
小明    92
小红    88
</pre>

<!-- 地址类内容才用 br -->
<p>地址：北京市海淀区<br />中关村大街 1 号</p>

常见坑

  • 跳级使用标题：h1 之后直接 h4，大纲断了层。屏幕阅读器用户靠标题跳转导航，跳级会让他们迷失。级别可以回退（h3 之后回 h2），但不要向下跳。
  • 用标题当「大号加粗字」：想要大字号请用 CSS 的 font-size，标题级别永远反映内容层级。
  • 用多个 或空 控制间距：间距是样式问题，交给 CSS 的 margin。结构上滥用换行和空段落会让维护者抓狂。
  • 一页多个 或无 ：HTML5 虽允许多个，但「一页一个 h1、表达页面主题」仍是最稳妥、对 SEO 最友好的实践。

小结

h1–h6 表达内容大纲而非字号，每页一个 h1、层级不跳跃；p 是段落，br 只管诗歌地址类换行，hr 表示话题切换，pre 保留原始空白。下一章学习段落内部的文本格式化元素。