学习Emmet

学习Emmet

在进行Web开发时，就免不了需要编写html文件，如何快速(偷懒^-^)的进行编写html,是个大问题，上网找了一下，发现了一个好东西 ，视频教程可以看下小马技术Emmet爆速开发， VSCode内置了Emmet,Visual Studio中是ZenCoding。这里记录一下知识要点。

1. • div
   • a
   • p
   • span
   后接Tab键

2. id,class和属性

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   输入	输出
   div#mainBody	<div id="mainBody"></div><br>
   div.container	<div class="container"></div>
   div#mainBody.container	<div id="mainBody" class="container"></div>
   a[title='测试']	<a href="" title="测试"></a>
   button[data-toggle="modal" type="buton"]	<button data-toggle="modal" type="button"></button>
   h1{这是内容}	<h1>这是内容</h1>

   
   


3. 
   

   批量生成

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   输入	输出
   p3	<p></p><p></p><p></p>
   div.cssSection3	<div class="cssSection"></div><br> <div class="cssSection"></div><br> <div class="cssSection"></div>
   div.cssSection$$11	<div class="cssSection01"></div><br> <div class="cssSection02"></div><br> <div class="cssSection03"></div><br> <div class="cssSection04"></div><br> <div class="cssSection05"></div><br> <div class="cssSection06"></div><br> <div class="cssSection07"></div><br> <div class="cssSection08"></div><br> <div class="cssSection09"></div><br> <div class="cssSection10"></div><br> <div class="cssSection11"></div>
   div.cssSection\(@3*5</td> <td><xmp><div class="cssSection3"></div> <div class="cssSection4"></div> <div class="cssSection5"></div> <div class="cssSection6"></div> <div class="cssSection7"></div></xmp></td> </tr> </tbody> </table> </li> <li> <p>嵌套生成</p> <table class="table table-striped"> <thead> <tr> <td>输入</td> <td>输出</td> </tr> </thead> <tbody> <tr> <td>main>section*3</td> <td><xmp><main> <section></section> <section></section> <section></section> </main></xmp></td> </tr> <tr> <td>main>section*3+button.btn.btn-primarty</td> <td><xmp><main> <section></section> <section></section> <section></section> <button class="btn btn-primary"></button> </main></xmp></td> </tr> <tr> <td>main>section*3^footer</td> <td><xmp><main> <section></section> <section></section> <section></section> </main> <footer></footer></xmp></td> </tr> <tr> <td>ul>li*3</td> <td><xmp><ul> <li></li> <li></li> <li></li> </ul></xmp></td> </tr> <tr> <td>ul*2>li*3</td> <td><xmp><ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul></xmp></td> </tr> </tbody> </table> </li> <li> <p>默认Tag生成</p> <table class="table table-striped"> <thead> <tr> <td>输入</td> <td>输出</td> </tr> </thead> <tbody> <tr> <td>div.container</td> <td><xmp><div class="container"></div></xmp></td> </tr> <tr> <td>.container</td> <td><div class="container"></div></td> </tr> <tr> <td>ul>.item*5</td> <td><xmp><ul> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul></xmp></td> </tr> <tr> <td>table>tr.row*2>td.col4*3</td> <td><xmp>< table> <tr class="row"> <td class="col4"></td> <td class="col4"></td> <td class="col4"></td> </tr> <tr class="row"> <td class="col4"></td> <td class="col4"></td> <td class="col4"></td> </tr> < /table></xmp></td> </tr> <tr> <td>table>.row*2>.col4*3</td> <td><xmp> < table> <tr class="row"> <td class="col4"></td> <td class="col4"></td> <td class="col4"></td> </tr> <tr class="row"> <td class="col4"></td> <td class="col4"></td> <td class="col4"></td> </tr> < /table> </xmp></td> </tr> </tbody> </table> </li> <li> <p>默认属性生成</p> <table class="table table-striped"> <thead> <tr> <td>输入</td> <td>输出</td> </tr> </thead> <tbody> <tr> <td>a</td> <td><xmp><a href=""></a></xmp></td> </tr> <tr> <td>a:mail</td> <td><xmp><a href="mailto:"></a></xmp></td> </tr> <tr> <td>a:link</td> <td><xmp><a href="http://"></a></xmp></td> </tr> <tr> <td>script:src</td> <td><xmp><script src=""></script></xmp></td> </tr> <tr> <td>meta</td> <td><xmp><meta http-equiv="refresh" content="0; url=http://example.com"></xmp></td> </tr> </tbody> </table> </li> <li> <p>表单生成</p> <table class="table table-striped"> <thead> <tr> <td>输入</td> <td>输出</td> </tr> </thead> <tbody> <tr> <td>form</td> <td><xmp><form action=""></form></xmp></td> </tr> <tr> <td>form:get</td> <td><xmp><form action="" method="get"></form></xmp></td> </tr> <tr> <td>form:post</td> <td><xmp><form action="" method="post"></form></xmp></td> </tr> <tr> <td>input</td> <td><xmp><input type="text"></xmp></td> </tr> <tr> <td>input:b</td> <td><xmp><input type="button" value=""></xmp></td> </tr> <tr> <td>select>option*3</td> <td><xmp><select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select></xmp></td> </tr> <tr> <td>select>[value="item\)"]3	&lt;select name="" id=""&gt;&lt;br&gt; &lt;option value="item1"&gt;&lt;/option&gt;&lt;br&gt; &lt;option value="item2"&gt;&lt;/option&gt;&lt;br&gt; &lt;option value="item3"&gt;&lt;/option&gt;&lt;br&gt; &lt;/select&gt;

   
   


4. 
   

   XML生成

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   输入	输出
   root>palyer*3	<root><br> <player></player><br> <player></player><br> <player></player><br> </root>