Frontend Notes Lab

Appearance

a 标签、href、target 与 download ​

问题 ​

a 标签有哪些用途？href、target、download、rel 分别有什么作用？空 href、javascript:void(0)、onclick 和嵌套 a 有哪些问题？

结论 ​

a 标签的核心语义是超链接。

常见用途：

  • 页面跳转：<a href="/products">商品列表</a>
  • 锚点定位：<a href="#section-api">API</a>
  • 下载文件：<a href="/report.pdf" download>下载报告</a>
  • 邮件/电话协议：mailto:、tel:
  • 新窗口打开：target="_blank"

target 常见值：

值作用
_self当前浏览上下文打开，默认值
_blank新窗口或新标签页打开
_parent父级浏览上下文打开
_top顶层浏览上下文打开
自定义名称在指定命名窗口或 iframe 中打开
现代浏览器通常会隐式应用 noopener，但面试和代码审查中仍建议显式写：
html
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  新窗口打开
</a>

download 表示把链接作为下载处理，而不是导航打开。跨源下载受浏览器和响应头限制，实际项目中最好让服务端返回合适的 Content-Disposition: attachment。

不要使用 href="" 或 href="javascript:void(0)" 伪装按钮：

  • href="" 通常会指向当前页面，点击可能刷新或重新导航。
  • javascript:void(0) 会污染链接语义，不利于复制、打开新标签、可访问性和安全审查。
  • 不需要导航的动作应该用 <button>。

href 和 onclick 同时存在时，点击会先触发点击事件；如果事件没有 preventDefault()，浏览器随后执行默认导航。更推荐把导航交给 href，把动作用 button 表达。

a 标签不能嵌套 a。如果想实现“整块卡片可点，内部还有其它操作”，常见做法是让卡片主链接覆盖非交互区域，内部按钮独立放置，避免交互元素嵌套。

rel 常见值：

值作用
noopener新页面不能通过 window.opener 控制来源页面
noreferrer不发送 Referer，同时也包含 noopener 效果
nofollow告诉搜索引擎不要跟踪该链接
ugc用户生成内容链接
sponsored广告或赞助链接

Demo ​

html
<a href="/docs">查看文档</a>
<a href="#faq">跳到 FAQ</a>
<a href="/report.pdf" download>下载报告</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部链接
</a>

<button type="button" onclick="openDialog()">打开弹窗</button>

面试回答：

a 的核心是超链接，必须有有效 href 才是可靠链接。跳转用 a[href]，动作触发用 button。target="_blank" 要配 rel="noopener noreferrer" 防止 opener 风险；download 用于提示下载，但跨源下载最好由服务端响应头配合。不要用空 href 或 javascript:void(0) 伪装按钮，也不要嵌套 a。

参考来源 ​