Emmet使用手册

语法:

 

1、后代：>

缩写：nav>ul>li

 

< nav>

    < ul>

        < li></ li >

    < /ul >

< /nav>

 

2、兄弟：+

缩写：div+p+bq

 

< div></ div >

< p></ p >

< blockquote>< /blockquote >

 

3、上级：^

缩写：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 >

 

4、分组：()

缩写：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 >

 

缩写：(div>dl>(dt+dd)*3)+footer>p

 

< div >

    < dl>

        < dt>< /dt >

        < dd>< /dd >

        < dt>< /dt >

        < dd>< /dd >

        < dt>< /dt >

        < dd>< /dd >

   

< /div>

< footer>

    < p>< /p >

< /footer >

 

5、乘法：*

缩写：ul>li*5

 

< ul>

    < li>< /li >

    < li>< /li >

    < li>< /li >

    < li>< /li >

    < li>< /li >

< /ul>

 

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 >

 

缩写：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$$$*5

 

< ul>

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

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

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

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

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

< /ul>

 

缩写：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 >

 

7、ID和类属性

 

缩写：#header

 

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

 

缩写：.title

 

< div class="title">< /div >

 

缩写：form#search.wide

 

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

 

缩写：p.class1.class2.class3

 

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

 

8、自定义属性

 

缩写：p[title=”Hello world”]

 

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

 

缩写：td[rowspan=2 colspan=3 title]

 

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

 

缩写：[a=’value1′ b=”value2″]

 

< div a="value1" b="value2">< /div >

 

9、文本：{}

 

缩写：a{Click me}

 

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

 

缩写：p>{Click }+a{here}+{ to continue}

 

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

 

10、隐式标签

 

缩写：.class

 

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

 

缩写：em>.class

 

< em>< span class="class">< /span >< /em >

 

缩写：ul>.class

 

< ul >

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

< /ul >

 

缩写：table>.row>.col

 

< table >

 < tr class="row">

 < td class="col">< /td >

 < /tr >

< /table >

 

11、HTML

 

缩写：!

 

< !doctype html >

< html lang="en">

< head >

 < meta charset="UTF-8" >

 < title>Document< /title>

< /head >

< body >

 

< /body >

< /html >

 

缩写：a

 

< a href="">< /a >

 

缩写：a:link

 

< a href="http://">< /a >

 

缩写：a:mail

 

< a href="mailto:">< /a >

 

缩写：abbr

 

 

缩写：link:css

 

< link rel="stylesheet" href="style.css" / >

 

缩写：link:favicon

 

< link rel="shortcut icon" type="image/x-icon" href="favicon.ico" / >

 

缩写：style

 

< style>< /style >

 

缩写：script

 

< script src="">< /script >

 

缩写：img

 

< img src="" alt="" / >

 

缩写：iframe

 

< iframe src="" frameborder="0">< /iframe >

 

缩写：form:get

 

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

 

缩写：label

 

< label for="">< /label >

 

缩写：input

 

< input type="text" / >

 

缩写：inp

 

< input type="text" name="" id="" / >

 

缩写：input:h

 

< input type="hidden" name="" / >

 

缩写：textarea

 

< textarea name="" id="" cols="30" rows="10">< /textarea >

 

缩写：menu:context

 

< menu type="context">< /menu >

 

缩写：video

 

< video src="">< /video >

 

缩写：html:xml

 

< html xmlns="http://www.w3.org/1999/xhtml" >< /html >

 

缩写：btn:s

 

< button type="submit">< /button >