.MD语法

article/2025/10/12 9:02:22

.md即markdown文件的基本常用编写语法,是一种快速标记、快速排版语言,现在很多前段项目中的说明文件readme等都是用.md文件编写的,而且很多企业也在在鼓励使用这种编辑方式,特别作为一个前端从业者更要学会使用这种语言。下面就简单和大家分享一些.md基本语法

一、基本符号:* - +. >

基本上所有的markdown标记都是基于这四个符号或组合,需要注意的是,如果以基本符号开头的标记,注意基本符号后有一个用于分割标记符和内容的空格。

二、标题

1.前面带#号,后面带文字,分别表示h1-h6,只到h6,而且h1下面会有一条横线

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

2.相当于标签闭合

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

效果如下:

 

标题.png

三、列表

  1. 无序列表
//形式一
+ a
+ b
+ c
//形式二
- d
- e
- f
//形式三
* g
* h
* i

 

 

以上三种形式,效果其实都是一样的:

无序列表.png

  1. 有序列表
//正常形式
1. abc
2. bcd
3. cde
//错序效果
2. fgh
3. ghi
5. hij

 

 

效果图:

有序列表及错序效果图.png

如图,注意,数字后面的点只能是英文的点,有序列表的序号是根据第一行列表的数字顺序来的,
错序列表的序号本来是序号是乱的, 但是还是显示 2 3 5

  1. 嵌套列表
//无序列表嵌套
+ 123+ abc+ bcd+ cde
+ 465
+ 789
//有序列表嵌套
1. abcd1. abcde2. abcde3. abcde
2. bcde
3. cdef

 

 

效果图:

嵌套列表.png

列表可以嵌套,使用时在嵌套列表前按 tab 或 空格 来缩进,去控制列表的层数

四、引用说明区块

对某个部分做的内容做一些说明或者引用某某的话等,可以用这个语法。

  1. 正常形式
> 引用内容、说明内容。在语句前面加一个 > ,注意是英文的那个右尖括号,注意空格,引用因为是一个区块,理论上是应该什么内容都可以放,比如说:标题,列表,引用等等。

 

 

效果图:

区块.png

  1. 嵌套区块
    这里我只介绍一下我常用的方法,也是个人认为比较规范的一种方法,就是给区块的下一级区块多加一个右尖括号
> 一级引用
>> 二级引用
>>> 三级引用
>>>> 四级引用
>>>>> 五级引用
>>>>>> 六级引用

 

 

效果图:

嵌套区块.png

五、代码块

在发布一些技术文章会涉及展示代码的问题,这时候代码块就显得尤为重要。

  1. 少量代码,单行使用,直接用`包裹起来就行了
` shaoliangdaima,danhangshiyong `

 

 

效果图:

单行代码块.png

  1. 大量代码,需要多行使用,用```包裹起来
    ```daliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyong```

 

 

效果图:

多行代码.png

六、链接

  1. 行内式
    链接的文字放在[]中,链接地址放在随后的()中,链接也可以带title属性,链接地址后面空一格,然后用引号引起来
