Emmet 语法规则

网站建设 · 2020-10-23
在前端开发的过程中,最费时间的工作就是编写 HTML 代码。EasIT米工网
这里推荐一个 Emmet 语法规则,让你写代码的时候爽到飞起!EasIT米工网
Emmet 语法规则能大大提高代码书写的效率,只需要敲一行代码就能生成你想要的完整 HTML 结构,下面给大家介绍如何使用。EasIT米工网
子代操作符(Child):>
<!-- 例子 -->
nav>ul>li
 
<!-- 效果 -->
<nav>
    <ul>
        <li></li>
    </ul>
</nav>
兄弟操作符(Sibling):+
<!-- 例子 -->
div+p+bq
 
<!-- 效果 -->
<div></div>
<p></p>
<blockquote></blockquote>
返回上级操作符(Climb-up):^
<!-- 例子 -->
div+div>p>span+em^bq
 
<!-- 效果 -->
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
 
<!-- 例子 -->
div+div>p>span+em^^bq
 
<!-- 效果 -->
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组操作符(Grouping):()
<!-- 例子 -->
div>(header>ul>li*2>a)+footer>p
 
<!-- 效果 -->
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
 
<!-- 例子 -->
(div>dl>(dt+dd)*3)+footer>p
 
<!-- 效果 -->
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>
乘法操作符(Multiplication):*
<!-- 例子 -->
ul>li*5
 
<!-- 效果 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
数值计算操作符(Item numbering):$
<!-- 例子 -->
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>
 
<!-- 例子 -->
h$[title=item$]{Header $}*3
 
<!-- 效果 -->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
 
<!-- 例子 -->
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$@3*5
 
<!-- 效果 -->
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>
文本操作符(Text):{}
<!-- 例子 -->
a{Click me}
 
<!-- 效果 -->
<a href="">Click me</a>
 
<!-- 例子 -->
p>{Click }+a{here}+{ to continue}
 
<!-- 效果 -->
<p>Click <a href="">here</a> to continue</p>
ID 和 Class 属性(ID and CLASS attributes)
<!-- 例子 -->
#header
 
<!-- 效果 -->
<div id="header"></div>
 
<!-- 例子 -->
.title
 
<!-- 效果 -->
<div class="title"></div>
 
<!-- 例子 -->
form#search.wide
 
<!-- 效果 -->
<form id="search" class="wide"></form>
 
<!-- 例子 -->
p.class1.class2.class3
 
<!-- 效果 -->
<p class="class1 class2 class3"></p>
定制属性(Custom attributes)
<!-- 例子 -->
p[title="Hello world"]
 
<!-- 效果 -->
<p title="Hello world"></p>
 
<!-- 例子 -->
td[rowspan=2 colspan=3 title]
 
<!-- 效果 -->
<td rowspan="2" colspan="3" title=""></td>
 
<!-- 例子 -->
[a='value1' b="value2"]
 
<!-- 效果 -->
<div a="value1" b="value2"></div>
隐去标签名(Implicit tag names)
<!-- 例子 -->
.class
 
<!-- 效果 -->
<div class="class"></div>
 
<!-- 例子 -->
em>.class
 
<!-- 效果 -->
<em><span class="class"></span></em>
 
<!-- 例子 -->
ul>.class
 
<!-- 效果 -->
<ul>
    <li class="class"></li>
</ul>
 
<!-- 例子 -->
table>.row>.col
 
<!-- 效果 -->
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>