Html 简明教程

HTML - Phrase Tags

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

HTML phrase tags have been designed for specific purposes, though they are displayed in a similar way as other basic tags like , , <pre>, and <tt>,. Here we will take you through all the important phrase tags, so let’s start seeing them one by one. Following is the list of phrase tags, some of them are discussed in HTML formatting and quatations.

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

Below we have used each tags of phrase tags, each tag has it’s default styling few of them accepts some attributes as well.

Emphasized Text

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

Content that is enclosed within … element is displayed as emphasized text. The element typically renders text in italics, indicating emphasis.

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

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

Anything that is enclosed with-in … element, is displayed as marked with yellow ink.

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

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

Content that is enclosed within … element is displayed as important text. The element displays text in a bold font, indicating strong importance.

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 属性必须包含此完整说明并且没有其他内容。

You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else.

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> 标记之间的文本是一个首字母缩略词。

The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.

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

At present, the major browsers do not change the appearance of the content of the <acronym> element.

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

The <acronym> element is deprecated in HTML5. Instead, you should use the <abbr> element to define abbreviations, and you can specify the full description using the "title" attribute.

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

<bdo>…</bdo>* 元素代表双向覆盖，它用于覆盖当前文本方向。

The <bdo>…</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

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 定义元素）允许您指定您正在引入一个特殊术语。它的用法类似于段落中的斜体字。

The <dfn>…</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. Its usage is similar to italic words in the midst of a paragraph.

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

Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font.

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>* 标记中间。

When you want to quote a passage from another source, you should put it in between <blockquote>…</blockquote> tags.

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

Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text and sometimes uses an italicized font.

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 文档中保留正确的标点符号。

The <q>…</q> element is used when you want to add a double quote within a sentence. By using <q>…</q>, you ensure that the enclosed text is presented as a direct quotation, enhancing readability and maintaining proper punctuation in your HTML document.

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> 标记，指示其来源。

If you are quoting a text, you can indicate the source placing it between an opening <cite>tag and closing </cite> tag

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

As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.

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> 元素的内容以等宽字体显示，就像大多数编程书籍中的代码一样。

Any programming code to appear on a Web page should be placed inside <code>…</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

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>* 元素来表示该文本的输入内容，如下例所示。

When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>…</kbd> element to indicate what should be typed in, as in this example.

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>* 元素一起使用，以指示该元素的内容是一个变量。

The <var> element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable.

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>* 元素表示程序、脚本等的示例输出。同样，它主要用于记录编程或编码概念。

The <samp>…</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.

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

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

The <address>…</address> element is used to contain any address.

Example

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

Output

388A, Road No 22, Jubilee Hills - Hyderabad

Html 简明教程

HTML - Phrase Tags

HTML Phrase Tags List

Emphasized Text

Example

Output

Marked Text

Example

Output

Strong Text

Example

Output

Abbreviation Text

Example

Output

Acronym Text

Example

Output

Directed Text

Example

Output

Special Terms

Example

Output

Quoting Text

Example

Output

Short Quotations

Example

Output

Text Citations

Example

Output

Computer Code

Example

Output

Keyboard Text

Example

Output

Programming Variables

Example

Output

Program Output

Example

Output

Address Text

Example

Output