emmet详解html
emmet详解...
一、概念
emmet是一种介于标记性语言（如html、xml）和规范之外的逻辑输入方法，是一种能大幅提高前端开发效率的工具。
二、隐式符号
html:5
html:5和叹号，二者作用相同。
html:5
!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
点号
表示class属性。
div.jpf
<div class="jpf"></div>
井号
表示id属性。
div#jpf
<div id="jpf"></div>
方括号
表示标签的内部属性。
a[href="123" class="a"]
<a href="123" class="a"></a>
花括号
表示标签的内容。
div{hi}<div>hi</div>
小括号
表示分组标签。
(a>h1)+(b>h2)
<a href=""> <h1></h1> </a> <b> <h2></h2> </b>
特殊实例
ul>.jpf
<ul> <li class="jpf"></li> </ul> label[for='content']>#content <label for="content"> <span id="content"></span> </label>
三、关系符号
关系符号共有五个，分别是大于号、加号、角号、星号和美元符。
大于号
表示嵌套元素。
ul>li
<ul> <li></li> </ul>
加号
表示同级元素。
div+div
<div></div> <div></div> ul>li+a <ul> <li></li> <a href=""></a> </ul>
角号
表示上级元素。
div>ul>li^p
<div> <ul> <li></li> </ul> <p></p> </div>
div>ul>li^^p
<div> <ul> <li></li> </ul> </div> <p></p>
ul>li^ul>li
<ul> <li></li> </ul> <ul> <li></li> </ul>
div>(p>ul>li*2>a)+div>p
<div> <p> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </p> <div> <p></p> </div> </div>
div>(tr>td*5)*2+div>p
<div> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <div> <p></p> </div> </div>
星号
表示批量复制。
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
div*5
<div></div> <div></div> <div></div> <div></div> <div></div>
美元符
表示数字通配符。
div.jpf$*5
<div class="jpf1"></div> <div class="jpf2"></div> <div class="jpf3"></div> <div class="jpf4"></div> <div class="jpf5"></div>
div.jpf$$$*5
<div class="jpf001"></div> <div class="jpf002"></div> <div class="jpf003"></div> <div class="jpf004"></div> <div class="jpf005"></div>
div>ul>li.item-$*3
<div> <ul> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> </ul> </div>
ul>li.$*3
<ul> <li class="1"></li> <li class="2"></li> <li class="3"></li> </ul>
ul>li[id='item$']{第$$$条数据}*3<ul> <li id="item1">第001条数据</li> <li id="item2">第002条数据</li> <li id="item3">第003条数据</li> </ul>
美元符配合@可以实现从指定数字开始向后数指定位数。
div.jpf$@3*5
<div class="jpf3"></div> <div class="jpf4"></div> <div class="jpf5"></div> <div class="jpf6"></div> <div class="jpf7"></div>
四、占位标记
lorem表示占位标记，作用是随机生成一个文本。lorem1表示生成的文本包含一个单词，lorem2表示生成的文本包含两个单词，以此类推，loremN表示生成的文本包含N个单词。
p*4>lorem2
<p>Lorem, ipsum.</p> <p>Blanditiis, consequatur.</p> <p>Ullam, id?</p> <p>Corrupti, ratione.</p>
div>lorem2
<div>Lorem, ipsum.</div>
下一篇：没有了
我要评论