在 HTML 中，文本格式化（Text Formatting）通过各种标签来改变文本的外观或结构。这些格式化标签可以控制文本的样式、字体、对齐、间距、颜色等，帮助使网页内容更加易读和美观。HTML 提供了多种标签来进行文本格式化。

常见的 HTML 文本格式化标签

1. <strong> 标签

  • 功能：表示强调文本，通常将文本加粗。
  • 语义：<strong> 是一个语义标签，表示该文本在语义上需要强调。
<p><strong>这是加粗的文本</strong></p>

浏览器会将该文本显示为加粗。

2. <em> 标签

  • 功能：表示强调文本，通常将文本显示为斜体。
  • 语义：<em> 用于表示文本需要特别强调，通常会呈现为斜体。
<p><em>这是斜体文本</em></p>

文本将以斜体显示。

3. <b> 标签

  • 功能：使文本加粗。
  • 注意：<b> 是一个样式标签，没有语义，单纯地改变文本的外观，不代表强调。
<p><b>这是加粗文本</b></p>

4. <i> 标签

  • 功能：使文本斜体。
  • 注意：<i> 是一个样式标签，没有语义，单纯改变文本的外观。
<p><i>这是斜体文本</i></p>

5. <u> 标签

  • 功能：为文本添加下划线。
  • 用途：通常用于强调文本，尽管下划线在现代网页设计中不常用于表示强调。
<p><u>这是带下划线的文本</u></p>

6. <mark> 标签

  • 功能：为文本添加高亮背景，通常用于突出显示重要内容。
  • 语义：适用于被标记或高亮显示的文本内容。
<p><mark>这是高亮显示的文本</mark></p>

7. <small> 标签

  • 功能：将文本缩小，常用于提示或次要信息。
<p><small>这是缩小的文本</small></p>

8. <del> 标签

  • 功能：表示已删除的文本，通常呈现为带删除线的样式。
<p><del>这是删除的文本</del></p>

9. <ins> 标签

  • 功能：表示已插入的文本，通常会被下划线标记。
<p><ins>这是插入的文本</ins></p>

10. <sub> 标签

  • 功能：将文本设置为下标。
<p>H<sub>2</sub>O</p>

在这个例子中，“2”会作为下标显示。

11. <sup> 标签

  • 功能：将文本设置为上标。
<p>E = mc<sup>2</sup></p>

在这个例子中，“2”会作为上标显示。

12. <q> 标签

  • 功能：用于标记短引用，通常在文本周围加上引号。
<p>他说：<q>这是一个引用。</q></p>

浏览器会自动为引用加上引号。

13. <cite> 标签

  • 功能：表示对作品、书籍、文章、电影等的引用来源。
<p>这句话出自<cite>《莎士比亚全集》</cite></p>

14. <code> 标签

  • 功能：表示计算机代码。通常用于代码片段或程序。
<p>使用命令 <code>git push</code> 将文件推送到远程仓库。</p>

15. <pre> 标签

  • 功能：用于表示预格式化文本，保留文本中的空格、换行和其他格式。通常用于代码段或需要保持格式的文本。
<pre>
  function greet() {
    console.log("Hello, world!");
  }
</pre>

在 <pre> 标签内，文本会按原格式显示，空格和换行会被保留。

文字对齐

1. text-align CSS 属性

  • 功能：控制文本的对齐方式，可以用 CSS 来设置，常见的对齐方式包括左对齐、居中对齐和右对齐。
<p style="text-align: left;">这是左对齐的文本。</p>
<p style="text-align: center;">这是居中的文本。</p>
<p style="text-align: right;">这是右对齐的文本。</p>

改变字体和颜色

1. font-family 属性

  • 功能：定义字体。
<p style="font-family: Arial, sans-serif;">这段文本使用了 Arial 字体。</p>

2. color 属性

  • 功能：设置文本的颜色。
<p style="color: red;">这段文本是红色的。</p>

3. font-size 属性

  • 功能：设置文本的大小。
<p style="font-size: 20px;">这段文本的字体大小是 20 像素。</p>

HTML 文本格式化的组合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化示例</title>
    <style>
        p {
            font-family: Arial, sans-serif;
            color: #333;
        }
    </style>
</head>
<body>

    <h1>HTML 文本格式化</h1>
    
    <p><strong>强烈强调</strong> 和 <em>斜体强调</em>，还有 <b>加粗文本</b>。</p>

    <p><u>带下划线</u> 和 <mark>高亮显示</mark>，以及 <small>缩小文本</small>。</p>

    <p>数学公式：E = mc<sup>2</sup></p>

    <p>代码示例：<code>var x = 10;</code></p>

    <pre>
function sayHello() {
    console.log("Hello, World!");
}
    </pre>

</body>
</html>

总结

HTML 提供了多种方式来格式化文本，使网页内容更加丰富、易读和有表现力。通过适当使用格式化标签，你可以强调关键内容、优化文本排版并提供更好的视觉体验。正确地运用这些标签不仅能提高可读性，还能增强用户体验。

如果你有任何其他问题，或者需要进一步的帮助，随时告诉我！