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可省略

★轻松添加文本 h1{foo} → <h1>foo<h1>

★轻松添加属性 a[href=#] → <a href="#"></a>

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

div>ul>li

将生成：

<div>      <ul>          <li></li>      </ul>  </div>  

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

div+p+footer

将生成：

<div></div>  <p></p>  <footer></footer>  

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

div+div>p>span+em^bq

将生成：

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

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

div>ul>li*5

将生成：

<div>      <ul>          <li></li>          <li></li>          <li></li>          <li></li>          <li></li>      </ul>  </div>  

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

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>  

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

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>  

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

ul>li.item$$$*5

倒序：在$后面加 @-

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>  

添加元素、id、属性、有序属性值、有序文本的例子：

select#month-select>option[value=$]{$}*5

将生成：

<select name="" id="month-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
</select>

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

a{Click me}

将生成：

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