博客列表 >一些markdown和emmet最常用的用法

一些markdown和emmet最常用的用法

三九三伏
三九三伏原创
2022年07月07日 16:46:39363浏览

markdown常用语法

1. “>”可用于引用

这是一段引用

 

2. “- - -“用于分割线

↓↓↓下面这个是分割线

 

3. 标题效果,最多支持6级

“#这是一级标题markdown写法”

这是一级标题效果

“##这是二级标题markdown写法”

这是二级标题效果

“###这是三级标题markdown写法”

这是三级标题效果

“####这是四级标题markdown写法”

这是四级标题效果

“#####这是五级标题markdown写法”

这是五级标题效果

“######这是六级标题markdown写法”

这是六级标题效果

“#######这是七级标题markdown写法”

这是七级标题效果,开玩笑的 :D,没有七级效果。

 

4. 引用代码段

4.1 这是引用代码段的写法:

  1. ```
  2. void func(void){
  3. int i;
  4. i++;
  5. }
  6. ```

4.2 这是引用代码段的效果:

  1. void func(void){
  2. int i;
  3. i++;
  4. }

4.3 这是有高亮的写法:

  1. ```c
  2. void func(void){
  3. int i;
  4. i++;
  5. }
  6. ```

4.4 这是有高亮的效果:

  1. void func(void){
  2. int i;
  3. i++;
  4. }

- - -备注,下面这种效果

  1. ```c
  2. void func(void){
  3. int i;
  4. i++;
  5. }
  6. ```

是自己测出来的,不知道合不合规,记录下写法,备忘。

>```
>```c
>void func(void){
> int i;
> i++;
>}
>```
>``` ```
 

5. 引用图片

5.1 这是引用图片的写法:

![图片描述](https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png “图片标题”)

5.2 这是引用图片的效果

图片描述

 

6. 有序列表与无序列表

6.1 “数字+‘.’+空格+内容”,用于有序列表

  1. 有序列表1
  2. 有序列表2
    2.1有序列表2.1

 

6.2 无序列表使用“‘-/+/*’+空格+内容”

  • 无序列表1
  • 无序列表2
    • 无序列表2.1
       

7. 表格

7.1 书写格式

  1. 姓名| 性别| 身高| 体重
  2. ---|---|---|---
  3. 小明| 男| 179| 150
  4. 小兰| 女| 160| 75

7.2 效果

姓名 性别 身高 体重
小明 179 150
小兰 160 75

emmet使用

1. 快速生成html5代码

输入 ‘!’或‘html:5’ 按tab键即可,注意要英文输入。

2. div快速补全

‘.’+‘class名’+tab键,快速补全含该class名的div。
例:.class1+tab键,效果如下:

  1. <div class="class1"></div>

‘#’+‘id名’+tab键,快速补全含该id名的div。
例:.id1+tab键,效果如下:

  1. <div id="id1"></div>

添加div内容,使用{}
.class1#id1{添加的内容}+tab键,效果如下:

  1. <div class="class1" id="id1">添加内容</div>
  1. 快速添加多级元素,父级>子级

    使用ul>ui+tab键,效果如下:

    1. <ul>
    2. <ui></ui>
    3. </ul>

    在父级ul下添加多个ui
    使用ul+uim(m为数字),例如一次添加三个ui写法为ul+ui3+tab键,效果如下:

    1. <ul>
    2. <ui></ui>
    3. <ui></ui>
    4. <ui></ui>
    5. </ul>

    添加内容和递增序号
    ul2>ui3{内容序号$}+tab键,效果如下:

    1. <ul>
    2. <ul>内容序号1</ul>
    3. <ul>内容序号2</ul>
    4. <ul>内容序号3</ul>
    5. </ul>
    6. <ul>
    7. <ul>内容序号1</ul>
    8. <ul>内容序号2</ul>
    9. <ul>内容序号3</ul>
    10. </ul>

    添加内容和递增序号(从5开始)
    ul2>ui3{内容序号$@5}+tab键,效果如下:

    1. <ul>
    2. <ui>内容序号5</ui>
    3. <ui>内容序号6</ui>
    4. <ui>内容序号7</ui>
    5. </ul>
    6. <ul>
    7. <ui>内容序号5</ui>
    8. <ui>内容序号6</ui>
    9. <ui>内容序号7</ui>
    10. </ul>

    添加内容和递增序号(从3开始倒)
    ul2>ui3{内容序号$@-3}+tab键,效果如下:

    1. <ul>
    2. <ui>内容序列5</ui>
    3. <ui>内容序列4</ui>
    4. <ui>内容序列3</ui>
    5. </ul>
    6. <ul>
    7. <ui>内容序列5</ui>
    8. <ui>内容序列4</ui>
    9. <ui>内容序列3</ui>
    10. </ul>

    最后玩把大的
    table>caption{学生信息表}+(thead>tr>th{title}8)+(tbody>tr5>td{item}*8),效果如下:

    1. <table>
    2. <caption>学生信息表</caption>
    3. <thead>
    4. <tr>
    5. <th>title</th>
    6. <th>title</th>
    7. <th>title</th>
    8. <th>title</th>
    9. <th>title</th>
    10. <th>title</th>
    11. <th>title</th>
    12. <th>title</th>
    13. </tr>
    14. </thead>
    15. <tbody>
    16. <tr>
    17. <td>item</td>
    18. <td>item</td>
    19. <td>item</td>
    20. <td>item</td>
    21. <td>item</td>
    22. <td>item</td>
    23. <td>item</td>
    24. <td>item</td>
    25. </tr>
    26. <tr>
    27. <td>item</td>
    28. <td>item</td>
    29. <td>item</td>
    30. <td>item</td>
    31. <td>item</td>
    32. <td>item</td>
    33. <td>item</td>
    34. <td>item</td>
    35. </tr>
    36. <tr>
    37. <td>item</td>
    38. <td>item</td>
    39. <td>item</td>
    40. <td>item</td>
    41. <td>item</td>
    42. <td>item</td>
    43. <td>item</td>
    44. <td>item</td>
    45. </tr>
    46. <tr>
    47. <td>item</td>
    48. <td>item</td>
    49. <td>item</td>
    50. <td>item</td>
    51. <td>item</td>
    52. <td>item</td>
    53. <td>item</td>
    54. <td>item</td>
    55. </tr>
    56. <tr>
    57. <td>item</td>
    58. <td>item</td>
    59. <td>item</td>
    60. <td>item</td>
    61. <td>item</td>
    62. <td>item</td>
    63. <td>item</td>
    64. <td>item</td>
    65. </tr>
    66. </tbody>
    67. </table>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议