当前位置： 移动技术网 > IT编程>网页制作>HTML > Markdown简介及语法详细整理

Markdown简介及语法详细整理

2020年07月24日  | 移动技术网IT编程  | 我要评论

1. Markdown简介

1.1 Markdown是什么?

Markdown是一个Web上使用的文本到HTML的转换工具，可以通过简单、易读易写的文本格式生成结构化的
HTML文档。目前GitHub、Stackoverflow等网站均支持这种格式。

1.2 Markdown的优点：

  • 1.专注你的文字内容而不是排版样式
  • 2.轻松的导出HTML、PDF和本身的.md文件
  • 3.纯文本内容，兼容所有的文本编辑器与字处理软件
  • 4.可读，直观。适合所有人的写作语言

1.3 Markdown兼容HTML

  • HTML是一种发布的格式，Markdown是一种书写的格式。Markdown的格式语法只涵盖纯文本可以涵盖的范围，不在Markdown涵盖范围之内的标签，都可以直接在文档里面用HTML撰写。不需要额外标注这是HTML或是Markdown;只要直接加标签就可以了。

  • 要制约的只有一些HTML区块元素——比如<div>、<table>、<pre>、<p>等标签，必须在前后加上空行与其他内容区隔开，还要求它们的标签与结尾标签不能用制表符或空格来缩进。Markdown的生成器有足够智能，不会在HTML区块标签外加上不必要的<p>标签。

  • 在HTML 区块\color{red}{区块}标签间的Markdown格式语法将不会被处理，在HTML区段\color{red}{区段}标签间Markdown语法是生效的。

2. Markdown的语法

2.1 Markdown的自动符号的转换语法

  • HTML：有两个字符需要特殊处理：< 和 & 。< 符号用于起始标签，& 符号则用于标记HTML实体，如果你只是想要显示这些字符的原型，则必须使用实体的形式。（类似于转义字符）例如<:&It;和&:&amp;另外© 可以写成&copy;也可以直接输 ©

  • Markdown: 这三个字符自动转换，不需要人为转义。如果你使用的&字符是HTML字符实体的一部分，它会保留原状，否则它会被转换成&amp; 。比如：你想要显示

    AT&T

    那么在Markdown中写成

    AT&T ：这是Markdown的写法
AT&amp;T ：这是HTML的正确写法，但是在Markdown中也会被自动转换

    都能达到想要实现的效果。

2.2 Markdown区块元素：段落换行和缩进

一个 Markdown 段落的前后要有一个以上的空行。普通段落不该用空格或制表符来缩进。如果想在段前加缩进

&emsp;是一个中文字符 &ensp;是半个中文字符 &nbsp;是1/4中文字符

普通段落也不能用回车来换行（当然如果你使用的是typora的话，可以直接回车创建新段落）

1.使用<p>内容</p>来组成封闭的一行
2.使用<br/>换行
  * 当然这会对插入<br/>标签造成麻烦。如果你确实想要依赖Markdown来插入<br/>标签的话，在插入处先按入两个以上的空格然后回车。

2.3 Markdown标题

Markdown支持两种标题的语法，类Setext和类atx形式

  • 类Setext形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），紧挨着显示的标题下一行输入，例如：

    第一阶标题
=======
第二阶标题显示效果有下划线
---
（任意数量的=和-都可以有效果）

  • 类Atx形式则是在行首插入1到6个#，对应到标题1到6阶，例如：

    # H1
## H2
### H3
#### H4
##### H5
###### H6

2.4 Markdown标记区块引用(常用于备注说明)

Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。 在每行的最前面加上 >

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ,例如：

>引用
>>嵌套引用

效果如下：

引用

嵌套引用

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

> ## 这是一个标题。 
> 
> 1.   FirstLine。
> 2.   SecondLine。 
> 
> 给出一些例子代码：
> 
>     return shell_exec("echo $input | $markdown_script");

效果如下:

这是一个标题。

  1. FirstLine。
  2. SecondLine。

给出一些例子代码：

return shell_exec("echo $input | $markdown_script");

Markdown也允许你偷懒只在整个段落的第一行最前面加上> :

2.5【文章常用】有序列表和无序列表

  • 无序列表使用*、+、- 作为列表标记（标记后带一个空格）：

    *   Red
*   Green
*   Blue

    等同于：

    +   Red
+   Green
+   Blue

    等同于：

    -   Red
