第六篇、链接标签

6 阅读1分钟

链接标签

<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(可选):触发链接目标的下载行为(而非在线预览 / 跳转),仅对同源文件生效;跨域文件需后端配合才能强制下载