Skip to content

HTML 提供了多种标签来格式化文本,以便更好地显示内容。以下是一些常用的 HTML 格式化标签及其用途:

常用格式化标签

  1. 粗体和斜体

    • <b>: 粗体文本(不强调)
    • <strong>: 粗体文本(强调)
    • <i>: 斜体文本(不强调)
    • <em>: 斜体文本(强调)
    html
    <p>这是<b>粗体</b>文本。</p>
    <p>这是<strong>强调的粗体</strong>文本。</p>
    <p>这是<i>斜体</i>文本。</p>
    <p>这是<em>强调的斜体</em>文本。</p>
  2. 下划线和删除线

    • <u>: 下划线文本
    • <s>: 删除线文本
    • <del>: 删除的文本
    • <ins>: 插入的文本
    html
    <p>这是<u>下划线</u>文本。</p>
    <p>这是<s>删除线</s>文本。</p>
    <p>这是<del>删除的</del>文本。</p>
    <p>这是<ins>插入的</ins>文本。</p>
  3. 上标和下标

    • <sup>: 上标文本
    • <sub>: 下标文本
    html
    <p>这是上标文本:x<sup>2</sup></p>
    <p>这是下标文本:H<sub>2</sub>O</p>
  4. 引用和缩略词

    • <blockquote>: 块级引用
    • <q>: 行内引用
    • <abbr>: 缩略词
    • <cite>: 引用标题
    • <code>: 代码片段
    html
    <blockquote>这是一个块级引用。</blockquote>
    <p>这是一个行内引用:<q>引用内容</q>。</p>
    <p>这是一个缩略词:<abbr title="HyperText Markup Language">HTML</abbr>。</p>
    <p>这是一个引用标题:<cite>引用标题</cite>。</p>
    <p>这是一个代码片段:<code>console.log('Hello, world!');</code></p>
  5. 预格式化文本

    • <pre>: 预格式化文本
    • <kbd>: 键盘输入
    • <samp>: 样本输出
    • <var>: 变量
    html
    <pre>
    这是预格式化文本,
    保留空格和换行。
    </pre>
    <p>键盘输入:<kbd>Ctrl+C</kbd></p>
    <p>样本输出:<samp>输出结果</samp></p>
    <p>变量:<var>x</var> = <var>y</var> + 2</p>
  6. 标记和强调

    • <mark>: 标记或高亮显示文本
    • <small>: 小号文本
    html
    <p>这是<mark>高亮显示</mark>的文本。</p>
    <p>这是<small>小号</small>文本。</p>

示例

结合以上标签,可以创建复杂的格式化文本。例如:

html
<!DOCTYPE html>
<html>
<head>
    <title>HTML 格式化示例</title>
</head>
<body>
    <h1>格式化文本示例</h1>
    <p>这是一段包含<strong>粗体</strong>、<em>斜体</em>、<u>下划线</u>和<s>删除线</s>的文本。</p>
    <p>这是一个包含<abbr title="Cascading Style Sheets">CSS</abbr>缩略词的段落。</p>
    <blockquote>
        这是一个块级引用。
    </blockquote>
    <p>这是一个包含行内引用的段落:<q>这是引用内容</q>。</p>
    <pre>
    function hello() {
        console.log('Hello, world!');
    }
    </pre>
    <p>键盘输入示例:<kbd>Ctrl+S</kbd></p>
    <p>变量示例:<var>y</var> = <var>m</var><sup>2</sup> + <var>c</var></p>
    <p>样本输出示例:<samp>输出结果</samp></p>
    <p>高亮示例:<mark>这是高亮文本</mark></p>
    <p>小号文本示例:<small>这是小号文本</small></p>
</body>
</html>

这些标签的组合使用可以帮助您在网页中展示丰富多样的文本格式。