-   Green
-   Blue

    效果如下：

  • Red

  • Green

  • Blue

无序列表可以分级：

* Red
  * Green
    * Blue

效果如下：
在这里插入图片描述

  • 有序列表使用数字接着一个英文句点标记(标记后带一个空格)：

    1.  First
2.  Second
3.  Third

    效果如下：

    1. First
    2. Second
    3. Third

  • 有序列表特别说明：

    有序列表数字是按照行数往下排的，与自己写的数字无关

    1.  First
2.  Second
3.  Third
1.  First
2.  Second
3.  Third

    效果如下：

    1. First
    2. Second
    3. Third
    4. First
    5. Second
    6. Third

    如果一定要实现123123，可以在中间加分隔符

    1.  First
2.  Second
3.  Third
## 
1.  First
2.  Second
3.  Third

    效果如下：

    1. First
    2. Second
    3. Third

    1. First
    2. Second
    3. Third

    2.6 【技术类文章福利】代码区块

和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块，通常这些区块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown会用

和标签来把代码区块包起来。

要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以：

这是一个普通段落：

	这是一个代码区块。

效果如下：

这是一个普通段落：

这是一个代码区块。

2.7 分隔线

可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

***
* * *
- - -
--------------------

效果如下：

2.8 【实用技巧】链接的表示语法

Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。

不管是哪一种，链接文字都是用 [方括号] 来标记。

2.8.1 行内式的链接

要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：

这是一个[例子](http://array.com/"主页")inline link.
[李娜姐](http://array.net/)has no title attribute.

效果如下：

这是一个inline link.
has no title attribute.

###2.8.2 参考式的链接

参考式的链接是在链接文字的括号后面再接上另一个方括号，而在第二个方括号里面要填入用以辨识链接的标记

接着，在文件的任意处（链接的定义可以放在文件中的任何一个地方），你可以把这个标记的链接内容定义出来，网址定义只有在产生链接的时候用到，并不会直接出现在文件之中

链接内容定义的形式为：

  • 方括号（前面可以选择性地加上至多三个空格来缩进），里面输入链接文字；
  • 接着一个冒号；
  • 接着一个以上的空格或制表符；
  • 接着链接的网址；
  • 选择性地接着 title 内容，可以用单引号、双引号或是括弧包着；
这是一个[示例][1]，演示区段元素的链接
[1]: http://www.baidu.com "百度官方网站"

效果如下：

这是一个，演示区段元素的链接

2.9 【技术类文章福利】强调的语法

Markdown使用星号（*）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 标签包围，用两个 * 或 _ 包起来的话，则会被转成 

*全体注意*
_全体注意_
**全体注意**
__全体注意__

效果如下：

全体注意
全体注意
全体注意
全体注意

2.10 【技术类文章福利】一小段行内代码的标记

如果要标记一小段行内代码，可以用反引号（`）把它包起来

大家在JAVA研发中经常用到的输出语句是`System.out.println(m);`

效果如下：

大家在JAVA研发中经常用到的输出语句是System.out.println(m);

2.11 图片插入

2.11.1 图片的行内式表示

详细叙述如下：

  • 一个惊叹号 !
  • 接着一个方括号，里面放上图片的替代文字（当图片显示不出来就会显示替代文字）
  • 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上 选择性的 ‘title’ 文字。
网络图片：
![Alt text](https://www.baidu.com/img/bd_logo1.jpg)
![Alt text](https://www.baidu.com/img/bd_logo1.jpg "title")
本地图片：
![Alt text](D:\vscodePicture\like.jpg "title")

2.11.2 图片的参考式表示

参考式的图片语法则长得像这样：![Alt text][id]

[id]是图片参考的名称，图片参考的定义方式则和链接参考一样：[id]： image/1.jpg "title"

到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 <img> 标签。

2.12 反斜杠（转义字符）

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号，例如：如果你想要用星号加在文字旁边的方式来做出强调效果（但不用 <em> 标签），你可以在星号的前面加上反斜杠

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

2.13 自动链接的处理

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样。

<http://example.com/>

效果如下：

邮址的自动链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字符转成 16 进位码的 HTML 实体，这样的格式可以糊弄一些不好的邮址收集机器人

<address@example.com>

效果如下：

address@example.com

本文地址：https://blog.csdn.net/zdfsb/article/details/107531392

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网