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 >