标签描述
<em>呈现为被强调的文本。
<strong>定义重要的文本。
<dfn>定义一个定义项目。
<code>定义计算机代码文本。
<samp>定义样本文本。
<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

本章介绍HTML短语标签,它和前面介绍的格式标签类似,以上表格为HTML短语标签,现在让我们来看看这些短语标签的用法。

强调文本<em>...</em>

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>强调文本例子</title>
   </head>
	
   <body>
        <p>以下单词使用<em>强调</em>字体。</p>
   </body>
	
</html>

测试一下

标记文本<mark>...</mark>

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>标记文本例子</title>
   </head>
	
   <body>
      <p>以下单词已被<mark>标记</mark>为黄色</p>
   </body>
	
</html>

测试一下

重要文本<strong>...</strong>

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>重要文本例子</title>
   </head>
	
   <body>
      <p>以下单词使用<strong>重要文本</strong>字体。</p>
   </body>
	
</html>

测试一下

文本缩写<abbr>...</abbr>

您可以通过将文本放在 <abbr>...</abbr> 标签中来缩写文本。如果存在,标题属性必须包含完整的描述,仅包含其他内容。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>文本缩写例子</title>
   </head>
	
   <body>
      <p>我最好朋友的名字是<abbr title = "王小明">王小明</abbr>。</p>
   </body>
	
</html>

测试一下

缩写元素<acronym>...</acronym>

<acronym>...</acronym> 标记之间的文本是首字母缩略词。

目前,主要浏览器不会更改内容的外观。 

示例

<!DOCTYPE html>
<html>

   <head>
      <title>缩写元素例子</title>
   </head>
	
   <body>
      <p>本章介绍在 <acronym>XHTML</acronym> 中标记文本。</p>
   </body>
	
</html>

测试一下

文本方向<bdo>.. .</bdo>

<bdo>.. .</bdo> 标签用于文本方向的展示。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>文本方向的例子</title>
   </head>

   <body>
           <p>该文本将从左到右排列。</p>
       <p><bdo dir = "rtl">该文本将从右向左显示。</bdo></p>
   </body>

</html>

测试一下

特殊术语<dfn>...</dfn>

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

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>特殊术语例子</title>
   </head>
	
   <body>
       <p>以下是一个<dfn>特殊</dfn>术语。</p>
   </body>
	
</html>

测试一下

引用文本<blockquote>...</blockquote>

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

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>引用文本的例子</title>
   </head>
	
   <body>
           <p>以下 XHTML 描述取自 W3C 网站:</p>
       <blockquote>XHTML 1.0 是 W3C 的第一个 XHTML 推荐标准,随后是
          来自 HTML 4.01、HTML 4.0、HTML 3.2 和 HTML 2.0 的早期工作。</blockquote>
   </body>
	
</html>

测试一下

双引号<q>...</q>

当您想在句子中添加双引号时,可以使用 <q>...</q> 标签。

示例

<!DOCTYPE html>
<html>
    <head>
       <title>双引号示例</title>
    </head>

    <body>
       <p>测试html双引号例子,<q>吃了吗?</q>。</p>
    </body>

</html>

测试一下

文本引用<cite>...</cite>

如果您引用文本,您可以在<cite>...</cite> 标记之间指明来源,<cite> 元素的内容默认以斜体文本呈现。

示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>文本引用例子</title>
   </head>
   
   <body>
     <p>本 HTML 教程源自 <cite>HTML 的 W3 标准</cite>。</p>
   </body>
   
</html>

测试一下

编程代码<code>...</code>

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

示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>编程代码例子</title>
   </head>
   
   <body>
      <p>常规文本。 <code>这是代码。</code>常规文本。</p>
   </body>
   
</html>

测试一下

输入文本

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

示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>输入文本例子</title>
   </head>
   
   <body>
      <p>常规文本。 <kbd>这是 kbd 元素内部</kbd> 常规文本。</p>
   </body>
   
</html>

测试一下

编程变量

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

示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>变量文本例子</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

测试一下

程序输出

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

示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>程序输出例子</title>
   </head>
   
   <body>
      <p>程序产生的结果是<samp>Hello World!</samp></p>
   </body>
   
</html>

测试一下

地址文本<address>...</ address>

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

示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>地址标签例子</title>
   </head>
   
   <body>
      <address>湖北省武汉xxx街道xx单位xx房号</address>
   </body>
   
</html>

测试一下