emmet语法

emmet
crtl+alt+c 格式化css

 

#page>div.logo+ul#navigation>li*5>a{Item$}
<divid="page"><divclass="logo"></div><ulid="navigation"><li><ahref="">Item 1</a></li><li><ahref="">Item 2</a></li><li><ahref="">Item 3</a></li><li><ahref="">Item 4</a></li><li><ahref="">Item 5</a></li></ul></div>

div>ul>li
<div><ul><li></li></ul></div>
div+p+bq
<div></div><p></p><blockquote></blockquote>
div+div>p>span+em
<div></div><div><p><span></span><em></em></p></div>
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>

ul>li*5
<ul><li></li><li></li><li></li><li></li><li></li></ul>
div>(header>ul>li*2>a)+footer>p
<div><header><ul><li><ahref=""></a></li><li><ahref=""></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></dl></div><footer><p></p></footer>
div#header+div.page+div#footer.class1.class2.class3
<divid="header"></div><divclass="page"></div><divid="footer"class="class1 class2 class3"></div>
td[title="Hello world!" colspan=3]
<tdtitle="Hello world!"colspan="3"></td>

ul>li.item$*5
<ul><liclass="item1"></li><liclass="item2"></li><liclass="item3"></li><liclass="item4"></li><liclass="item5"></li></ul>

ul>li.item$$$*5
<ul><liclass="item001"></li><liclass="item002"></li><liclass="item003"></li><liclass="item004"></li><liclass="item005"></li></ul>

ul>li.item$@-*5
<ul><liclass="item5"></li><liclass="item4"></li><liclass="item3"></li><liclass="item2"></li><liclass="item1"></li></ul>

ul>li.item$@3*5
<ul><liclass="item3"></li><liclass="item4"></li><liclass="item5"></li><liclass="item6"></li><liclass="item7"></li></ul>

ul>li.item$@-3*5
<ul><liclass="item7"></li><liclass="item6"></li><liclass="item5"></li><liclass="item4"></li><liclass="item3"></li></ul>

a{Click me}
<ahref="">Click me</a>

p>{Click }+a{here}+{ to continue}
<p>Click <ahref="">here</a> to continue</p>

p{Click }+a{here}+{ to continue}
<p>Click </p><ahref="">here</a> to continue

(header > ul.nav > li*5) + footer

