Kenhuang Academy
  • English

      • Markdown Links

      Links are one of the most important elements in web documents. Markdown provides simple yet powerful link syntax that makes it easy to create various types of hyperlinks. This chapter will detail various uses of Markdown links.

      Inline links are the most commonly used link form:

      [Link Text](URL)

      Examples

      Visit [GitHub](https://github.com) to learn more.
View [Python official documentation](https://docs.python.org).

      Effect:

      Visit GitHub to learn more. View Python official documentation.

      Syntax

      [Link Text](URL "Title displayed on mouse hover")

      Examples

      [Google](https://google.com "Google search engine")
[Baidu](https://baidu.com "Chinese search engine")

      Effect:

      Google Baidu

      Tip: Hover over the link to see the title.

      Basic Syntax

      Reference links separate link definitions from usage:

      [Link Text][Reference ID]

[Reference ID]: URL "Optional Title"

      Examples

      Welcome to [my website][home] and [blog][blog].

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

      Effect:

      Welcome to my website and blog.

      1. Strong readability: Content not interrupted by URLs
      2. Easy maintenance: Only need to modify link in one place
      3. Reusable: Same link can be used multiple times in document
      4. Simple and clear: Suitable for complex long documents

      Implicit Reference

      If the reference ID matches the link text, can omit brackets:

      Welcome to visit [GitHub][] and [GitLab][].

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

      Directly wrap URL with < >:

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

      Effect:

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

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

      Effect:

      user@example.com support@company.com

      Basic Usage

      [Visit homepage](./index.html)
[View documentation](./docs/readme.md)
[Parent directory](../parent.md)

      Examples

      Go back to [previous chapter](./headings)
View [index](./index.md)

      Effect:

      Go back to previous chapter View index

      Directory Structure Example

      Assume the following directory structure:

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

      Link syntax in different files:

      <!-- Link from index.md to basics/introduction.md -->
[Introduction](./basics/introduction.md)

<!-- Link from basics/introduction.md back to index.md -->
[Back to Home](../index.md)

<!-- Link from basics/introduction.md to advanced/tables.md -->
[Tables](../advanced/tables.md)

      Page Internal Anchors

      Link to different parts of the same page:

      [Jump to Introduction](#Introduction)
[View Examples](#Example Section)

      Effect:

      Jump to Introduction [View Examples](#Example Section)

      Cross-page Anchors

      Link to specific parts of other pages:

      [View Headings Chapter](./headings#Level 1 Heading)
[Jump to Tables](./tables#Alignment)
      [Contact Me](mailto:example@email.com)
[Send Feedback](mailto:feedback@site.com?subject=Feedback)

      Effect:

      Contact Me Send Feedback

      [Call Customer Service](tel:400-123-4567)
      [Download File](ftp://example.com/file.zip)

      Use image as link:

      [![Image Description](Image URL)](Link URL)

      Examples

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

      Effect:

      GitHub Logo

      Create Buttons with HTML

      <a href="https://example.com" class="button">
    Click to Visit
</a>

      Combine with CSS

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

      1. Use Descriptive Text

      ❌ Click [here](https://example.com)
✅ Visit [Python official documentation](https://docs.python.org)

      2. Keep URLs Concise

      Use short link services:

      [Full Documentation](https://bit.ly/3xYzAbc)

      Ensure links are valid and point to correct locations.

      External link [Example](https://example.com) ↗
      <!-- Internal links use relative paths -->
[Related Article](./related.md)

<!-- External links use full URLs -->
[Reference Material](https://example.com)

      GitHub Flavored Markdown

      • Supports @username, #issue number links
      • Auto-recognizes repository references
      Mention @octocat
View issue #123
Repository octocat/Hello-World

      Effect:

      Mention @octocat View issue #123 Repository octocat/Hello-World

      Some editors support Wiki-style links:

      [[Page Name]]
[[Page Name|Display Text]]

      CSS can control link colors:

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

<a href="https://example.com">Visit Example</a>
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Open in New Window
</a>
      [Homepage]({{site.url}}/)
[Documentation]({{site.url}}/docs)
      [Download](https://example.com/download)
<!-- Links adapted to different platforms -->
      [Chinese Version](./zh/docs)
[English Version](./en/docs)

      Common Questions

      A: Use URL encoding or %20 to replace spaces:

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

      A: Ensure correct file extension is used:

      [PDF Document](./document.pdf)
[Image](./image.jpg)
[Code File](./script.js)

      A: Add download attribute:

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

      Practical Examples

      Technical Documentation Navigation

      ## Table of Contents

- [Introduction](./introduction.md)
- [Quick Start](./quickstart.md)
- [API Documentation](./api.md)
- [FAQ](./faq.md)

## Related Resources

- [Official Documentation](https://docs.example.com)
- [Community Forum](https://forum.example.com)
- [GitHub Repository](https://github.com/example/repo)
      ## Reference Materials

1. [MDN Web Documentation](https://developer.mozilla.org)
2. [W3Schools Tutorial](https://www.w3schools.com)
3. [Stack Overflow](https://stackoverflow.com)

## External Links

- [Wikipedia](https://wikipedia.org) - Online encyclopedia
- [Open Source Software](https://github.com) - Code hosting platform
      ---

**Related Links:** [Home](./) | [Documentation](./docs) | [Blog](./blog) | [Contact Us](mailto:contact@example.com)

© 2024 My Website

      Summary

      This chapter comprehensively introduced Markdown link usage:

      • Inline links: Most commonly used link form
      • Reference links: Suitable for complex documents and repeated links
      • Automatic links: URL and email address auto-conversion
      • Relative links: Used for internal document navigation
      • Anchor links: In-page navigation
      • Best practices: Use descriptive text, keep links valid

      Mastering various link methods will make your documents more professional and easy to navigate.

      Next: Learn how to insert Markdown Images.