常用的Emmet语法

Emmet语法

Emmet：对简化css支持

.title{
    /*w100*/
    width= 100px;
   /*bgc*/
    background-color= #fff;
}

---

Emmet快速写Html

<!-- h3.name{许向荣} -->
<h3 class="name">许向荣</h3>
//h3#name{许向荣}
<h3 id="name">许向荣</h3>

---

2.重复

<!-- p#user{用户}*3 -->
<p id="user">用户</p>
<p id="user">用户</p>
<p id="user">用户</p>

---

3.父子

<!-- ul>li{许向荣}*3 -->
<ul>
      <li>许向荣</li>
      <li>许向荣</li>
      <li>许向荣</li>
    </ul>

---

4.兄弟，同级

<!-- p{php中文网}+div{php中文网真棒} -->
<p>php中文网</p>
<p>php中文网真棒</p>

---

5.分组

<!-- nav>h3{导航}+ul>li*3>a{link} -->
<nav>
      <h3>导航</h3>
      <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
      </ul>
    </nav>

---

6.序号

<!-- 正序 -->
<!-- ul>li*3>a{$} -->
<ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
    </ul>

<!-- 自定义起始序号 -->
<!-- ul>li*3>a{$@2}-->
<ul>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
    </ul>

---

7.父级

<!-- .box>span{text}^h3{小标题} -->
<div class="box"><span>text</span></div>
    <h3>小标题</h3>

---

8.属性

<!-- p[while][height] -->
<p while="" height=""></p>