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


目录
相关文章
|
12月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
333 15
|
8月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
349 19
|
11月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
568 74
|
12月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
272 19
|
12月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
428 2
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
585 11
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
4470 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。