Emmet (Zen Coding) 官方文档中HTML语法的总结

时间:2023-03-09 04:30:57
Emmet (Zen Coding) 官方文档中HTML语法的总结
 1. 嵌套操作----------

 子操作: >

 div>ul>li

 <div>
<ul>
<li></li>
</ul>
</div> 并列:+ div+ul>li <div></div>
<ul>
<li></li>
</ul> 上级:^ ul>li^div <ul>
<li></li>
</ul>
<div></div> ul>li>a^^div 上级多层 <ul>
<li><a href=""></a></li>
</ul>
<div></div> 重复:* ul>li*3 <ul>
<li></li>
<li></li>
<li></li>
</ul> 分组:() div>(p>span)*2 <div>
<p><span></span></p>
<p><span></span></p>
</div> 2. 属性操作---------- id和类 div#header+div.main+div#footer <div id="header"></div>
<div class="main"></div>
<div id="footer"></div> 属性值 a[title=test target=_self] <a title="test" target="_self" href=""></a> 数列值:$ p.item$*3 <p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p> p.item$$*3 <p class="item01"></p>
<p class="item02"></p>
<p class="item03"></p> 数列操作符:@ p.item$@-*3 @- = -1 <p class="item3"></p>
<p class="item2"></p>
<p class="item1"></p> p.item$@3*3 @3 = 从3开始3次 <p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p> p.item$@-3*3 @-3 = 3次后到3结束 <p class="item5"></p>
<p class="item4"></p>
<p class="item3"></p> 3. 字符操作---------- 字符操作:{} a{click} <a href="">click</a> a>{click}+span{me} <a href="">click<span>me</span></a> 4. 缺省元素---------- .header+.footer --------------- div.header+div.footer ul>.item*3 -------------- ul>li.item*3 table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3 最后注意:如果搞不清楚顺序了,多用()。就像1+2×3,实际上是(1+2)×3

毋须多言,网上找的,提高编程效率的利器。