HTML文本格式化标签的使用实例

HTML 使用标签b(bold)与i(italic)对输出的文本进行格式, 如:粗体 or 斜体,这些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>and<i>标记已被重新定义,之前它们没有语义含义。

 

blockquote引用

您可以使用 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>

 

<address>联系人地址标记

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

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

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