HTML 链接

<a> 标签（anchor，锚）是 HTML 最核心的元素之一——它让网页互联。没有链接，就没有”万维网”。

基本语法

html

<a href="https://example.com">点我访问网站</a>

指向外部网站的完整地址：

html

<a href="https://developer.mozilla.org/zh-CN/">MDN 文档</a>

指向同站点内的其他页面：

html

<a href="/about">关于我们</a>
<a href="../index.html">返回上级</a>
<a href="contact.html">联系我们</a>

跳转到同一页面的某个位置。先给目标元素设置 id，然后链接的 href 写 #id值：

html

<a href="#section2">跳转到第二节</a>

<!-- 页面下方 -->
<h2 id="section2">第二节</h2>
<p>这里是被跳转到的目标……</p>

html

<a href="mailto:hello@example.com">发送邮件</a>

<!-- 带预设主题和正文 -->
<a href="mailto:hello@example.com?subject=反馈&body=你好">详细反馈</a>

html

<a href="tel:+8613800138000">拨打电话</a>

控制链接的打开方式：

html

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  新标签页打开
</a>

使用 target="_blank" 时必须加上 rel="noopener noreferrer"，否则新页面可以通过 window.opener 操控原页面，存在安全风险。

html

<a href="document.pdf" download>下载 PDF</a>
<a href="photo.jpg" download="我的照片.jpg">下载并重命名</a>

download 属性告诉浏览器下载文件而不是导航到它。

链接在不同交互阶段会呈现不同外观——未访问（蓝色）、已访问（紫色）、悬停、点击瞬间等。这些视觉状态通过 CSS 控制，将在 CSS 教程中详细讲解。