Web前端:Markdown常用语法举例和总结

Markdown 是用于 创作 web 文档的.书写博客的利器!对常用的MK语法进行简单的介绍!

运行环境 Runtime environment

1
2
操作系统 : Windows10
IDE: pycharm2018

概述

设计理念

Markdown 致力于使阅读和创作文档变得容易.

Markdown 视可读性为最高准则. Markdown 文件应该以纯文本形式原样发布, 不应该包含标记标签和格式化指令. 尽管 Markdown 的语法受到了以下这些 text-to-HTML 过滤器的影响 – 包括 Setext, atx, Textile, reStructuredText, Grutatext, 还有 EtText – 但是 Markdown 语法灵感最大的来源还是纯文本 email 的格式.

基于以上背景, Markdown 完全由标点符号组成, 这些标点经过仔细挑选以使他们看上去和表达的含义相同. 例如, 星号标记的单词就像 强调. 列表就像是列表. 如果你使用过 email 的话, 就连块引用都像引用的文本段落.

  • 总的来说,Markdown 是用于 创作 web 文档的.

Markdown的内联HTML

HTML标签

Markdown,创建初衷是用于创造web文档,但却从来不是要取代HTML。

因为这本身就没什么必要,它的语法集非常小, 只对应一小部分 HTML 标签.
HTML 是一种 发布 格式; Markdown 是一种 创作 格式. 因此, Markdown 处理的都是纯文本.

  • markdown 的目标是易于阅读, 创作和编辑文章.

我们可以通过一些简单HTML代码来是实现一部分Markdown语法的文本效果。
例如, 下面是添加 HTML 表格到 Markdown 文件:

这是另一个普通段落。
<table>
    <tr>
        <td>Markdown</td>
    </tr>
</table>

这是另一个普通段落。

效果如下:

这是另一个普通段落。





Markdown

这是另一个普通段落。

- 请注意,在 HTML 区块标签间的 Markdown 格式语法将不会被处理。

如果多来几个\(列)标签和\(行)标签,效果如下:











Markdown Markdown Markdown
Markdown Markdown Markdown
  • 看起来还挺简单的,那么markdown的表格形式完全就可以这么搞定了。

继续进行一些拓展,这回加入span,cite,del等标签尝试一下!







Markdown Markdown Markdown

  • 好吧,除了del标签,其他的感觉好像没什么luan用的样子。

特殊字符自动转义

  • 说真的,我感觉这东西用的少。“\”可以解决很多问题了。
    在 HTML 中, 有两个字符需要特殊对待: < 和 &. 左尖括号用于起始标签; 英镑符号用于表示 HTML 字符实体. 如果你想将它们用作字面量, 你必须将它们转义为字符实体, 例如 \<, 和 \&。
    简单来说,在markdown中这两个特殊符号可以通过这种方式转移。

    <tr>
        <td>“ < ”: \& lt</td>
    </tr>
    <tr>
        <td>“ & ”: \& amp</td>
    </tr>
    


    最多也就在网页网址的特殊符号中用到一下,比如:

    http://images.google.com/images?num=30&q=larry+bird

真Markdown 常用语法

Markdown 标题

在Markdown中,你只需要在文本前面加上# 即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加# 即可,标题字号相应降低。例如:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

预览结果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
  • 妈耶,真多,不过跟HTML的h1~6标签也就一个样。

Markdown 锚点

Coding 会针对每个标题,在解析时都会添加锚点id,这样的话如果是大文章,就容易分出目录来了。比如:

# 锚点

变成静态网页文件以后,会解析成:

<h1 id="user-content-锚点">锚点</h1>

锚点一般是用在站内链接,方便跳转的,比如:

