Emmet (Zen Coding) HTML基本语法

大佬教程收集整理的这篇文章主要介绍了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>

数列操作符：@

[email protected]*3   @- = -1

<p class="item3"></p>
<p class="item2"></p>
<p class="item1"></p>

[email protected]*3  @3 = 从3开始3次

<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>

[email protected]*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

大佬总结

以上是大佬教程为你收集整理的Emmet (Zen Coding) HTML基本语法全部内容，希望文章能够帮你解决Emmet (Zen Coding) HTML基本语法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。