本文概述
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>
立即测试
输出:
I want to put a Mark on your face
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>Write Your First Paragraph in superscript.</sup></p>
立即测试
输出:
Hello Write Your First Paragraph in superscript.
8)下标文字
如果将内容放在<sub> ………….. </ sub>元素中, 则显示在下标;表示它显示为比其他字符低半个字符的高度。
请参阅以下示例:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
立即测试
输出:
Hello Write Your First Paragraph in subscript.
9)删除文字
放在<del> ………. </ del>中的所有内容都将显示为已删除的文本。
请参阅以下示例:
<p>Hello <del>Delete your first paragraph.</del></p>
立即测试
输出:
Hello
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.