课时08：常用标签（中）—— 路径与锚点¶

学习目标：理解相对路径与绝对路径的概念差异，掌握不同目录层级下的路径写法，了解锚点标签的基础用法。

一、路径的基本概念¶

路径是定位资源的地址描述，分为相对路径和绝对路径两大类。路径概念本身不是具体标签，而是资源引用的通用规则。

二、相对路径（Relative Path）¶

2.1 定义¶

相对路径从当前 HTML 文件所在位置出发，指向目标资源的位置。其优势在于：

项目迁移时路径关系保持不变
不依赖服务器或本地盘符结构
团队协作中路径一致性好

项目目录/
├── index.html
├── images/
│   └── photo.jpg
└── assets/
    └── add/
        └── banner.jpg

<!-- 同级目录：图片与 HTML 文件在同一文件夹 -->
<img src="photo.jpg" alt="照片">

<!-- 下级目录：图片在 HTML 文件所在文件夹的子文件夹中 -->
<img src="images/photo.jpg" alt="照片">

<!-- 多级下级目录：依次进入各级文件夹 -->
<img src="assets/add/banner.jpg" alt="横幅">

斜杠 / 含义：在路径中表示"进入下一级文件夹"。

2.3 上级目录跳转¶

点点杠 .. 表示退出当前文件夹（向上跳一级）。

项目目录/
├── index.html
├── images/
│   └── photo.jpg
└── pages/
    └── about.html          <-- 当前文件位置

<!-- about.html 中引用 images/photo.jpg -->
<!-- 先退出 pages 文件夹，再进入 images 文件夹 -->
<img src="../images/photo.jpg" alt="照片">

多级上级跳转：

项目目录/
├── index.html
└── deep/
    └── nested/
        └── folder/
            └── current.html    <-- 当前文件位置

<!-- 向上跳三级回到项目根目录，再进入目标文件夹 -->
<img src="../../../images/photo.jpg" alt="照片">

三、绝对路径（Absolute Path）¶

3.1 盘符绝对路径（本地路径）¶

<img src="C:/Users/Admin/Pictures/photo.jpg" alt="照片">

获取方式：右键文件 → 属性 → 查看"位置"信息，将反斜杠 \ 改为正斜杠 /
局限性：
服务器没有 C 盘、D 盘等本地盘符概念
不同用户目录结构不同，导致路径失效
结论：开发工作中不使用盘符绝对路径

3.2 网络绝对路径（URL）¶

<img src="https://www.example.com/images/photo.jpg" alt="照片">

完整 URL：包含协议（https://）、域名、路径和文件名
获取方式：在网页中右键图片 →"检查"→ 复制 src 属性中的完整网址
应用场景：引用外部 CDN 资源、第三方图床、跨域图片等

四、路径使用策略总结¶

路径类型	使用频率	适用场景	不推荐场景
相对路径	★★★★★	项目内部资源引用	引用外部网站资源
网络绝对路径	★★★☆☆	引用外部 CDN、第三方资源	项目内部资源（依赖外部稳定性）
盘符绝对路径	☆☆☆☆☆	本地临时测试	生产环境、服务器部署

五、锚点标签（Anchor）基础¶

5.1 锚点标签的作用¶

<a> 标签（Anchor）的核心功能是实现页面内或跨页面的跳转：

<!-- 外部跳转：访问百度 -->
<a href="https://www.baidu.com">访问百度</a>

<!-- 内部跳转：链接到本地其他页面 -->
<a href="about.html">关于我们</a>

<!-- 页面内锚点跳转：跳转到当前页面指定位置 -->
<a href="#section2">查看第二节</a>

5.2 页面内锚点跳转¶

页面内锚点用于长页面的目录导航，点击后页面不刷新，仅滚动到对应内容区域：

<!-- 目录链接（"矛"） -->
<a href="#intro">引言</a>
<a href="#features">产品特性</a>

<!-- 目标位置（"锚点"） -->
<h2 id="intro">引言</h2>
<h2 id="features">产品特性</h2>

锚点实现原理：href 中的 #id 与目标元素的 id 属性匹配，浏览器自动滚动至该元素位置。