第06篇：链接完全指南
第06篇：链接完全指南
链接（Hyperlink）是万维网的灵魂。从简单的页面跳转到下载文件、发送邮件、拨打电话，一个
a标签就能连接世界。本篇将彻底掌握链接的方方面面。
学习目标
- 掌握
a标签的href各种取值类型 - 理解
target和rel属性的作用和安全用法 - 学会创建下载链接、邮件链接、电话链接
- 掌握页内锚点导航的实现方法
- 理解链接的语义化：何时用
a，何时不用
核心知识点
一、a标签基础
a（Anchor，锚点）是 HTML 中最常用的标签之一。
<ahref="https://example.com">点击访问示例网站</a>核心属性
| 属性 | 作用 | 是否必须 |
|---|---|---|
href | 链接目标地址 | ✅ 必须（不写href就不是链接） |
target | 打开方式 | 可选 |
rel | 当前页与目标页的关系 | 推荐 |
download | 触发下载而非跳转 | 可选 |
title | 鼠标悬停提示文字 | 可选 |
二、href的多种取值
href不只能写网址，它有多种取值形式：
1. 外部 URL（绝对路径）
<!-- 完整 URL --><ahref="https://developer.mozilla.org/zh-CN/">MDN 文档</a><!-- 省略协议（不推荐）--><ahref="//example.com/page.html">协议相对 URL</a><!-- 会自动匹配当前页面的协议（http 或 https）-->2. 本地文件（相对路径）
<!-- 同级目录 --><ahref="about.html">关于我们</a><!-- 子目录 --><ahref="blog/post-1.html">文章详情</a><!-- 上级目录 --><ahref="../index.html">返回首页</a>3. 页内锚点
<!-- 链接到当前页某个 id --><ahref="#section-2">跳转到第二节</a><!-- 目标位置需要有对应的 id --><h2id="section-2">第二节：进阶内容</h2>4. 邮件链接：mailto:
<!-- 基础邮件链接 --><ahref="mailto:someone@example.com">发送邮件</a><!-- 预填主题和正文 --><ahref="mailto:someone@example.com?subject=咨询问题&body=您好，我想咨询……">发送反馈邮件</a>mailto:支持的参数：
| 参数 | 说明 | 示例 |
|---|---|---|
subject | 邮件主题 | ?subject=Hello |
body | 邮件正文 | &body=Content |
cc | 抄送 | &cc=other@example.com |
bcc | 密送 | &bcc=hidden@example.com |
⚠️注意：多个参数用
&连接，参数值中的空格和特殊字符需要 URL 编码。
5. 电话链接：tel:
<!-- 点击后唤起拨号界面（移动端）或 Skype/ Facetime（桌面端）--><ahref="tel:+8613800138000">拨打电话</a><!-- 短信链接 --><ahref="sms:+8613800138000?body=你好">发送短信</a>💡国际格式：
++ 国家代码 + 电话号码，如+86是中国。
6. 下载链接
<!-- 浏览器会提示下载文件，而不是打开 --><ahref="document.pdf"download>下载 PDF</a><!-- 指定下载后的文件名 --><ahref="document.pdf"download="年度报告.pdf">下载年度报告</a>7. 空链接
<!-- ❌ 不推荐：# 会滚动到页面顶部 --><ahref="#">点击</a><!-- ✅ 推荐：JavaScript 占位 --><ahref="javascript:void(0);">点击</a><!-- ✅ 最佳：去掉 href，用 CSS/JS 控制样式和交互 --><button>点击</button>💡重要提醒：如果链接没有实际的跳转目标，不应该用
a标签。按钮用button，纯文本用span。
三、target属性：在哪里打开链接
| 取值 | 含义 |
|---|---|
_self | 当前窗口/标签页打开（默认值） |
_blank | 新标签页打开 |
_parent | 在父框架中打开（iframe 场景） |
_top | 在最顶层窗口打开（iframe 场景） |
<!-- 新标签页打开 --><ahref="https://example.com"target="_blank">新窗口打开</a><!-- 当前页打开（默认，可以省略）--><ahref="about.html"target="_self">当前页打开</a>四、rel属性：链接关系（重要！）
rel（Relationship）描述当前页面与链接目标之间的关系。
rel常用值
| 值 | 含义 | 使用场景 |
|---|---|---|
noopener | 禁止新页面通过window.opener操控原页面 | 所有target="_blank"必须加 |
noreferrer | 不发送 Referer 头 | 保护隐私，常与noopener一起 |
nofollow | 告诉搜索引擎不要追踪此链接 | 广告链接、用户生成内容中的链接 |
external | 指向外部网站 | 可选，语义标记 |
target="_blank"的安全隐患
<!-- ❌ 危险：新页面可以通过 window.opener 操控原页面 --><ahref="https://evil.com"target="_blank">危险链接</a><!-- ✅ 安全：加上 rel="noopener noreferrer" --><ahref="https://example.com"target="_blank"rel="noopener noreferrer">安全链接</a>安全最佳实践
<!-- 外部链接的标准写法 --><ahref="https://外部网站.com"target="_blank"rel="noopener noreferrer nofollow">外部链接</a><!-- 内部链接不需要这些 --><ahref="/about.html">关于我们</a>🔒必须记住：所有在新标签页打开的外部链接，都要加
rel="noopener noreferrer"。这是安全规范，不是可选项。
五、锚点导航详解
锚点（Anchor）实现页内跳转，是单页应用和长文档的必备技巧。
基础用法
<!-- 导航链接 --><nav><ahref="#intro">简介</a><ahref="#features">特性</a><ahref="#pricing">价格</a><ahref="#contact">联系</a></nav><!-- 目标区域 --><sectionid="intro"><h2>简介</h2><p>……</p></section><sectionid="features"><h2>特性</h2><p>……</p></section><!-- 更多 section... -->返回顶部
<!-- 链接到页面顶部（空 #）--><ahref="#">返回顶部</a><!-- 或者链接到 body 的 id --><bodyid="top">……<ahref="#top">返回顶部</a></body>URL 中的锚点
https://example.com/page.html#section-2 ↑ 打开页面后自动滚动到 id="section-2" 的位置六、链接的嵌套规则
a标签不能嵌套
<!-- ❌ 错误：a 不能嵌套 a --><ahref="https://outer.com">外层链接<ahref="https://inner.com">内层链接</a></a><!-- 浏览器会强制拆分成两个独立的 a -->解决方案：把内层链接移出
<!-- ✅ 正确：把两个链接并列放置 --><div><ahref="https://outer.com">外层链接</a><ahref="https://inner.com">内层链接</a></div>块级链接
HTML5 允许a包裹块级元素，实现"整张卡片可点击"：
<!-- ✅ 正确：a 包裹 article（块级元素）--><ahref="article-1.html"class="card-link"><article><h3>文章标题</h3><p>文章摘要……</p><span> →</span></article></a>💡 注意：虽然
a可以包裹块级元素了，但仍然不能包裹交互元素（如另一个a、按钮、表单控件等）。
七、链接的语义化：何时用a，何时不用
| 场景 | 正确标签 | 原因 |
|---|---|---|
| 跳转到另一个页面 | a | 有href，导航行为 |
| 执行某个操作（提交、删除） | button | 不改变 URL，是动作而非导航 |
| 展开/收起内容 | button | 是状态切换，不是导航 |
| 纯文本展示 | span或p | 不需要交互 |
| 下载文件 | a+download | 有明确的资源获取目标 |
<!-- ❌ 错误：用 a 做按钮 --><ahref="#"onclick="submitForm()">提交</a><!-- ✅ 正确：用 button --><buttontype="submit">提交</button><!-- ❌ 错误：用 a 做标签页切换（无 URL 变化）--><ahref="#"onclick="showTab(1)">标签页1</a><!-- ✅ 正确：用 button --><buttononclick="showTab(1)">标签页1</button>八、完整示例：个人书签页
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的常用链接</title></head><body><h1>我的常用链接收藏</h1><h2>开发文档</h2><ul><li><ahref="https://developer.mozilla.org/zh-CN/"target="_blank"rel="noopener noreferrer">MDN Web 文档</a></li><li><ahref="https://caniuse.com/"target="_blank"rel="noopener noreferrer">Can I use（兼容性查询）</a></li></ul><h2>工具</h2><ul><li><ahref="https://validator.w3.org/"target="_blank"rel="noopener noreferrer">W3C HTML 验证器</a></li></ul><h2>联系方式</h2><p>📧<ahref="mailto:hello@example.com?subject=网站反馈">发送邮件</a></p><p>📞<ahref="tel:+8613800138000">138-0013-8000</a></p><h2>资源下载</h2><p><ahref="cheatsheet.pdf"download="HTML速查卡.pdf">📥 下载 HTML 速查卡（PDF）</a></p></body></html>📎 完整代码文件：CODE/06/links-guide.html
动手练习
练习 1：各种链接类型实战
创建一个 HTML 页面，包含以下 8 种类型的链接，每种至少一个：
- 外部网站链接（新标签页打开，安全措施到位）
- 本地页面链接（相对路径）
- 页内锚点链接（至少 3 个锚点）
- 邮件链接（预填主题）
- 电话链接
- 下载链接
- 空链接（正确处理，不滥用
#） - 带有
title提示的链接
练习 2：单页导航锚点
创建一个"个人简历"单页，使用锚点导航：
- 页面顶部有固定导航栏，包含：基本信息 | 教育经历 | 工作经历 | 联系方式
- 点击导航项平滑滚动到对应区域
- 每个区域有唯一的
id - 页面底部有"返回顶部"链接
练习 3：链接安全审查
找出以下代码中的安全问题并修正：
<!-- 问题代码： --><ahref="https://untrusted-site.com"target="_blank">外部链接</a><ahref="#"onclick="deleteAccount()">删除账号</a><ahref="">空链接</a><ahref="https://ads.com"target="_blank">广告链接</a>常见误区 ⚠️
| 误区 | 真相 |
|---|---|
“href="#"是安全的占位符” | #会滚动到页面顶部，不是真正的"无操作"。无目标的交互应该用button |
“target="_blank"不用加rel” | 必须加rel="noopener noreferrer"，否则有安全隐患 |
“a标签可以嵌套” | 绝对不能。浏览器会强制拆分，导致 DOM 结构混乱 |
“所有可点击的东西都用a” | 导航用a，动作用button。不要混淆语义 |
“download对任何 URL 都有效” | download只对同源 URL或** blob: URL** 有效，跨域会被忽略 |
“mailto:能确保用户发邮件” | 取决于用户是否配置了邮件客户端。没配置时可能无反应 |
“tel:在电脑上没用” | 桌面端可能唤起 Skype、FaceTime 或其他通信软件 |
“rel="nofollow"让链接不可点击” | 不是！它只是告诉搜索引擎不追踪，链接仍然可正常点击 |
速查卡片 📋
href取值类型速查
| 类型 | 格式 | 示例 |
|---|---|---|
| 外部 URL | https://... | href="https://mdn.com" |
| 相对路径 | path/file.html | href="about.html" |
| 根路径 | /path/file.html | href="/images/logo.png" |
| 页内锚点 | #id | href="#section-2" |
| 邮件 | mailto:... | href="mailto:a@b.com" |
| 电话 | tel:... | href="tel:+86138..." |
| 短信 | sms:... | href="sms:+86138..." |
外部链接安全模板
<ahref="https://外部网站"target="_blank"rel="noopener noreferrer">链接文字</a>rel属性常用值
| 值 | 何时使用 |
|---|---|
noopener noreferrer | 所有target="_blank"链接 |
nofollow | 广告、赞助、用户生成内容的链接 |
external | 指向外部网站的链接（可选语义标记） |
邮件链接参数
<ahref="mailto:邮箱?subject=主题&body=正文&cc=抄送&bcc=密送">发邮件</a>链接语义选择
| 场景 | 标签 |
|---|---|
| 跳转到其他页面/锚点 | a |
| 下载文件 | a+download |
| 执行操作（提交、删除） | button |
| 切换显示/隐藏 | button |
| 纯展示 | span/p |
链接安全 checklist
- 外部链接
target="_blank"有rel="noopener noreferrer" - 广告/UGC 链接有
rel="nofollow" - 没有滥用
href="#"做按钮 - 没有嵌套
a标签 - 下载链接使用了
download属性
扩展阅读
- MDN: 元素
- MDN: 链接类型
- Google Web Fundamentals: 链接安全（英文）
- 关于 target=“_blank” 的安全风险（英文）
📌下一步：链接让页面之间产生了连接。接下来进入 第07篇：图片与多媒体，学习如何在网页中展示丰富的视觉内容。