Markdown、Emmet 语法

 

Markdown

markdown是一种纯文本、轻量级的标记语言，通过简单的标记，就可以使文本具有一定的格式，容易转化为html、pdf。
 

文本

#几个#就是几级标题，一级最大，六级最小。#后面有一个空格
# 标题    


**加粗**   #加粗


# ~~ 或html的u标签表示删除线
~~xxx已过时~~
<u>xxx已过时</u>


#分割线，3个及以上的-或者*
---
***


&nbsp;  #空行、换行
&emsp;  #空格


> 内容   #引用


#超链接，[ ]中写要显示的文字，()中写链接地址
[百度](http://baidu.com)  


#utf-8 emoji characters
:cry:
:smile:

特殊字符需要用 \ 转义，\ 转义不了的可以用 转义字符，比如 < 可以用 &lt;

 

列表

# 无序列表，+  -  *均可，符号后面有一个空格
+ 狮子
- 老虎 
* 大象

# 有序列表，点后面有一个空格
1. 狮子
2. 老虎
3. 大象


# 待办列表。- [ ]之间有一个空格，[ ]中未选中为空串，选中为x，]后面有一个空格
#类似vue的双向绑定，视图上的勾选|取消勾选 <=> []中的空格|x 会自动同步
- [x] 跑步10km
- [ ] 俯卧撑50
- [ ] 深蹲50

 

表格

以下2种写法均可。说明

• 可以用冒号指定对齐方式，冒号在左侧即左对齐，在右侧即右对齐，在两端则居中对齐，缺省时默认居中对齐。
• 单元格内可用 <br />换行
• 如果要在表格内容中使用 |，需要转义写成 \|

学号|姓名|成绩
--|--|--
1|张三|100
2|李四|90
3|王五|95


| Left-aligned | Center-aligned | Right-aligned |
| :----------- | :------------: | ------------: |
| git status   |   git status   |    git status |
| git diff     |    git diff    |      git diff |

 

媒体

#图片
![alt文本](http://xxx/xxx.jpg)

 

代码
行内代码放在 ` 之间，代码块放在 ```，代码块可指定编程语言，以高亮显示。

 

数学公式
数学公式放在 $ 之间，单独成块的放在 $$ 之间

$a^2$

$$
a^2 + b^2 = c^2
$$

数学公式的符号语法参考：https://blog.csdn.net/m0_46190471/article/details/126130602

 

Emmet

Emmet是一个快捷编写html元素、css样式的插件，很多主流IDE都自带得有。输入命令后，按Tab执行。

html

!  #生成html文档基本骨架

link:css   #生成引入css的<link />
link:favicon   #生成设置网页图标的<link />，设置的是当前页面在浏览器标签页显示的图标

script:src   #生成<script>


#生成标签直接输入标签名即可
p
div


# > 嵌套子元素
ul>li
ul>li>a  

# + 生成兄弟元素
h3+p
h3+p+div 

# 嵌套使用，不确定关系时可以加()
div>h3+p 
 

# * 指定数量
ul>li*5
table>tr*3>td*5  #每个<tr>中都有5个<td>


# # 设置id属性
div#app

# . 设置class属性
p.red
p.red.show   #class属性可设置多个值，class="red show"

#搭配使用
div#app.red.show


# [] 设置普通属性
input[name placeholder]   
input[name=username placeholder=请输入用户名]    #指定属性值，值引不引都行


# { } 设置标签体内容
p{ok}
ul>li{hello}*5

 

css

# margin
m30  #margin:30px，单位默认px
m20%
m20-30-20-15  #margin:20px 30px 20px 15px，设置多个值时短横分隔
mt20  #margin-top:20px

# padding用法类似


# 属性名都可简写
bg  #backgroud
bgc  #backgroud-color
posi  #position