HTML 文本格式化
# HTML 文本格式化
HTML 提供了多种标签，用于文本的格式化。这些标签可以改变文本的外观，使其更具表现力和易读性。
# 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i> 标签使用。
# 1. HTML 文本格式化标签
HTML 提供了以下常用的文本格式化标签：
| 标签 | 描述 | 示例 |
|---|---|---|
<b> | 加粗文本 | <b>加粗文本</b> |
<i> | 斜体文本 | <i>斜体文本</i> |
<strong> | 强调的加粗文本 | <strong>加粗文本</strong> |
<em> | 强调的斜体文本 | <em>斜体文本</em> |
<mark> | 突出显示文本 | <mark>高亮文本</mark> |
<small> | 小号文本 | <small>小号文本</small> |
<del> | 删除线文本 | <del>删除线文本</del> |
<ins> | 插入的文本 | <ins>插入的文本</ins> |
<sub> | 下标文本 | 这是 <sub>下标</sub> |
<sup> | 上标文本 | 这是 <sup>上标</sup> |
<code> | 计算机代码文本 | <code>代码文本</code> |
<pre> | 预格式化文本 | <pre> 预格式化文本 </pre> |
<blockquote> | 块引用 | <blockquote>引用文本</blockquote> |
<q> | 短引用 | <q>短引用文本</q> |
<abbr> | 缩写 | <abbr title="World Wide Web">WWW</abbr> |
这些标签用于强调和格式化文本，使网页内容更具表现力和层次感。
# 2. HTML "计算机输出" 标签
HTML 提供了一些特殊的标签用于表示计算机代码或计算机输出：
| 标签 | 描述 | 示例 |
|---|---|---|
<code> | 计算机代码文本 | <code>代码文本</code> |
<pre> | 预格式化文本 | <pre>预格式化的代码块</pre> |
<kbd> | 表示键盘输入 | <kbd>Ctrl+C</kbd> |
<samp> | 示例计算机代码输出 | <samp>输出示例</samp> |
<var> | 表示变量 | <var>x</var> = 5 |
这些标签专门用于处理代码或计算机输出，确保其在网页中正确显示。
# 示例说明
加粗文本：
<b>加粗文本</b>1- 使用
<b>标签可以将文本显示为粗体，虽然不强调其重要性。
- 使用
斜体文本：
<i>斜体文本</i>1- 使用
<i>标签可以将文本显示为斜体，同样不强调其重要性。
- 使用
计算机代码：
<code>电脑自动输出</code>1- 使用
<code>标签可以将文本显示为等宽字体，通常用于显示代码。
- 使用
下标和上标：
这是 <sub>下标</sub> 和 <sup>上标</sup>1<sub>标签用于显示下标文本，<sup>标签用于显示上标文本。
# 文本格式化示例
以下是一个完整的示例，展示了如何使用各种文本格式化标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本格式化示例</title>
</head>
<body>
<p><b>加粗文本</b> 使用 <code><b></code> 标签。</p>
<p><i>斜体文本</i> 使用 <code><i></code> 标签。</p>
<p><strong>强调的加粗文本</strong> 使用 <code><strong></code> 标签。</p>
<p><em>强调的斜体文本</em> 使用 <code><em></code> 标签。</p>
<p><mark>突出显示文本</mark> 使用 <code><mark></code> 标签。</p>
<p><small>小号文本</small> 使用 <code><small></code> 标签。</p>
<p><del>删除线文本</del> 使用 <code><del></code> 标签。</p>
<p><ins>插入的文本</ins> 使用 <code><ins></code> 标签。</p>
<p>这是 <sub>下标</sub> 和 <sup>上标</sup> 文本。</p>
<p><code>代码文本</code> 使用 <code><code></code> 标签。</p>
<pre>
预格式化的文本块
使用 <pre> 标签。
</pre>
<p><blockquote>这是一个块引用</blockquote> 使用 <code><blockquote></code> 标签。</p>
<p>这是一个 <q>短引用</q> 使用 <code><q></code> 标签。</p>
<p>缩写 <abbr title="World Wide Web">WWW</abbr> 使用 <code><abbr></code> 标签。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
通过这些格式化标签，可以更好地组织和展示网页内容，提高网页的可读性和用户体验。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05