4.9　解释缩写词

4.9　解释缩写词

缩写词很常见，如Jr.、M.D.，甚至good ol' HTML。可以使用abbr元素标记缩写词并解释其含义（参见图4.9.1、图4.9.2和图4.9.3）。不必对每个缩写词使用abbr，只在需要帮助访问者了解该词含义的时候使用。

...
<body>
 
<p>The <abbr title="National Football League">NFL</abbr> promised a <abbr title="light amplification by stimulated emission of radiation"> laser</abbr> show at 9 p.m. after every night game.</p>
 
<p>But, that's nothing compared to what <abbr>MLB</abbr> (Major League Baseball) did. They gave out free <abbr title="self-contained
underwater breathing apparatus">scuba</abbr> gear during rain delays.</p>
 
</body>
</html>

图4.9.1　使用可选的title属性提供缩写词的全称。另外，也可以将全称放在缩写词后面的括号里（这样做或许更好）。还可以同时使用这两种方式，并使用一致的全称。对于像laser（激光）、scruba（水肺潜水）这样的词汇，大多数人都很熟悉了，因此对它们使用abbr并提供title其实并无必要，这里使用它们是出于演示目的

4.9　解释缩写词 - 图1

图4.9.2　当缩写词有title属性时，Firefox和Opera会添加虚线下划线以引起注意。（可以通过CSS让其他浏览器也这样做；参见提示。）对除IE6以外的所有浏览器，当访问者将鼠标移至abbr上，该元素title属性的内容就会显示在一个提示框里

4.9　解释缩写词 - 图2

图4.9.3　Chrome和一些其他的浏览器会将缩写词的title显示在提示框里，但它们不会让缩写词本身有显示上的区别，除非你自行添加一些CSS

解释缩写词的步骤

输入。
作为可选的一步，输入title="expansion"，其中expansion是缩写词的全称。
输入>。
然后输入缩写词本身。
最后输入结束标记。
作为可选的一步，输入一个空格和(expansion)，其中expansion是缩写词的全称。

提示　通常，仅在缩写词第一次出现在屏幕上时给出其全称（通过title或括号的方式），参见图4.9.1。

提示　用括号提供缩写词的全称是最直接的解释缩写词的方式，能让尽可能多的访问者看到这些内容，参见图4.9.1。例如，使用智能手机和平板电脑等触摸屏设备的用户可能无法移到abbr元素上查看title的提示框。因此，如果要提供缩写词的全称，应该尽量将它放在括号里。

提示　如果使用复数形式的缩写词，全称也要使用复数形式。

提示　作为对用户的视觉提示，Firefox和Opera等浏览器会对带title的abbr文字使用虚线下划线，参见图4.9.2。如果要在所有的浏览器（IE6除外）中复制这种样式，可以在样式表中加上这条语句：abbr[title] { border-bottom: 1px dotted #000; }。无论abbr是否添加了下划线样式，浏览器都会将title属性内容以提示框的形式显示出来，参见图4.9.3。

提示　如果在Internet Explorer 7中看不到abbr有虚线下划线，试着为其父元素的CSS添加line-height属性（参见第10章）。

提示　IE6不支持abbr，因此既没有虚线下划线也没有提示框，只有文字本身。如果确实希望在IE6中为abbr应用样式，可以在CSS之前将document.createElement('abbr');放在针对IE6的JavaScript文件里。要我说，不如略过这一办法，把IE6当作一个例外。（关于在IE8及旧版本中使用document.createElement让元素看起来像HTML5中添加样式的新元素，参见第11章。）

提示　在HTML5之前有acronym（首字母缩写词）元素，但设计和开发人员常常分不清楚缩写词和首字母缩写词，因此HTML5废除了acronym元素，让abbr适用于所有的场合。

4.9 解释缩写词