HTML 标签

参考资料

1. HTML 超链接
2. HTML 链接详解
3. html文本标签详细说明以及案例
4. Html转JS有哪些
5. HTML id 属性在 JavaScript 中的使用
6. HTML 标题
7. html表格标签详细说明以及案例
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 表现，同时增强用户体验。