目录导航

HTML格式设置是格式化文本以获得更好的外观的过程。HTML使我们无需使用CSS即可格式化文本。 HTML中有许多格式标记,这些标签用于使文本加粗,斜体或带下划线。 在HTML和XHTML中有14种可用的文本显示方式。

在HTML中,格式标记分为两类:

  • 物理标签:这些标签用于为文本提供视觉外观。
  • 逻辑标签:这些标签用于向文本添加一些逻辑或语义值。

注意:有些物理和逻辑标签可能会显示相同的视觉外观,但是它们的语义会有所不同。

在这里,我们将学习14个HTML格式标签。以下是HTML格式文本的列表。

编号 元素名称 描述
1 <b> 这是一个物理标记,用于加粗在<b></b>之间的文本。
2 <strong> 这是一个逻辑标记,它告诉浏览器文本很重要,效果与<b>元素相同。
3 <i> 这是一个物理标签,用于使文本变为斜体。
4 <em> 这是一个逻辑标签,用于以斜体显示内容。
5 <mark> 此标签用于突出显示文本。
6 <u> 此标记用于增加下划线显示文本。
7 <tt> 此标签用于以电传形式显示文本(HTML5不支持)。
8 <sup> 它显示的内容略高于常规行。
9 <sub> 它显示的内容略低于常规行。
10 <del> 此标签用于显示在内容上添加删除线。
11 <ins> 此标签显示添加的内容
12 <big> 此标签用于将字体大小增加一个常规单位。
13 <small> 此标记用于将字体大小从基本字体大小减少一个单位。
14 <strike> 此标记用于在文本的一部分上绘制删除线(HTML5不支持)。

1. 加粗字体

HTML <b><strong>格式元素都可以用于加粗字体。

HTML <b>元素是一个物理标记,以粗体显示文本,没有任何逻辑上的重要性。在<b> ............ </b>元素内编写任何内容,则会以粗体字母显示。

请参阅以下示例:

<p>
    正常大小字体。
</p>
<p><b>使用粗体文字的一个段落。</b></p>

HTML <strong>标记是一个逻辑标记,它以粗体显示内容,并告知浏览器其逻辑重要性。在<strong>...</strong>标记之间写入显示重要的文本。

请参阅以下示例:

<p><strong>这段话很重要,注意:</strong>, 这是一段正常的文本。</p>

完整示例如下:

<p>
    正常大小字体。
</p>
<p><b>使用粗体文字的一个段落。</b></p>
<p><strong>这段话很重要,注意:</strong>, 这是一段正常的文本。</p>

2. 斜体文字

HTML <i><em>格式元素

HTML <i>元素是物理元素,它以斜体字体显示了包含的内容,没有任何附加的重要性。 如果在<i> ... </i>元素内编写内容,则以斜体字母显示。

请参阅以下示例:

<p><i>用斜体字写第一段文字内容。</i></p>

HTML <em>标记是一个逻辑元素,它将以斜体显示其中的内容,并增加了语义的重要性。

请参阅以下示例:

<p><em>注意:这是重要的内容</em>, 以斜体显示。</p>

完整示例代码如下所示:

<p><i>用斜体字写第一段文字内容。</i></p>
<p><em>注意:这是重要的内容</em>, 以斜体显示。</p>

3. HTML标记格式

如果要标记或突出显示文本,则应将内容写在<mark> ...</mark>之中。

请参阅以下示例:

<h2>我想要<mark>标记</mark> 一下这两个字</h2>

4. 带下划线的文字

<u>...</u>元素内的任何内容,则会以带下划线的文本显示。

请参阅以下示例:

<p><u>在带下划线的文本中写下一段文本内容。</u></p>

5. 删除线文字

<strike>...</strike>元素中写入的所有内容均带有删除线。这是一条跨越文本的细线。

请参阅以下示例:

<p> <strike>显示删除线一段文本文字</strike>.</p>

6. 等宽字体

如果希望每个字母具有相同的宽度,则应将内容写在<tt>...</tt>元素标签内。

注意:我们知道大多数字体都称为可变宽度字体,因为不同的字母具有不同的宽度。(例如:"w""i宽)。等宽字体在每个字母之间提供相同的空间间隔。

请参阅以下示例:

<p>Hello <tt>Write Paragraph in monospaced font.</tt></p>

7. 上标文字

如果将文本内容放在<sup>...</sup>元素中,则会显示上标;表示它显示为比其他字符高半个字符。

请参阅以下示例:

<p>Hello <sup>Write Paragraph content in superscript.</sup></p>

8. 删除文字

放在<del>...</del>中的所有内容都将显示为已删除的文本。

请参阅以下示例:

<p>Hello <del>Delete your first text content.</del></p>

9. 插入文字

放在<ins>...</ ins>中的所有内容均显示为插入的文本。

请参阅以下示例:

<p> <del>删除文本内容</del><ins>写入另一段文本内容</ins></p>

10. 变大文本

如果要使字体字号大于文本的其余部分,则将内容放在<big></big>标记中。 它增加一级的字体大小,比上一种字体大。

请参阅以下示例:

<p>正常字体 <big>比正常显示字体大一些</big></p>

11. 变小文字

如果要使字体大小小于文本的其余部分,则将内容放在<small>...</small>标记内。 它比前一种字体大小减小一级。

请参阅以下示例:

<p>正常字体 <small>比正常显示字体小一些</small></p>