超链接

使用a标签表示，当href="#"会滚动到页面的顶部

href

跳转地址

<a href="https://example.com">点击跳转</a>
<a href="/user/list">用户列表</a>
<a href="../detail.html">详情页</a>

target

点击的链接显示的位置

• _self（默认）：当前窗口
• _blank：新窗口

<a href="https://example.com" target="_blank" rel="noopener noreferrer">

跳转行为

跳转文件

• 以下类型的文件，点击将直接触发浏览器的预览功能。

<a href="/files/demo.pdf">查看 PDF</a>
<a href="/images/a.png">查看图片</a>
<a href="/images/a.mp4">查看电影</a>

• 如果文件格式浏览器不支持预览，将自动触发下载

<a href="/images/a.zip">压缩包</a>

• 我们也可以强制浏览器触发下载：

<a href="/files/report.xlsx" download>下载 Excel</a>

download的属性名就是下载文件的名字：

<a href="/files/report.xlsx" download="2025报表.xlsx">

跳转锚点

href的值是以#开始，表示跳转锚点

• 跳转指定锚点

<a href="#section1">跳到第 1 块</a>

<div id="section1">
  这里是目标位置
</div>

• 回到顶部

<a href="#">回到顶部</a>

• 跳转其他页面的锚点

<a href="/detail.html#comment">查看评论</a>

目标页：

<div id="comment">评论区</div>

• 刷新页面

<a href="">刷新</a>

运行脚本

存在XSS风险

<a href="javascript:alert('hello')">点我</a>