HTML 链接代码
最后修改时间：2026年5月20日
HTML 链接使用 <a> 标签创建，最重要的属性是 href。本页整理文本链接、锚点链接、图片链接、下载链接、新窗口打开和按钮链接的常用写法。
HTML 文本链接
<a href="link/html-text-link.html">文本链接</a>
效果：文本链接
链接到同一页面
<a href="#generator">链接代码生成器</a>
效果：链接代码生成器
目标位置需要有对应的 id：
<h2 id="generator">链接代码生成器</h2>
HTML 图片链接
<a href="link/html-image-link.html">
<img src="../../assets/web/html/link/flower.jpg" alt="花">
</a>
效果：
HTML 邮件链接
<a href="mailto:name@example.com">发送邮件</a>
效果：发送邮件
更多参数请查看：mailto 邮件链接。
HTML 下载链接
<a href="../../assets/web/html/link/test-file.zip" download>下载文件</a>
效果：下载文件
在新窗口或新标签页打开链接
<a href="link/html-text-link.html" target="_blank" rel="noopener">在新窗口打开</a>
效果：在新窗口打开页面
HTML 按钮链接
可以使用表单按钮，也可以用 JavaScript 控制跳转：
<form action="link/html-button-link.html">
<input type="submit" value="按钮链接">
</form>
链接颜色
链接颜色建议通过 CSS 设置：
<a href="link/html-link-color.html" style="color:red">红色链接</a>
效果：红色链接
相对路径与绝对路径链接
相对路径适合同站内部链接，绝对路径适合跨站链接、分享地址或 canonical URL。
<a href="link/html-text-link.html">相对路径链接</a>
<a href="https://www.titaotie.com/web/html/link/html-text-link.html">绝对路径链接</a>
HTML 链接代码生成器
常见问题
HTML 链接必须写 href 吗？
普通页面跳转链接应写 href。没有 href 的 <a> 不是真正的链接，通常不适合用于导航。
新窗口打开链接为什么要加 rel="noopener"？
它可以减少新页面通过 window.opener 影响原页面的风险，是 target="_blank" 的常见安全写法。