我的HTML入门笔记：超链接与图片路径实践

最近在学习HTML基础，重点啃了超链接跳转和图片路径引入这两个高频知识点，特意做了实操练习，把踩过的坑和收获整理成这篇博客，方便自己回顾也分享给刚入门的朋友～

一、超链接：从本地到网络的跳转
 
超链接  <a>  标签是HTML里实现页面跳转的核心，我分别测试了三种跳转场景：
 
1. 跳转到本地图片（相对路径）

-  ./  代表当前HTML文件所在目录
- 点击后会直接在浏览器中打开同目录下的  坤1.png  图片
- ✅ 优点：路径简洁，适合项目内资源引用，移植性好

展示：

2. 跳转到网络图片（URL路径）

- 直接使用网络图片的完整URL作为  href  值
- 点击后会跳转到该网络图片地址
- ✅ 优点：无需本地存储资源，适合引用网络素材

展示：

3. 跳转到本地PDF文档（相对路径）

- 和本地图片跳转逻辑一致，只是目标文件变成了PDF
- 浏览器会自动调用PDF阅读器打开文件
- ✅ 适用场景：在网页中提供文档下载/预览
展示：

二、图片引入：绝对路径 vs 相对路径

除了跳转， <img>  标签用来在页面中直接渲染图片，我对比了两种路径写法：
 
1. 绝对路径引入

- 写法：从磁盘根目录开始的完整路径（比如  D:\xxx\xxx ）
- ⚠️ 问题：移植性极差，换一台电脑或移动文件后，路径就会失效，不推荐在正式项目中使用

展示：

2. 相对路径引入（推荐）

-  ./  表示当前HTML文件所在目录
- ✅ 优点：只要保持HTML和图片的相对位置不变，无论项目搬到哪里都能正常显示
- ✅ 最佳实践：把所有静态资源（图片、CSS、JS）放在和HTML同级的文件夹里，用相对路径统一管理
 

展示：

三、实操踩坑总结
 
1. 路径符号要统一：HTML里推荐用  /  作为路径分隔符，Windows系统的  \  虽然也能识别，但跨平台兼容性差
2. 文件名要准确：大小写、后缀名（比如  .png  和  .PNG ）必须完全一致，否则会找不到资源
3. 相对路径的层级：如果图片在子文件夹里，要写成  ./images/xxx.png ；如果在上级目录，要写成  ../xxx.png 
4. alt属性不能忘： alt  是图片的替代文本，当图片加载失败时会显示这段文字，同时也能提升 accessibility 和 SEO
 
四、学习小结
 
这次练习让我搞懂了：
- 超链接  <a>  可以跳转到本地文件、网络地址，本质是通过  href  属性指定目标资源
- 图片  <img>  用  src  属性指定路径，相对路径是项目开发的最优解
- 路径写法是前端基础中的基础，搞懂相对/绝对路径的区别，能避免很多资源加载的bug
 
接下来打算继续学习CSS样式，把这些图片和链接美化一下，做出更完整的页面～
本文为个人学习笔记，欢迎交流指正～