• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <abbr>

    HTML缩写元素(<abbr>)用于展示缩写,并且可以通过可选的title属性提供完整的描述。若使用title属性,则它必须且仅可包含完整的描述内容。

    浏览器支持

    所有主流浏览器都支持<abbr>标签。
    注释:IE 6 或更早版本的 IE 浏览器不支持<abbr>标签。

    示例

    被标记的缩写词如下:

    the <abbr > who </abbr was founded in 1948.
    etc.

    标签定义及使用说明

    • <abbr>标签用来表示一个缩写词或者首字母缩略词,如"WWW"或者"NATO"。"Inc."、"etc."。
    • 通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
    • 在某些浏览器中,当您把鼠标移至带有<abbr>标签的缩写词/首字母缩略词上时,<abbr>标签的 title 属性可被用来展示缩写的完整版本。
    • 浏览器可能会根据这个信息改变对这些文本的显示方式,或者用其他文本代替。

    典型用例

    当然,并不要求所有缩写都使用<abbr>标记。不过,在一些情况下,这样做是有帮助的:

    • 当使用缩写时,如果要在文档内容流之外提供扩展或定义,请使用<abbr>和适当的标题来定义读者可能不熟悉的缩写,使用<abbr>title属性或提供定义的内联文本来表示术语。
    • 当需要对文本中的缩写进行语义标注时,<abbr>元素非常有用。这可以依次用于样式或脚本目的。
    • 您可以将<abbr><dfn>结合使用,为缩写或首字母缩写的术语建立定义。

    当与<abbr>元素一起使用时,title属性具有特定的语义;它必须包含缩写的完整人类可读描述或扩展。当鼠标光标悬停在元素上时,浏览器通常将此文本显示为工具提示。

    您使用的每个元素都独立于其他元素;为一个元素提供标题不会自动将相同的扩展文本附加到具有相同内容文本的其他元素。

    使用title属性定义对缩写的完整描述时,很多用户代理把完整描述以提示框的形式描述。

    注意:在具有语法编号的语言(特别是具有两个以上数字的语言,如阿拉伯语)中,在您的标题属性中使用与您的<abbr>元素一样的语法数字。

    默认样式

    虽然完全为了网站制作者的方便,所有的浏览器都默认把这个元素显示为行内元素(display:inline),但是默认样式在不同浏览器中存在差别:

    • 一些浏览器,比如 IE,对它的添加的样式和<span>元素的样式完全相同。
    • Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线。
    • 一些浏览器不仅添加点状下划线,而且还把元素的内容添加小写大写字母的样式。若要避免这种样式,在 CSS 中添加font-variant:none
    内容分类流式内容元素,措辞内容,可触摸内容元素
    允许的内容措辞内容
    标签省略不允许,开始标签和结束标签都不能省略。
    允许的父元素所有接受元素
    允许的 ARIA roles
    DOM接口HTMLElement

    属性

    这个元素只有全局属性。

    HTML 4.01 与 HTML5之间的差异

    无。

    全局属性

    <abbr>标签支持HTML 的全局属性。

    事件属性

    <abbr>标签支持HTML 的事件属性。

    例子

    想要创建不含解释或描述性的缩写,就直接用<abbr>不添加任何属性。请看下面的例子。

    <p>using <abbr>html</abbr> is fun and easy!</p>

    using html is fun and easy!

    你可以像这个简单的例子一样,用CSS来为缩写做一个样式。

    HTML
    <p>using <abbr>css</abbr>, you can style your abbreviations!</p>
    
    CSS
    abbr {
      font-variant: all-small-caps;
    }
    

    using css, you can style your abbreviations!

    添加title属性可以为缩写或首字母缩写提供扩展或定义。

    <p>ashok's joke made me <abbr >lol</abbr> big
    time.</p>
    

    您可以使用<abbr><dfn>来更正式地定义缩写,如下所示。

    <p><dfn id="html"><abbr >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 >spec</abbr>) is a document that outlines
    in detail how a technology or api is intended to function and how it is
    accessed.</p>

    无障碍问题

    在缩略词第一次出现在页面的时候,将它书写完整对帮助人们理解很有用处的,特别是内容是技术或者工业术语

    <p>javascript object notation (<abbr>json</abbr>) is a lightweight data-interchange format.</p>
    

    上篇:<a>

    下篇:<b>