HTML <abbr> 标签

参考资料

1. HTML 表格头部、主体、页脚
2. HTML 中最常用的<div>容器元素
3. HTML 段落格式化标签
4. HTML id 属性详解
5. Html转ASP/Perl有哪些
6. HTML 列表
7. HTML <abbr> 标签
8. HTML 属性

HTML <abbr> 标签（缩略词格式化）

1. 介绍

<abbr> 标签用于定义缩写或首字母缩略词，并通过 title 属性提供完整解释，增强语义化和可访问性。

2. 标签语法

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

示例：  

<abbr title="HyperText Markup Language">HTML</abbr>

3. 用法

• 包裹需要解释的缩写词

• 必须使用 title 属性提供完整解释

• 适用于技术术语、机构名称、计量单位等

4. 功能

• 语义化标记：帮助浏览器和搜索引擎识别缩写

• 悬停提示：鼠标悬停时显示 title 内容

• 可访问性：辅助技术（如屏幕阅读器）可读取 title

• SEO 优化：提供更清晰的上下文信息

5. CSS 扩展

可自定义样式，增强视觉效果：

基础样式

abbr {
  cursor: help; /* 悬停时显示问号光标 */
  text-decoration: underline dotted; /* 虚线样式 */
}

悬停效果

abbr:hover {
  color: blue; /* 悬停变色 */
}

打印优化（显示完整解释）

@media print {
  abbr[title]::after {
    content: " (" attr(title) ")";
    font-size: 0.9em;
  }
}

自定义提示样式（实验性）

abbr[title] {
  position: relative;
}
abbr[title]:hover::after {
  content: attr(title);
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  bottom: 100%;
  left: 0;
  white-space: nowrap;
}

6. 注意事项

• 避免滥用，仅用于需要解释的缩写

• 确保 title 内容简洁清晰

• 部分旧浏览器可能不支持 <abbr>，但现代浏览器均兼容

通过 <abbr> 标签，可以提升网页的可读性和 SEO 表现，同时增强用户体验。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。