Emmet使用手册

Emmet的使用，快速敲出html结构

后代：> 如输入：nav>ul>li  则输出：

                <nav>

                    <ul>

                        <li></li>

                    </ul>

                </nav>

                

兄弟：+ 如输入：div+p+bq  则输出：

                <div></div>

                <p></p>

                <blockquote></blockquote>

                

上级：^ 如输入：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>

        

分组：()，输入：div>(header>ul>li*1>a[href="#"])+footer>p

        <div>

            <header>

                <ul>

                    <li><a href="#"></a></li>

                </ul>

            </header>

            <footer>

                <p></p>

            </footer>

        </div>

    注：上面footer>p加上 () 效果一样

    .content>(h3{h3h3}+p{pppp})*2  则输出：

        <div class="content">

            <h3>h3h3</h3>

            <p>pppp</p>

            <h3>h3h3</h3>

            <p>pppp</p>

        </div>

        

自增符号：$  缩写：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$$$*2 则输出：

            <ul>

                <li class="item001"></li>

                <li class="item002"></li>

            </ul>            

            

        ul>li.item$@-*2 则输出： (@逆序)

            <ul>

                <li class="item2"></li>

                <li class="item1"></li>

            </ul>

        ul>li.item$@2*2 则输出  (指定起点)：

        <ul>

            <li class="item2"></li>

            <li class="item3"></li>

        </ul>

ID和类属性 ( )

    #header 则输出：

        <div id="header"></div>

    .header 则输出：

        <div class="header"></div>

        

    from#search.wide 则输出：

        <from id="search" class="wide"></from>

        

    p.class1.class2.class3 则输出：

        <p class="class1 class2 class3"></p>

自定义属性        

    p[title="hello world"] 则输出：

        <p title="hello world"></p>

    td[rowspan=2 colspan=3 title] 则输出：

        <td rowspan="2" colspan="3" title=""></td>

文本：{}

    p>{Click }+a{here}+{ to continue} 则输出：

        <p>click<a href="">here</a>to continue</p>

        

隐式标签(例如下面的ul的子类默认的就是 li)

        ul>.class 则输出：

            <ul>

                <li class="class"></li>

            </ul>

        form:post

            <form action="" method="post"></form>

        input:c

            <input type="checkbox" name="" id="">

        

div.a>ul.list>li*3----------Tab则输出下面的( div.a 改为 .a 效果一样的)

<div class="a">

    <ul class="list">

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

在CSS中输入: m10  ==  margin:10px