首页 > 编程笔记

HTML <abbr>标签:定义缩写词

HTML <abbr> 标签可以标记缩写词并解释其含义。当然,不必对每个缩写词都使用 abbr,只在需要帮助访问者了解该缩写词含义的时候使用。例如:

<abbr title=" HyperText Markup Language">HTML</abbr>是一门标识语言。

使用可选的 title 属性提供缩写词的全称,也可以将全称放在缩写词后面的括号里(这样做更好)。

另外,还可以同时使用这两种方式,并使用一致的全称。如果大多数人都很熟悉了,就没有必要对它们使用 abbr 并提供 title,这里只是用它们演示示例。

通常,仅在缩写词第一次出现在屏幕上时,通过 title 或括号的方式给出其全称。

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

如果使用复数形式的缩写词,全称也要使用复数形式。作为对用户的视觉提示,Firefox 和 Opera 等浏览器会对带 title 的 abbr 文字使用虚线下画线。如果希望在其他浏览器中也这样显示,可以在样式表中加上下面的样式。

abbr[title] { border-bottom: 1px dotted #000; }

无论 abbr 是否添加了下画线样式,浏览器都会将 title 属性内容以提示框的形式显示出来。如果看不到 abbr 有虚线下画线,可以为其父元素的 CSS 添加 line-height 属性。

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

当访问者将鼠标移至 abbr 上,该元素 title 属性的内容就会显示在一个提示框里。在默认情况下,Chrome 等一些浏览器不会让带有 title 属性的缩写词与普通文本有任何显示上的差别。

推荐阅读

副业交流群 关注微信公众号,加入副业交流群,学习变现经验,交流各种打法。