href属性必须正确填写，否则标签仅为普通容器；常见错误包括漏写href、href="#"未阻止默认行为、路径或协议错误；安全要求target="_blank"必配rel="noopener noreferrer"；download仅对同源URL和Blob生效；rel影响SEO与安全，需规范使用。
href 属性必须填对，否则就不是链接
没有 href 的 <a></a> 标签在 HTML5 中只是个普通容器，不会触发任何跳转行为，也不会被屏幕阅读器识别为可交互元素。常见错误包括：
- 漏写
href，只靠onclick模拟跳转（语义错误、SEO 无价值、键盘用户不可达） - 写成
href="#"又不加event.preventDefault()，导致页面顶部跳动 - 相对路径拼错，比如该用
./assets/file.pdf却写了assets/file.pdf（少了个点，变成从根目录找） - 协议缺失：链接到外部网站时写
href="www.example.com"而不是href="https://www.example.com"，浏览器会当成当前域下的相对路径处理
安全建议：内部锚点统一用 href="#section-id"，ID 必须存在且唯一；邮件和电话链接优先使用 mailto:admin@example.com 和 tel:+8613800138000，不要用 JavaScript 拼接。
target="_blank" 不加 rel="noopener" 有安全隐患
直接写 <a href="https://example.com" target="_blank"></a> 会让新页面通过 window.opener 访问原始页面的 document 和 location，存在反向劫持风险（比如跳转钓鱼页、篡改原页面）。必须配对使用：
-
rel="noopener"：切断window.opener引用（现代浏览器强制要求） -
rel="noreferrer"：额外阻止Referer头发送（隐私更强，但会影响部分分析工具）
正确写法：<a href="https://example.com" target="_blank" rel="noopener noreferrer"></a>。如果只是站内跳转（如文档子页），用 target="_self" 或省略即可，无需加 rel。
立即学习“前端免费学习笔记（深入）”；
download 属性只对同源 URL 和 blob 有效
download 属性看似简单，但限制极多：
- 仅支持同源地址（比如当前页面是
https://a.com，href必须也是a.com下的路径） - 跨域资源（如 CDN 上的 PDF）即使加了
download，浏览器也会忽略，退化为普通跳转 - 可以配合
Blob+URL.createObjectURL()实现动态文件下载，此时download一定生效 - 不指定值时，浏览器尝试从 URL 路径提取文件名（如
href="/files/report.pdf"→ 下载为report.pdf）；指定值则强制重命名（download="年度报告.pdf"）
注意：download 对 mailto:、tel:、javascript: 等伪协议无效，也不影响图片或视频的内联展示行为。
rel 属性不是摆设，SEO 和安全都靠它
rel 是少数几个既影响搜索引擎又影响运行时行为的属性：
-
rel="nofollow"：告诉爬虫“别追踪此链接”，常用于用户生成内容（评论、UGC）中的外链，避免权重传递 -
rel="external"：纯语义标记，表示链接指向站外，配合 CSS 可自动加图标（如a[rel~="external"]::after） -
rel="stylesheet"只用于<link>，<a></a>中无效——这是常见混淆点 -
rel="author"已被废弃；rel="license"仍有用，用于标注内容授权信息
多个值用空格分隔，如 rel="noopener noreferrer nofollow"。不要写成逗号或引号内拼接。
真正容易被忽略的是：所有这些属性组合起来才构成一个健壮的链接。比如一个带图标的外链下载按钮，至少要同时考虑 href 协议合法性、target 和 rel 配对、download 的同源限制、以及 rel 对 SEO 的隐性影响——缺一不可。
