HTML 完整开发教程 第5章

HTML 常用文本标签

网页最基础的内容就是 文本。
无论是博客、新闻网站还是企业官网，网页中大部分内容都是文字。

HTML 提供了一系列 文本标签 用于组织和描述文本内容。

本章将学习：

  • 标题标签

  • 段落标签

  • 换行标签

  • 文本强调标签

  • 引用标签

  • 代码标签

  • 文本语义标签

学习完本章，你将能够：

  • 使用 HTML 构建完整文章结构

  • 编写结构清晰的网页内容

  • 使用语义化标签增强可读性与 SEO

5.1 标题标签

HTML 提供 6级标题标签：

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

示例：

<h1>网站主标题</h1>
<h2>文章标题</h2>
<h3>小节标题</h3>
<h4>子标题</h4>
<h5>更小标题</h5>
<h6>最小标题</h6>

浏览器显示效果：

H1 最大
H6 最小

使用建议

网页结构通常是：

h1  页面标题
h2  章节
h3  小节

例如：

<h1>HTML 教程</h1>

<h2>HTML 基础</h2>
<h3>HTML 结构</h3>
<h3>HTML 标签</h3>

<h2>HTML 进阶</h2>

5.2 段落标签

HTML 使用 <p> 表示段落。

示例：

<p>
HTML 是一种用于构建网页结构的标记语言。
</p>

<p>
它是 Web 开发的基础技术之一。
</p>

浏览器会自动：

  • 在段落之间添加间距

  • 自动换行

注意：

HTML 会忽略多余空格，例如：

<p>
HTML      是      网页语言
</p>

浏览器仍然只显示一个空格。

5.3 换行标签

如果需要 强制换行，可以使用：

<br>

示例：

<p>
第一行<br>
第二行<br>
第三行
</p>

显示：

第一行
第二行
第三行

注意：

br 是 单标签，不需要结束标签。

5.4 水平分割线

HTML 可以使用 <hr> 创建水平线。

示例：

<hr>

效果：

------------

通常用于：

  • 文章分隔

  • 内容分区

例如：

<p>第一部分</p>

<hr>

<p>第二部分</p>

5.5 文本加粗与强调

HTML 提供多种文本强调方式。

加粗

<b>加粗文本</b>

示例：

<p>这是<b>重要内容</b></p>

强调（语义更强）

<strong>重要内容</strong>

区别：

标签

含义

b

视觉加粗

strong

语义强调

推荐使用：

strong

因为：

更利于 SEO 和语义化。

5.6 斜体文本

HTML 使用以下标签表示斜体：

<i>

示例：

<p>这是<i>斜体</i>文本</p>

语义版本：

<em>

示例：

<p>这是<em>强调</em>文本</p>

区别：

标签

含义

i

视觉斜体

em

语义强调

推荐：

em

5.7 删除线

HTML 可以显示删除文本。

标签：

<del>

示例：

<p>
原价：<del>199元</del>
现价：99元
</p>

显示：

原价： ~199元~
现价：99元

5.8 下划线

HTML 提供：

<u>

示例：

<p>这是<u>下划线</u>文本</p>

但现代 Web 开发中：

通常用 CSS 实现下划线。

5.9 上标与下标

HTML 支持数学标记。

上标

<sup>

示例：

<p>2<sup>3</sup> = 8</p>

显示：

2³

下标

<sub>

示例：

<p>H<sub>2</sub>O</p>

显示：

H₂O

5.10 引用标签

HTML 提供引用语义。

短引用

<q>

示例：

<p>他说：<q>学习 HTML 很简单</q></p>

浏览器会自动添加引号。

长引用

<blockquote>

示例：

<blockquote>
学习编程最重要的是坚持练习。
</blockquote>

常用于：

  • 文章引用

  • 名人语录

5.11 代码标签

HTML 提供代码显示标签。

<code>

示例：

<p>使用 <code>print()</code> 输出内容</p>

显示：

print()

代码块

通常搭配：

<pre>

示例：

<pre>
<code>
print("Hello World")
</code>
</pre>

pre 表示：

保持原始格式。

5.12 小文本

HTML 提供：

<small>

示例：

<p>价格 99 元 <small>不含税</small></p>

常用于：

  • 注释

  • 版权说明

5.13 标记文本

HTML 提供：

<mark>

示例：

<p>HTML 是 <mark>网页开发基础</mark></p>

效果：

高亮文本

5.14 HTML 文本结构示例

完整示例：

<h1>HTML 教程</h1>

<p>
HTML 是 <strong>网页开发基础语言</strong>。
</p>

<h2>HTML 特点</h2>

<p>
HTML 非常 <em>容易学习</em>。
</p>

<p>
学习 HTML 后可以创建 <mark>网站</mark>。
</p>

<hr>

<p>
示例代码：
</p>

<pre>
<code>
<h1>Hello HTML</h1>
</code>
</pre>

本章小结

在本章中，我们学习了：

文本标签：

h1-h6 标题
p 段落
br 换行
hr 分割线

文本语义：

strong 强调
em 强调
mark 高亮
small 小字

文本样式：

b 加粗
i 斜体
u 下划线
del 删除线

其他标签：

sup 上标
sub 下标
blockquote 引用
code 代码
pre 代码块

下一章预告

下一章我们将学习：HTML 链接与图片

包括：

  • a 标签

  • 超链接原理

  • 内部链接

  • 外部链接

  • 图片标签 img

  • 图片路径

  • 图片 SEO

并开始构建真正的网站页面。