HTML - 短语标签

短语标签已针对特定目的进行了设计，尽管它们的显示方式与您在上一章中看到的其他基本标签（如<b>、<i>、<pre>和<tt>类似）类似。本章将带您浏览所有重要的短语标签，所以让我们开始一一查看它们。

强调文字

<em>...</em>元素中出现的任何内容都会显示为强调文本。

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

这将产生以下结果 -

标记文本

<mark>...</mark>元素中出现的任何内容都显示为用黄色墨水标记。

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

这将产生以下结果 -

强文本

<strong>...</strong>元素中出现的任何内容都会显示为重要文本。

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

这将产生以下结果 -

文字缩写

您可以通过将文本放在开始 <abbr> 和结束 </abbr> 标记内来缩写文本。如果存在，标题属性必须包含完整的描述，仅包含其他内容。

例子

现场演示 
<!DOCTYPE html>
<html>

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

这将产生以下结果 -

首字母缩略词元素

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

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

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

这将产生以下结果 -

文字方向

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

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

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

这将产生以下结果 -

特别条款

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

通常，您会在第一次引入关键术语时使用 <dfn> 元素。最新的浏览器以斜体字体呈现 <dfn> 元素的内容。

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

这将产生以下结果 -

引用文字

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

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

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <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>

这将产生以下结果 -

简短的报价

当您想在句子中添加双引号时，可以使用<q>...</q>元素。

例子

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

这将产生以下结果 -

文本引用

如果您引用文本，则可以将其放置在开始<cite>标记和结束</cite>标记之间指示来源

正如您在印刷出版物中所期望的那样，<cite> 元素的内容默认以斜体文本呈现。

例子

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

这将产生以下结果 -

计算机代码

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

例子

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

这将产生以下结果 -

键盘文字

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

例子

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

这将产生以下结果 -

编程变量

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

例子

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

这将产生以下结果 -

程序输出

<samp> ...</samp>元素表示程序和脚本等的示例输出。同样，它主要在记录编程或编码概念时使用。

例子

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

这将产生以下结果 -

地址文本

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

例子

现场演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

这将产生以下结果 -