[简书](https://www.jianshu.com "创作你的创作"),
是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。 
  1. 参数式
    链接的文字放在[]中,链接地址放在随后的:后,链接地址后面空一格,然后用引号引起来
[简书]: https://www.jianshu.com "创作你的创作"
[简书]是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。
//参数定义的其他写法
[简书]: https://www.jianshu.com '创作你的创作'
[简书]: https://www.jianshu.com (创作你的创作)
[简书]: <https://www.jianshu.com> "创作你的创作"

 

 

以上两种方式其效果图都是一样的,如下:

链接.png

七、图片

  1. 行内式
    和链接的形式差不多,图片的名字放在[]中,图片地址放在随后的()中,title属性(图片地址后面空一格,然后用引号引起来),注意的是[]前要加上!
![my-logo.png](https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo")
  1. 参数式
    图片的文字放在[]中,图片地址放在随后的:后,title属性(图片地址后面空一格,然后用引号引起来),注意引用图片的时候在[]前要加上!
[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo"
![my-logo.png]
//参数定义的其他写法
[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 'my-logo'
[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 (my-logo)
[my-logo.png]: <https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240> "my-logo"

 

 

以上两种方式其效果图都是一样的,如下:

my-logo.png

八、分割线

分割线可以由* - _(星号,减号,底线)这3个符号的至少3个符号表示,注意至少要3个,且不需要连续,有空格也可以

---
- - -
------
***
* * *
******
___
_ _ _
______

 

 

以上代码的效果图均为:

分割线.png

九、其他

  1. 强调字体
    一个星号或者是一个下划线包起来,会转换为<em>倾斜,如果是2个,会转换为<strong>加粗
*md*    
**md**
_md_   __md__

 

 

效果图:

强调字体.png

  1. 转义
    基本上和js转义一样,\加需要转义的字符
\\
\*
\+
\-
\`
\_
  1. 删除线
    用~~把需要显示删除线的字符包裹起来
~~删除~~

 

效果图:

删除线.png

十、表格

//例子一
|123|234|345|
|:-|:-:|-:|
|abc|bcd|cde|
|abc|bcd|cde|
|abc|bcd|cde|
//例子二
|123|234|345|
|:---|:---:|---:|
|abc|bcd|cde|
|abc|bcd|cde|
|abc|bcd|cde|
//例子三
123|234|345
:-|:-:|-:
abc|bcd|cde
abc|bcd|cde
abc|bcd|cde

上面三个例子的效果一样,由此可得:
1. 表格的格式不一定要对的非常起,但是为了良好的变成风格,尽量对齐是最好的
2. 分割线后面的冒号表示对齐方式,写在左边表示左对齐,右边为右对齐,两边都写表示居中

效果图如下:

表格.png

 


http://chatgpt.dhexx.cn/article/WODc0kTA.shtml

相关文章

md文档语法大全

目录 基本符号 标题 # 文字 # 文字 # 列表 无序列表 有序列表 嵌套列表 引用块 行引用 嵌套引用 代码块 链接 图片 分割线 表格 复选框 换行 其他 基础不牢&#xff0c;地动山摇&#xff0c;好的文档是项目质量及后续可维护的一个重要因素&#xff0c;每次…

PHPRunner 10.7.0 PHP代码生成器

PHPRunner 10.7.0 PHP代码生成器。 使用 PHPRunner 构建现代、功能丰富、响应迅速、数据驱动的 Web 应用程序。连接到 MySQL、SQL Server、MS Access 和 Oracle。这种快速的应用程序开发/低代码软件将使您的交付速度提高多达 90% - 它对于初学者来说很容易使用&#xff0c;但对…

generate-code开源的代码生成器(FlierTeam)

generate-code开源的代码生成器 一、背景二、项目链接三、功能介绍&#xff08;一&#xff09;通用代码生成器代码生成切换数据源下载 &#xff08;二&#xff09;可修改模板的生成器模板管理 四、总结 一、背景 从开源项目&#xff1a;https://gitee.com/QinHaiSenLin/Jfinal…

5.6 Mybatis代码生成器Mybatis Generator (MBG)实战详解

文章目录 前言一、Mybatis Generator简介二、Maven插件运行方式三、生成配置 generatorConfig.xmlMyBatis3Simple风格MyBatis3风格MyBatis3DynamicSql风格 四、Java代码运行方式五、MGB生成全部表六、增加Ext包七、Git提交总结 前言 本文我们主要实战Mybatis官方的代码生成器&…

软著代码生成器

软著代码生成器 介绍使用说明 使用下载 介绍 软著代码生成器 自动生成word 自动删除注释单行注释(python c# 等)每页50行代码自动删除空行 使用说明 下载解压即可使用 使用 下载 gitee下载地址 觉得好用的客官, 欢迎star

mybatis代码生成器

mybatis代码生成器 步骤一&#xff1a;在pom中安装mybatis generator 自动生成代码插件 步骤二&#xff1a;复制代码生成器代码&#xff0c;修改数据库配置&#xff0c;及实体类生成的位置即可 步骤三&#xff1a;增加配置启动命令 步骤一&#xff1a;在pom中安装mybatis gener…

C# 源代码生成器

C# 源代码生成器 什么是源生成器源生成器允许执行两个主要操作Microsoft 文档模型图示常见方案源生成器的使用1、创建 .NET控制台应用程序2、创建源生成器项目3、在控制台程序中使用生成器项目 结语 什么是源生成器 源生成器是由.NET Compiler Platform&#xff08;“Roslyn”&…

vue代码生成器

直接根据swagger api生成vue代码 前要 目前的代码生成器基本上是基于数据库表格来生成对应的前后台代码&#xff0c;好处是前后台一次性搞定&#xff0e;但实际开发中&#xff0c;很多的业务是需要连表的&#xff0c;所以这种情况来说&#xff0c;根据接口直接生成前代码&#…

C#代码生成器

引言 引言&#xff1a;随着.net Core 的不断发展&#xff0c;它也是一个成熟的平台了&#xff0c;鲁迅说过&#xff1a;成熟的平台就要学会自己写代码&#xff0c;那么今天我就在这里教大家如何让.net Core学会自己写代码。 提示&#xff1a;如果只是向往&#xff0c;远方依旧…

MybatisPlus代码生成器

代码生成器 问题导入 如果只给一张表的字段信息&#xff0c;能够推演出Domain、Dao层的代码&#xff1f; 1. MyBatisPlus提供模板 Mapper接口模板 实体对象类模板 2. 工程搭建和基本代码编写 第一步&#xff1a;创建SpringBoot工程&#xff0c;添加代码生成器相关依赖&…

python 代码生成器_Python代码生成器(代码生成工具)V1.1 正式版

Python代码生成器(代码生成工具)是一款很优秀好用的为新手制作的代码生成助手。小编带来的这款Python代码生成器功能强大&#xff0c;操作简单&#xff0c;使用后可以帮助用户更轻松便捷的生成Python代码&#xff0c;非常方便实用。其内置了大量的示例代码&#xff0c;可以帮助…

12款AI代码生成工具,都很能打

1.Anania Anania 是一个机器人数据分析师&#xff0c;可以通过简单、自然的英语对话来分析您的数据。连接数据源并以简单的英语提问&#xff0c;无需任何设置或配置。在幕后&#xff0c;Anania 正在使用一个 AI 系统&#xff0c;该系统将文本转换为 SQL 和 Python 代码并执行您…

3D相册动态桌面制作

3D相册动态桌面制作 1.下载3D相册代码链接&#xff1a;https://pan.baidu.com/s/1Z_br3XKGsW3vsISvSCteJA&#xff0c;提取码&#xff1a;8888 更换自己喜欢的图片 注意第三张和第四章相册右键旋转照片 直接双击运行index.html可以在浏览器中看到效果。 如果不是很喜欢 可以自行…

HTML+CSS+JavaScript七夕情人节表白网页【樱花雨3D相册】超好看

这是程序员表白系列中的100款网站表白之一&#xff0c;旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站&#xff0c;可以任意修改和使用&#xff0c;很多人会希望向心爱的男孩女孩告白&#xff0c;生性腼腆的人即使那个TA站在眼前都不敢向前表白…

制作简易的3D相册

今天介绍一下3D相册&#xff0c;用到了开源的FeatureCoverFlow控件&#xff0c;之前的几个作品用的也全都是开源的控件&#xff0c;为什么要用开源的控件呢&#xff0c;因为...他稳定啊&#xff01; 1.准备 仍然是&#xff0c;去掉标题栏&#xff0c;然后导库&#xff1a; impl…

HTML5、css3、js实现3D相册

目录 想法 实现 一、基础知识 1.3D转换 transform-style: preserve-3d; ①简述 ②使用 ③3D转换方法 2.onmouseover 事件 ①解释 ②具体语法 3.onmouseout事件 ①解释 ②具体语法 **本例通过在div的class中设置相同的类名&#xff0c;然后在js方法中通过document…

前端CSS3实现3D相册小案例

前端CSS3实现3D相册小案例 HTML代码部分&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>3D相册</title> <link type"text/css" href"css/style.css&qu…

制作一个简单3D相册

- 用到的点&#xff1a; 旋转 2D 旋转 transform: rotate(值deg) deg 角度的单位 3D 旋转 transform:rotateX rotateY roteteZ 如果让一个块实现3D效果&#xff0c;必须做两件事&#xff1a; 1、在要实现3D效果的块上 加transform-style:preserve-3D (声明) 2、在要实现3D效…

html结合css实现浏览器展示3D相册

最近写了一个在浏览器展示3D相册效果&#xff0c;通过html文件结合css实现。 1.html详细代码如下&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>3D相册</title> <script src"../js/jquer…

python3d相册源代码_js和CSS3炫酷3D相册展示

js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;height:76px;margin:30px auto 0;} .xc-3D{width:100%;height:300px;background:#fff;margin-top:100px;position:relative;transfor…