Emmet插件：可以用 emmet代码+Tap 写出更多并快捷的html代码，主流编辑器均可安装，安装方法也均不相同！
<!-- html:5或者!可以生成html5文档 --> <!DOCTYPE html> <html lang="en"> <head> <!-- meta:utf --> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- meta:vp --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- meta:compat --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- link --> <link rel="stylesheet" href=""> <!-- link:css --> <link rel="stylesheet" href="style.css"> <!-- script --> <script></script> <!-- script:src --> <script src=""></script> <title>Document</title> </head> <body> 1,生成带类样式的标签 <!-- P.info --> <P class="info"></P> <!-- div.red --> <div class="red"></div> <!-- .red --> <div class="red"></div> 2,生成带id的标签 <!-- h2#header --> <h2 id="header"></h2> <!-- #header --> <div id="header"></div> 3,a标签 <!-- a --> <a href=""></a> <!-- a:link --> <a href="http://"></a> <!-- a:mail --> <a href="mailto:"></a> 4,根据标签之间的位置来生成标签 生成同级,兄弟标签 <!-- h2.header+p#info{信息} --> <h2 class="header"></h2> <p id="info">信息</p> 后代标签 <!-- ul>li --> <ul> <li></li> </ul> <!-- ul>li+li+li --> <ul> <li></li> <li></li> <li></li> </ul> <!-- ul>li*3 --> <ul> <li></li> <li></li> <li></li> </ul> 生成当前标签的父级,也叫上级标签 <!-- h2>span^p --> <h2><span></span></h2> <p></p> 5,你也可以在生成标签的时候,同时创建内部的文本 <!-- ul>li.info{demo}*4+li.info{index} --> <ul> <li class="info">demo</li> <li class="info">demo</li> <li class="info">demo</li> <li class="info">demo</li> <li class="info">index</li> </ul> <!-- p[title="这是一段说明文字"] --> <p title="这是一段说明文字"></p> <!-- form[action="{:url('index/demo')}" method="post"]>input[type="text" name="info"]{内容} --> <form action="{:url('index/demo')}" method="post"><input type="text" name="info">内容</input></form> 6,快速生成一个有8个列表项的导航 <!-- ul.list>li.item*8>a{导航} --> <ul class="list"> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> <li class="item"><a href="">导航</a></li> </ul> 7,给标签自动添加编号和排序:$.@ <!-- ul.list>li.item*4>a{导航$} --> <ul class="list"> <li class="item"><a href="">导航1</a></li> <li class="item"><a href="">导航2</a></li> <li class="item"><a href="">导航3</a></li> <li class="item"><a href="">导航4</a></li> </ul> <!-- ul.list>li.item*4>a{导航$$} --> <ul class="list"> <li class="item"><a href="">导航01</a></li> <li class="item"><a href="">导航02</a></li> <li class="item"><a href="">导航03</a></li> <li class="item"><a href="">导航04</a></li> </ul> ul.list>li.item*4>a{导航$$@-} <ul class="list"> <li class="item"><a href="">导航04</a></li> <li class="item"><a href="">导航03</a></li> <li class="item"><a href="">导航02</a></li> <li class="item"><a href="">导航01</a></li> </ul> ul.list>li.item*4>a{导航$$$$@100} <ul class="list"> <li class="item"><a href="">导航0100</a></li> <li class="item"><a href="">导航0101</a></li> <li class="item"><a href="">导航0102</a></li> <li class="item"><a href="">导航0103</a></li> </ul> ul.list>li.item*4>a{导航$$@-100} <ul class="list"> <li class="item"><a href="">导航103</a></li> <li class="item"><a href="">导航102</a></li> <li class="item"><a href="">导航101</a></li> <li class="item"><a href="">导航100</a></li> </ul> </body> </html>