Emmet快速编写代码

Emmet快速编写代码

★div → <div></div>, span → <span></span>

★CSS选择器

​ 给标签指定id选择器 div#header→<div id="header"></div>

​ 给标签指定class选择器 div.footer→<div class="footerr"></div>

★默认元素div,div可省略

1. 父子关系：>，使用>操作符在内部相互嵌套的标签

div>ul>li

将生成：

<span><div>  <br /><span>    <ul>  <br /><span>        <li></li>  <br /><span>    </ul>  <br /><span></div>  

2. 兄弟关系：+，使用+操作符将标签处于同一个层级

div+p+footer

将生成：

<br /><span><div></div>  <br /><span><p></p>  <br /><span><footer></footer>  

3. 上级关系：^，使用^操作符使标签与前一标签的父级处于相同的级别

div+div>p>span+em^bq

将生成：

<br /><span><div>      <br /><span>    <p><span><em></em></p>      <br /><span>    <blockquote></blockquote>      <br /><span></div>  

4. 乘法：使用*操作符可以输出多个标签

div>ul>li*5

将生成：

<br /><span><div>  <br /><span>    <ul>  <br /><span>        <li></li>  <br /><span>        <li></li>  <br /><span>        <li></li>  <br /><span>        <li></li>  <br /><span>        <li></li>  <br /><span>    </ul>  <br /><span></div>  

5. 分组：()，用()操作符进行分组，使编写的代码结构更加清晰、明了，一组标签就相当一个元素

div>(header>ul>li*2>a)+footer>p

将生成：

<br /><span><div>  <br /><span>    <header>  <br /><span>        <ul>  <br /><span>            <li><a href=""></a></li>  <br /><span>            <li><a href=""></a></li>  <br /><span>        </ul>  <br /><span>    </header>  <br /><span>    <footer>  <br /><span>        <p></p>  <br /><span>    </footer>  <br /><span></div>  

6.项目编号：当使用∗可以重复的标签，用$产生有序列表

ul>li.item$*5

将生成：

<br /><span><ul>  <br /><span>    <li class="item1"></li>  <br /><span>    <li class="item2"></li>  <br /><span>    <li class="item3"></li>  <br /><span>    <li class="item4"></li>  <br /><span>    <li class="item5"></li>  <br /><span></ul>  

也可以使用多个$操作符用0（零）来分填充数字：001 002 ...

ul>li.item$$$*5

倒序：在$后面加 @-

ul>li.item$@-*5

将生成：

<br /><span><ul>  <br /><span>    <li class="item5"></li>  <br /><span>    <li class="item4"></li>  <br /><span>    <li class="item3"></li>  <br /><span>    <li class="item2"></li>  <br /><span>    <li class="item1"></li>  <br /><span></ul>  

正序且规定起始数字：$@数字

ul>li.item$@3*5

将生成：

<br /><span><ul>  <br /><span>    <li class="item3"></li>  <br /><span>    <li class="item4"></li>  <br /><span>    <li class="item5"></li>  <br /><span>    <li class="item6"></li>  <br /><span>    <li class="item7"></li>  <br /><span></ul>  

7. 文本：{}，使用花括号来添加文本元素：

a{Click me}

将生成：

<a href="">Click me</a>