Blogger Information
Blog 16
fans 0
comment 0
visits 16191
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
markdown语法与emmet语法
Leo的博客
Original
558 people have browsed it

一级标题

二级标题

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


-三个- 出分隔符


列表

无序列表

  • 小米手机
  • 华为手机
  • 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}
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:写的不错,emmet语法写的时候最好分段,不要放入一个代码块中,显得比较臃肿
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post