Emmet語法大全（補充中）
自從上次把Emmet加入到Sublime Text之後便開始摸索Emmet，然後就陷入一個無法自拔的境界，於是乎小弟我就開始拿它來寫CSS3了！然後才發現Emmet要真的很熟還是得多瞭解它的語法結構才能真正的快起來～
Emmet支援的語法多的嚇人，下面就是要介紹Emmet在HTML語法上面的快速寫法：
最終還是一句話，熟能生巧～^^
<ul>
<li></li>
</ul>
</nav>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
ID and CLASS attributes 快速輸出id和class標籤結構
<p></p>
<blockquote></blockquote>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
<blockquote></blockquote>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
<tr class="row">
<td class="col"></td>
</tr>
</table>
<html lang="en">
<head><meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
c
<!-- ${child} -->
以上快速語法只是Emmet的冰山一角，用多了有時候會忘記真正的語法～XD
Emmet支援的語法多的嚇人，下面就是要介紹Emmet在HTML語法上面的快速寫法：
最終還是一句話，熟能生巧～^^
基本階層語法
nav>ul>li
<nav><ul>
<li></li>
</ul>
</nav>
加入運算式「*」
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>
form#search.wide
<form id="search" class="wide"></form>p.class1.class2.class3
<p class="class1 class2 class3"></p>ID and CLASS attributes 快速輸出id和class標籤結構
#header
<div id="header"></div>.header
<div class="header"></div>Sibling: + 組合標籤
div+p+bq
<div></div><p></p>
<blockquote></blockquote>
Climb-up: ^
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>
Grouping: ()
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>
</dl>
</div>
<footer>
<p></p>
</footer>
Custom attributes 自定義對象
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>Text: {}
a{Click me}
<a href="">Click me</a><ㄐ>p>{Click }+a{here}+{ to continue}
<p>Click<a href="">here</a>to continue</p>Implicit tag names
.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:5
<!doctype html><html lang="en">
<head><meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
html元素快速輸出
a
<a href=""></a>a:link
<a href="http://"></a>a:mail
<a href="mailto:"></a>abbr
<abbr title=""></abbr>acronym
<acronym title=""></acronym>base
<base href="" />basefont
<basefont />br
<br />frame
<frame />hr
<hr />bdo
<bdo dir=""></bdo>bdo:r
<bdo dir="rtl"></bdo>bdo:l
<bdo dir="ltr"></bdo>col
<col />link
<link rel="stylesheet" href="" />link:css
<link rel="stylesheet" href="style.css" />link:print
<link rel="stylesheet" href="print.css" media="print" />link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />link:touch
<link rel="apple-touch-icon" href="favicon.png" />link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />meta
<meta />meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />style
<style></style>script
<script></script>script:src
<script src=""></script>img
<img src="" alt="" />iframe
<iframe src="" frameborder="0"></iframe>embed
<embed src="" type="" />object
<object data="" type=""></object>param
<param name="" value="" />map
<map name=""></map>area
<area shape="" coords="" href="" alt="" />area:d
<area shape="default" href="" alt="" />area:c
<area shape="circle" coords="" href="" alt="" />area:r
<area shape="rect" coords="" href="" alt="" />area:p
<area shape="poly" coords="" href="" alt="" />form
<form action=""></form>form:get
<form action="" method="get"></form>form:post
<form action="" method="post"></form>label
<label for=""></label>input
<input type="text" />inp
<input type="text" name="" id="" />input:hidden 或 input[type=hidden name]
<input type="hidden" name="" />input:h 或 input:hidden
<input type="hidden" name="" />input:text 或 input:t 或 inp
<input type="text" name="" id="" />input:search 或 inp[type=search]
<input type="search" name="" id="" />input:email 或 inp[type=email]
<input type="email" name="" id="" />input:url 或 inp[type=url]
<input type="url" name="" id="" />input:password 或 inp[type=password]
<input type="password" name="" id="" />input:p 或 input:password
<input type="password" name="" id="" />input:datetime 或 inp[type=datetime]
<input type="datetime" name="" id="" />input:date 或 inp[type=date]
<input type="date" name="" id="" />input:datetime-local 或 inp[type=datetime-local]
<input type="datetime-local" name="" id="" />input:month 或 inp[type=month]
<input type="month" name="" id="" />input:week 或 inp[type=week]
<input type="week" name="" id="" />input:time 或 inp[type=time]
<input type="time" name="" id="" />input:number 或 inp[type=number]
<input type="number" name="" id="" />input:color 或 inp[type=color]
<input type="color" name="" id="" />input:checkbox
<input type="checkbox" name="" id="" />input:c 或 input:checkbox
<input type="checkbox" name="" id="" />input:radio 或 inp[type=radio]
<input type="radio" name="" id="" />input:r 或 input:radio
<input type="radio" name="" id="" />input:range 或 inp[type=range]
<input type="range" name="" id="" />input:file 或 inp[type=file]
<input type="file" name="" id="" />input:f 或 input:file
<input type="file" name="" id="" />input:submit
<input type="submit" value="" />input:s 或 input:submit
<input type="submit" value="" />input:image
<input type="image" src="" alt="" />input:i 或 input:image
<input type="image" src="" alt="" />input:button
<input type="button" value="" />input:b 或 input:button
<input type="button" value="" />isindex
<isindex />input:reset 或 input:button[type=reset]
<input type="reset" value="" />select
<select name="" id=""></select>option
<option value=""></option>textarea
<textarea name="" id="" cols="30" rows="10"></textarea>menu:context 或 menu[type=context]>
<menu type="context"></menu>menu:c 或 menu:context
<menu type="context"></menu>menu:toolbar 或 menu[type=toolbar]>
<menu type="toolbar"></menu>menu:t 或 menu:toolbar
<menu type="toolbar"></menu>video
<video src=""></video>audio
<audio src=""></audio>html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>keygen
<keygen />command
<command />bq 或 blockquote
<blockquote></blockquote>acr 或 acronym
<acronym title=""></acronym>fig 或 figure
<figure></figure>figc 或 figcaption
<figcaption></figcaption>ifr 或 iframe
<iframe src="" frameborder="0"></iframe>emb 或 embed
<embed src="" type="" />obj 或 object
<object data="" 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]
<button type="button"></button>btn:r 或 button[type=reset]
<button type="reset"></button>btn:s 或 button[type=submit]
<button type="submit"></button>optg 或 optgroup
<optgroup></optgroup>opt 或 option
<option value=""></option>tarea 或 textarea
<textarea name="" id="" cols="30" rows="10"></textarea>leg 或 legend
<legend></legend>sect 或 section
<section></section>art 或 article
<article></article>hdr 或 header
<header></header>ftr 或 footer
<footer></footer>adr 或 address
<address></address>dlg 或 dialog
<dialog></dialog>str 或 strong
<strong></strong>prog 或 progress
<progress></progress>datag 或 datagrid
<datagrid></datagrid>datal 或 datalist
<datalist></datalist>kg 或 keygen
<keygen />out 或 output
<output></output>det 或 details
<details></details>cmd 或 command
<command />ol+ 或 ol>li
<ol><li></li></ol>ul+ 或 ul>li
<ul><li></li></ul>dl+ 或 dl>dt+dd
<dl><dt></dt><dd></dd></dl>map+ 或 map>area
<map name=""><area shape="" coords="" href="" alt="" /></map>table+ 或 table>tr>td
<table><tr><td></td></tr></table>colgroup+ 或 colg+ 或 colgroup>col
<colgroup> <col /> </colgroup>tr+ 或 tr>td
<tr><td></td></tr>select+ 或 select>option
<select name="" id=""> <option value=""></option> </select>optgroup+ 或 optg+ 或 optgroup>option
<optgroup><option value=""></option></optgroup>!!!
<!doctype html>!!!4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">!!!4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">!!!xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">!!!xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!!!xxs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">c
<!-- ${child} -->
cc:ie6
<!--[if lte IE 6]> ${child} <![endif]-->cc:ie
<!--[if IE]> ${child} <![endif]-->cc:noie
<!--[if !IE]><!--> ${child} <!--<![endif]-->以上快速語法只是Emmet的冰山一角，用多了有時候會忘記真正的語法～XD
Post a Comment