HTML 文本格式化

实时编辑器

<body>
  <b>加粗文本</b><br/><br/>
  <i>斜体文本</i><br/><br/>
  <code>电脑自动输出</code><br/><br/>
  这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>

<body>
  <b>加粗文本</b><br/><br/>
  <i>斜体文本</i><br/><br/>
  <code>电脑自动输出</code><br/><br/>
  这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>

结果

HTML 格式化标签

HTML 使用标签 ("bold") 与 ("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

备注

通常标签  替换加粗标签  来使用,  替换  标签使用。

然而，这些标签的含义是不同的：

 与  定义粗体或斜体文本。

 或者  意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

在线实例

此例演示如何在一个 HTML 文件中对文本进行格式化

实时编辑器

<body>
    <b>这个文本是加粗的</b>
    <br/>
    <strong>这个文本是加粗的</strong>
    <br/>
    <big>这个文本字体放大</big>
    <br/>
    <em>这个文本是斜体的</em>
    <br/>
    <i>这个文本是斜体的</i>
    <br/>
    <small>这个文本是缩小的</small>
    <br/>
    这个文本包含
    <sub>下标</sub>
    <br/>
    这个文本包含
    <sup>上标</sup>
</body>

<body>
    <b>这个文本是加粗的</b>
    <br/>
    <strong>这个文本是加粗的</strong>
    <br/>
    <big>这个文本字体放大</big>
    <br/>
    <em>这个文本是斜体的</em>
    <br/>
    <i>这个文本是斜体的</i>
    <br/>
    <small>这个文本是缩小的</small>
    <br/>
    这个文本包含
    <sub>下标</sub>
    <br/>
    这个文本包含
    <sup>上标</sup>
</body>

结果

此例演示如何使用 <pre> 标签对空行和空格进行控制。

<body>
<pre> 
    此例演示如何使用 pre 标签
    对空行和    空格
    进行控制
  </pre>
</body>

效果展示：

此例演示如何使用 pre 标签
对空行和    空格
进行控制

此例演示不同的"计算机输出"标签的显示效果。

实时编辑器

<body>
  <code>计算机输出</code>
  <br/>
  <kbd>键盘输入</kbd>
  <br/>
  <tt>打字机文本</tt>
  <br/>
  <samp>计算机代码样本</samp>
  <br/>
  <var>计算机变量</var>
  <br/>
  <p>
  </p>
</body>

<body>
  <code>计算机输出</code>
  <br/>
  <kbd>键盘输入</kbd>
  <br/>
  <tt>打字机文本</tt>
  <br/>
  <samp>计算机代码样本</samp>
  <br/>
  <var>计算机变量</var>
  <br/>
  <p>
  </p>
</body>

结果

备注

这些标签常用于显示计算机/编程代码。

此例演示如何在 HTML 文件中写地址。

实时编辑器

<body>
<address>
  Written by <a href="https://lectcode.com">Jon Doe</a>.<br/>
  Visit us at:<br/>
  Example.com<br/>
  Box 564, Disneyland<br/>
  USA
</address>
</body>

<body>
<address>
  Written by <a href="https://lectcode.com">Jon Doe</a>.<br/>
  Visit us at:<br/>
  Example.com<br/>
  Box 564, Disneyland<br/>
  USA
</address>
</body>

结果

此例演示如何实现缩写或首字母缩写。

实时编辑器

<body>
  <abbr title="etcetera">etc.</abbr>
  <br/>
  <acronym title="World Wide Web">WWW</acronym>
  <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
  <p>仅对于 IE 5 中的 acronym 元素有效。</p>
  <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>

<body>
  <abbr title="etcetera">etc.</abbr>
  <br/>
  <acronym title="World Wide Web">WWW</acronym>
  <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
  <p>仅对于 IE 5 中的 acronym 元素有效。</p>
  <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>

结果

此例演示如何改变文字的方向。

实时编辑器

<body>
  <p>该段落文字从左到右显示。</p>
  <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
</body>

<body>
  <p>该段落文字从左到右显示。</p>
  <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
</body>

结果

此例演示如何实现长短不一的引用语。

实时编辑器

<body>
  <p>WWF's goal is to:
  <q>Build a future where people live in harmony with nature.</q> 
  We hope they succeed.</p>
</body>

<body>
  <p>WWF's goal is to:
  <q>Build a future where people live in harmony with nature.</q> 
  We hope they succeed.</p>
</body>

结果

此例演示如何标记删除文本和插入文本。

实时编辑器

<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>

<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>

结果

HTML 文本格式化标签

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

HTML "计算机输出" 标签

标签	描述
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<var>`	定义变量
`<pre>`	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
`<abbr>`	定义缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目。

HTML 文本格式化​

HTML 格式化标签​

在线实例​

HTML 文本格式化标签​

HTML "计算机输出" 标签​

HTML 引文, 引用, 及标签定义​

HTML 文本格式化

HTML 格式化标签

在线实例

HTML 文本格式化标签

HTML "计算机输出" 标签

HTML 引文, 引用, 及标签定义