学习Emmet
在进行Web开发时，就免不了需要编写html文件，如何快速(偷懒^-^)的进行编写html,是个大问题，上网找了一下，发现了一个好东西 ，视频教程可以看下小马技术Emmet爆速开发， VSCode内置了Emmet,Visual Studio中是ZenCoding。这里记录一下知识要点。
-
- div
- a
- p
- span
-
id,class和属性
<tr> <td>div#mainBody</td> <td><xmp><div id="mainBody"></div> </xmp> </td> </tr> <tr> <td>div.container</td> <td><xmp><div class="container"></div></xmp></td> </tr> <tr> <td>div#mainBody.container</td> <td><xmp><div id="mainBody" class="container"></div></xmp></td> </tr> <tr> <td>a[title='测试']</td> <td><xmp><a href="" title="测试"></a></xmp></td> </tr> <tr> <td>button[data-toggle="modal" type="buton"]</td> <td><xmp><button data-toggle="modal" type="button"></button></xmp></td> </tr> <tr> <td>h1{这是内容}</td> <td><xmp><h1>这是内容</h1></xmp></td> </tr> </table> </li> <li> <p>批量生成</p> <table class="table table-striped"> <thead> <tr style="color:blue;font-size: 32px;" > <td>输入</td> <td>输出</td> </tr> </thead> <tbody> <tr> <td>p*3</td> <td><xmp><p></p><p></p><p></p></xmp></td> </tr> <tr> <td>div.cssSection*3</td> <td><xmp><div class="cssSection"></div> <div class="cssSection"></div> <div class="cssSection"></div></xmp></td> </tr> <tr> <td>div.cssSection$$*11</td> <td><xmp><div class="cssSection01"></div> <div class="cssSection02"></div> <div class="cssSection03"></div> <div class="cssSection04"></div> <div class="cssSection05"></div> <div class="cssSection06"></div> <div class="cssSection07"></div> <div class="cssSection08"></div> <div class="cssSection09"></div> <div class="cssSection10"></div> <div class="cssSection11"></div></xmp></td> </tr> <tr> <td>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</td> <td><xmp><select name="" id=""> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select></xmp></td> </tr> </tbody> </table> </li> <li> <p>XML生成</p> <table class="table table-striped"> <thead> <tr> <td>输入</td> <td>输出</td> </tr> </thead> <tbody> <tr> <td>root>palyer*3</td> <td><xmp><root> <player></player> <player></player> <player></player> </root></xmp></td> </tr> </tbody> </table> </li>输入 输出