[回到大标题](#user-content-概述);

使用效果如下:
回到大标题

  • 虽然我似乎没有跳转成功。

Markdown 段落换行

集中起来,我认为有五种方法:

  1. 通过\
    标签来换行;
  2. 通过在句末加入两个空格来换行;
  3. 通过\

    \

    标签来圈出段落,来达到换行目的;
  4. 通过在Markdown文本中按两下回车,也能起到换行的目的,就是换得有点远;
  5. 通过列表的形式,之后介绍。
  • 相当得简单,效果就不演示了。

Markdown 列表

Markdown的列表样式跟HTML一样,分有序列表和无序列表。

无序列表:
注意是:-[空格]文本
- 文本
- 文本
- 文本

有序列表:
注意是:1.[空格]文本
1. 通过\<br>标签来换行;
2. 通过在句末加入两个空格来换行;
3. 通过\<p>\</p>标签来圈出段落,来达到换行目的;
4. 通过在Markdown文本中按两下回车,也能起到换行的目的,就是换得有点远;
5. 通过列表的形式,之后介绍。
  • 是不是发现只要有一点点HTML,Markdown就很容易上手了?

Markdown 引用、代码块、强调

引用

在句首加个符号“>[空格]”即可,效果如下:

窗前明月光,李白想姑娘!

  • 李白怕是要打死我了。

引用的用法还有嵌套引用,多加几个“>”符号,效果如下:

窗前明月光,李白想姑娘!

杜甫来我床头闻拖鞋!

杜甫2号来我床头闻拖鞋!

杜甫3号来我床头闻拖鞋!

杜甫4号来我床头闻拖鞋!

杜甫5号来我床头闻拖鞋!

杜甫6号来我床头闻拖鞋!

杜甫7号来我床头闻拖鞋!
杜甫8号来我床头闻拖鞋!

  • 由此可见,引用嵌套最深能够搞6层,再多就并列了,666。

代码块

通过以下方式来表示代码块;

1
$ print('我不要问我从哪里来~')

效果如下:

1
$ print('我不要问我从哪里来~')

强调

  1. *强调* 或者_强调_(示例:斜体)
  2. **加重强调** 或者 __加重强调__
  3. 多行强调,空两行,并缩进4个空格的方式来表示;
print('我不要问我从哪里来~')
print('我不要问我从哪里来~')
print('我不要问我从哪里来~')
  • 实践一下,很快就能看明白了什么意思了。

Markdown 链接

语法1:[链接的名字](链接的地址),链接地址可以是绝对路径也可以是相对路径

链接可以在行内插入:

Welcome to [Hexo](https://hexo.io/zh-cn/)! This is your very first post.

比较一下?
Welcome to Hexo! This is your very first post.

Markdown 图片

语法:![Alt text](链接的地址),链接地址可以是绝对路径也可以是相对路径
Google

Markdown 表格

emmmm,之前介绍过了。用table标签嘛…
但是!还有其他的方法!

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

显示的效果:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
  • 注意观察,表格第二行的“:”符号,这决定了表格中的内容向什么地方靠齐!

总结

Markdown,当然还不止这些东西。但是常用的,我感觉已经差不多了。
多写多练,体会一下 Markdown 的优雅之处!
最后我还发现一个问题,就是Markdown语法本身没有错。但是由于主题的原因,它改了某些markdown生成的样式。
这就有点蛋疼了233

  • 啊,好累啊。

×

也就放着玩的

扫码支持
扫码打赏,其实感觉也没人会给的。。

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 运行环境 Runtime environment
  • 概述
    1. 设计理念
    2. Markdown的内联HTML
      1. HTML标签
      2. 特殊字符自动转义
    3. 真Markdown 常用语法
      1. Markdown 标题
  • 一级标题
    1. 二级标题
      1. 三级标题
        1. 1. 四级标题
          1. 1.1. 五级标题
            1. 1.1.1. 六级标题
      2. Markdown 锚点
      3. Markdown 段落换行
      4. Markdown 列表
      5. Markdown 引用、代码块、强调
        1. 1. 引用
        2. 2. 代码块
        3. 3. 强调
      6. Markdown 链接
      7. Markdown 图片
      8. Markdown 表格
  • 总结
  • ,