Emmet使用手冊

語法:

 

一、後代：>

縮寫：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*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 >

 

五、乘法：*

縮寫：ul>li*5

 

< ul>

    < li>< /li >

    < li>< /li >

    < li>< /li >

    < li>< /li >

    < li>< /li >

< /ul>

 

六、自增符號：$

縮寫：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 >

 

七、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 >

 

八、自定義屬性

 

縮寫：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 >

 

九、文本：{}

 

縮寫：a{Click me}

 

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

 

縮寫：p>{Click }+a{here}+{ to continue}

 

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

 

十、隱式標籤

 

縮寫：.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 >

 

十一、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 >