18. 缩写 abbr 与定义 dfn

本节目标：学会用 abbr 标注缩写含义，用 dfn 标记文档中首次定义的术语。

abbr：标注缩写

<abbr> 标记缩写词，title 属性给出完整解释。

<p>
  <abbr title="HyperText Markup Language">HTML</abbr>
  是网页的基础。
</p>

鼠标悬停在”HTML”上时，浏览器会弹出”HyperText Markup Language”的提示。

屏幕阅读器遇到 <abbr> 可以选择读出完整拼写，而不是按字母逐个读。

不同国家对同一个缩写可能有不同解读。title 帮助消除歧义。

<p>
  <abbr title="International Olympic Committee">IOC</abbr>
  宣布了新决定。
</p>

浏览器默认不会给 <abbr> 加任何特殊样式。通常可以加点样式提醒用户这里有提示：

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

上面这段 CSS 给有 title 属性的 <abbr> 加上虚线边框和问号光标。

<dfn> 标记一个术语在文档中首次被定义的地方。

<p><dfn>语义化 HTML</dfn>是指使用恰当的标签来表达内容含义，
而不是只关心外观。</p>

<dfn> 告诉浏览器和搜索引擎：这里是一个概念的定义。

如果 <dfn> 有 title 属性，它的值就是术语的正式名称。

<p>
  <dfn title="语义化 HTML">Semantic HTML</dfn>
  让代码更易读、更易于维护。</p>

有些缩写本身就是术语定义，可以组合使用：

<p>
  <dfn>
    <abbr title="Cascading Style Sheets">CSS</abbr>
  </dfn>
  用于控制网页的视觉样式。
</p>

外层 <dfn> 说”这里在定义术语”，内层 <abbr> 说”这是缩写”。

术语只需要在第一次出现时用 <dfn> 标记。之后再用就不用了。

<p><dfn>Flexbox</dfn>是 CSS 的一种布局方式。</p>
<p>使用 Flexbox 可以轻松实现水平居中。</p>
<p>Flexbox 还支持响应式布局。</p>

只有第一个”Flexbox”被 <dfn> 包裹。

这里列出一些网页开发中常见的缩写：

缩写	完整拼写	含义
HTML	HyperText Markup Language	超文本标记语言
CSS	Cascading Style Sheets	层叠样式表
JS	JavaScript	JavaScript 脚本语言
URL	Uniform Resource Locator	统一资源定位符
API	Application Programming Interface	应用程序接口
DOM	Document Object Model	文档对象模型

acronym 已废弃

以前有个 <acronym> 标签专门标记首字母缩写词。现在废弃了，统一用 <abbr> 即可。