2.4 HTML的格式元素

HTML的<tt> <i> <b> <big> <small>标签均是字体样式元素，HTML的<em> <strong> <dfn> <code> <samp> <kbd><var>和<cite>标签都是短语元

素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上这些标签都拥有确切的语义。这里并不反对使用它们，但是如果只是为了达到某种视觉效果而使用这些标签的话，建议使用样式表，会达到更加丰富的效果。

2.4.1 字符格式化

1. <em>和<strong>

<em>标签告诉浏览器把其中的文本表示为强调的内容，显示效果是斜体。在文本中加入强调也需要有技巧，强调太多将导致有些重要的短语可能会被漏掉，强调太少可能无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。如果只想使用斜体字来显示文本的话，可以使用<i>标签或CSS样式。除强调之外，当引入新的术语，或在引用特定类型的术语或概念作为固定样式时，也可以考虑使用<em>标签。

<strong>标签和<em>标签一样，用于强调文本，但它强调的程度更强一些。在浏览器中是以加粗的字体（相对于斜体）来显示其中的内容。<strong>标签出现的次数应该比<em>标签更少。如果说用<em>标签修饰的文本好像是在大声呼喊，那么用<strong>标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金，与此相同，限制<strong>的使用可以更加引人注意，而且更加有效。举一个例子，许多教程页面的第一句摘要都是以粗体显示的，实际上是对这一句摘要使用了<strong>标签。使用这个标签的理由是，教程摘要不仅概括了其所在页面的内容，而且位于页面最重要的位置，其内容自然是非常重要且值得强调的。

2. <sub>和<sup>

<sub>标签定义下标文本，<sup>标签定义上标文本。

包含在它们的开始标签和结束标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

3. <bdo>

bdo元素可覆盖默认的文本方向。其dir属性有两个值：ltr和rtl。

4. <i>、<b>和<small>

<i>标签表示与其他文本不同的部分，浏览器中呈现为斜体文本效果。<i>标签和基于内容的样式标签<em>类似。它告诉浏览器将包含其中的文本以斜体字（Italic）或者倾斜（Oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下画线等样式。

<b>标签表示更重要的部分，浏览器中呈现为粗体文本效果。<b>标签是基于内容的样式标签<strong>的物理版本，但它没有后者的扩展意义。<b>标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。如果某种加粗的字体不可用，浏览器将使用一些其他的表现方法，如反相显示或者加下画线等。

<small>标签呈现小号字体效果。<small>标签和它所对应的<big>标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么<small>标签将不起任何作用。与<big>标签类似，<small>标签也可以嵌套，从而连续地把文字缩小。每个<small>标签都把文本的字体变小一号，直到达到下限的一号字。

5. <mark>

<mark>标签定义带有记号的文本。请在需要突出显示文本时，使用<mark>标签。

2.4.2 输出

1. <pre>

<pre>元素可定义预格式化的文本。被包围在<pre>元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

<pre>标签的一个常见应用就是用来表示计算机的源代码。pre元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（如<a>标签）放到<pre>块中时，就像放在HTML/XHTML文档的其他部分中一样即可。

2. <code>

<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code>标签就是为它们设计的，包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。

3. <kbd>

<kbd>标签定义键盘文本。它用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。<kbd>标签经常用在与计算机相关的文档和手册中。

4. <var>

<var>标签表示变量的名称，或者由用户提供的值。这个标签经常与<code>和<pre>标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用<var>标签标记的文本通常显示为斜体。

5. <dfn>

<dfn>标签可标记那些对特殊术语或短语的定义。浏览器通常用斜体来显示<dfn>中的文本，尽量少使用<dfn>标签。作为一种通用样式，尤其在技术文档中，当第一次使用新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不需要再对这个术语进行任何标记了。

6. <samp>

<samp>标签表示一段用户应该对其没有什么其他解释的文本字符。<samp>标签并不经常使用，只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少数情况下，才会使用这个标签。

7. <meter>和<progress>

<meter>标签定义已知范围或分数值内的标量测量，也被称为gauge（尺度），如磁盘用量、查询结果的相关性等。<meter>标签不应用于指示进度（在进度条中）。如果要标记任务的进度（进程），请使用<progress>标签。

8. <rp>、<rt>和<ruby>

<ruby>标签定义ruby注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。ruby元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的rt元素组成，也可以包括可选的rp元素，定义当浏览器不支持ruby元素时显示的内容。

2.4.3 块级

1. <abbr>

<abbr>表示一个缩写形式，如“Inc.”“etc.”等。通过对缩写词语进行标记，就能够为浏览器、拼写检查程序、翻译系统及搜索引擎分度器提供有用的信息。

示例HTML代码如下。

2. <address>

<address>可定义一个地址（如电子邮件地址）。应当使用它来定义地址、签名或者文档的作者身份等。不论创建的文档是简短扼要还是冗长完整，都应该确保每个文档都附加了一个地址，这样做不仅为读者提供了反馈的渠道，还可以增加文档的可信度。

示例HTML代码：

3. <q>和<blockquote>

<q>标签定义短的引用，浏览器经常在引用的内容周围添加引号。

<blockquote>标签定义块引用，<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

<q>与<blockquote>的区别：<q>标签在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q>标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用<blockquote>标签。

4. <cite>

<cite>标签通常表示它所包含的文本对某个参考文献的引用，如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志和期刊等。如果引用的这些文档有联机版本，还应该把引用包括在一个<a>标签中，从而把一个超链接指向该联机版本。

<cite>标签还有一个隐藏的功能：它可以使用户或者其他人从文档中自动摘录参考书目。可以想象有一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

5. <del>和<ins>

<del>标签定义文档中已被删除的文本，浏览器中呈现为中间有一条贯穿线。

<ins>标签定义已经被插入文档中的文本，浏览器中呈现为下画线。

两个标签一起使用，以描述对文档的更新和修正。

示例HTML代码：

2.4.4 wbr和time元素

Word Break Opportunity（<wbr>）规定在文本中的何处适合添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么可以使用<wbr>元素来添加Word Break Opportunity （单词换行时机）。

<time>标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。<time>标签不会在任何浏览器中呈现任何特殊效果。