标题、段落与文本

网页上 90% 的内容都是文字。这一章讲怎么用 HTML 正确地组织文字——标题、段落、强调、换行、上下标、行内片段。读完你就能把任意一段文字写成结构清晰的网页内容。

1. 六级标题 h1 ~ h6

HTML 提供六级标题,从 h1 到 h6。数字越小字号越大、层级越浅;数字越大字号越小、层级越深:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!-- 数字越小字号越大、层级越浅;
     数字越大字号越小、层级越深 -->

关于标题,有几个关键点:

• 语义不只是字号:标题标签传达"这是标题"的语义,搜索引擎和读屏软件据此理解页面结构。不要为了"字大"而用 h1——字号该用 CSS 调。
• 每个页面建议只有一个 h1:代表页面主主题,SEO 中很重要。
• 按层级用:不要从 h3 直接跳到 h5,要保持层级连贯(h1 → h2 → h3)。
• 读屏软件允许视障用户在标题间快速跳转,所以标题用对无障碍意义重大。

2. 段落 p

段落是文字的基本单元,用 p 包裹。浏览器会在段落前后自动加间距,不需要手敲空行:

<p>这是第一段。浏览器会在段落前后自动加间距。</p>

<p>这是第二段。两段之间会有明显的空白。</p>

<p>同一段里
直接敲回车换行,
浏览器会把它折叠成一个空格——
这一段实际显示成一行。</p>

新手最容易踩的坑:在 HTML 里敲回车、连打多个空格,浏览器都会折叠成一个空格。这点和 Word 完全不同。如果想强制换行,用 br;如果想保留原始格式(比如诗歌、代码),用 pre。

3. 换行 br 与分割线 hr

br 是 break(换行)的缩写,强制换行但不结束段落。hr 是 horizontal rule(水平线)的缩写,在主题切换时画一条分割线:

<p>第一行<br>第二行</p>
<!-- br 强制换行,但仍在同一段落内 -->

<p>段落 A</p>
<hr>
<p>段落 B</p>
<!-- hr 是水平分割线,常用于主题切换 -->

别滥用 br:很多人用它制造段落间距,这是错的——段落间距该用 CSS 的 margin。br 只用于"同一段内的强制换行",比如诗歌、地址、歌词。

4. 强调 strong 和 em

strong 表示重要(默认渲染成加粗),em 表示强调(默认渲染成斜体)。两者都带语义,会影响读屏软件的语调:

<p>普通文字 <strong>重要(加粗)</strong> 普通文字。</p>

<p>普通文字 <em>强调(斜体)</em> 普通文字。</p>

<p><strong>外层加粗 <em>内层加粗且斜体</em></strong></p>

<!-- 注意:HTML5 中 strong/em 表示"语义上的重要",
     会影响读屏软件的语调;而 b/i 只是视觉加粗/斜体,
     没有语义。优先用 strong/em。 -->

很多老教程教你用 b(加粗)和 i(斜体),它们视觉效果一样,但没有语义。现代 HTML 优先用 strong / em——除非你只是想要视觉效果而无关语义(比如标价、产品名),才用 b / i。

5. 上下标 sub 和 sup

写化学公式、数学公式时常常需要上下标。用 sub(下标)和 sup(上标):

<p>水是 H<sub>2</sub>O。</p>
<!-- sub 是下标,常用于化学式、脚注 -->

<p>面积公式:S = a<sup>2</sup></p>
<!-- sup 是上标,常用于数学公式、平方立方 -->

6. 行内容器 span

span 是行内级别的通用容器——它本身不带任何样式,专门用来给一小段文字套 CSS 或 JS:

<p>我的名字是 <span class="name">张三</span>,
   来自 <span class="city">北京</span>。</p>
<!-- span 是"行内容器",不自带样式,
     专门用来给一小段文字套 CSS 或 JS。 -->

<p>价格:<span class="price">¥99</span> 元</p>

什么时候用 span?当你只想给一句话里某几个字改色、加下划线、做高亮,但又不想换行——这时就用 span 包起来。块级元素要分组用 div,行内元素要分组用 span。

7. 其他文本类标签

还有一批不太常用但偶尔需要的标签:

• mark:高亮(默认黄色背景),像荧光笔。
• del:删除线,ins:下划线(常用于显示编辑痕迹)。
• small:小一号字(免责声明、版权)。
• code:代码字体(等宽)。
• pre:保留原始格式和空格,常用于显示代码块。
• blockquote:块级引用,默认有左侧缩进。
• q:行内引用,自动加引号。
• abbr:缩写,配 title 属性悬停显示全称。
• time:时间,机器可读。

8. 实战示例:一段排版讲究的正文

把上面学到的标签组合起来,做一段排版讲究的正文:

<p>这是第一段。浏览器会在段落前后自动加间距。</p>

<p>这是第二段。两段之间会有明显的空白。</p>

<p>同一段里
直接敲回车换行,
浏览器会把它折叠成一个空格——
这一段实际显示成一行。</p>

结构清晰、语义明确,这就是好的 HTML 文本组织。

小结

这一章你掌握了 HTML 中所有常用的文本类标签:六级标题、段落、换行、强调、上下标、行内容器。记住几个关键点:标题看语义不看字号、段落间距用 CSS 而非 br、语义优先用 strong/em。下一篇我们看互联网的灵魂——链接与图片。

← 上一篇 HTML 文档骨架

下一篇 链接与图片 →