HTML - 短语标签

上一页
下一页

HTML 短语标签的设计是为了特定目的，尽管它们的显示方式与其他基本标签（如<b>、<i>、<pre>和<tt>）类似。在这里，我们将带您了解所有重要的短语标签；所以让我们开始逐一查看它们。以下是短语标签的列表，其中一些在 HTML 格式化和引用中进行了讨论。

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 标签

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

强调文本

包含在<em>...</em>元素中的内容显示为强调文本。<em>元素通常以斜体显示文本，表示强调。

示例

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

输出

The following word uses a emphasized typeface.

标记文本

包含在<mark>...</mark>元素中的任何内容都将以黄色墨水标记显示。

示例

<!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.

强文本

包含在<strong>...</strong>元素中的内容将显示为重要文本。<strong>元素以粗体显示文本，表示很重要的意思。

示例

<!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>元素代表双向覆盖，用于覆盖当前文本方向。

示例

<!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
打印页面
上一页
下一页
广告