HTML: HTML 链接
链接（超链接）就像是连接网页的纽带——如果没有这些链接，互联就无法构成“络”。通过使用<a>标签，您可以浏览不同页面、跳转至页面中的特定部分、下载文件或者发送电子邮件。
1. 链接的基本语法
链接由 <a> 标签（anchor，锚点）定义，其中 href 属性（hypertext reference）指定了点击后要跳转到的目标地址：
▶ 示例
HTML
<a href="https://web-tutorial.com/">访问示例网站</a>
上面这段代码在浏览器中会显示为可点击的文本"访问示例网站"，默认样式是蓝色文字加下划线。当你点击它时，浏览器会导航到 href 中指定的网址。
💡 提示：
链接文本应当能清楚地告诉用户点击后会看到什么，比如"点击这里"就不如"查看完整的用户指南"来得好——既方便用户判断，对搜索引擎也更友好。
2. 打开方式：target 属性
默认情况下，链接在当前页面打开（覆盖当前页面）。如果你希望点击后在新标签页或新窗口中打开，可以使用 target 属性：
▶ 示例
HTML
<a href="https://web-tutorial.com/" target="_blank">在新标签页中打开</a>
<a href="/html/index.html" target="_self">在当前页面打开（默认行为）</a>
<a href="..." target="_blank" rel="noopener">链接</a>。
target 的常用取值：
_self：默认值，在当前页面打开_blank：在新标签页或新窗口中打开_parent：在父级框架中打开（用于 iframe 场景）_top：在整个窗口中打开（跳出所有框架）
⚠️ 安全提醒： 使用
target="_blank"时，建议在链接上加 rel="noopener"或 rel="noreferrer"。这能防止新页面通过 window.opener访问原页面的对象，避免潜在的安全风险。
3. 绝对路径与相对路径
链接的目标地址可以是绝对路径，也可以是相对路径。两者的区别很简单——绝对路径包含完整的网址，相对路径只写相对于当前页面的位置：
- 绝对路径：以协议（
https://）开头，指向站外或站内的完整网址 - 相对路径：以文件名或
./、../开头，指向同一网站内的相对位置 - 根路径：以
/开头，从网站的根目录开始定位，例如/html/index.html
▶ 示例
HTML
<!-- 绝对路径：完整的网址 -->
<a href="https://www.google.com">访问 Google</a>
<!-- 相对路径：相对于当前文件的位置 -->
<a href="basics.html">HTML 基础</a>
<!-- 相对路径：上级目录 -->
<a href="../index.html">返回首页</a>
4. 锚点链接：跳转到页面内的某个位置
锚点链接让你点击后直接跳转到同一个页面的某个指定位置——适合长页面"回到顶部"或"目录跳转"。实现起来只需要两步：先给目标位置设置一个 id，然后在链接中用 #id 指向它。
▶ 示例
HTML
<!-- 目录 -->
<a href="#section-intro">跳到简介</a>
<a href="#section-details">跳到详情</a>
<!-- 目标位置（设了高度，方便看到跳转效果） -->
<h2 id="section-intro">简介</h2>
<p style="min-height:600px;background:#f0f0f0;">这里是简介的内容……</p>
<h2 id="section-details">详情</h2>
<p style="min-height:600px;background:#f0f0f0;">这里是详细说明……</p>
锚点也支持跨页面跳转——只需要在链接中同时指定页面和锚点，例如 <a href="basics.html#section-head">查看头部结构</a>。浏览器会先打开那个页面，然后自动滚动到指定位置。
5. 图片链接与更多用法
链接不限于文字——把 <img> 标签放在 <a> 标签内部，图片就变成了可点击的链接。此外 <a> 还可以用来下载文件和发送邮件：
▶ 示例
HTML
<!-- 图片链接 -->
<a href="https://www.example.com">
<img src="/assets/images/tutorials/html-banner-example.webp" alt="Click to learn more">
</a>
<!-- 下载链接 -->
<a href="document.pdf" download>下载 PDF 文档</a>
<!-- 邮件链接 -->
<a href="mailto:support@example.com">发邮件给我们</a>
- 图片链接：点击图片跳转，
alt文本对无障碍体验非常重要 - 下载链接：添加
download属性后，浏览器会下载文件而非打开它 - 邮件链接：使用
mailto:协议，点击后会打开系统默认的邮件客户端
📌 补充：
<a> 还有一个常用属性 title，用来在鼠标悬停时显示提示文字：<a href="..." title="点击查看完整教程">HTML 教程</a>。这个提示对辅助设备（如屏幕阅读器）也很友好。
❓ 常见问题
Q 为什么使用
target="_blank"时要加rel="noopener"？A 这是一个安全防护措施。当链接使用
target="_blank"在新标签页打开时，新页面可以通过window.opener访问原页面的window对象，这可能导致恶意页面篡改原页面的内容或进行钓鱼攻击。加上rel="noopener"会切断这种访问关系，保护原页面安全。建议所有target="_blank"的链接都加上rel="noopener"或rel="noreferrer"。Q 绝对路径和相对路径有什么区别？什么时候用哪个？
A 绝对路径包含完整的网址（如
https://example.com/page.html），指向站外资源或需要明确域名的场景；相对路径只写相对于当前文件的位置（如./about.html或../index.html），用于同一网站内的页面跳转。根路径（如/html/index.html）从网站根目录开始定位，适合大型网站。建议：站内链接用相对路径，站外链接用绝对路径。Q 锚点链接不生效怎么办？
A 常见原因：1）目标元素没有设置
id属性；2）id值拼写错误（区分大小写）；3）id在页面中不唯一（浏览器会跳转到第一个匹配的元素）；4）目标元素被display:none隐藏了。检查方法：在浏览器控制台输入document.getElementById("你的id")，如果返回null说明id不存在。📖 小节
- 链接使用
<a>标签，href属性指定跳转目标 target="_blank"在新标签页打开，建议配合rel="noopener"- 绝对路径是完整网址，相对路径从当前文件位置出发
- 锚点链接使用
#id在页面内跳转，也可跨页面使用 <img>嵌套在<a>中可制作图片链接；download触发下载；mailto:发送邮件
📝 作业
- 创建一个链接：写一个指向
https://www.google.com的链接，要求在新标签页打开，且链接文本为"去 Google 搜索"。 - 锚点导航：在当前页面底部创建一个"返回顶部"链接，指向页首（提示：给
<body>加id或用#配合顶部元素）。 - 自查：查看你自己写的页面源码，找到所有的
<a>标签，看看它们的href和target是怎么设置的——你能说出每个链接会在哪里打开吗？
