HTML宝典(第 1 版)
2.3.12 dfn元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

abbr元素

mark元素

cite元素

q元素

s元素

u元素

b元素

i元素

small元素

strong元素

文本元素

dfn元素

dfn元素用来定义术语,可以通过可选的 title属性来提供对术语的准确定义。如果提供定义,只需包含对术语的定义,不必包含其他内容。

定义术语时,dfn元素仅仅包含术语,而不必包含术语的定义。并且,只对首次出现的术语使用 dfn元素,后面再提到该术语时,则不再使用 dfn元素。但是,如果术语是缩写词,后面出现时,也可以使用 abbr 元素。如:

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>is a device that allows off-world teams to open the iris.</p>
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>and so Hammond ordered the iris to be opened.</p>

默认情况下,浏览器会将 dfn元素的内容渲染为斜体。并且,当鼠标悬停到术语上时,浏览器就会将 title属性的内容显示在提示框里。Firefox浏览器也为术语添加虚线下划线。运行结果如图 2‑26 所示:

dfn元素
图2-26 dfn元素

同样,考虑到使用智能手机和平板电脑等触摸设备的用户,建议把术语的定义放在术语后面的括号中。

说明:

Firefox浏览器会对带有 title属性的 abbr 和 dfn元素添加虚线下划线,是非常人性化的作法。如果希望其他浏览器中也有相同的效果,只需在CSS中添加以下代码即可:

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验