HTML/CSS-emmet语法使用

1. 快速生成语句，使用div*3即可生成3个div标签。

    <!-- div*3 可以快速生成3个div -->
    <div></div>
    <div></div>
    <div></div>

2. 如果有父子级关系的标签，可以使用  >   比如 ul>li 就可以生成包含小li的ul标签。

<!-- ul>li 与 div>span -->
<ul>
    <li></li>
</ul>
<div><span></span><//div>

3. 如果有兄弟级关系，可以使用  + ，比如 div+p 。 

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

4. 如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab键就可以了 ，

.nav 可以快速生成在div标签中含有nav类。

<div class="nav"></div>
<div class="demo"></div>

#banner 生成id
<div id="banner"></div>

5.  快速生成某一个标签中带有某类的语句，例如: 生成 p 标签中带有 one 类的内容。

<p class="one"></p>
<span class="gray"></span>

6. 复合使用方法： ul>li#two

    <ul>
        <li id="two"></li>
    </ul>

7. 将生成的5个demo类名进行排序。 使用 $ ，例如： .demo$*5

    <div class="demo"></div>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

8. 生成的标签里面默认显示几个文字. 例如: div{输入文字内容}

<!-- 生成的标签里面默认显示几个文字 div{输入文字} -->
    <div>你好啊你好啊</div>

    <!-- div{你好啊你好啊}*5  -->
    <div>你好啊你好啊</div>
    <div>你好啊你好啊</div>
    <div>你好啊你好啊</div>
    <div>你好啊你好啊</div>
    <div>你好啊你好啊</div>

9. 自增序列+自带内容。 

    <!-- div{$}*5 自增序列 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

10. CSS快速生成语句.

    <style>
        div {
            /* w200 按tab 可以快速生成 width:200px; */
            width: 200px;
            /* lh26 按tab 可以生成 line-height:26px; */
            line-height: 26;
            text-decoration: none;
        }
    </style>