【Markdown-03】链接与图片——连接世界，丰富内容第 3 章：链接与图片——连接世界，丰富内容在前面的章节中，

第 3 章：链接与图片——连接世界，丰富内容

在前面的章节中，我们学会了如何创建结构化的文本内容。现在，让我们学习如何让文档变得更加丰富和互动——通过添加链接和图片，让你的文档能够连接到外部世界，并用视觉元素增强表达效果。

3.1 链接语法：连接无限可能

Markdown 提供了两种创建链接的方式：行内式和引用式。让我们逐一学习它们的用法。

行内式链接

行内式链接是最常用的链接语法，格式为 [链接文字](URL)：

[Google](https://www.google.com)
[GitHub](https://github.com)
[掘金](https://juejin.cn)

渲染效果：

Google
GitHub
掘金

带标题的链接

你可以为链接添加标题（鼠标悬停时显示）：

[Google](https://www.google.com "世界上最大的搜索引擎")
[GitHub](https://github.com "全球最大的代码托管平台")

渲染效果：

Google
GitHub

引用式链接

引用式链接将链接的定义和使用分离，特别适合长文档或需要多次引用同一链接的场景：

这是一个指向 [Google][1] 的链接。
这是另一个指向 [GitHub][github] 的链接。
你也可以直接使用 [掘金][] 这样的简化写法。

[1]: https://www.google.com
[github]: https://github.com "代码托管平台"
[掘金]: https://juejin.cn

渲染效果：

这是一个指向 Google 的链接。
这是另一个指向 GitHub 的链接。
你也可以直接使用掘金这样的简化写法。

自动链接

对于简单的 URL 和邮箱地址，Markdown 支持自动链接：

<https://www.example.com>
<user@example.com>

渲染效果：

www.example.com
user@example.com

3.2 行内式 vs 引用式：选择合适的方式

行内式链接的优势

1. 简洁直观

访问 [官方文档](https://docs.example.com) 了解更多信息。

链接和文字紧密结合，阅读时一目了然。

2. 适合短文档

对于博客文章、简短说明等，行内式链接更加简洁。

3. 即写即用

不需要在文档末尾维护链接列表，写作流程更流畅。

引用式链接的优势

1. 保持文本可读性

# 行内式（可能影响阅读）
在现代 Web 开发中，[React](https://reactjs.org) 和 [Vue.js](https://vuejs.org) 是两个非常流行的前端框架，它们都提供了组件化的开发方式。同时，[Node.js](https://nodejs.org) 让 JavaScript 也能用于后端开发。

# 引用式（更易阅读）
在现代 Web 开发中，[React][react] 和 [Vue.js][vue] 是两个非常流行的前端框架，它们都提供了组件化的开发方式。同时，[Node.js][node] 让 JavaScript 也能用于后端开发。

[react]: https://reactjs.org
[vue]: https://vuejs.org
[node]: https://nodejs.org

2. 便于维护

当需要更新链接时，只需修改文档末尾的定义：

文档中多次提到 [官方文档][docs]...
另一处也引用了 [官方文档][docs]...

# 只需要在这里修改一次
[docs]: https://new-docs-url.com

3. 支持复用

同一个链接可以在文档中多次使用：

[GitHub][gh] 是全球最大的代码托管平台。
你可以在 [GitHub][gh] 上找到这个项目的源代码。
欢迎在 [GitHub][gh] 上提交 Issue 和 PR。

[gh]: https://github.com

选择建议

场景	推荐方式	理由
短文档、博客文章	行内式	简洁直观，写作流畅
长文档、技术文档	引用式	保持可读性，便于维护
链接较少（<5个）	行内式	无需额外管理
链接较多（>10个）	引用式	统一管理，避免重复
需要频繁更新链接	引用式	修改方便

3.3 图片语法：让文档更生动

图片语法与链接语法非常相似，只是在前面加了一个感叹号 !。

基本图片语法

![替代文字](图片URL)
![替代文字](图片URL "可选标题")

示例：

![Markdown Logo](https://markdown-here.com/img/icon256.png)
![Markdown Logo](https://markdown-here.com/img/icon256.png "Markdown 官方 Logo")

引用式图片

与链接一样，图片也支持引用式语法：

![Markdown Logo][logo]
![另一张图片][pic2]

[logo]: https://markdown-here.com/img/icon256.png "Markdown Logo"
[pic2]: https://example.com/image.jpg

Alt 文本的重要性

Alt 文本（替代文字）不仅仅是可选的，它有重要的作用：

1. 无障碍访问

![一只可爱的小猫正在阳光下打盹](cat-sleeping.jpg)

屏幕阅读器会读出 alt 文本，帮助视觉障碍用户理解图片内容。

2. 图片加载失败时的备选显示

![项目架构图 - 展示了前端、后端和数据库的关系](architecture-diagram.png)

当图片无法加载时，用户仍能了解图片的内容。

3. SEO 优化

搜索引擎通过 alt 文本理解图片内容，有助于提高搜索排名。

最佳实践：编写好的 Alt 文本

✅ 好的 Alt 文本：

![柱状图显示2023年各季度销售额，Q4达到最高点500万](sales-chart-2023.png)
![团队合影，5名开发人员在办公室里微笑着看向镜头](team-photo.jpg)
![流程图展示用户注册的5个步骤](user-registration-flow.png)

❌ 不好的 Alt 文本：

![图片](image.png)
![截图](screenshot.jpg)
![](empty-alt.png)

3.4 路径详解：相对路径 vs 绝对路径

正确理解和使用路径是成功插入图片的关键。

绝对路径

绝对路径包含完整的 URL，从协议开始：

# 网络图片（推荐用于外部图片）
![示例图片](https://example.com/images/photo.jpg)

# 本地绝对路径（不推荐）
![本地图片](file:///C:/Users/username/Documents/image.jpg)

优点：

路径明确，不会产生歧义
适合引用网络图片

缺点：

本地绝对路径在不同电脑上无法使用
网络图片依赖外部服务

相对路径

相对路径是相对于当前 Markdown 文件的位置：

# 同级目录
![同级图片](image.jpg)

# 子目录
![子目录图片](images/photo.jpg)

# 上级目录
![上级目录图片](../images/photo.jpg)

# 多级目录
![多级目录图片](../../assets/images/photo.jpg)

文件结构示例

假设你的项目结构如下：

project/
├── README.md
├── docs/
│   ├── guide.md
│   └── tutorial.md
├── images/
│   ├── logo.png
│   └── screenshots/
│       ├── home.png
│       └── settings.png
└── assets/
    └── icons/
        └── favicon.ico

在 README.md 中引用图片：

# 项目说明

![项目 Logo](images/logo.png)
![首页截图](images/screenshots/home.png)
![图标](assets/icons/favicon.ico)

在 docs/guide.md 中引用图片：

# 使用指南

![项目 Logo](../images/logo.png)
![设置页面](../images/screenshots/settings.png)
![图标](../assets/icons/favicon.ico)

路径选择建议

场景	推荐路径类型	示例
项目内部图片	相对路径	`./images/photo.jpg`
外部网络图片	绝对路径	`https://example.com/image.jpg`
临时演示	网络图片服务	`https://via.placeholder.com/300x200`
生产环境	CDN 或相对路径	`https://cdn.example.com/images/`

常见路径问题及解决方案

问题 1：图片显示不出来

# 检查路径是否正确
![错误路径](image/photo.jpg)  # 应该是 images/photo.jpg
![正确路径](images/photo.jpg)

问题 2：在不同平台上路径不一致

# ❌ 使用反斜杠（Windows 风格）
![Windows 路径](images\photo.jpg)

# ✅ 使用正斜杠（跨平台兼容）
![跨平台路径](images/photo.jpg)

问题 3：文件名包含空格或特殊字符

# ❌ 直接使用包含空格的文件名
![空格文件名](my photo.jpg)

# ✅ 使用 URL 编码或重命名文件
![编码文件名](my%20photo.jpg)
![重命名文件](my-photo.jpg)

3.5 综合练习：制作图文并茂的旅行日记

现在让我们通过一个完整的案例来练习链接和图片的使用。

项目结构

travel-blog/
├── tokyo-trip.md
├── images/
│   ├── tokyo-tower.jpg
│   ├── sushi-restaurant.jpg
│   ├── shibuya-crossing.jpg
│   └── mount-fuji.jpg
└── assets/
    └── map.png

完整的旅行日记示例

# 🗾 东京之旅：五天四夜的精彩体验

> **旅行时间**：2024年3月15日 - 3月19日  
> **旅行人数**：2人  
> **总预算**：¥15,000

## 📍 行程概览

![东京旅行路线图](assets/map.png "我们的东京五日游路线")

这次东京之旅我们走访了多个经典景点，品尝了地道美食，体验了日本独特的文化。详细的行程规划可以参考 [Google Maps 路线](https://maps.google.com "点击查看详细路线")。

## 🏙️ 第一天：初到东京

### 东京塔：经典地标的魅力

![东京塔夜景](images/tokyo-tower.jpg "东京塔在夜晚格外美丽")

抵达东京的第一站就是著名的 **东京塔**。这座红白相间的铁塔高333米，是东京的象征之一。

**游览信息：**
- **开放时间**：9:00 - 23:00
- **门票价格**：成人 ¥1,200
- **官方网站**：[东京塔官网][tokyo-tower]
- **交通方式**：地铁到 [神谷町站][kamiyacho] 步行7分钟

> **小贴士**：建议傍晚时分前往，可以同时欣赏到白天和夜晚的东京景色。

## 🍣 第二天：美食探索

### 筑地市场：新鲜寿司的天堂

![寿司料理](images/sushi-restaurant.jpg "新鲜的金枪鱼寿司")

虽然筑地市场已经搬迁，但周边的寿司店依然保持着传统的制作工艺。我们在 [寿司大][sushi-dai] 排队2小时，终于品尝到了传说中的金枪鱼寿司。

**推荐餐厅：**

1. **寿司大**
   - 地址：东京都中央区筑地5-2-1
   - 营业时间：5:00 - 14:00
   - 人均消费：¥3,000
   - [食べログ评分][tabelog-sushi]: 4.2/5.0

2. **大和寿司**
   - 地址：东京都中央区筑地5-2-1
   - 营业时间：5:30 - 14:00
   - 人均消费：¥2,500

> **排队攻略**：建议凌晨4点到达，可以避开最拥挤的时段。

## 🚶‍♂️ 第三天：城市漫步

### 涩谷十字路口：世界最繁忙的路口

![涩谷十字路口](images/shibuya-crossing.jpg "数千人同时过马路的壮观场面")

涩谷十字路口被称为"世界最繁忙的路口"，每次绿灯亮起时，多达3000人会同时穿越马路。这里是体验东京都市节奏的最佳地点。

**最佳观赏点：**
- **涩谷天空观景台**：[官方预订][shibuya-sky]
- **星巴克涩谷店**：2楼靠窗位置
- **涩谷109大厦**：免费观景区

**周边购物：**
- [涩谷109][shibuya-109]：年轻女性时尚
- [涩谷中心街][center-gai]：潮流文化聚集地
- [唐吉诃德涩谷店][donki]：24小时营业的综合商店

## 🗻 第四天：富士山一日游

### 河口湖：富士山的最佳观赏点

![富士山倒影](images/mount-fuji.jpg "河口湖中的富士山倒影")

从东京出发，乘坐 [JR 中央线][jr-chuo] 约2小时可到达河口湖。这里是观赏富士山的经典地点，湖水中的富士山倒影格外迷人。

**交通信息：**
- **去程**：新宿 → 大月 → 河口湖
- **车程**：约2小时15分钟
- **费用**：¥2,570（使用 [JR Pass][jr-pass] 可免费）

**推荐活动：**
1. **湖畔散步**：沿着河口湖畔步道漫步
2. **缆车观景**：乘坐 [河口湖缆车][ropeway] 登高望远
3. **温泉体验**：在 [富士河口湖温泉][onsen] 放松身心

> **天气提醒**：富士山经常被云雾遮挡，建议查看 [富士山实时摄像头][fuji-cam] 确认能见度。

## 🛍️ 第五天：购物与告别

### 银座：奢华购物的代名词

最后一天我们来到了银座，这里汇集了世界顶级品牌和日本传统老店。

**购物推荐：**

| 商店 | 特色 | 价格区间 | 推荐指数 |
|------|------|----------|----------|
| [银座三越][mitsukoshi] | 高端百货 | ¥¥¥¥ | ⭐⭐⭐⭐⭐ |
| [优衣库银座店][uniqlo] | 基础服饰 | ¥¥ | ⭐⭐⭐⭐ |
| [无印良品银座店][muji] | 生活用品 | ¥¥ | ⭐⭐⭐⭐ |
| [伊东屋][itoya] | 文具天堂 | ¥¥¥ | ⭐⭐⭐⭐⭐ |

## 💰 费用总结

| 项目 | 费用 | 备注 |
|------|------|------|
| 机票 | ¥3,500 | 往返含税 |
| 住宿 | ¥4,000 | 5晚商务酒店 |
| 交通 | ¥2,000 | JR Pass + 地铁 |
| 餐饮 | ¥3,500 | 包含特色料理 |
| 门票 | ¥1,000 | 各景点门票 |
| 购物 | ¥1,000 | 纪念品和特产 |
| **总计** | **¥15,000** | 人均费用 |

## 📝 旅行感悟

这次东京之旅让我们深深感受到了日本文化的魅力：

- **服务精神**：无论在哪里都能感受到贴心的服务
- **秩序井然**：即使在最繁忙的地方也保持着良好的秩序
- **传统与现代**：古老的传统与现代科技完美融合
- **美食文化**：每一道料理都体现了匠人精神

> **下次计划**：已经开始规划关西地区的旅行，期待探索京都和大阪的不同魅力！

## 🔗 实用链接

### 官方网站
- [日本国家旅游局][jnto]
- [东京都观光官网][tokyo-tourism]
- [JR 东日本][jr-east]

### 实用工具
- [Google 翻译][translate]：支持拍照翻译
- [换乘案内][hyperdia]：日本交通查询
- [食べログ][tabelog]：餐厅评价网站
- [天气预报][weather]：东京天气查询

### 社交媒体
- 关注我的 [Instagram][instagram] 查看更多旅行照片
- 在 [微博][weibo] 分享你的东京旅行体验
- 加入 [东京旅行交流群][wechat-group] 获取最新攻略

---

**作者**：旅行爱好者小明  
**发布时间**：2024年3月25日  
**最后更新**：2024年3月26日

> 如果这篇旅行日记对你有帮助，欢迎 [点赞支持][like] 或 [分享给朋友][share]！

<!-- 链接定义区域 -->
[tokyo-tower]: https://www.tokyotower.co.jp
[kamiyacho]: https://www.tokyometro.jp
[sushi-dai]: https://tabelog.com/tokyo/A1313/A131301/13022176/
[tabelog-sushi]: https://tabelog.com
[shibuya-sky]: https://www.shibuya-sky.com
[shibuya-109]: https://www.shibuya109.jp
[center-gai]: https://www.shibuyacenter-gai.com
[donki]: https://www.donki.com
[jr-chuo]: https://www.jreast.co.jp
[jr-pass]: https://www.japanrailpass.net
[ropeway]: https://www.mtfujiropeway.jp
[onsen]: https://www.fujikawaguchiko-onsen.jp
[fuji-cam]: https://www.fujigoko.tv
[mitsukoshi]: https://www.mitsukoshi.mistore.jp
[uniqlo]: https://www.uniqlo.com
[muji]: https://www.muji.com
[itoya]: https://www.ito-ya.co.jp
[jnto]: https://www.japan.travel
[tokyo-tourism]: https://www.gotokyo.org
[jr-east]: https://www.jreast.co.jp
[translate]: https://translate.google.com
[hyperdia]: https://www.hyperdia.com
[tabelog]: https://tabelog.com
[weather]: https://weather.yahoo.co.jp
[instagram]: https://www.instagram.com
[weibo]: https://weibo.com
[wechat-group]: #
[like]: #
[share]: #

练习要点分析

这个综合练习展示了链接和图片的多种用法：

多种链接形式：
- 行内式链接：[Google Maps 路线](https://maps.google.com)
- 引用式链接：[东京塔官网][tokyo-tower]
- 自动链接：用于邮箱等
图片的有效使用：
- 描述性 alt 文本：![东京塔夜景](images/tokyo-tower.jpg "东京塔在夜晚格外美丽")
- 相对路径：images/photo.jpg
- 图片标题：鼠标悬停显示额外信息
内容组织：
- 使用表格整理信息
- 引用块突出重要提示
- 列表展示结构化数据
链接管理：
- 文档末尾统一定义所有引用链接
- 便于维护和更新

本章小结

在这一章中，我们全面学习了 Markdown 中链接和图片的使用方法：

主要内容回顾

链接语法：
- 行内式：[文字](URL)
- 引用式：[文字][标识]
- 自动链接：<URL>
图片语法：
- 基本语法：![alt](src)
- 带标题：![alt](src "title")
- 引用式：![alt][ref]
路径理解：
- 相对路径：相对于当前文件
- 绝对路径：完整的 URL 或文件路径
- 路径选择的最佳实践
Alt 文本的重要性：
- 无障碍访问
- 图片加载失败时的备选
- SEO 优化

最佳实践总结

链接选择：短文档用行内式，长文档用引用式
图片优化：编写描述性的 alt 文本
路径管理：项目内用相对路径，外部资源用绝对路径
文档维护：引用式链接便于统一管理

下一步学习

在下一章中，我们将学习如何使用表格、任务列表和分割线来组织结构化数据，让你的文档更加专业和易读。

练习建议：尝试创建一份包含链接和图片的个人简历或项目介绍，实践本章学到的所有技巧。

mp.weixin.qq.com_cgi-bin_settingpage_t=setting_index&action=index&token=2028891395&lang=zh_CN.png