a元素上id比class更关键，因其锚点跳转依赖id匹配URL fragment；data-属性用于携带JS处理所需上下文；aria-label优先于title保障无障碍；外链必须用rel="noopener noreferrer"防安全漏洞。
为什么 a 元素上用 id 比用 class 更关键
因为 a 元素常承担锚点跳转功能，而锚点依赖 id 值匹配 URL 中的 fragment（如 #section2）。class 无法触发这种原生导航行为。
常见错误是给 a 标签加 class="jump-to" 却忘了在目标元素上设对应 id，结果点击后页面无反应。正确做法是成对使用：
- 链接写法：
<a href="#contact">联系我</a> - 目标位置：
<div id="contact"></div> -
id值必须严格一致（大小写敏感），且不能以数字开头，比如id="1section"是无效的
data- 属性怎么让链接携带额外上下文
当多个 a 元素需要被 JavaScript 统一处理，又各自需要不同参数时，data- 是最干净的选择。它比拼接 query string 或滥用 title 更语义化、更可控。
例如，统计不同来源的外链点击：
立即学习“前端免费学习笔记（深入）”；
<a href="https://example.com" data-source="sidebar" data-position="3">示例链接</a>- JS 中可直接读取：
link.dataset.source得到"sidebar"，link.dataset.position得到"3" - 注意：
data-后的命名需全小写或用短横线分隔（如data-user-id），驼峰式（dataUserId）会被浏览器自动转为小写连字符形式
title 和 aria-label 在链接中该选谁
title 是视觉提示，只在鼠标悬停时出现，对键盘用户和屏幕阅读器支持不稳定；aria-label 是无障碍优先的显式标签，会覆盖链接文本内容供辅助技术读出。
实际建议按场景区分：
- 纯装饰性提示（如“点击展开详情”）→ 用
title，不干扰语义 - 链接文本本身不明确（如
<a href="/pdf">下载</a>）→ 必须加aria-label="下载产品说明书 PDF" - 同时存在图标和文字的链接（如
<a href="/share"><svg>...</svg>分享</a>）→ 加aria-label避免屏幕阅读器重复读“分享 分享”
rel 不是全局属性，但它在 a 上几乎必须用
rel 虽然不是全局属性，但在链接场景中影响安全与 SEO，漏配容易引发问题。
典型组合与风险：
- 外链跳转未加
rel="noopener noreferrer"→ 可能导致 opener 漏洞（新页面通过window.opener控制原页面） - 用
rel="nofollow"时，搜索引擎通常不传递权重，但不会阻止爬虫抓取该链接 -
rel="prefetch"或rel="preload"对a无效，它们只对<link>标签起作用
真正容易被忽略的是：即使你只写 rel="noopener"，现代浏览器也会隐式补上 noreferrer 行为；但为了明确语义和兼容旧版，两个值一起写仍是稳妥做法。
