<a href="" target="" title="" rel="" download="">点击跳转到示例网站</a>
href(必须):指定链接的目标地址,决定点击后跳转到哪里
- 绝对 URL:
<a href="https://www.baidu.com">百度</a>(跳转到外部网站)
- 相对 URL:
<a href="./about.html">关于我们</a>(跳转到站内页面)
- 页面锚点:
<a href="#top">回到顶部</a>(跳转到页面内 id="top" 的元素)
- 邮箱:
<a href="mailto:xxx@example.com">联系我们</a>(唤起邮箱客户端)
- 电话:
<a href="tel:123456789">拨打电话</a>(移动端唤起拨号盘)
- 下载文件:
<a href="file.pdf" download>下载PDF</a>(触发文件下载);可自定义文件名:<a href="file.pdf" download="我的PDF.pdf">下载PDF</a>
- 空链接:
<a href="javascript:void(0)">无跳转链接</a>(仅绑定点击事件,不跳转)
target(可选):指定链接在哪个窗口 / 框架中打开
_self(默认):在当前窗口打开链接
_blank:在新标签页打开链接(开发中建议搭配rel="noopener noreferrer"防安全问题)
_parent:在父框架中打开(框架页面使用)
_top:在顶层窗口打开(突破所有框架嵌套)
title(可选):鼠标悬停在链接上时显示提示文本,提升用户体验;示例:<a href="about.html" title="查看关于我们的详细信息">关于我们</a>
rel(可选):定义当前文档与目标链接的关系,提升语义和安全性
noopener noreferrer:搭配target="_blank"使用,防止新页面获取当前页面 window 对象,避免安全漏洞
nofollow:告诉搜索引擎 “不要追踪此链接”(如用户生成的外链、广告链接)
download(可选):触发链接目标的下载行为(而非在线预览 / 跳转),仅对同源文件生效;跨域文件需后端配合才能强制下载