网页如果没有超链接，就只是一座座无法访问的孤岛。把它们连成网的，是 <a>（Anchor）标签。
<a> 标签本身是个壳，真正决定点击后触发什么行为的，是它的核心属性。下面按实际开发中最常见的 5 种场景，介绍超链接的用法。
场景一：跳转到外部网站
要跳往别人家的网站，必须提供完整的访问地址。核心是 href 属性（Hypertext Reference），它存放目标网址。
<a href="https://www.baidu.com">去百度搜索</a>
⚠️ 常见错误：不写协议头导致 404
新手常把href写成www.baidu.com（漏了https://）。
底层逻辑：如果不标明http/https协议头，浏览器会认为这是一个相对路径（即你本地电脑里名为www.baidu.com的文件）。点击后，它会在当前文件夹找这个文件，找不到必然报错 404。
场景二：跳转到自己网站的其他页面
在做多页网站（如首页跳关于页）时，由于都在同一个服务器目录里，不需要写完整的 https://。直接写文件名或文件夹路径。
<!-- 同一文件夹下，直接写文件名 -->
<a href="contact.html">联系我们</a>
<!-- 在子文件夹中 -->
<a href="pages/about.html">关于我们</a>
场景三：在新标签页打开
默认情况下，点击超链接会覆盖当前页面。如果不想打断用户当前阅读，可以强制浏览器开一个新页签。关键属性是 target。
<a href="https://developer.mozilla.org" target="_blank">阅读文档</a>
📖 名词解释：target="_blank"
target指定链接在哪打开。_blank的字面意思是“空白”，指告诉浏览器：“给我开一张空白的新标签页，把目标网址加载到那里”。
场景四：页面内的跳转（锚点）
当页面很长时，点击“回到顶部”或“直达评论区”，其实并没有跳出网页，而是网页内的滚动跳转。
两步映射法则：
- 给目标位置打个记号（设置
id属性）。 - 在超链接的
href里用#加上这个记号。
<!-- 步骤 1：目标位置 -->
<h3 id="comments">评论区</h3>
<!-- 步骤 2：起跳点 -->
<a href="#comments">点击直达评论区</a>
场景五：触发下载与拉起邮件
超链接不只能打开网页，还能触发系统级行为。
直接下载文件：加上 download 属性，点击时不跳页，而是直接唤起下载。
<a href="report.pdf" download="2024报告.pdf">下载年度报告</a>
拉起写信面板：改变 href 的前缀，从网址变成 mailto:，系统会自动唤起本地邮件客户端（如 Outlook 或 Mac 邮件）。
<a href="mailto:admin@example.com">联系管理员</a>
补充：万物皆可裹链接
<a> 标签是块海绵，它不仅能裹住文字，也能包裹图片、色块（<div>）。被包裹的内容整体都会变成可点击的热区。
<a href="https://www.google.com">
<img src="logo.png" alt="谷歌 Logo">
</a>
🧠 10秒速记指南
- 外链：必写
https://（href="https://..."）。- 内链：直接写文件名（
href="page.html"）。- 新开页：加个
target="_blank"。- 锚点：目标配
id，链接写#id。- 特殊操作：下载用
download，邮件用mailto:。➡️ 下期预告
文字可以作为超链接的入口，图片自然也可以。但在网页中插入图片时，图片糊了、变形了、甚至被防盗链屏蔽了怎么解决？下一篇我们完全拆解<img>标签。
