章
目
录
HTML格式化是一种为了使文本看起来更好的过程。HTML使我们能够在不使用CSS的情况下格式化文本。HTML中有许多格式化标签。这些标签用于使文本加粗、斜体或下划线。在HTML和XHTML中有大约14种文本外观的选项可用。
在HTML中，格式化标签分为两类：
- 物理标签：这些标签用于为文本提供视觉外观。
- 逻辑标签：这些标签用于为文本添加一些逻辑或语义值。
注意：有些物理和逻辑标签可能会产生相同的视觉效果，但它们在语义上是不同的。 在这里，我们将学习14种HTML格式化标签。以下是HTML格式化文本的列表。
| 元素名称 | 描述 |
|---|---|
| <b> | 这是一个物理标签，用于加粗标签之间的文本。 |
| <strong> | 这是一个逻辑标签，告诉浏览器文本很重要。 |
| <i> | 这是一个物理标签，用于使文本倾斜。 |
| <em> | 这是一个逻辑标签，用于以斜体显示内容。 |
| <mark> | 该标签用于突出显示文本。 |
| <u> | 该标签用于为标签之间的文本添加下划线。 |
| <tt> | 该标签用于以电传形式显示文本。 (不支持HTML5) |
| <strike> | 该标签用于在文本的一部分上添加删除线。 (不支持HTML5) |
| <sup> | 它在正常文本行的上方显示内容。 |
| <sub> | 它在正常文本行的下方显示内容。 |
| <del> | 该标签用于显示已删除的内容。 |
| <ins> | 该标签显示已添加的内容。 |
| <big> | 该标签用于将字体大小增加一个常规单位。 |
| <small> | 该标签用于将字体大小减小一个单位。从基本字体大小。 |
1）粗体文本
HTML<b>和<strong>格式化元素
HTML <b>元素是一个物理标签，用于以粗体字体显示文本，没有任何逻辑重要性。如果你在<b>…………</b>元素之间写任何内容，它将显示为粗体字母。
请参考以下示例：
<p> <b>Write Your First Paragraph in bold text.</b></p>
效果：
Write Your First Paragraph in bold text.
HTML <strong>标签是一个逻辑标签，它以粗体字体显示内容，并告诉浏览器它的逻辑重要性。如果你在<strong>???????. </strong>之间写任何内容，它将显示为重要文本。
请参考以下示例：
<p><strong>This is an important content</strong>, and this is normal content</p>
效果：
This is an important content, and this is normal content
示例：
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
2）斜体文本
HTML <i> 和 <em> 格式化元素
HTML <i> 元素是一个物理元素，它以斜体字体显示被包围的内容，没有任何附加的重要性。如果你在 <i>…………</i> 元素之间写任何内容，它将显示为斜体字母。
请参考以下示例：
<p> <i>Write Your First Paragraph in italic text.</i></p>
效果：
Write Your First Paragraph in italic text.
HTML <em> 标签是一个逻辑元素，它以斜体字体显示被包围的内容，并具有附加的语义重要性。
请参考以下示例：
<p><em>This is an important content</em>, which displayed in italic font.</p>
效果：
This is an important content, which displayed in italic font.
示例：
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
3）HTML标记格式化
如果你想标记或突出显示文本，你应该将内容写在 <mark>…………</mark> 之间。
请参考以下示例：
<h2> I want to put a <mark> Mark</mark> on your face</h2>
效果：
4）下划线文本
如果你在 <u>…………</u> 元素之间写任何内容，它将以下划线显示。
请参考以下示例：
<p> <u>Write Your First Paragraph in underlined text.</u></p>
效果：
Write Your First Paragraph in underlined text.
5）删除线文本
在 <strike>……………</strike> 元素中写的任何内容都将以删除线显示。这是一条穿过文本的细线。
请参考以下示例：
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
效果：
Write Your First Paragraph with strikethrough.
6）等宽字体
如果你希望每个字母都具有相同的宽度，那么你应该将内容写在 <tt>………….</tt> 元素中。
注意：我们知道大多数字体被称为可变宽度字体，因为不同的字母具有不同的宽度（例如：’w’比’i’宽）。等宽字体在每个字母之间提供类似的间距。
请参考以下示例：
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
效果：
Hello Write Your First Paragraph in monospaced font.
7）上标文本
如果你将内容放在 <sup>…………..</sup> 元素内，它将显示为上标；意思是它显示在其他字符的上方，高度为字符高度的一半。
请参考以下示例：
<p>Hello <sup>World</sup></p>
效果：
Hello World
8）下标文本
如果你将内容放在 <sub>…………..</sub> 元素内，它将显示为下标；意思是它显示在其他字符的下方，高度为字符高度的一半。
请参考以下示例：
<p>Hello <sub>World</sub></p>
效果：
Hello World
9）删除文本
任何放在 <del>……….</del> 中的内容都会显示为删除的文本。
请参考以下示例：
<p>Hello <del>Delete your first paragraph.</del></p>
效果：
Hello Delete your first paragraph.
10）插入文本
任何放在 <ins>……….</ins> 中的内容都会显示为插入的文本。
请参考以下示例：
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
效果：
Delete your first paragraph.Write another paragraph.
11）较大的文本
如果你希望将字体大小调大于其他文本，那么将内容放在 <big>………</big> 内。它会使字体比之前的大一个字号。
请参考以下示例：
<p>Hello <big>Write the paragraph in larger font.</big></p>
效果：
Hello Write the paragraph in larger font.
12）较小的文本
如果你希望将字体大小调小于其他文本，那么将内容放在 <small>………</small> 标签内。它会使字体比之前的小一个字号。
请参考以下示例：
<p>Hello <small>Write the paragraph in smaller font.</small></p>
效果：
Hello Write the paragraph in smaller font.