语法:
后代：>
缩写：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><ahref=""></a></li> <li><ahref=""></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> </dl> </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> <liclass="item1"></li> <liclass="item2"></li> <liclass="item3"></li> <liclass="item4"></li> <liclass="item5"></li> </ul>
缩写：h$[title=item$]{Header $}*3
<h1title="item1">Header 1</h1> <h2title="item2">Header 2</h2> <h3title="item3">Header 3</h3>
缩写：ul>li.item$$$*5
<ul> <liclass="item001"></li> <liclass="item002"></li> <liclass="item003"></li> <liclass="item004"></li> <liclass="item005"></li> </ul>
缩写：ul>li.item$@-*5
<ul> <liclass="item5"></li> <liclass="item4"></li> <liclass="item3"></li> <liclass="item2"></li> <liclass="item1"></li> </ul>
缩写：ul>li.item$@3*5
<ul> <liclass="item3"></li> <liclass="item4"></li> <liclass="item5"></li> <liclass="item6"></li> <liclass="item7"></li> </ul>
ID和类属性
缩写：#header
<divid="header"></div>
缩写：.title
<divclass="title"></div>
缩写：form#search.wide
<formid="search"class="wide"></form>
缩写：p.class1.class2.class3
<pclass="class1 class2 class3"></p>
自定义属性
缩写：p[title="Hello world"]
<ptitle="Hello world"></p>
缩写：td[rowspan=2 colspan=3 title]
<tdrowspan="2"colspan="3"title=""></td>
缩写：[a='value1' b="value2"]
<diva="value1"b="value2"></div>
文本：{}
缩写：a{Click me}
<ahref="">Click me</a>
缩写：p>{Click }+a{here}+{ to continue}
<p>Click <ahref="">here</a> to continue</p>
隐式标签
缩写：.class
<divclass="class"></div>
缩写：em>.class
<em><spanclass="class"></span></em>
缩写：ul>.class
<ul> <liclass="class"></li> </ul>
缩写：table>.row>.col
<table> <trclass="row"> <tdclass="col"></td> </tr> </table>
HTML
所有未知的缩写都会转换成标签，例如，foo → <foo></foo>
缩写：!
<!doctype html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
缩写：a
<ahref=""></a>
缩写：a:link
<ahref="http://"></a>
缩写：a:mail
<ahref="mailto:"></a>
缩写：abbr
<abbrtitle=""></abbr>
缩写：acronym
<acronymtitle=""></acronym>
缩写：base
<basehref="" />
缩写：basefont
<basefont />
缩写：br
<br />
缩写：frame
<frame />
缩写：hr
<hr />
缩写：bdo
<bdodir=""></bdo>
缩写：bdo:r
<bdodir="rtl"></bdo>
缩写：bdo:l
<bdodir="ltr"></bdo>
缩写：col
<col />
缩写：link
<linkrel="stylesheet"href="" />
缩写：link:css
<linkrel="stylesheet"href="style.css" />
缩写：link:print
<linkrel="stylesheet"href="print.css"media="print" />
缩写：link:favicon
<linkrel="shortcut icon"type="image/x-icon"href="favicon.ico" />
缩写：link:touch
<linkrel="apple-touch-icon"href="favicon.png" />
缩写：link:rss
<linkrel="alternate"type="application/rss+xml"title="RSS"href="rss.xml" />
缩写：link:atom
<linkrel="alternate"type="application/atom+xml"title="Atom"href="atom.xml" />
缩写：meta
<meta />
缩写：meta:utf
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8" />
缩写：meta:win
<metahttp-equiv="Content-Type"content="text/html;charset=windows-1251" />
缩写：meta:vp
<metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
缩写：meta:compat
<metahttp-equiv="X-UA-Compatible"content="IE=7" />
缩写：style
<style></style>
缩写：script
<script></script>
缩写：script:src
<scriptsrc=""></script>
缩写：img
<imgsrc=""alt="" />
缩写：iframe
<iframesrc=""frameborder="0"></iframe>
缩写：embed
<embedsrc=""type="" />
缩写：object
<objectdata=""type=""></object>
缩写：param
<paramname=""value="" />
缩写：map
<mapname=""></map>
缩写：area
<areashape=""coords=""href=""alt="" />
缩写：area:d
<areashape="default"href=""alt="" />
缩写：area:c
<areashape="circle"coords=""href=""alt="" />
缩写：area:r
<areashape="rect"coords=""href=""alt="" />
缩写：area:p
<areashape="poly"coords=""href=""alt="" />
缩写：form
<formaction=""></form>
缩写：form:get
<formaction=""method="get"></form>
缩写：form:post
<formaction=""method="post"></form>
缩写：label
<labelfor=""></label>
缩写：input
<inputtype="text" />
缩写：inp
<inputtype="text"name=""id="" />
缩写：input:hidden
别名：input[type=hidden name]
<inputtype="hidden"name="" />
缩写：input:h
别名：input:hidden
<inputtype="hidden"name="" />
缩写：input:text, input:t
别名：inp
<inputtype="text"name=""id="" />
缩写：input:search
别名：inp[type=search]
<inputtype="search"name=""id="" />
缩写：input:email
别名：inp[type=email]
<inputtype="email"name=""id="" />
缩写：input:url
别名：inp[type=url]
<inputtype="url"name=""id="" />
缩写：input:password
别名：inp[type=password]
<inputtype="password"name=""id="" />
缩写：input:p
别名：input:password
<inputtype="password"name=""id="" />
缩写：input:datetime
别名：inp[type=datetime]
<inputtype="datetime"name=""id="" />
缩写：input:date
别名：inp[type=date]
<inputtype="date"name=""id="" />
缩写：input:datetime-local
别名：inp[type=datetime-local]
<inputtype="datetime-local"name=""id="" />
缩写：input:month
别名：inp[type=month]
<inputtype="month"name=""id="" />
缩写：input:week
别名：inp[type=week]
<inputtype="week"name=""id="" />
缩写：input:time
别名：inp[type=time]
<inputtype="time"name=""id="" />
缩写：input:number
别名：inp[type=number]
<inputtype="number"name=""id="" />
缩写：input:color
别名：inp[type=color]
<inputtype="color"name=""id="" />
缩写：input:checkbox
别名：inp[type=checkbox]
<inputtype="checkbox"name=""id="" />
缩写：input:c
别名：input:checkbox
<inputtype="checkbox"name=""id="" />
缩写：input:radio
别名：inp[type=radio]
<inputtype="radio"name=""id="" />
缩写：input:r
别名：input:radio
<inputtype="radio"name=""id="" />
缩写：input:range
别名：inp[type=range]
<inputtype="range"name=""id="" />
缩写：input:file
别名：inp[type=file]
<inputtype="file"name=""id="" />
缩写：input:f
别名：input:file
<inputtype="file"name=""id="" />
缩写：input:submit
<inputtype="submit"value="" />
缩写：input:s
别名：input:submit
<inputtype="submit"value="" />
缩写：input:image
<inputtype="image"src=""alt="" />
缩写：input:i
别名：input:image
<inputtype="image"src=""alt="" />
缩写：input:button
<inputtype="button"value="" />
缩写：input:b
别名：input:button
<inputtype="button"value="" />
缩写：isindex
<isindex />
缩写：input:reset
别名：input:button[type=reset]
<inputtype="reset"value="" />
缩写：select
<selectname=""id=""></select>
缩写：option
<optionvalue=""></option>
缩写：textarea
<textareaname=""id=""cols="30"rows="10"></textarea>
缩写：menu:context
别名：menu[type=context]>
<menutype="context"></menu>
缩写：menu:c
别名：menu:context
<menutype="context"></menu>
缩写：menu:toolbar
别名：menu[type=toolbar]>
<menutype="toolbar"></menu>
缩写：menu:t
别名：menu:toolbar
<menutype="toolbar"></menu>
缩写：video
<videosrc=""></video>
缩写：audio
<audiosrc=""></audio>
缩写：html:xml
<htmlxmlns="http://www.w3.org/1999/xhtml"></html>
缩写：keygen
<keygen />
缩写：command
<command />
缩写：bq
别名：blockquote
<blockquote></blockquote>
缩写：acr
别名：acronym
<acronymtitle=""></acronym>
缩写：fig
别名：figure
<figure></figure>
缩写：figc
别名：figcaption
<figcaption></figcaption>
缩写：ifr
别名：iframe
<iframesrc=""frameborder="0"></iframe>
缩写：emb
别名：embed
<embedsrc=""type="" />
缩写：obj
别名：object
<objectdata=""type=""></object>
缩写：src
别名：source
<source></source>
缩写：cap
别名：caption
<caption></caption>
缩写：colg
别名：colgroup
<colgroup></colgroup>
缩写：fst, fset
别名：fieldset
<fieldset></fieldset>
缩写：btn
别名：button
<button></button>
缩写：btn:b
别名：button[type=button]
<buttontype="button"></button>
缩写：btn:r
别名：button[type=reset]
<buttontype="reset"></button>
缩写：btn:s
别名：button[type=submit]
<buttontype="submit"></button>

