如何全面掌握HTML a标签属性及其应用技巧？

本文共计1051个文字，预计阅读时间需要5分钟。

没有 href 的 的

• 漏写 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"> 会让新页面通过 window.opener 访问原始页面的 document 和 location，存在反向劫持风险（比如跳转钓鱼页、篡改原页面）。必须配对使用：

• rel="noopener"：切断 window.opener 引用（现代浏览器强制要求）
• rel="noreferrer"：额外阻止 Referer 头发送（隐私更强，但会影响部分分析工具）

正确写法：<a href="https://example.com" target="_blank" rel="noopener noreferrer">。如果只是站内跳转（如文档子页），用 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> 中无效——这是常见混淆点
• rel="author" 已被废弃；rel="license" 仍有用，用于标注内容授权信息

多个值用空格分隔，如 rel="noopener noreferrer nofollow"。不要写成逗号或引号内拼接。

真正容易被忽略的是：所有这些属性组合起来才构成一个健壮的链接。比如一个带图标的外链下载按钮，至少要同时考虑 href 协议合法性、target 和 rel 配对、download 的同源限制、以及 rel 对 SEO 的隐性影响——缺一不可。