Html 简明教程

HTML - Phrase Tags

HTML 短语标签是为特定目的设计的，尽管它们的显示方式与其他基本标签相似，如 <b>, <i>, <pre>, 和 <tt>, 。我们将介绍所有重要的短语标签，让我们一一查看。以下是短语标签的列表，其中一些已在 HTML * formatting* 和 * quatations* 中讨论。

HTML Phrase Tags List

  1. 带强调的文本 - HTML em 标记

  2. 带标记的文本 - HTML mark 标记

  3. 带加粗的文本 - HTML strong 标记

  4. 缩写文本 - HTML abbr 标签

  5. 缩略语文本 - HTML acronym 标签

  6. 定向文本 - HTML bdo 标签

  7. 特殊术语 - HTML dfn 标签

  8. 短引用文本 - HTML q 标签

  9. 长引用文本 - HTML blockquote 标签

  10. 引用文本 - HTML cite 文本

  11. 计算机代码文本 - HTML code 标签

  12. 键盘文本 - HTML kbd 文本

  13. 编程变量 - HTML pre 标签

  14. 程序输出 - HTML samp 标签

  15. 地址文本 - HTMl address 标签

以下是我们使用的每个短语标签，每个标签都具有自己的默认样式，其中一些还接受一些属性。

Emphasized Text

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

Example

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

Output

The following word uses a emphasized typeface.

Marked Text

  • 包含在 * <mark>…​</mark>* 元素中的任何内容都显示为用黄色墨水标记。

Example

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

Output

The following word has been marked with yellow.

Strong Text

  • 包含在 * <strong>…​</strong>* 元素中的内容显示为重要文本。<strong> 元素以粗体显示文本，表示非常重要。

Example

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

Output

The following word uses a strong typeface.

Abbreviation Text

  • 您可以通过将其放在开放的 * <abbr>* 和闭合 </abbr> 标签中来缩写文本。如果存在，则 title 属性必须包含此完整说明并且没有其他内容。

Example

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

Output

My best friend's name is Abhy.

Acronym Text

  • * <acronym>* 元素允许您指示 <acronym> 和 </acronym> 标记之间的文本是一个首字母缩略词。

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

<acronym> 元素在 HTML5 中已弃用。您应使用 <abbr> 元素来定义缩写，并可以使用 "title" 属性指定完整说明。

Example

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

Output

This chapter covers marking up text in XHTML.

Directed Text

Example

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

Output

This text will go right to left.

Special Terms

  • <dfn>…​</dfn>* 元素（或 HTML 定义元素）允许您指定您正在引入一个特殊术语。它的用法类似于段落中的斜体字。

通常，您会在初次引入关键词时使用 <dfn> 元素。大多数最新浏览器将 <dfn> 元素的内容呈现在斜体字中。

Example

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

Output

The following word is a special term.

Quoting Text

当您要引用其他来源的段落时，您应将其放在 * <blockquote>…​</blockquote>* 标记中间。

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

Example

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

Output

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.

Short Quotations

当您要在句子中添加双引号时，可以使用 <q>…​</q> 元素。使用 * <q>…​</q>* ，确保括起来的文本显示为直接引文，以增强可读性并在您的 HTML 文档中保留正确的标点符号。

Example

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

Output

Amit is in Spain, I think I am wrong.

Text Citations

如果您要引用文本，您可以使用开头的 * <cite>tag* 和结尾的 </cite> 标记，指示其来源。

正如您在印刷品中所期望的那样，默认情况下，<cite> 元素的内容会以斜体字呈现。

Example

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

Output

This HTML tutorial is derived from W3 Standard for HTML.

Computer Code

网页上要显示的任何编程代码都应放置在 * <code>…​</code>* 标记中。通常情况下，<code> 元素的内容以等宽字体显示，就像大多数编程书籍中的代码一样。

Example

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

Output

Regular text. This is code. Regular text.

Keyboard Text

在谈论计算机时，如果您希望告诉读者输入一些文本，可以使用 * <kbd>…​</kbd>* 元素来表示该文本的输入内容，如下例所示。

Example

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

Output

Regular text. This is inside kbd element Regular text.

Programming Variables

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

Example

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

Output

document.write(" user-name")

Program Output

  • <samp>…​</samp>* 元素表示程序、脚本等的示例输出。同样，它主要用于记录编程或编码概念。

Example

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

Output

Result produced by the program is Hello World!

Address Text

Example

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

Output

388A, Road No 22, Jubilee Hills - Hyderabad