后代：>
缩写：nav>ul>li

1. <nav>
2. <ul>
3. <li></li>
4. </ul>
5. </nav>
兄弟：+
缩写：div+p+bq

1. <div></div>
2. <p></p>
3. <blockquote></blockquote>
上级：^
缩写：div+div>p>span+em^bq

1. <div></div>
2. <div>
3. <p><span></span><em></em></p>
4. <blockquote></blockquote>
5. </div>
 缩写：div+div>p>span+em^^bq

1. <div></div>
2. <div>
3. <p><span></span><em></em></p>
4. </div>
5. <blockquote></blockquote>
分组：()
缩写：div>(header>ul>li*2>a)+footer>p

1. <div>
2. <header>
3. <ul>
4. <li><a href=""></a></li>
5. <li><a href=""></a></li>
6. </ul>
7. </header>
8. <footer>
9. <p></p>
10. </footer>
11. </div>
 缩写：(div>dl>(dt+dd)*3)+footer>p

1. <div>
2. <dl>
3. <dt></dt>
4. <dd></dd>
5. <dt></dt>
6. <dd></dd>
7. <dt></dt>
8. <dd></dd>
9. </dl>
10. </div>
11. <footer>
12. <p></p>
13. </footer>
乘法：*
缩写：ul>li*5

1. <ul>
2. <li></li>
3. <li></li>
4. <li></li>
5. <li></li>
6. <li></li>
7. </ul>
自增符号：$
缩写：ul>li.item$*5

1. <ul>
2. <li class="item1"></li>
3. <li class="item2"></li>
4. <li class="item3"></li>
5. <li class="item4"></li>
6. <li class="item5"></li>
7. </ul>
 缩写：h$[title=item$]{Header $}*3

1. <h1 title="item1">Header 1</h1>
2. <h2 title="item2">Header 2</h2>
3. <h3 title="item3">Header 3</h3>
缩写：ul>li.item$$$*5

