emmet学习笔记
直接粘贴一段长代码吧
<!-- 新建一个zuoye.html --><!-- Ctrl+/ 可以注释本行 --><!-- 这是一篇关于emmet语法的复习作业 --><!-- 首先使用感叹号!+TAB键生成html5文档的模板 --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- <h1>emmet学习笔记</h1> --><h1>emmet学习笔记</h1><p>输入html标签名字 如 h1,p + TAB 键就快捷生成了一组html标签。</p><!-- p{内容} --><p>加上大括号{}就成了内容</p><hr><!-- .abc{一个class名为abc的div} --><div class="abc">一个class名为abc的div</div><!-- #def{一个id为def的div} --><div id="def">一个id为def的div</div><!-- p.abc{一个class=abc的p标签} --><p class="abc">一个class=abc的p标签</p><!-- table#aaa{一个id=aaa的table标签} --><table id="aaa">一个id=aaa的table标签</table><hr><!-- .aaa{5个class=aaa的div标签}*5 --><div class="aaa">5个class=aaa的div标签</div><div class="aaa">5个class=aaa的div标签</div><div class="aaa">5个class=aaa的div标签</div><div class="aaa">5个class=aaa的div标签</div><div class="aaa">5个class=aaa的div标签</div><!-- p#aaa{5个id=aaa的p标签}*5 --><p id="aaa">5个id=aaa的p标签</p><p id="aaa">5个id=aaa的p标签</p><p id="aaa">5个id=aaa的p标签</p><p id="aaa">5个id=aaa的p标签</p><p id="aaa">5个id=aaa的p标签</p><hr><!-- ul>li{5个li父子标签}*5 --><ul><li>5个li父子标签</li><li>5个li父子标签</li><li>5个li父子标签</li><li>5个li父子标签</li><li>5个li父子标签</li></ul><!-- div>div{是不是也是五个div父子标签}*5 --><div><div>是不是也是五个div父子标签</div><div>是不是也是五个div父子标签</div><div>是不是也是五个div父子标签</div><div>是不是也是五个div父子标签</div><div>是不是也是五个div父子标签</div></div><hr><!-- h3{平级兄弟标签}+p{这里一个是一个p标签}+div{这里一个是一个div标签，关键是“+”号} --><h3>平级兄弟标签</h3><p>这里一个是一个p标签</p><div>这里一个是一个div标签，关键是“+”号</div><hr><h3>父级^</h3><!-- h3{这里展示父级}>span{这里是span}^.abc{一个在h3外一个class=abc的div} --><h3>这里展示父级<span>这里是span</span></h3><div class="abc">一个在h3外一个class=abc的div</div><!-- h3{分组}+(ul>li{五个分组的标签}*5)^(nav>div.abc{另外一个分组nav下五个div}*5) --><h3>分组</h3><ul><li>五个分组的标签</li><li>五个分组的标签</li><li>五个分组的标签</li><li>五个分组的标签</li><li>五个分组的标签</li></ul><nav><div class="abc">另外一个分组nav下五个div</div><div class="abc">另外一个分组nav下五个div</div><div class="abc">另外一个分组nav下五个div</div><div class="abc">另外一个分组nav下五个div</div><div class="abc">另外一个分组nav下五个div</div></nav><hr><!-- ul>li{序号-$}*5 --><ul><li>序号-1</li><li>序号-2</li><li>序号-3</li><li>序号-4</li><li>序号-5</li></ul><!-- ul>li{序号-$@7}*5 --><ul><li>序号-7</li><li>序号-8</li><li>序号-9</li><li>序号-10</li><li>序号-11</li></ul><!-- ul>li{逆序-$@-10}*5 --><ul><li>逆序-14</li><li>逆序-13</li><li>逆序-12</li><li>逆序-11</li><li>逆序-10</li></ul></body></html>