markdown常用语法与emmet常用语法

发布于：2022-07-04 13:18:26  栏目：技术文档

1.markdown常用语法

1.标题(标题建议最多用三级，不宜过深):

1.1 用法：

#  一级标题
##  二级标题
### 三级标题
#### 四级标题
........

1.2 效果：

一级标题

二级标题

三级标题

四级标题

2.列表

2.1 无序列表用法(父列表需要- 格式，子列表格式与父列表相同，只需要添加2个空格)：

- 无序列表
- 无序列表
- 无序列表
  - 无序列表的子列表
  - 无序列表的子列表

2.2 有序列表用法(父列表需要1. 格式，子列表格式与父列表相同，只需要添加2个空格)：

1. 有序列表
2. 有序列表
3. 有序列表
  3.1 有序列表的子列表
  3.2 有序列表的子列表

2.1.1:无序列表效果

• 无序列表
• 无序列表
• 无序列表
  • 无序列表的子列表
  • 无序列表的子列表

2.2.1:有序列表效果

1. 有序列表
2. 有序列表
3. 有序列表3.1 有序列表的子列表3.2 有序列表的子列表

3.代码

3.1 单行代码用法：

`单行代码`

3.2 多行代码用法：

、 ```多行代码```   、

3.1.1 单行代码效果：

单行代码

3.2.1 多行代码效果:

多行代码 <h2>Hello World</h2>

4.表格

4.1 表格用法：

|周一|周二|周三
|---|---|---
|摸鱼|摸鱼|摸鱼
|摸鱼|摸鱼|摸鱼

4.2 表格效果：

5.图片

5.1 图片用法：

![图片加载失败时显示的字](图片地址)

5.2图片效果：

2.emment常用语法：

html:5 或者 ! 效果：快速创建html文档结构" class="reference-link">1.html:5 或者 ! 效果：快速创建html文档结构

#box 或者div#box效果：创建一个div,id为box" class="reference-link">2. #box 或者div#box效果：创建一个div,id为box

" class="reference-link">实现： <div id="box"></div>

div#box{box} 效果：创建一个div,id为box，div里的内容为box" class="reference-link">2.1div#box{box} 效果：创建一个div,id为box，div里的内容为box

box

" class="reference-link">实现：<div id="box">box</div>

.box或者div.box 效果：创建一个div,class为box" class="reference-link">3..box或者div.box 效果：创建一个div,class为box

" class="reference-link">实现:<div class="box"></div>

ul>li>a{首页} 效果：创建一个ul列表,内容为a标签的首页" class="reference-link">4.快速生成父子层级 ul>li>a{首页} 效果：创建一个ul列表,内容为a标签的首页

实现:

<ul>
  <li><a href="">首页</a></li>
</ul>

.title{首页}+.head{主题} 效果:创建2个div，内容分别为首页和主题" class="reference-link">5.快速生成兄弟层级 .title{首页}+.head{主题} 效果:创建2个div，内容分别为首页和主题

实现：

<div class="title">首页</div>
<div class="head">主题</div>

ul>li*3>a{首页} 效果：生成三个li列表项" class="reference-link">6.快速生成重复内容 ul>li*3>a{首页} 效果：生成三个li列表项

实现：

<ul>
    <li><a href="">首页</a></li>
    <li><a href="">首页</a></li>
    <li><a href="">首页</a></li>
</ul>

ul>li*4>a{首页$} 效果：生成首页1-首页4" class="reference-link">7.快速生成升序列表 ul>li*4>a{首页$} 效果：生成首页1-首页4

实现：

<ul>
    <li><a href="">首页1</a></li>
    <li><a href="">首页2</a></li>
    <li><a href="">首页3</a></li>
    <li><a href="">首页4</a></li>
</ul>

ul>li*4>a{首页$@4} 效果：生成首页4-首页7" class="reference-link">8.从指定序号开始升序 ul>li*4>a{首页$@4} 效果：生成首页4-首页7

实现：

<ul>
    <li><a href="">首页4</a></li>
    <li><a href="">首页5</a></li>
    <li><a href="">首页6</a></li>
    <li><a href="">首页7</a></li>
</ul>

ul>li*4>a{首页$@-5} 效果：生成首页8-首页5" class="reference-link">9.指定降序的值进行降序 ul>li*4>a{首页$@-5} 效果：生成首页8-首页5

实现：

<ul>
    <li><a href="">首页8</a></li>
    <li><a href="">首页7</a></li>
    <li><a href="">首页6</a></li>
    <li><a href="">首页5</a></li>
</ul>

table>caption{文章标题}+(thead>tr>th{标题}*8)+(tbody>tr*4>td{内容}*8)" class="reference-link">10.五行八列的表格:table>caption{文章标题}+(thead>tr>th{标题}*8)+(tbody>tr*4>td{内容}*8)

实现：

相关推荐