1. <ul>
2. <li class="item001"></li>
3. <li class="item002"></li>
4. <li class="item003"></li>
5. <li class="item004"></li>
6. <li class="item005"></li>
7. </ul>
缩写：ul>li.item$@-*5

1. <ul>
2. <li class="item5"></li>
3. <li class="item4"></li>
4. <li class="item3"></li>
5. <li class="item2"></li>
6. <li class="item1"></li>
7. </ul>
 缩写：ul>li.item$@3*5

1. <ul>
2. <li class="item3"></li>
3. <li class="item4"></li>
4. <li class="item5"></li>
5. <li class="item6"></li>
6. <li class="item7"></li>
7. </ul>
ID和类属性
缩写：#header

1. <div id="header"></div>
缩写：.title

1. <div class="title"></div>
 缩写：form#search.wide

1. <form id="search" class="wide"></form>
缩写：p.class1.class2.class3

1. <p class="class1 class2 class3"></p>
自定义属性
缩写：p[title="Hello world"]

1. <p title="Hello world"></p>
缩写：td[rowspan=2 colspan=3 title]

1. <td rowspan="2" colspan="3" title=""></td>
缩写：[a='value1' b="value2"]

1. <div a="value1" b="value2"></div>
文本：{}
缩写：a{Click me}

1. <a href="">Click me</a>
 缩写：p>{Click }+a{here}+{ to continue}

1. <p>Click <a href="">here</a> to continue</p>
隐式标签
缩写：.class

1. <div class="class"></div>
缩写：em>.class

1. <em><span class="class"></span></em>
缩写：ul>.class

1. <ul>
2. <li class="class"></li>
3. </ul>
缩写：table>.row>.col

1. <table>
2. <tr class="row">
3. <td class="col"></td>
4. </tr>
5. </table>
HTML
所有未知的缩写都会转换成标签，例如，foo → <foo></foo>
缩写：!

1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. </head>
7. <body>
8.  
9. </body>
10. </html>
缩写：a

1. <a href=""></a>
缩写：a:link

1. <a href="http://"></a>
缩写：a:mail

1. <a href="mailto:"></a>
缩写：abbr

1. <abbr title=""></abbr>
缩写：acronym

1. <acronym title=""></acronym>
缩写：base

1. <base href="" />
缩写：basefont

1. <basefont />
缩写：br

1. <br />
缩写：frame

1. <frame />
缩写：hr

1. <hr />
缩写：bdo

1. <bdo dir=""></bdo>
缩写：bdo:r

1. <bdo dir="rtl"></bdo>
缩写：bdo:l

1. <bdo dir="ltr"></bdo>
缩写：col

1. <col />
缩写：link

1. <link rel="stylesheet" href="" />
缩写：link:css

1. <link rel="stylesheet" href="style.css" />
缩写：link:print

1. <link rel="stylesheet" href="print.css" media="print" />
缩写：link:favicon

1. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
缩写：link:touch

1. <link rel="apple-touch-icon" href="favicon.png" />
缩写：link:rss

1. <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
缩写：link:atom

1. <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" /> 
缩写：meta

1. <meta /> 
缩写：meta:utf

1. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
缩写：meta:win

1. <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
缩写：meta:vp

1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
缩写：meta:compat

1. <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
缩写：style

1. <style></style> 
缩写：script

1. <script></script> 
缩写：script:src

1. <script src=""></script>
缩写：img

1. <img src="" alt="" />
缩写：iframe

1. <iframe src="" frameborder="0"></iframe> 
缩写：embed

1. <embed src="" type="" />
缩写：object

1. <object data="" type=""></object>
缩写：param

1. <param name="" value="" /> 
缩写：map

1. <map name=""></map> 
缩写：area

1. <area shape="" coords="" href="" alt="" />
缩写：area:d

1. <area shape="default" href="" alt="" /> 
缩写：area:c

1. <area shape="circle" coords="" href="" alt="" /> 
缩写：area:r

1. <area shape="rect" coords="" href="" alt="" /> 
缩写：area:p

1. <area shape="poly" coords="" href="" alt="" />
缩写：form

1. <form action=""></form>
缩写：form:get

1. <form action="" method="get"></form>
缩写：form:post

1. <form action="" method="post"></form>
缩写：label

1. <label for=""></label>
缩写：input

1. <input type="text" />
缩写：inp

1. <input type="text" name="" id="" />
缩写：input:hidden
别名：input[type=hidden name]

