课时09：常用标签（下）—— 超链接与锚点详解¶
学习目标：深入掌握 A 标签的 href、target、title 属性用法，熟练实现页面内锚点跳转的两种技术方案。
一、A 标签概述¶
<a> 标签（Anchor，锚点）是 HTML 中实现超级链接的核心标签，负责页面跳转、资源下载、锚点定位等交互功能。
核心特征：
- 双标签，文本级标签
- 默认样式：文字变为蓝色并带下划线
- 必须配合 href 属性才能生效
二、href 属性详解¶
href 全称 Hyper Text Reference（超文本引用），代表引用文件或锚点的地址。
2.1 绝对路径跳转¶
<!-- 跳转到外部网站 -->
<a href="https://www.baidu.com">访问百度</a>
<!-- 跳转到外部网站的具体页面 -->
<a href="https://www.example.com/article/123">阅读文章</a>
2.2 相对路径跳转¶
<!-- 跳转到同级目录的其他文件 -->
<a href="about.html">关于我们</a>
<!-- 跳转到下级目录的文件 -->
<a href="pages/contact.html">联系我们</a>
<!-- 跳转到上级目录的文件 -->
<a href="../index.html">返回首页</a>
重要规范：相对路径跳转必须包含完整的文件扩展名（如
.html），否则浏览器无法正确解析目标文件。
2.3 锚点跳转¶
<!-- 跳转到当前页面 id="top" 的位置 -->
<a href="#top">回到顶部</a>
<!-- 跳转到其他页面的指定锚点位置 -->
<a href="article.html#comments">查看评论</a>
三、target 属性：控制打开方式¶
3.1 属性作用¶
target 属性决定链接的打开方式，默认在当前标签页打开（target="_self"）。
3.2 常用属性值¶
| 属性值 | 效果 | 使用场景 |
|---|---|---|
_self |
在当前窗口/标签页打开（默认） | 站内导航、普通页面跳转 |
_blank |
在新标签页打开，保留原页面 | 外部链接、参考资料 |
_parent |
在父级框架中打开 | 框架集页面（已废弃） |
_top |
在顶层窗口打开 | 框架嵌套场景（已废弃） |
3.3 外部链接安全规范¶
<!-- 安全的外部链接写法：防止新页面通过 window.opener 操控原页面 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
安全外链
</a>
noopener：阻止新页面通过window.opener反向操控原页面（防止钓鱼攻击）noreferrer：隐藏 Referer 信息，防止 URL 敏感参数泄露
_blank命名由来：下划线前缀是 HTML 规范中的约定俗成，旨在避免与 iframe 框架中的自定义name值产生冲突。
四、title 属性：悬停提示文本¶
title 属性为链接提供补充说明，鼠标悬停在链接文字上时显示提示气泡：
与 alt 属性的区别：
| 属性 | 所属标签 | 触发时机 | 主要作用 |
|---|---|---|---|
title |
<a>、<img> 等 |
鼠标悬停 | 交互提示、补充说明 |
alt |
<img> |
图片加载失败 | 语义替代、SEO、无障碍 |
五、页面内锚点跳转的实现¶
5.1 应用场景¶
长页面中常见的"目录导航"功能：点击右侧"主要作品"、"个人生活"等链接，页面不刷新，仅滚动到对应内容区域。
5.2 方案一：使用 name 属性（传统方式）¶
<!-- 步骤1：设置目标位置（"锚点"） -->
<a name="section2"></a>
<!-- 步骤2：设置跳转链接（"跳转触发器"） -->
<a href="#section2">跳转到第二节</a>
特点：
- 需要创建空的 <a> 标签作为锚点标记
- 标签本身不显示内容，仅作为定位标记
- 属于 HTML 早期的锚点实现方式
5.3 方案二：使用 id 属性（现代推荐方式）¶
<!-- 步骤1：为目标元素设置 id 属性 -->
<h2 id="section2">第二节：技术细节</h2>
<!-- 步骤2：跳转链接的 href 中写 #id -->
<a href="#section2">跳转到第二节</a>
特点：
- 无需创建额外的空标签
- 直接为已有元素添加 id 属性即可
- 代码更简洁，语义更清晰
- 现代开发推荐方案
5.4 两种方案对比¶
| 对比维度 | name 属性方案 | id 属性方案 |
|---|---|---|
| 代码简洁度 | 需额外创建空标签 | 直接复用现有元素 |
| 语义清晰度 | 定位标记与内容分离 | 定位与内容一体 |
| 维护便利性 | 需管理额外标签 | 仅管理 id 值 |
| 现代推荐度 | 已淘汰 | 强烈推荐 |