HTML 基础
HTML 高级教程
HTML5 特征
HTML5 示例
HTML5 参考手册

HTML 文本格式化

在本教程中,您将学习如何使用 HTML 标记格式化网页上的文本。

使用 HTML 格式化文本

HTML 提供了几个标签,您可以使用这些标签使网页上的某些文本看起来与普通文本不同,例如,您可以使用标签 <b> 使文本变粗,标签 <i> 使文本斜体,标签 <mark> 突出显示 文本,标记 <code> 用于显示计算机代码片段,标记 <ins><del> 用于标记编辑插入和删除,等等。

以下示例演示了最常用的格式化标签。 现在,让我们尝试一下以了解这些标签的基本工作原理:

<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>

默认情况下,<strong> 标签通常在浏览器中呈现为 <b>,而 <em> 标签呈现为 <i>。 但是,这些标签的含义有所不同。

<strong> 标签和 <b> 标签的区别

<strong><b> 标签都默认以粗体字体呈现封闭的文本,但 <strong> 标签表示其内容具有很强的重要性,而 <b> 标签只是用来吸引读者的注意力,没有传达任何特殊的重要性。

<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>

<em> 标签和 <i> 标签的区别

同样,<em><i> 标签默认都以斜体显示封闭的文本,但 <em> 标签表示其内容与周围文本相比强调强调,而 <i> 标签用于标记偏离正常的文本 出于可读性原因的文本,例如技术术语、另一种语言的惯用短语、想法等。

<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>

注意:当您的网页内容要求某些字词或短语应具有突出的重点或重要性时,请使用 <em><strong> 标签。 此外,在 HTML5 中,<b><i> 标记已被重新定义,之前它们没有语义。


格式化引号

您可以使用 HTML <blockquote> 标签轻松格式化来自其他来源的引用块。

块引用通常以缩进的左右边距显示,并在上方和下方添加一些额外的空间。 让我们尝试一个例子来看看它是如何工作的:

<blockquote>
    <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
    <cite>— Albert Einstein</cite>
</blockquote>

提示: cite 标签用于描述对创意作品的引用。 它必须包括该作品的标题或作者(个人或组织)的名称或 URL 参考。

对于简短的内联引用,您可以使用 HTML <q> 标签。 大多数浏览器通过将文本括在引号中来显示内联引号。 这是一个例子:

<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>

显示缩写

缩写是单词、短语或名称的缩写形式。

您可以使用 <abbr> 标签来表示缩写。 title 属性用于此标记内以提供缩写的完整扩展,当鼠标光标悬停在元素上时,浏览器将其显示为工具提示。 让我们尝试一个例子:

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>

标记联系人地址

网页通常包含街道或邮政地址。 HTML 提供了一个特殊的标签 <address> 来表示个人、人员或组织的联系信息(物理的和/或数字的)。

此标签最好用于显示与文档本身相关的联系信息,例如文章的作者。 大多数浏览器以斜体显示地址块。 这是一个例子:

<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>

请查看 HTML 参考部分以获取 HTML 格式标记的完整列表。

Advertisements