1. <input type="hidden" name="" />
缩写：input:h
别名：input:hidden

1. <input type="hidden" name="" />
缩写：input:text, input:t
别名：inp

1. <input type="text" name="" id="" />
缩写：input:search
别名：inp[type=search]

1. <input type="search" name="" id="" />
缩写：input:email
别名：inp[type=email]

1. <input type="email" name="" id="" />
缩写：input:url
别名：inp[type=url]

1. <input type="url" name="" id="" />
缩写：input:password
别名：inp[type=password]

1. <input type="password" name="" id="" />
缩写：input:p
别名：input:password

1. <input type="password" name="" id="" />
缩写：input:datetime
别名：inp[type=datetime]

1. <input type="datetime" name="" id="" />
缩写：input:date
别名：inp[type=date]

1. <input type="date" name="" id="" />
缩写：input:datetime-local
别名：inp[type=datetime-local]

1. <input type="datetime-local" name="" id="" />
缩写：input:month
别名：inp[type=month]

1. <input type="month" name="" id="" />
缩写：input:week
别名：inp[type=week]

1. <input type="week" name="" id="" />
缩写：input:time
别名：inp[type=time]

1. <input type="time" name="" id="" />
缩写：input:number
别名：inp[type=number]

1. <input type="number" name="" id="" />
缩写：input:color
别名：inp[type=color]

1. <input type="color" name="" id="" />
缩写：input:checkbox
别名：inp[type=checkbox]

1. <input type="checkbox" name="" id="" />
缩写：input:c
别名：input:checkbox

1. <input type="checkbox" name="" id="" />
缩写：input:radio
别名：inp[type=radio]

1. <input type="radio" name="" id="" />
缩写：input:r
别名：input:radio

1. <input type="radio" name="" id="" />
缩写：input:range
别名：inp[type=range]

1. <input type="range" name="" id="" />
缩写：input:file
别名：inp[type=file]

1. <input type="file" name="" id="" />
缩写：input:f
别名：input:file

1. <input type="file" name="" id="" />
缩写：input:submit

1. <input type="submit" value="" />
缩写：input:s
别名：input:submit

1. <input type="submit" value="" />
缩写：input:image

1. <input type="image" src="" alt="" />
缩写：input:i
别名：input:image

1. <input type="image" src="" alt="" />
缩写：input:button

1. <input type="button" value="" />
缩写：input:b
别名：input:button

1. <input type="button" value="" />
缩写：isindex

1. <isindex />
缩写：input:reset
别名：input:button[type=reset]

1. <input type="reset" value="" />
缩写：select

1. <select name="" id=""></select>
缩写：option

1. <option value=""></option>
缩写：textarea

1. <textarea name="" id="" cols="30" rows="10"></textarea>
缩写：menu:context
别名：menu[type=context]>

1. <menu type="context"></menu>
缩写：menu:c
别名：menu:context

1. <menu type="context"></menu>
缩写：menu:toolbar
别名：menu[type=toolbar]>

1. <menu type="toolbar"></menu>
缩写：menu:t
别名：menu:toolbar

1. <menu type="toolbar"></menu>
缩写：video

1. <video src=""></video>
缩写：audio

1. <audio src=""></audio>
缩写：html:xml

1. <html xmlns="http://www.w3.org/1999/xhtml"></html>
缩写：keygen

1. <keygen />
缩写：command

1. <command />
缩写：bq
别名：blockquote

1. <blockquote></blockquote>
缩写：acr
别名：acronym

1. <acronym title=""></acronym>
缩写：fig
别名：figure

1. <figure></figure>
缩写：figc
别名：figcaption

1. <figcaption></figcaption>
缩写：ifr
别名：iframe

1. <iframe src="" frameborder="0"></iframe>
缩写：emb
别名：embed

1. <embed src="" type="" />
缩写：obj
别名：object

1. <object data="" type=""></object> 
缩写：src
别名：source

1. <source></source> 
缩写：cap
别名：caption

1. <caption></caption> 
缩写：colg
别名：colgroup

1. <colgroup></colgroup> 
缩写：fst, fset
别名：fieldset

1. <fieldset></fieldset> 
缩写：btn
别名：button

1. <button></button> 
缩写：btn:b
别名：button[type=button]

1. <button type="button"></button> 
缩写：btn:r
别名：button[type=reset]

1. <button type="reset"></button> 
缩写：btn:s
别名：button[type=submit]

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

转载于:https://www.cnblogs.com/thankyouGod/p/6366944.html