博客列表 >markdown语法与emmet语法

markdown语法与emmet语法

Leo的博客
Leo的博客原创
2021年09月18日 01:56:27556浏览

一级标题

二级标题

-## 二级标题, ### 三级标题 #### 四级标题


-三个- 出分隔符


列表

无序列表

  • 小米手机
  • 华为手机
  • OPPO 手机

有序列表

1.litem1
2.litem2
3.litem3


链接


图片

  • 小狗

代码(反引号)

  • 单行代码:const obj={};
  • 多行代码:
  1. javascript(高亮)(简写js含有php可以写php
  1. const obj={a:1b:2};
  2. const add= obj=> obj.a+obj.b;
  3. console.log(add(obj));
  1. $email = 'helle.php';

表格

开学第一课 markdown 语法 emmet 语法

| 把字体抱起来 | 有多少列就加-号,如上面有三列就加三个—-
格式就是 | ————— | ——————- | ————— |

引用

大于号出引用

大于号越多引用越多

emmet 语法

  1. !+Tab 快速出文本
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. div+#+box快速形成文本
  11. </body>
  12. </html>
  1. div + #+ box (快速形成文本)
  2. <div id="box"></div>
  3. class是一个点.(如下)
  4. div +. + active
  5. <div class="at"></div>
  6. 还有快速形成的方法如下
  7. #+box
  8. <div id="box"></div>
  9. (和上面一样只是更简化)
  10. (省略标签就是默认div标签)
  11. (标签不写就是也是div标签)
  12. .+ active
  13. <div class="active"></div>
  14. (总结为 idclass语法)
  1. 语法写法
  2. (一次性全写/简写)
  3. p + {hello world}
  4. <p>hello world</p>
  5. 快速生成横级结构标签
  6. div>p>a(即可快速生成如下)(div大于p大于a大于号就是代表横级,div下面有p标签p标签下面有a标签就会生成。)(上下级)
  7. <div>
  8. <p>
  9. <a href=""></a>
  10. </p>
  11. </div>
  12. (有些元素是平级)
  13. (现在三个标签就属于平级)
  14. <div></div>
  15. <p></p>
  16. <a href=""></a>
  17. (如何快速生成)
  18. div+p+a(兄弟平级)
  19. <div></div>
  20. <p></p>
  21. <a href=""></a>
  22. (特殊情况:负级生成)
  23. div>p^a(现在生成的adiv的兄弟元素而且是p的负级元素)(此时的a标签是p标签的平级的负极元素)
  24. <div>
  25. <p></p>
  26. </div>
  27. <a href=""></a>
  28. (重复操作)
  29. a*5(重复*n)
  30. <a href=""></a>
  31. <a href=""></a>
  32. <a href=""></a>
  33. <a href=""></a>
  34. <a href=""></a>
  35. <a href=""></a>
  36. a{link}*5(如上同理)
  37. <a href="">link</a>
  38. <a href="">link</a>
  39. <a href="">link</a>
  40. <a href="">link</a>
  41. <a href="">link</a>
  42. (重复操作此重复功能大多用来写链接)
  43. ul>li*5
  44. <ul>
  45. <li></li>
  46. <li></li>
  47. <li></li>
  48. <li></li>
  49. <li></li>
  50. </ul>
  51. (需要标签可自行添加)
  52. ul>li*5>a{link}
  53. <ul>
  54. <li><a href="">link</a></li>
  55. <li><a href="">link</a></li>
  56. <li><a href="">link</a></li>
  57. <li><a href="">link</a></li>
  58. <li><a href="">link</a></li>
  59. </ul>
  60. (属性操作)
  61. a标签没有自带属性初始标签如下
  62. <a href=""></a>
  63. 加入标签后如下
  64. <a href="http://baidu.com">baidu.com</a>
  65. 如何快速生成如下
  66. a{baidu.com}
  67. <a href="">baidu.com</a>
  68. 生成后没有属性
  69. 下面即可一键生成
  70. a[href="http://baidu.com"]{baidu.com}(即可生成)
  71. 序号$(需要序号的时候使用)
  72. (下面是有序号与无序号区别)
  73. ul>li{item}*5(这是无序号)
  74. <ul>
  75. <li>item</li>
  76. <li>item</li>
  77. <li>item</li>
  78. <li>item</li>
  79. <li>item</li>
  80. </ul>
  81. ul>li{item$}*5(这是有序号)
  82. <ul>
  83. <li>item1</li>
  84. <li>item2</li>
  85. <li>item3</li>
  86. <li>item4</li>
  87. <li>item5</li>
  88. </ul>
  89. ul>li*5>a{link$}(数字前面需要加多个0的话在符号前多加个$即可)
  90. <ul>
  91. <li><a href="">link1</a></li>
  92. <li><a href="">link2</a></li>
  93. <li><a href="">link3</a></li>
  94. <li><a href="">link4</a></li>
  95. <li><a href="">link5</a></li>
  96. </ul>
  97. (或从指定数字开始加入$@数字即可,也可以反过来$@-s数字即可。)
  98. ul>li*5>a{link$@5}
  99. ul>li*5>a{link$@-5}
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议