Blogger Information
Blog 12
fans 0
comment 2
visits 6325
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
emmet学习笔记
白鸽
Original
621 people have browsed it

emmet学习笔记


直接粘贴一段长代码吧

  1. <!-- 新建一个zuoye.html -->
  2. <!-- Ctrl+/ 可以注释本行 -->
  3. <!-- 这是一篇关于emmet语法的复习作业 -->
  4. <!-- 首先使用感叹号!+TAB键生成html5文档的模板 -->
  5. <!DOCTYPE html>
  6. <html lang="zh-CN">
  7. <head>
  8. <meta charset="UTF-8">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11. <title>Document</title>
  12. </head>
  13. <body>
  14. <!-- <h1>emmet学习笔记</h1> -->
  15. <h1>emmet学习笔记</h1>
  16. <p>输入html标签名字 如 h1,p + TAB 键就快捷生成了一组html标签。</p>
  17. <!-- p{内容} -->
  18. <p>加上大括号{}就成了内容</p>
  19. <hr>
  20. <!-- .abc{一个class名为abc的div} -->
  21. <div class="abc">一个class名为abc的div</div>
  22. <!-- #def{一个id为def的div} -->
  23. <div id="def">一个id为def的div</div>
  24. <!-- p.abc{一个class=abc的p标签} -->
  25. <p class="abc">一个class=abc的p标签</p>
  26. <!-- table#aaa{一个id=aaa的table标签} -->
  27. <table id="aaa">一个id=aaa的table标签</table>
  28. <hr>
  29. <!-- .aaa{5个class=aaa的div标签}*5 -->
  30. <div class="aaa">5个class=aaa的div标签</div>
  31. <div class="aaa">5个class=aaa的div标签</div>
  32. <div class="aaa">5个class=aaa的div标签</div>
  33. <div class="aaa">5个class=aaa的div标签</div>
  34. <div class="aaa">5个class=aaa的div标签</div>
  35. <!-- p#aaa{5个id=aaa的p标签}*5 -->
  36. <p id="aaa">5个id=aaa的p标签</p>
  37. <p id="aaa">5个id=aaa的p标签</p>
  38. <p id="aaa">5个id=aaa的p标签</p>
  39. <p id="aaa">5个id=aaa的p标签</p>
  40. <p id="aaa">5个id=aaa的p标签</p>
  41. <hr>
  42. <!-- ul>li{5个li父子标签}*5 -->
  43. <ul>
  44. <li>5个li父子标签</li>
  45. <li>5个li父子标签</li>
  46. <li>5个li父子标签</li>
  47. <li>5个li父子标签</li>
  48. <li>5个li父子标签</li>
  49. </ul>
  50. <!-- div>div{是不是也是五个div父子标签}*5 -->
  51. <div>
  52. <div>是不是也是五个div父子标签</div>
  53. <div>是不是也是五个div父子标签</div>
  54. <div>是不是也是五个div父子标签</div>
  55. <div>是不是也是五个div父子标签</div>
  56. <div>是不是也是五个div父子标签</div>
  57. </div>
  58. <hr>
  59. <!-- h3{平级兄弟标签}+p{这里一个是一个p标签}+div{这里一个是一个div标签,关键是“+”号} -->
  60. <h3>平级兄弟标签</h3>
  61. <p>这里一个是一个p标签</p>
  62. <div>这里一个是一个div标签,关键是“+”号</div>
  63. <hr>
  64. <h3>父级^</h3>
  65. <!-- h3{这里展示父级}>span{这里是span}^.abc{一个在h3外一个class=abc的div} -->
  66. <h3>这里展示父级<span>这里是span</span></h3>
  67. <div class="abc">一个在h3外一个class=abc的div</div>
  68. <!-- h3{分组}+(ul>li{五个分组的标签}*5)^(nav>div.abc{另外一个分组nav下五个div}*5) -->
  69. <h3>分组</h3>
  70. <ul>
  71. <li>五个分组的标签</li>
  72. <li>五个分组的标签</li>
  73. <li>五个分组的标签</li>
  74. <li>五个分组的标签</li>
  75. <li>五个分组的标签</li>
  76. </ul>
  77. <nav>
  78. <div class="abc">另外一个分组nav下五个div</div>
  79. <div class="abc">另外一个分组nav下五个div</div>
  80. <div class="abc">另外一个分组nav下五个div</div>
  81. <div class="abc">另外一个分组nav下五个div</div>
  82. <div class="abc">另外一个分组nav下五个div</div>
  83. </nav>
  84. <hr>
  85. <!-- ul>li{序号-$}*5 -->
  86. <ul>
  87. <li>序号-1</li>
  88. <li>序号-2</li>
  89. <li>序号-3</li>
  90. <li>序号-4</li>
  91. <li>序号-5</li>
  92. </ul>
  93. <!-- ul>li{序号-$@7}*5 -->
  94. <ul>
  95. <li>序号-7</li>
  96. <li>序号-8</li>
  97. <li>序号-9</li>
  98. <li>序号-10</li>
  99. <li>序号-11</li>
  100. </ul>
  101. <!-- ul>li{逆序-$@-10}*5 -->
  102. <ul>
  103. <li>逆序-14</li>
  104. <li>逆序-13</li>
  105. <li>逆序-12</li>
  106. <li>逆序-11</li>
  107. <li>逆序-10</li>
  108. </ul>
  109. </body>
  110. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
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
1 comments
白鸽 2022-10-17 06:38:35
修改作业内容 <html lang="zh-CN">
1 floor
Author's latest blog post