HTML 中的 ＜abbr＞ 标签与 role 属性

昨日浏览CSS Zen Garden网页源码，看到 html 文档中很有意思的 abbr 标签，和其他标签中的 role 属性。记录一下并做个知识点小结。

<abbr>

属性

HTML 缩写元素（<abbr>）用于代表缩写，有一个可选属性 title。可以通过此属性提供完整的描述。注：若使用 title 属性，则它必须且仅可包含完整的描述内容。

<p>
You can use 
<abbr title="Cascading Style Sheets">CSS</abbr> 
to style your 
<abbr title="HyperText Markup Language">HTML</abbr>
.
</p>

You can use CSS to style your HTML .

用法

常见用法

• 为缩写在文档流外提供一段扩展或定义的时候.
• 定义一个读者可能不太熟悉的缩写时.
• 当文本中出现需要进行语义上的标注的缩写词时，<abbr>元素可用于依次将其作用样式和脚本。

特殊用法

• 可以将 <abbr> 与 <dfn> 配合使用来建立缩写或首字母缩略词的定义。

<p>
<dfn id="html">
<abbr title="HyperText Markup Language">HTML</abbr>
</dfn> 
is a markup language used to create the semantics and structure of a web page.
</p>

<p>
A 
<dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) 
is a document that outlines in detail how a technology or API is intended to function and how it is accessed.
</p>

HTML is a markup language used to create the semantics and structure of a web page.

A Specification (spec) is a document that outlines in detail how a technology or API is intended to function and how it is accessed.

默认样式

在 CSS 中，默认 <abbr> 元素为行内元素，但在不同浏览器中有微小的差别。

• IE及其他一些浏览器，对它的添加的样式和 <span> 元素的样式完全相同。
• Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线 。
• 一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免，在 CSS 中添加 font-variant: none

浏览器兼容性

扩展阅读

高级文字格式 - 使用 <abbr> 元素

role

role 属性可增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。

作用

描述一个非标准的 tag 的实际作用。

代码示例

注：代码来源–CSS Zen Garden

<div class="summary" id="zen-intro" role="article">……</div>

<header role="banner">……</header>

<p role="contentinfo">……</p>

<aside class="sidebar" role="complementary">……</aside>