Web前端:Markdown常用语法举例和总结
Markdown 是用于 创作 web 文档的.书写博客的利器!对常用的MK语法进行简单的介绍!
运行环境 Runtime environment
1 | 操作系统 : Windows10 |
概述
设计理念
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 格式语法将不会被处理。
如果多来几个<td>(列)标签和<tr>(行)标签,效果如下:
Markdown | Markdown | Markdown |
Markdown | Markdown | Markdown |
- 看起来还挺简单的,那么markdown的表格形式完全就可以这么搞定了。
继续进行一些拓展,这回加入span,cite,del等标签尝试一下!
Markdown | Markdown |
- 好吧,除了del标签,其他的感觉好像没什么luan用的样子。
特殊字符自动转义
说真的,我感觉这东西用的少。“\”可以解决很多问题了。
在 HTML 中, 有两个字符需要特殊对待: < 和 &. 左尖括号用于起始标签; 英镑符号用于表示 HTML 字符实体. 如果你想将它们用作字面量, 你必须将它们转义为字符实体, 例如 <, 和 &。
简单来说,在markdown中这两个特殊符号可以通过这种方式转移。“ < ”: \& lt “ & ”: \& amp
真Markdown 常用语法
Markdown 标题
在Markdown中,你只需要在文本前面加上# 即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加# 即可,标题字号相应降低。例如:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
预览结果:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
- 妈耶,真多,不过跟HTML的h1~6标签也就一个样。
Markdown 锚点
Coding 会针对每个标题,在解析时都会添加锚点id,这样的话如果是大文章,就容易分出目录来了。比如:
# 锚点
变成静态网页文件以后,会解析成:
<h1 id="user-content-锚点">锚点</h1>
锚点一般是用在站内链接,方便跳转的,比如:
[回到大标题](#user-content-概述);
使用效果如下:
回到大标题
- 虽然我似乎没有跳转成功。
Markdown 段落换行
集中起来,我认为有五种方法:
- 通过<br>标签来换行;
- 通过在句末加入两个空格来换行;
- 通过<p></p>标签来圈出段落,来达到换行目的;
- 通过在Markdown文本中按两下回车,也能起到换行的目的,就是换得有点远;
- 通过列表的形式,之后介绍。
- 相当得简单,效果就不演示了。
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('我不要问我从哪里来~') |
强调
- *强调* 或者_强调_(示例:斜体)
- **加重强调** 或者 __加重强调__
- 多行强调,空两行,并缩进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](链接的地址),链接地址可以是绝对路径也可以是相对路径
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
- 啊,好累啊。