HTML - 格式化

上一页
下一页

HTML 格式化 定义了网页上内容表示的方式，以提高可读性，赋予语义含义，并改进视觉样式。

HTML 格式化 是通过使用 HTML 物理和逻辑标签来完成的。在本章中，我们将学习如何使用 HTML 格式化来控制文本的外观。

让我们了解一下什么是物理标签和逻辑标签

  • 物理标签： 这些标签用于为文本内容提供视觉外观。
  • 逻辑标签： 这些标签用于为文本内容提供逻辑和语义含义。有一些逻辑标签用于屏幕阅读器，但这些标签的影响在浏览器上是可见的。
HTML Text Formatting

HTML 格式化的用途

如果没有格式化，任何东西看起来都不美观或舒适。但 HTML 格式化不仅仅是为了让眼睛舒适或使文本内容更具吸引力。进行 HTML 格式化有几个原因。

HTML 格式化在许多方面都很有用

  • 任何文本的外观都提供了对内容意图的清晰视图，例如突出显示关键词，将有意义的信息放在引号中，对主要句子进行下划线等。
  • 格式化有助于搜索引擎理解内容结构，也有助于搜索引擎优化。
  • 格式化可以改善视觉布局并提高内容的可读性。

HTML 格式化标签

下表列出了用于文本格式化的常用HTML 格式化标签

标签 描述 类别
<b> 此标签用于使文本粗体。 物理标签
<i> 此标签用于使文本斜体。 物理标签
<big> 此标签用于使文本更大。它在 HTML5 中不受支持。 物理标签
<small> 此标签用于使文本更小。 物理标签
<u> 此标签用于为文本添加下划线。 物理标签
<strike> 此标签用于删除线文本。它在 HTML5 中不受支持。 物理标签
<tt> 此标签用于使文本以电传打字机（等宽字体）显示。它在 HTML5 中不受支持。 物理标签
<strong> 此标签用于使文本粗体并赋予其语义重要性。 逻辑标签
<em> 此标签用于使文本斜体并赋予其语义强调。 逻辑标签
<sup> 此标签用于创建上标文本（略高于正常行）。 其他标签
<sub> 此标签用于创建下标文本（略低于正常行）。 其他标签
<ins> 此标签用于指示内容已添加（通常带下划线）。 其他标签
<del> 此标签用于指示内容已删除（通常带删除线）。 其他标签
<mark> 此标签用于使用黄色背景突出显示文本。 其他标签

HTML 格式化标签示例

以下是每个格式化标签及其示例的详细说明

HTML <b> 标签

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

示例

此示例演示了如何使用<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.

HTML <strong> 标签

HTML <strong> 标签用于使文本变为粗体，表示其更重要，并且其内部文本通常以粗体显示。

注意：<b> 标签仅出于样式目的使文本变为粗体，而<strong> 标签使文本变为粗体，并为其内容中的文本添加重要性。

示例

此示例演示了如何使用<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.

HTML <i> 标签

包含在<i>...</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.

HTML <em> 标签

HTML <em> 标签为其包含的文本赋予语义含义，并在浏览器上将其呈现为斜体。

示例

此示例演示了如何使用<em> 标签使文本强调

<!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.

HTML <big> 标签

包含在<big>...</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.

HTML <small> 标签

包含在<small>...</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.

HTML <sup> 标签

包含在<sup>...</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.

HTML <sub> 标签

<sub>...</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.

HTML <ins> 标签

包含在<ins>...</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

HTML <del> 标签

包含在<del>...</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

HTML <u> 标签

包含在<u>...</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.

HTML <strike> 标签

包含在<strike>...</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.

HTML <mark> 标签

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

示例

此示例演示了如何使用<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.

HTML <tt> 标签

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

示例

此示例演示了如何使用<tt> 标签制作电传打字机文本

<!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.
打印页面

上一页
下一页
广告