简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Markdown 8种语法

Markdown 8种语法

          
          原创
2022年10月16日 16:25:00641浏览
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  12. <!--1. 标签与内容之间用{text}-->
  13. {text}
  14. <!-- 2. 属性和语法糖: `[attr]` -->
  15. [id=app]{app}
  16. <div id="app">app</div>
  17. <div id="app2">students</div>
  18. <div id="class">class</div>
  19. <div id="wonen">wonen</div>
  20. <div id="app3">app3</div>
  21. <div id="app4">app4</div>
  22. <div id="app5">app5</div>
  23. #app6{app6}  语法糖
  24. <div id="app7">app7</div>
  26. <!-- [class=title]{title} -->
  27. <div class="title">title</div>
  28. <div class="title1">title1</div>
  29. <div class="title2">title2</div>
  30. <div class="title3">title3</div>
  31. <div class="title4">title4</div>
  32. .title5{title5}语法糖
  33. <div class="title6">title6</div>
  34. <div class="title7">title</div>
  36. <!-- 3. 重复: `*` -->
  37. <!--.play{txt}*3 -->
  38. <div class="play">box</div>
  39. <div class="play">box</div>
  40. <div class="play">box</div>
  42. <!-- 4. 父子: `>` -->
  43. <!--ul>li{text}*3-->
  44. <ul>
  45.     <li>text</li>
  46.     <li>text</li>
  47.     <li>text</li>
  48. </ul>
  49. <!--5. 兄弟 `+`-->
  50. <!--.a{atext}+p{text}-->
  51. <div class="a">txt</div>
  52. <p>t</p>
  53. <!--错误示范：.a{atext} + p{text}    不要有空格-->
  54. <h3>鸟</h3>
  55. <p>t</p>
  57.  6. 父级: `^`
  58. .a{父级}^p{子级}
  59. <div class="a">父级</div>
  60. <p>子级</p>
  63. <!-- 7. 分组: `(...)` -->
  64. .nav{导航栏目}>ul>li*3>a{栏目}
  65. <div class="nav">导航栏目
  66.     <ul>
  67.         <li><a href="">栏目</a></li>
  68.         <li><a href="">栏目</a></li>
  69.         <li><a href="">栏目</a></li>
  70.     </ul>
  71. </div>
  74. <!-- 8. 序号: `$`,`$@` -->
  75. <!--ul>li*3>a{分组$}   默认从1 开始 $写完整就是$#  有序-->
  76. <ul>
  77.     <li><a href="">分组1</a></li>
  78.     <li><a href="">分组2</a></li>
  79.     <li><a href="">分组3</a></li>
  80. </ul>
  81. <!--自定义起始序号-->
  82. ul>li{级别-$@7}*3
  83. <ul>
  84.     <li>级别-7</li>
  85.     <li>级别-8</li>
  86.     <li>级别-9</li>
  87. </ul>
  89. <!--逆序: ul>li{item-$@-1}*3 -->
  90. ul>li{this-$@-1}*3
  91. <ul>
  92.     <li>this-3</li>
  93.     <li>this-2</li>
  94.     <li>this-1</li>
  95. </ul>
  97. </body>
  98. </html>
上一条：Emmet语法，8种常用语法下一条：前端开发20221014
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多