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>
格式化引号
您可以使用 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 格式标记的完整列表。