图片展示
下面展示了两种图片引用方式：绝对路径和相对路径。两种方式在GitHub Pages中均可正常工作。
绝对路径
山脉风景
此图片使用完整的URL引用（绝对路径），直接指向外部服务器上的资源。
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80" alt="山脉风景">
相对路径
森林景观
此图片使用相对路径引用，图片文件存储在项目目录的images文件夹中。
<img src="images/forest.jpg" alt="森林景观">
GitHub Pages部署指南
按照以下步骤将您的静态页面部署到GitHub Pages：
1
创建GitHub仓库
登录GitHub，创建一个名为username.github.io的新仓库（将username替换为您的GitHub用户名）。
2
准备项目文件
在本地创建项目文件夹，包含：
index.html- 您的主页images/- 存放图片的文件夹- 其他资源文件（CSS、JS等）
3
上传到GitHub
使用Git命令行或GitHub Desktop将项目推送到仓库：
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main
4
访问您的页面
等待几分钟后，访问https://username.github.io查看您的网站。
确保图片路径正确，相对路径图片应位于https://username.github.io/images/目录下。
路径类型对比
绝对路径
优点：
- 直接引用外部资源，无需上传到仓库
- 适用于引用CDN或外部服务的图片
- 路径固定，不易出错
缺点：
- 依赖外部服务可用性
- 可能受跨域限制
- 无法控制资源变化
相对路径
优点：
- 资源与网站一起部署
- 加载速度快（同源）
- 便于版本控制
- 项目可移植性强
缺点：
- 需要正确组织文件结构
- 增加仓库大小
- 路径可能因位置不同而变化