HTML缩写元素: <abbr>-超文本标记语言| MDN

简介: HTML缩写元素: <abbr>-超文本标记语言| MDN

HTML的缩写元件(<abbr>)表示的缩写或首字母缩写; optionaltitle属性可以提供缩写的扩展名或说明。如果存在,则title必须包含此完整描述,而不能包含其他任何内容。

屏幕快照 2021-11-23 下午4.23.16.png

属性


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


您使用的每个<abbr>元素都独立于其他所有元素;title为某人提供不会自动将相同的扩展文本附加到具有相同内容文本的其他扩展文本。


典型用例


当然,不需要使用<abbr>标记所有缩写。但是,在某些情况下,这样做有帮助:


当使用缩写并且您想在文档内容流之外提供扩展名或定义时,请使用<abbr>适当的title。


要定义读者可能不熟悉的缩写,请使用<abbr>和来title提供术语,并提供定义的属性或内联文本。


当需要在语义上标注缩写的出现时,该<abbr>元素很有用。依次将其用于样式或脚本编写目的。


您可以<abbr>与一起使用<dfn>来为缩写词或首字母缩略词建立定义。请参见下面的示例定义缩写。


语法注意事项


在具有语法编号的语言(即,项数影响句子语法的语言)中,在title属性中使用与元素内部相同的语法编号。这在具有两个以上数字的语言(例如阿拉伯语)中尤为重要,但在英语中也与此相关。


默认样式


此元素的目的纯粹是为了方便作者使用,并且所有浏览器默认情况下都以内联()显示该元素,尽管其默认样式在一个浏览器与另一个浏览器之间有所不同:display: inline


某些浏览器(例如Internet Explorer)的样式与<span>元素的样式不同。


Opera,Firefox和其他一些元素在元素的内容上添加了一个虚线下划线。


一些浏览器不仅添加了虚线下划线,而且还大写了下划线。为了避免这种样式,在CSS中添加类似内容可以解决这种情况。font-variant: none


例子


在语义上标记缩写


要标记缩写但不提供扩展名或描述,请使用不带任何属性的字符,如本例所示。


HTML


<p>Using <abbr>HTML</abbr> is fun and easy!</p>


结果

image.png



样式缩写


您可以使用CSS设置用于缩写的自定义样式,如以下简单示例所示。


HTML


<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>


CSS


abbr {

 font-variant: all-small-caps;

}


结果

image.png


提供扩展


通过添加title属性,您可以提供缩写或首字母缩写的扩展名或定义。


HTML


<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big

time.</p>


结果

image.png


定义缩写


您可以<abbr>与<dfn>串联使用,以更正式地定义缩写,如此处所示。


HTML

<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>



结果

image.png



无障碍问题


首次在页面上完全使用首字母缩写词或缩写时,特别有助于内容理解,尤其是在内容是技术或行业术语的情况下,这有助于帮助人们理解它。


例子


<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>


这对于不熟悉内容中讨论的术语或概念的人,对语言不熟悉的人以及有认知问题的人特别有用。


规格


规格 地位

HTML Living Standard该规范中“ ”的定义。 生活水平

HTML5 该规范中“<abbr>”的定义。 推荐

HTML 4.01规范 该规范中“ ”的定义。 推荐

浏览器兼容性


image.png


目录
相关文章
|
2月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
WK
|
2月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
63 1
|
2天前
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
35 11
|
17天前
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
14天前
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
|
17天前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
14天前
|
Web App开发 移动开发 iOS开发
HTML5 语义元素1
HTML5引入了语义元素,如`&lt;nav&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`&lt;div&gt;`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`&lt;section&gt;`标签用于定义文档中的节,而`&lt;article&gt;`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
|
1月前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。