Emmet使用
emmet官方文档
【翻译】Emmet (ZenCoding) 缩写语法
<!-- ul>li.item$*5 --> <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> <!-- ul>li.item$$$*5 --> <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> <!-- ul>li.item$@-*5 --> <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> <!-- ul>li.item$@-*5 --> <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul> <!-- ul>li.item$@3-*5 --> <ul> <li class="item3-"></li> <li class="item4-"></li> <li class="item5-"></li> <li class="item6-"></li> <li class="item7-"></li> </ul> <!-- ul>li.item$@3-s*5 --> <ul> <li class="item3-s"></li> <li class="item4-s"></li> <li class="item5-s"></li> <li class="item6-s"></li> <li class="item7-s"></li> </ul> <!-- ul>li.item$@-3*5 --> <ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul> <!-- a[href]{click} --> <!-- a{click} --> <!-- a>{click} --> <a href="">click</a> <!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a> <!-- p>{click}+a{here}+{to continue} --> <p>click<a href="">here</a>to continue</p> <!-- p{Click }+a{here}+{ to continue} --> <p>Click </p> <a href="">here</a> to continue <!-- (header > ul.nav > li*5) + footer 有空格:停止缩写解析 --> (header > ul.nav > li*5) + <footer></footer> <!-- (header>ul.nav>li*5)+footer --> <header> <ul class="nav"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </header> <footer></footer>
Emmet：HTML/CSS代码快速编写神器
<!-- 用于HTML5文档类型 --> <!-- ! --> <!-- html:5 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> <!-- html:xt：用于XHTML过渡文档类型 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> <!-- html:5s不存在 --> <!-- html:4s：用于HTML4严格文档类型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> <!-- 隐式标签 : 在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>, 现在如果只输入.item，则Emmet会根据父标签进行判定。 比如在<ul>中输入.item，就会生成<li class="item"></li>。 --> <!-- 下面是所有的隐式标签名称： li：用于ul和ol中 tr：用于table、tbody、thead和tfoot中 td：用于tr中 option：用于select和optgroup中 --> <!-- .item --> <div class="item"></div> <ul> <!-- .item --> <li class="item"></li> <!-- .item*5 --> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <!-- #item$@2*5 --> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> <li id="item6"></li> </ul> <tr> <!-- .item --> <td class="item"></td> </tr> <select name="" id=""> <!-- .item --> <option class="item"></option> </select> </body> </html>
<style> body{ /*二、CSS缩写 */ /*p 表示% e 表示 em x 表示 ex*/ /*m5e*/ margin: 5em; /*w100*/ width: 100px; /*h10p+m5e*/ height: 10%; margin: 5em; /*p10x*/ padding: 10ex; /*模糊匹配 */ /*如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法， 比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的： */ /*ov-h*/ overflow: hidden; } /*@f*/ @font-face { font-family:; src:url(); } /*一些其他的属性， 比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成： */ @font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; } /*如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：*/ /*trs*/ -webkit-transition: prop time; -o-transition: prop time; transition: prop time; /*你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo*/ /*-super-foo*/ -webkit-super-foo: ; -moz-super-foo: ; -ms-super-foo: ; -o-super-foo: ; super-foo: ; /*如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀： */ /*-wm-trf*/ -webkit-transform: ; -moz-transform: ; transform: ; /* 前缀缩写如下： w 表示 -webkit- m 表示 -moz- s 表示 -ms- o 表示 -o-*/ /*w-trs*/ -webkit-transition: prop time; transition: prop time; /*lg(left, #fff 50%, #000)*/ background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(to right, #fff 50%, #000); </style>
Emmet插件使用方法小结
<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> body{ /*c#3*/ color: #333; /*c#e0*/ color: #e0e0e0; /*c#fc0 */ color: #fc0; } /* CSS3前缀： w 表示 -webkit- m 表示 -moz- s 表示 -ms- o 表示 -o-*/ /*-wmso-transform */ -webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ; /*-o-transform*/ -o-transform: ; transform: ; </style> <!-- link --> <link rel="stylesheet" href=""> <!-- script:src --> <script src=""></script> </head> <body> <!-- img --> <img src="" alt=""> <!-- inp --> <input type="text" name="" id=""> <!-- input:p --> <input type="password" name="" id=""> <!-- btn --> <button></button> <!-- btn:s --> <button type="submit"></button> <!-- btn:r --> <button type="reset"></button> </body> </html>
