垦荒学园
  • 中文

      • Markdown 链接

      链接是 Web 文档中最重要的元素之一。Markdown 提供了简单而强大的链接语法，可以轻松创建各种类型的超链接。本章将详细介绍 Markdown 链接的各种用法。

      基本链接语法

      行内链接

      行内链接是最常用的链接形式：

      [链接文本](URL)

      示例

      访问 [GitHub](https://github.com) 学习更多。
查看 [Python 官方文档](https://docs.python.org)。

      效果：

      访问 GitHub 学习更多。 查看 Python 官方文档。

      带标题的链接

      语法

      [链接文本](URL "鼠标悬停显示的标题")

      示例

      [Google](https://google.com "谷歌搜索引擎")
[百度](https://baidu.com "中文搜索引擎")

      效果：

      Google 百度

      提示： 鼠标悬停在链接上时会显示标题。

      引用链接

      基本语法

      引用链接将链接定义与使用分离：

      [链接文本][引用标识]

[引用标识]: URL "可选标题"

      示例

      欢迎来到 [我的网站][home] 和 [博客][blog]。

[home]: https://example.com
[blog]: https://example.com/blog

      效果：

      欢迎来到 我的网站 和 博客。

      引用链接的优势

      1. 可读性强：内容不会被 URL 打断
      2. 易于维护：修改链接只需修改一处
      3. 可复用：同一链接可以在文档中多次使用
      4. 简洁清晰：适合复杂的长文档

      隐式引用

      如果引用标识与链接文本相同，可以省略方括号：

      欢迎访问 [GitHub][] 和 [GitLab][]。

[GitHub]: https://github.com
[GitLab]: https://gitlab.com

      自动链接

      URL 自动链接

      直接将 URL 用 < > 包裹：

      <https://github.com>
<https://www.python.org>

      效果：

      https://github.com https://www.python.org

      电子邮件自动链接

      <user@example.com>
<support@company.com>

      效果：

      user@example.com support@company.com

      相对链接

      基本用法

      [访问主页](./index.html)
[查看文档](./docs/readme.md)
[上级目录](../parent.md)

      示例

      返回 [上一章](./headings)  
查看 [索引](./index.md)

      效果：

      返回 上一章
      查看 索引

      目录结构示例

      假设有以下目录结构：

      docs/
├── index.md
├── basics/
│   ├── introduction.md
│   └── syntax.md
└── advanced/
    └── tables.md

      在不同文件中的链接写法：

      <!-- 从 index.md 链接到 basics/introduction.md -->
[基本介绍](./basics/introduction.md)

<!-- 从 basics/introduction.md 链回到 index.md -->
[返回首页](../index.md)

<!-- 从 basics/introduction.md 链到 advanced/tables.md -->
[表格](../advanced/tables.md)

      锚点链接

      页面内锚点

      链接到同一页面的不同部分：

      [跳转到简介](#简介)
[查看示例](#示例部分)

      效果：

      跳转到简介 查看示例

      跨页面锚点

      链接到其他页面的特定部分：

      [查看标题章节](./headings#一级标题)
[跳转到表格](./tables#对齐方式)

      文本协议链接

      邮件链接

      [联系我](mailto:example@email.com)
[发送反馈](mailto:feedback@site.com?subject=反馈)

      效果：

      联系我 发送反馈

      电话链接

      [拨打客服电话](tel:400-123-4567)

      FTP 链接

      [下载文件](ftp://example.com/file.zip)

      图片链接

      基本图片链接

      将图片作为链接：

      [![图片描述](图片URL)](链接URL)

      示例

      [![GitHub Logo](https://github.com/github.png)](https://github.com)

      效果：

      GitHub Logo

      按钮样式链接

      使用 HTML 创建按钮

      <a href="https://example.com" class="button">
    点击访问
</a>

      结合 CSS

      <a href="https://example.com" style="
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
">
    点击访问
</a>

      链接的最佳实践

      1. 使用描述性文本

      ❌ 点击 [这里](https://example.com)
✅ 访问 [Python 官方文档](https://docs.python.org)

      2. 保持 URL 简洁

      使用短链接服务：

      [完整文档](https://bit.ly/3xYzAbc)

      3. 测试所有链接

      确保链接有效且指向正确的位置。

      4. 外部链接添加标识

      外部链接 [示例](https://example.com) ↗

      5. 相对链接用于内部链接

      <!-- 内部链接使用相对路径 -->
[相关文章](./related.md)

<!-- 外部链接使用完整 URL -->
[参考资料](https://example.com)

      不同平台的链接支持

      GitHub Flavored Markdown

      • 支持 @username、#issue 号链接
      • 自动识别仓库引用
      提到 @octocat
查看问题 #123
仓库 octocat/Hello-World

      效果：

      提到 @octocat 查看问题 #123 仓库 octocat/Hello-World

      一些编辑器支持 Wiki 风格链接：

      [[页面名称]]
[[页面名称|显示文本]]

      链接状态

      已访问链接样式

      CSS 可以控制链接颜色：

      <style>
a:visited { color: purple; }
a:hover { color: red; }
</style>

<a href="https://example.com">访问示例</a>

      新窗口打开链接

      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    在新窗口打开
</a>

      高级链接技巧

      1. 链接变量（特定编辑器）

      [首页]({{site.url}}/)
[文档]({{site.url}}/docs)

      2. 条件链接

      [下载](https://example.com/download)
<!-- 适配不同平台的链接 -->

      3. 多语言链接

      [中文版](./zh/docs)
[English Version](./en/docs)

      常见问题

      Q: 链接中有空格怎么办？

      A: 使用 URL 编码或 %20 替代空格：

      [链接](https://example.com/my%20page)

      Q: 如何链接到文件？

      A: 确保使用正确的文件扩展名：

      [PDF 文档](./document.pdf)
[图片](./image.jpg)
[代码文件](./script.js)

      Q: 如何创建下载链接？

      A: 添加 download 属性：

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

      实战示例

      技术文档导航

      ## 目录

- [简介](./introduction.md)
- [快速开始](./quickstart.md)
- [API 文档](./api.md)
- [常见问题](./faq.md)

## 相关资源

- [官方文档](https://docs.example.com)
- [社区论坛](https://forum.example.com)
- [GitHub 仓库](https://github.com/example/repo)

      参考链接列表

      ## 参考资料

1. [MDN Web 文档](https://developer.mozilla.org)
2. [W3Schools 教程](https://www.w3schools.com)
3. [Stack Overflow](https://stackoverflow.com)

## 外部链接

- [维基百科](https://wikipedia.org) - 在线百科全书
- [开源软件](https://github.com) - 代码托管平台

      页脚链接

      ---

**相关链接：** [首页](./) | [文档](./docs) | [博客](./blog) | [联系我们](mailto:contact@example.com)

© 2024 我的网站

      小结

      本章全面介绍了 Markdown 链接的使用方法：

      • 行内链接：最常用的链接形式
      • 引用链接：适合复杂文档和重复链接
      • 自动链接：URL 和邮件地址自动转换
      • 相对链接：用于文档内部导航
      • 锚点链接：页面内跳转
      • 最佳实践：使用描述性文本、保持链接有效

      掌握链接的各种用法，可以让你的文档更加专业和易于导航。

      下一步： 学习 Markdown 图片 的插入方法。