The "Hypertext" in HTML - 理解超文本的核心
<a> 标签（anchor，锚点）用于创建超链接，是 HTML 中最重要的标签之一。
<a href="目标地址">链接文本</a>href（Hypertext Reference）指定链接的目标地址。
<!-- 链接到其他网页 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 链接到本地文件 -->
<a href="about.html">关于我们</a>
<!-- 链接到页面内的锚点 -->
<a href="#section1">跳转到第一节</a>这是本章的重点难点！理解路径是管理网站文件结构的基础。
包含完整的 URL，从协议开始。
<!-- 绝对路径示例 -->
<a href="https://www.example.com/images/photo.jpg">图片</a>
<a href="https://cdn.example.com/style.css">样式表</a>适用场景：
相对于当前文件的位置。
| 路径写法 | 含义 | 示例 |
|---|---|---|
file.html |
同一目录下的文件 | about.html |
folder/file.html |
子目录中的文件 | pages/contact.html |
../file.html |
上级目录中的文件 | ../index.html（从 pages 目录） |
../../file.html |
上两级目录中的文件 | ../../index.html（从 gallery 目录） |
./file.html |
当前目录（可省略） | ./about.html = about.html |
<!-- 假设当前在 index.html -->
<!-- 同级文件 -->
<a href="about.html">关于我们</a>
<!-- 子目录文件 -->
<a href="pages/contact.html">联系我们</a>
<!-- 子目录中的图片 -->
<img src="images/logo.png" alt="Logo">
<!-- 假设当前在 pages/contact.html -->
<!-- 返回上级目录 -->
<a href="../index.html">返回首页</a>
<!-- 访问同级目录的其他文件 -->
<a href="services.html">服务</a>
<!-- 访问上级的子目录 -->
<img src="../images/logo.png" alt="Logo">/images/logo.png控制链接的打开方式。
| target 值 | 效果 |
|---|---|
_self（默认） |
在当前窗口/标签页打开 |
_blank |
在新窗口/标签页打开 |
_parent |
在父框架中打开 |
_top |
在整个窗口中打开（跳出框架） |
<!-- 在新标签页打开 -->
<a href="https://example.com" target="_blank">
在新标签页打开
</a>target="_blank" 时，必须添加 rel="noopener noreferrer" 以防止标签页通过 window.opener 操纵原页面。
<!-- 安全的链接写法 -->
<a href="https://external-site.com"
target="_blank"
rel="noopener noreferrer">
安全的外部链接
</a>锚点链接允许用户在同一页面内快速跳转到指定位置。
<!-- 第一步：设置锚点（目标位置）-->
<h2 id="section1">第一节：介绍</h2>
<!-- 或者使用 name 属性（旧方式）-->
<a name="section2"></a>
<h2>第二节：详情</h2>
<!-- 第二步：创建跳转到锚点的链接 -->
<a href="#section1">跳转到第一节</a>
<a href="#section2">跳转到第二节</a>
<!-- 跳转到页面顶部 -->
<a href="#">返回顶部</a>使用 download 属性让浏览器下载文件而不是打开。
<!-- 下载文件 -->
<a href="document.pdf" download>下载 PDF</a>
<!-- 指定下载文件名 -->
<a href="file.pdf" download="我的文档.pdf">下载</a>点击后打开用户的邮件客户端。
<!-- 基本邮件链接 -->
<a href="mailto:someone@example.com">发送邮件</a>
<!-- 带主题的邮件 -->
<a href="mailto:someone@example.com?subject=咨询">
发送咨询邮件
</a>
<!-- 带主题和正文的邮件 -->
<a href="mailto:someone@example.com?subject=咨询&body=您好，我想咨询...">
发送邮件
</a>
<!-- 抄送和密送 -->
<a href="mailto:main@example.com?cc=copy@example.com&bcc=secret@example.com">
发送邮件
</a>在移动设备上点击可直接拨打电话。
<!-- 基本电话链接 -->
<a href="tel:+8613800138000">拨打电话</a>
<!-- 带国际区号 -->
<a href="tel:+86-138-0013-8000">+86 138 0013 8000</a><!-- 发送短信 -->
<a href="sms:+8613800138000">发送短信</a>
<!-- 带预设内容的短信 -->
<a href="sms:+8613800138000?body=我对你们的产品感兴趣">
发送短信
</a>创建一个多页面网站的导航结构：