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

常见的 HTML 文本格式化标签

1. <strong> 标签

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

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

2. <em> 标签

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

文本将以斜体显示。

3. <b> 标签

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

4. <i> 标签

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

5. <u> 标签

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

6. <mark> 标签

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

7. <small> 标签

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

8. <del> 标签

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

9. <ins> 标签

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

10. <sub> 标签

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

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

11. <sup> 标签

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

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

12. <q> 标签

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

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

13. <cite> 标签

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

14. <code> 标签

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

15. <pre> 标签

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

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

文字对齐

1. text-align CSS 属性

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

改变字体和颜色

1. font-family 属性

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

2. color 属性

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

3. font-size 属性

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

HTML 文本格式化的组合应用

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

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

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

    &lt;p>数学公式：E = mc&lt;sup>2&lt;/sup>&lt;/p>

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

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

&lt;/body>
&lt;/html>

总结

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

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