HTML - 短语标签

Quiz

HTML 短语标签是为特定用途而设计的，虽然它们的显示方式与 , , <pre>, 和 <tt> 等其他基本标签类似。这里我们将带您了解所有重要的短语标签；让我们逐一查看它们。以下是短语标签列表，其中一些已在 HTML formatting 和 quotations 中讨论。

HTML 短语标签列表

强调文本 - HTML em 标签
标记文本 - HTML mark 标签
重要文本 - HTML strong 标签
缩写文本 - HTML abbr 标签
首字母缩写文本 - HTML acronym 标签
定向文本 - HTML bdo 标签
特殊术语 - HTML dfn 标签
短引用文本 - HTML q 标签
长引用文本 - HTML blockquote 标签
引文文本 - HTML cite 标签
计算机代码文本 - HTML code 标签
键盘文本 - HTML kbd 标签
编程变量 - HTML pre 标签
程序输出 - HTML samp 标签
地址文本 - HTML address 标签

下面我们使用了短语标签中的每个标签，每个标签都有其默认样式，其中一些还接受某些属性。

强调文本

包含在 ... 元素内的内容将显示为强调文本。 元素通常将文本渲染为斜体，表示强调。

示例

<!DOCTYPE html>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>

输出

The following word uses a emphasized typeface.

标记文本

包含在 ... 元素内的任何内容将显示为用黄色墨水标记。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following word has been <mark>marked</mark> with yellow.</p>
</body>
</html>

输出

The following word has been marked with yellow.

重要文本

包含在 ... 元素内的内容将显示为重要文本。 元素以粗体字体显示文本，表示强烈的重视。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following word uses a <strong>strong</strong> typeface. </p>
</body>
</html>

输出

The following word uses a strong typeface.

缩写文本

您可以通过将文本放入开标签 <abbr> 和闭标签 </abbr> 内来缩写文本。如果存在，title 属性必须包含完整的描述，且仅此而已。

示例

<!DOCTYPE html>
<html>
<body>
   <p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>. </p>
</body>
</html>

输出

My best friend's name is Abhy.

首字母缩写文本

<acronym> 元素允许您指明 <acronym> 和 </acronym> 标签之间的文本是一个首字母缩写词。

目前，主要浏览器不会改变 <acronym> 元素内容的显示外观。

<acronym> 元素在 HTML5 中已被弃用。相反，您应该使用 <abbr> 元素来定义缩写，并使用 "title" 属性指定完整描述。

示例

<!DOCTYPE html>
<html>
<body>
   <p>This chapter covers marking up text in <acronym>XHTML</acronym>. </p>
</body>
</html>

输出

This chapter covers marking up text in XHTML.

定向文本

<bdo>...</bdo> 元素代表双向覆盖（Bi-Directional Override），用于覆盖当前的文本方向。

示例

<!DOCTYPE html>
<html>
<body>
   <p>This text will go left to right.</p>
   <p>
      <bdo dir="rtl">This text will go right to left.</bdo>
   </p>
</body>
</html>

输出

This text will go right to left.

特殊术语

<dfn>...</dfn> 元素（或 HTML 定义元素）允许您指定正在引入一个特殊术语。其用法类似于段落中间的斜体词语。

通常，您会在首次引入关键术语时使用 <dfn> 元素。最近的浏览器大多会将 <dfn> 元素的内容渲染为斜体字体。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following word is a <dfn>special</dfn> term. </p>
</body>
</html>

输出

The following word is a special term.

引用文本

当您想引用其他来源的段落时，应将其置于 <blockquote>...</blockquote> 标签之间。

<blockquote> 元素内的文本通常会从周围文本的左右边缘缩进，有时还会使用斜体字体。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following description of XHTML is taken from the W3C Web site:</p>
   <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>

输出

The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C's first Recommendation for XHTML, following on 
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

短引用

<q>...</q> 元素用于在句子中添加双引号。通过使用 <q>...</q>，您可以确保括起来的文本作为直接引用呈现，从而提升可读性并保持 HTML 文档中的正确标点。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Amit is in Spain, <q>I think I am wrong</q>. </p>
</body>
</html>

输出

Amit is in Spain, I think I am wrong.

文本引用

如果您正在引用一段文本，可以通过将其置于开标签 <cite> 和闭标签 </cite> 之间来指明来源。

正如在印刷出版物中预期的那样，<cite> 元素的内容默认以斜体文本渲染。

示例

<!DOCTYPE html>
<html>
<body>
   <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>. </p>
</body>
</html>

输出

This HTML tutorial is derived from W3 Standard for HTML.

计算机代码

任何要在网页上显示的编程代码都应置于 <code>...</code> 标签内。通常，<code> 元素的内容会以等宽字体呈现，就像大多数编程书籍中的代码一样。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Regular text. <code>This is code.</code> Regular text. </p>
</body>
</html>

输出

Regular text. This is code. Regular text.

键盘文本

当您谈论计算机时，如果想告诉读者输入某些文本，可以使用 <kbd>...</kbd> 元素来指示应该输入的内容，如本示例所示。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text. </p>
</body>
</html>

输出

Regular text. This is inside kbd element Regular text.

编程变量

<var> 元素通常与 <pre> 和 <code> 元素结合使用，以指示该元素的内容是一个变量。

示例

<!DOCTYPE html>
<html>
<body>
   <p>
      <code>document.write(" <var>user-name</var>") </code>
   </p>
</body>
</html>

输出

document.write(" user-name")

程序输出

<samp>...</samp> 元素用于表示程序、脚本等的示例输出。它主要用于文档化编程或编码概念时。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Result produced by the program is <samp>Hello World!</samp>
   </p>
</body>
</html>

输出

Result produced by the program is Hello World!

地址文本

<address>...</address> 元素用于包含任何地址。

示例

<!DOCTYPE html>
<html>
<body>
   <address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>

输出

388A, Road No 22, Jubilee Hills - Hyderabad

HTML Phrase Elements 怎么用？短语元素有哪些常见用法？