链接与图片进阶 #

概述 #

本文档介绍链接和图片的高级用法，包括特殊场景处理和最佳实践。

高级链接技巧 #

链接引用简化 #

当链接引用 ID 与文本相同时，可以省略：

markdown 
[GitHub][]

[GitHub]: https://github.com

多个链接指向同一地址 #

markdown 
[GitHub][1]
[官方仓库][1]
[源码地址][1]

[1]: https://github.com

链接中的特殊字符 #

需要转义的字符：

markdown 
[链接](https://example.com/page\(1\))
[链接](https://example.com/page%20space)

URL 编码 #

字符 编码
空格 %20
# %23
% %25
& %26
( %28
) %29

图片高级技巧 #

响应式图片 #

使用 HTML 实现响应式：

markdown 
<img src="image.png" 
     srcset="image-small.png 480w, image-large.png 800w"
     sizes="(max-width: 600px) 480px, 800px"
     alt="响应式图片">

图片懒加载 #

markdown 
<img src="image.png" loading="lazy" alt="懒加载图片">

图片占位符 #

markdown 
![加载中...](placeholder.png) 
<!-- 实际图片通过 JS 加载 -->

图片画廊 #

使用 HTML + CSS：

markdown 
<div class="gallery">
  <img src="image1.png" alt="图片1">
  <img src="image2.png" alt="图片2">
  <img src="image3.png" alt="图片3">
</div>

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
</style>

链接与图片组合 #

可点击图片 #

markdown 
[![Logo](logo.png)](https://example.com)

图片按钮 #

markdown 
<a href="https://example.com">
  <img src="button.png" alt="点击按钮">
</a>

社交媒体图标链接 #

markdown 
[![GitHub](github-icon.png)](https://github.com/user)
[![Twitter](twitter-icon.png)](https://twitter.com/user)
[![LinkedIn](linkedin-icon.png)](https://linkedin.com/in/user)

特殊链接类型 #

下载链接 #

markdown 
<a href="file.pdf" download>下载 PDF</a>

锚点链接（页内跳转） #

markdown 
## 目录

- [简介](#简介)
- [安装](#安装)
- [使用](#使用)

## 简介

内容...

## 安装

内容...

## 使用

内容...

JavaScript 链接 #

markdown 
<a href="javascript:void(0)" onclick="alert('Hello')">点击</a>

GitHub 特有功能 #

相对链接 #

在 GitHub 上使用相对路径：

markdown 
[源码](./src/index.js)
[文档](../docs/README.md)
[配置](/config/settings.json)

Issue 链接 #

markdown 
修复 #123
关联 #456
关闭 #789

用户和团队链接 #

markdown 
@username
@org/team

提交链接 #

markdown 
查看提交 abc123def

徽章（Badges） #

常用徽章服务 #

markdown 
![npm](https://img.shields.io/npm/v/package)
![license](https://img.shields.io/npm/l/package)
![downloads](https://img.shields.io/npm/dm/package)
![build](https://img.shields.io/github/actions/workflow/status/user/repo/ci.yml)
![coverage](https://img.shields.io/codecov/c/github/user/repo)

自定义徽章 #

markdown 
![自定义](https://img.shields.io/badge/label-message-color)
![版本](https://img.shields.io/badge/version-1.0.0-blue)
![状态](https://img.shields.io/badge/status-active-green)

徽章样式 #

markdown 
![flat](https://img.shields.io/badge/style-flat-blue?style=flat)
![flat-square](https://img.shields.io/badge/style-flat_square-blue?style=flat-square)
![plastic](https://img.shields.io/badge/style-plastic-blue?style=plastic)
![for-the-badge](https://img.shields.io/badge/style-for_the_badge-blue?style=for-the-badge)

链接管理策略 #

集中管理链接 #

markdown 
<!-- 文档底部统一管理 -->
[react]: https://react.dev
[vue]: https://vuejs.org
[angular]: https://angular.io
[node]: https://nodejs.org
[npm]: https://npmjs.com

链接检查 #

定期检查链接是否有效，使用工具：

  • markdown-link-check
  • lychee
  • linkchecker

链接更新 #

使用引用链接便于更新：

markdown 
只需修改一处：
[docs]: https://new-docs-url.com

图片管理策略 #

目录结构 #

text 
docs/
├── images/
│   ├── logos/
│   │   └── logo.png
│   ├── screenshots/
│   │   ├── home.png
│   │   └── settings.png
│   └── diagrams/
│       └── architecture.png
└── README.md

图片命名规范 #

markdown 
推荐：
![用户登录界面](./images/screenshots/user-login.png)
![系统架构图](./images/diagrams/system-architecture.png)

不推荐：
![图片](./images/1.png)
![截图](./images/img_001.png)

图片版本控制 #

对于频繁更新的图片：

markdown 
![v1.0 截图](./images/v1.0/screenshot.png)
![v2.0 截图](./images/v2.0/screenshot.png)

无障碍访问 #

链接无障碍 #

markdown 
好的：
[阅读 React 文档](https://react.dev)

不好的：
[点击这里](https://react.dev)

图片无障碍 #

markdown 
好的：
![搜索按钮：放大镜图标](search-icon.png)

不好的：
![icon](search-icon.png)

装饰性图片 #

纯装饰图片使用空 alt：

markdown 
![](decorative-image.png)

性能优化 #

图片优化 #

  1. 压缩图片 - 使用 TinyPNG、ImageOptim 等工具
  2. 选择合适格式 - PNG/JPG/WebP
  3. 使用 CDN - 加速图片加载
  4. 懒加载 - 延迟加载非关键图片

链接优化 #

  1. 使用 HTTPS - 安全且更快
  2. 避免重定向 - 直接链接最终地址
  3. 预连接 - <link rel="preconnect">

实战案例 #

README 徽章区 #

markdown 
# 项目名称

[![npm](https://img.shields.io/npm/v/package)](https://npmjs.com/package/package)
[![license](https://img.shields.io/npm/l/package)](./LICENSE)
[![build](https://img.shields.io/github/actions/workflow/status/user/repo/ci.yml)](https://github.com/user/repo/actions)
[![codecov](https://img.shields.io/codecov/c/github/user/repo)](https://codecov.io/gh/user/repo)

项目描述...

文档导航 #

markdown 
## 导航

<p align="center">
  <a href="./docs/getting-started.md">快速开始</a> •
  <a href="./docs/api.md">API 文档</a> •
  <a href="./docs/examples.md">示例</a> •
  <a href="./docs/faq.md">常见问题</a>
</p>

贡献者展示 #

markdown 
## 贡献者

<p align="center">
  <a href="https://github.com/user1">
    <img src="https://github.com/user1.png?size=50" width="50">
  </a>
  <a href="https://github.com/user2">
    <img src="https://github.com/user2.png?size=50" width="50">
  </a>
</p>

下一步 #

继续学习 行内代码！

最后更新：2026-03-24