打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

2022.11.13 安徽

关注
全世界只有不到1 % 的人关注了
啦啦啦好想biu点什么
- 2021.04.24 -
<abbr>:缩写元素HTML的缩写元件(<abbr>)表示缩写或首字母缩写; optionaltitle属性可以提供缩写的扩展名或说明。如果存在,则title必须包含此完整描述,而不能包含其他任何内容。
内容类别流内容,措词内容,可触知的内容
允许的内容短语内容
标签遗漏没有,开始标签和结束标签都是必需的。
准父母任何接受措辞内容的元素
隐式ARIA角色没有相应的角色
允许的ARIA角色任何
DOM接口HTMLElement
属性该元素仅支持全局属性。当title与<abbr>元素一起使用时,该属性具有特定的语义含义。它必须包含完整的人类可读描述或缩写的扩展。当鼠标光标悬停在元素上时,此文本通常由浏览器显示为工具提示。
您使用的每个<abbr>元素都独立于其他所有元素;title为某人提供不会自动将相同的扩展文本附加到具有相同内容文本的其他扩展文本。
典型用例当然,不需要使用<abbr>标记所有缩写。但是,在某些情况下,这样做有帮助:
当使用缩写并且您想在文档内容流之外提供扩展名或定义时,请使用<abbr>适当的title。
要定义读者可能不熟悉的缩写,请使用<abbr>和title来提供术语,并提供定义的属性或内联文本。
当需要在语义上标注缩写的出现时,该<abbr>元素很有用。依次将其用于样式或脚本编写目的。
您可以<abbr>与<dfn>一起使用来为缩写词或首字母缩略词建立定义。请参见下面的示例定义缩写。
语法注意事项在具有语法编号的语言(即,项数影响句子语法的语言)中,在title属性中使用与<abbr>元素内部相同的语法编号。这在具有两个以上数字的语言(例如阿拉伯语)中尤为重要,但在英语中也与此相关。
默认样式此元素的目的纯粹是为了方便作者使用,并且所有浏览器默认情况下都以内联()显示该元素,尽管其默认样式在一个浏览器与另一个浏览器之间有所不同:display: inline
某些浏览器(例如Internet Explorer)的样式与<span>元素的样式不同。
Opera,Firefox和其他一些元素在元素的内容上添加了一个虚线下划线。
一些浏览器不仅添加了虚线下划线,而且还大写了下划线。为了避免这种样式,在CSS中添加类似内容可以解决这种情况。font-variant: none
例子在语义上标记缩写
要标记缩写但不提供扩展名或描述,请使用<abbr>不带任何属性的字符,如本例所示。
HTML
<p>Using <abbr>HTML</abbr> is fun and easy!</p>结果
样式缩写
您可以使用CSS设置用于缩写的自定义样式,如以下简单示例所示。
HTML
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>CSS
abbr {
font-variant: all-small-caps;
}结果
提供扩展
通过添加title属性,您可以提供缩写或首字母缩写的扩展名或定义。
HTML
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>结果
定义缩写
您可以<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>
结果
无障碍问题首次在页面上完全使用首字母缩写词或缩写时,特别有助于内容理解,尤其是在内容是技术或行业术语的情况下,这有助于帮助人们理解它。
例子
<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
这对于不熟悉内容中讨论的术语或概念的人,对语言不熟悉的人以及有认知问题的人特别有用。
规格规格地位
HTML Living Standard该规范
中“ <abbr>”的定义。生活水平
HTML5
该规范中“ <abbr>”的定义。推荐
HTML 4.01规范
该规范中“ <abbr>”的定义。推荐
浏览器兼容性
相关内容
基于HTML/CSS的响应式俄罗斯套娃ʕ ·ᴥ·ʔ小游戏
2021年50个酷炫的Web和移动项目创意
使用HTML,CSS和JavaScript创建Chrome扩展程序
基于HTML/CSS的勇敢的兔子疯狂奔跑小游戏
我是怎样制作这个逼真的红色开关的
25个带有酷炫动画的创意404错误页面,快给你的网站换上吧
惊了,开发人员‍的终极VueJS资源泄露
2021年Java各知识点综合面试题
高级,界面这么好看的Bootstrap模板你确定不看看?
热爱可抵岁月漫长
感谢您的阅览,整理不易,给个点赞❤和在看👀支持一下吧!
您的鼓励就是作者最大的动力
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
HTML 引用
HTML5 标签大全
HTML语言编写指南 - 阮一峰的网络日志
CSS 指南 | 菜鸟教程
<acronym> 和 <abbr> 这两个标签有什么本质上的区别吗? |
一些网页设计师面试试题及参考答案
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服