给佬们的Markdown教程(P3)

目录

给佬们的Markdown教程(P1) - 文档共建 - LINUX DO

给佬们的Markdown教程(P2) - 文档共建 - LINUX DO

给佬们的Markdown教程(P3) - 文档共建 - LINUX DO

给佬们的Markdown教程(完结) - 文档共建 - LINUX DO

第3章:链接、图片与表格


3.1 超链接

3.1.1 行内链接

[显示文本](URL) 格式:

访问[谷歌](https://www.google.com)搜索。

效果:
访问谷歌搜索。

3.1.2 引用式链接

先定义链接标识符,再引用:

这是[百度][baidu-link]的引用方式。

[baidu-link]: https://www.baidu.com "百度官网"

效果:
(有的MD渲染器不支持这个功能)
这是[百度][baidu-link]的引用方式。
[baidu-link]: https://www.baidu.com “百度官网”


3.2 插入图片

语法与链接类似,前加 !

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

示例:

![熊猫](https://example.com/panda.jpg "可爱的熊猫")

效果:
(因无法加载图片,此处显示替代文本“熊猫”)

高级技巧
  • 使用图床(如Imgur、阿里云OSS)托管图片,避免本地路径问题。

  • 引用式图片:

    ![Logo][logo]
    
    [logo]: /assets/logo.png "公司Logo"
    

3.3 表格

3.3.1 基础表格

| 分隔列,- 分隔表头与内容,冒号 : 控制对齐:

| 左对齐 | 居中对齐 | 右对齐 |
| :----- | :------: | -----: |
| 单元格 | 单元格   | 单元格 |
| 内容   | 内容     | 100    |

| 效果: | | |

左对齐 居中对齐 右对齐
单元格 单元格 单元格
内容 内容 100

这里似乎也没渲染正确:

3.3.2 快速生成工具

手动对齐繁琐,可用在线工具(如Tables Generator)生成代码。


3.4 分割线与注释

  • 分割线:用三个及以上 -*

    ---
    ***
    

    效果:



  • 注释(部分平台支持):

    <!-- 这是隐藏的注释 -->
    

3.5 小练习

  1. 插入一个指向GitHub的引用式链接
  2. 创建一个包含两列(“项目”“价格”)的右对齐表格
  3. 用分割线分隔两个段落
24 个赞

太强了!我立刻顶!

4 个赞

示例很详细,感谢分享

3 个赞

佬太强啦

3 个赞

把前两章引过来啊

3 个赞

我编辑一下加个目录

2 个赞

Github


项目 价格
搓澡 300
按脚 80

你好!


5 个赞
左对齐 居中对齐 右对齐
洗头 洗澡 洗脚
99 99 99

GitHub

2 个赞

太强了佬

2 个赞

github

项目 价格
猪肉 100r

第一段


第二段

1 个赞

githup

项目 价格
鸡肉 2000
鸭肉 5000

这是一个分割线

你好

1 个赞

github

项目 价格
猪肉 100

分割


1 个赞

点击就送

项目 价格
陪聊 1000

这是分割线


你好

1 个赞

Github

项目 价格
bilibili -9999999999999999999999

段落一


段落二

1 个赞

<!-- -->是HTML语法 :tieba_087:

1 个赞

Markdown练习3

这是一个来自Github的链接


左对齐 居中对齐 右对齐
早餐 午餐 晚餐
7 15 10

哈哈,上面这是一个分割线 :rofl:
算了算了,再贴个图叭,临时图床,随缘看

很详细的教材

此话题已在最后回复的 30 天后被自动关闭。不再允许新回复。