主题
  • 默认模式
  • 浅蓝色模式
  • 淡红色模式
  • 深夜模式

定义和用法

<abbr>标签用于表示缩写或首字母缩略词,通过提供完整解释来增强可访问性和用户体验。

通过给<abbr>标签添加 title 属性,来实现对简化词语的解释说明。

下面代码是<abbr>标签的基于语法:

<abbr title="完整解释">缩写</abbr>

其中,title 为必需属性,包含缩写的完整解释。


常用的实例

1. <abbr>基本用法:

实例代码 运行代码
复制
<abbr title="HyperText Markup Language">HTML</abbr> 是构建网页的标准标记语言。

2. 与<dfn>结合使用:

实例代码 运行代码
复制
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> 是用于描述 HTML 文档样式的语言。

3. <abbr>多个缩写:

实例代码 运行代码
复制
在<abbr title="World Wide Web">WWW</abbr>上,
<abbr title="HyperText Transfer Protocol">HTTP</abbr>
是主要的应用协议。

全局属性

<abbr>标签还支持全局属性,有关全局属性的更多信息。


事件属性

<abbr>标签还支持事件属性,有关事件属性的更多信息。


提示和注释

  • 始终包含 title 属性:这是<abbr>标签的主要用途。
  • 保持解释简洁:title 值应该是缩写的清晰完整形式。
  • 首次出现时使用:在文档中首次出现缩写时使用<abbr>标签。
  • 考虑可访问性:屏幕阅读器会朗读title属性,帮助视障用户。

CSS 样式及优化

大多数浏览器将使用以下默认值显示<abbr>元素:

abbr {
  display: inline;
}

您可以使用 CSS 为缩写添加特殊样式:

abbr {
  cursor: help; /* 鼠标悬停时显示帮助光标 */
  border-bottom: 1px dotted #999; /* 添加虚线底部边框 */
  text-decoration: none; /* 移除默认下划线 */
}

浏览器支持

Chrome 浏览器 IE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
支持 支持 支持 支持 支持



评论区 0
发表评论