Html 简明教程

HTML - Formatting

HTML 格式化是以更好的方式表示网站文本环境的方法，因此用户可以轻松地浏览你的网站。HTML 格式化通过使用 HTML 物理和逻辑标签完成。在本文中，我们将重点关注 HTML 格式化的文本外观。

  1. Physical Tag: 这些标记用于为文本内容提供视觉外观。

  2. Logical Tag: 这些标记用于为文本内容提供逻辑和语义含义。还有一些用于屏幕阅读器的逻辑标签，但是那些标签的影响在浏览器上是可见的。

What is the use of html formatting?

没有格式，一切看起来都不美观或让人赏心悦目。但 HTML 格式化不仅仅是为了赏心悦目或使文本内容具有吸引力。进行 HTML 格式化的原因有几个。

  1. 任何文本的外观都可以让我们了解该关键字有多么重要，比如如果我们对某个关键字加粗，就表明该关键字的重要性。斜体、下划线也是如此，它们各自也具有重要含义。

  2. 格式化有助于搜索引擎以一种结构形式抓取网站，无论是对于读者还是搜索引擎，这种形式都是可扫描的。

HTML Formatting Tags

我们可以使用 * CSS* 来完成 HTML 格式化，但是当 HTML 提供格式化文本内容的功能时，为何不使用它们？

Tag

Description

<b>

这个物理标签用于加粗文本。

<strong>

这个逻辑标签用于使文本变得重要，但是，它也会以可视的方式加粗文本。

<i>

此物理标签用于使文本变成斜体。

<em>

此逻辑标签用于使文本变成斜体。

<big>

此物理标签用于使文本变成更大尺寸。它在 HTML5 中不受支持。

<small>

此物理标签用于使文本变成更小尺寸。

<sup>

此标签用于使文本变成上标文本（略高于正常行）。

<sub>

此标签用于使文本变成下标文本（略低于正常行）。

<ins>

此标签用于指示已添加内容。

<del>

此标签用于指示已删除内容。

<u>

此标签用于在文本上加下划线。

<strike>

此标签用于在文本上剪切行或划线。它在 HTML5 中不受支持。

<mark>

此标签用于用黄色（背景色）标记关键字或句子。

<tt>

此标签用于使文本显示为电传打字，并且在 HTML5 中不受支持。

HTML Formatting Tags with Example

我们已介绍了可用于在 HTML 中进行格式化的每个标签的示例。所有示例均在下面进行了描述，并给出了输出。

Bold Text

HTML <b> 标签用于使文本变为粗体，此标签没有逻辑方面的意义，仅用于视觉效果。

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
The following word uses a bold typeface.

Strong Text

HTML <strong> 标签用于使文本变为有更重要意义的粗体，且标签内的文本通常会以粗体显示。

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
The following word uses a strong typeface.

Italic Text

<i>…​</i> 元素中包含的任何内容都会以斜体显示。

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
The following word uses a italicized typeface.

Emphasized Text

它赋予其包含的文本语义含义，并以斜体在浏览器中呈现它。

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
The following word uses a emphasized typeface.

Big Text

<big>…​</big> 元素中包含的任何内容都会显示为比其周围的文本大一号字体。

<!DOCTYPE html>
<html>
<head>
   <title>Larger Text Example</title>
</head>
<body>
   <p>Hello Welcome to <big>Tutorialspoint</big>.</p>
</body>
</html>
Hello Welcome to Tutorialspoint.

Small Text

<small>…​</small> 元素中包含的内容会显示为比其周围的文本小一号字体。

<!DOCTYPE html>
<html>
<head>
   <title>Smaller Text Example</title>
</head>
<body>
   <p>Hello Welcome to <small>Tutorialspoint</small>.</p>
</body>
</html>
Hello Welcome to Tutorialspoint.

Superscript Text

包含在 <sup>…​</sup> 元素中的任何内容都将以上角标形式书写；所使用的字体大小与周围的字符相同，但以周围字符一半的高度显示，与文本的其余部分相比，它具有更小且略微凸起的外观。

<!DOCTYPE html>
<html>
<head>
   <title>Superscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sup>superscript</sup> typeface. </p>
</body>
</html>
The following word uses a superscript typeface.

Subscript Text

<sub>…​</sub> 元素中的任何内容都将以下标形式书写；所使用的字体大小与周围的字符相同，并显示在其他字符下方半字符的高度处。它通常用于编写化学公式之类的内容，其中某些字符需要显示在常规文本行下方。

<!DOCTYPE html>
<html>
<head>
   <title>Subscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sub>subscript</sub> typeface. </p>
</body>
</html>
The following word uses a subscript typeface.

Inserted Text

包含在 <ins>…​</ins> 元素中的任何内容都将显示为插入文本。

<!DOCTYPE html>
<html>
<head>
   <title>Inserted Text Example</title>
</head>
<body>
   <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
I want to drink cola wine

Deleted Text

包含在 <del>…​</del> 元素中的内容显示为已删除文本。

<!DOCTYPE html>
<html>
<head>
   <title>Deleted Text Example</title>
</head>
<body>
   <p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>
</body>
</html>
Hello welcome to Madras Chennai

Underlined Text

包含在 <u>…​</u> 元素中的任何内容都将以带下划线的方式显示。

<!DOCTYPE html>
<html>
<head>
   <title>Underlined Text Example</title>
</head>
<body>
   <p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
The following word uses a underlined typeface.

Strike Text

包含在 <strike>…​</strike> 元素中的内容将以删除线显示，即文本中的一条细线。

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
The following word uses a strikethrough typeface.

Marked Text

HTML <mark> 标记用于标记或突出显示对记号目的重要的文本。

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <mark>strikethrough</mark> typeface.</p>
</body>
</html>
The following word uses a marked typeface.

Monospaced Font

包含在 <tt>…​</tt> 元素中的任何内容都将以等宽字体书写。大多数字体被称为可变宽度的字体，因为不同的字母宽度不同（例如，字母“m”比字母“i”宽）。然而，在等宽字体中，每个字母的宽度相同。

<!DOCTYPE html>
<html>
<head>
   <title>Monospaced Font Example</title>
</head>
<body>
   <p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
The following word uses a monospaced typeface.