Markdown学习笔记（三）

最新推荐文章于 2024-03-20 09:05:07 发布

SARAH0920

最新推荐文章于 2024-03-20 09:05:07 发布

阅读量924

点赞数 3

文章标签：学习 html

本文链接：https://blog.csdn.net/m0_62014344/article/details/125818053

版权

本文详细介绍了Markdown中无序列表、有序列表、定义型列表和列表嵌套的使用方法，包括HTML对应的标签结构，并展示了如何在列表中嵌套段落、引用块、代码块、图片等元素，还分享了在Markdown中插入图片的技巧和注意事项。

摘要由CSDN通过智能技术生成

Markdown学习笔记（三）

今天是学习Markdown的第三天，话不多说我们开始吧~

无序列表
使用”*“、”+“、”-“表示无序列表。
要创建无序列表，在每个列表项的前面添加星号，加号或者破折号，缩进一个或者多个列表项可以创建嵌套列表。

无序列表的HTML形式下：
tips：整个列表以< ul >开头，以< /ul >结束；每个列表项以< li >开头，以< /li >结束。若还要在某个列表项下再创建一个列表，则同样以< ul >开头，以< /ul >结束；其中的每个列表项依旧以< li >开头，以< /li >结束。
有序列表
有序列表使用数字接着一个英文句点。
要创建有序列表，在每个列表项的前面添加数字并紧跟一个英文句点，数字不需要按照数字顺序排序，但是列表应该从数字1开始。

创建一个普通的列表如下：
tips：在每个列表项的前面添加数字并紧跟一个英文句点，要注意句点后面要留出一个空格（这时候会发现序号字体变为蓝色，表明列表此时是创建成功的）。
创建一个序号不按数字顺序排序的列表（且某个列表项下再创建列表）如下：
HTML下创建列表：
tips：整个列表以< ol >开头，以< /ol >结束；每个列表项以< li >开头，以< /li >结束。若还要在某个列表项下再创建一个列表，则同样以< ol >开头，以< /ol >结束；其中的每个列表项依旧以< li >开头，以< /li >结束。
定义型列表
定义型列表由名词和解释组成。空一行，然后一行写上定义，紧跟着一行写上解释。解释的写法：紧跟一个缩进（Tab）
```
举两个例子：
Markdown
:  Text-to-HTML conversion tool

Authors
:  John
:  Luke
```
（很奇怪的是我的电脑上用普通的定义型列表的定义方式貌似没反应，只有用HTML的方式才可行。把官网这部分的教程链接放上：链接: Markdown定义列表）
在列表中嵌套其他元素
要在保留列表连续性的同时在列表中添加另外一种元素，则将该元素缩进四个空格或者一个制表符。

1、段落

*   This is the first list item.
*   Here is the second list item.

    I need to add another paragraph below the second list item.

*   And here is the third list item.

效果如下：
在这里插入图片描述
2、引用块

*   This is the first list item.
*   Here is the second list item.

    > A blockquote would look great below the second list item.

*   And here is the third list item.

效果如下：
在这里插入图片描述
3、代码块
代码块通常采用4个空格或者1个制表符缩进。当它们被放在列表中的时候，将它们缩进8个空格或者2个制表符。

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

效果如下：
在这里插入图片描述
4、图片
Markdown里面插入图片还是有一丢丢麻烦的，一开始跟着官网的教程操作结果一直提示打开图片失败，去查了一下才知道问题在哪出错了。我是参考以下这篇文章解决问题的，推荐给大家：
链接: 将图片内嵌入Markdown文档中

1.  Open the file containing the ×××（图片名）.
2.  Marvel at its beauty.  //”惊叹它的美丽“

    ![Your Picture' s name ][ tmp ]         //[ tmp ]是指base编码
    [ tmp ]:（base编码）
    
3.  Close the file.

tips：将图片嵌入文档中推荐使用base64编码的方法。
步骤：
①将图片或者截图保存在本地；
②使用在线网站将图片转码至base64编码；
③在文档中插入编码即可。
其中文章中提到的将图片转码至base64编码的两个网址是：
链接: 地址1
链接: 地址2
一波操作下来就成功啦~
在这里插入图片描述
中间是很长很长的base64编码，所以我们才要将base64编码定义在一个中间变量中。

显示效果如下：