emmet

使用方法

emmet的使用方法也非常簡單，以sublime text為例卧抗，直接在編輯器中輸入HTML或CSS的代碼的縮寫藤滥，然后按tab鍵就可以拓展為完整的代碼片段。（如果與已有的快捷鍵有沖突的話社裆，可以自行在編輯器中將拓展鍵設為其他快捷鍵）

語法:

后代：>

縮寫：nav>ul>li

<pre><nav>
<ul>
<li></li>
</ul>
</nav></pre>

兄弟：+

縮寫：div+p+bq

<pre><div></div>
<p></p>
<blockquote></blockquote></pre>

上級：^

縮寫：div+div>p>span+em^bq

<pre><div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div></pre>

縮寫：div+div>p>span+em^^bq

<pre><div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote></pre>

分組：()

縮寫：div>(header>ul>li*2>a)+footer>p

<pre><div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div></pre>

縮寫：(div>dl>(dt+dd)*3)+footer>p

<pre><div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer></pre>

乘法：*

縮寫：ul>li*5

<pre><ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></pre>

自增符號：$

縮寫：ul>li.item$*5

<pre><ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul></pre>

縮寫：h$[title=item$]{Header $}*3

<pre><h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3></pre>

縮寫：ul>li.item$$$*5

<pre><ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul></pre>

縮寫：ul>li.item$@-*5

<pre><ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul></pre>

縮寫：ul>li.item$@3*5

<pre><ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul></pre>

ID和類屬性

縮寫：#header

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

縮寫：.title

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

縮寫：form#search.wide

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

縮寫：p.class1.class2.class3

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

自定義屬性

縮寫：p[title="Hello world"]

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

縮寫：td[rowspan=2 colspan=3 title]

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

縮寫：[a='value1' b="value2"]

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

文本：{}

縮寫：a{Click me}

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

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

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

隱式標簽

縮寫：.class

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

縮寫：em>.class

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

縮寫：ul>.class

<pre><ul>
<li class="class"></li>
</ul></pre>

縮寫：table>.row>.col

<pre><table>
<tr class="row">
<td class="col"></td>
</tr>
</table></pre>

HTML

所有未知的縮寫都會轉換成標簽拙绊，例如，foo → <foo></foo>

縮寫：!

<pre><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
</pre>

縮寫：a

<pre><a href=""></a>
</pre>

縮寫：a:link

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

縮寫：a:mail

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

縮寫：abbr

<pre><abbr title=""></abbr>
</pre>

縮寫：acronym

<pre><acronym title=""></acronym>
</pre>

縮寫：base

<pre><base href="" />
</pre>

縮寫：basefont

<pre><basefont />
</pre>

縮寫：br

<pre><br />
</pre>

縮寫：frame

<pre><frame />
</pre>

縮寫：hr

<pre><hr />
</pre>

縮寫：bdo

<pre><bdo dir=""></bdo>
</pre>

縮寫：bdo:r

<pre><bdo dir="rtl"></bdo>
</pre>

縮寫：bdo:l

<pre><bdo dir="ltr"></bdo>
</pre>

縮寫：col

<pre><col />
</pre>

縮寫：link

<pre><link rel="stylesheet" href="" />
</pre>

縮寫：link:css

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

縮寫：link:print

<pre><link rel="stylesheet" href="print.css" media="print" />
</pre>

縮寫：link:favicon

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

縮寫：link:touch

<pre><link rel="apple-touch-icon" href="favicon.png" />
</pre>

縮寫：link:rss

<pre><link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
</pre>

縮寫：link:atom

<pre><link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
</pre>

縮寫：meta

<pre><meta />
</pre>

縮寫：meta:utf

<pre><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</pre>

縮寫：meta:win

<pre><meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
</pre>

縮寫：meta:vp

<pre><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</pre>

縮寫：meta:compat

<pre><meta http-equiv="X-UA-Compatible" content="IE=7" />
</pre>

縮寫：style

<pre><style></style>
</pre>

縮寫：script

<pre><script></script>
</pre>

縮寫：script:src

<pre><script src=""></script>
</pre>

縮寫：img

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

縮寫：iframe

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

縮寫：embed

<pre><embed src="" type="" />
</pre>

縮寫：object

<pre><object data="" type=""></object>
</pre>

縮寫：param

<pre><param name="" value="" />
</pre>

縮寫：map

<pre><map name=""></map>
</pre>

縮寫：area

<pre><area shape="" coords="" href="" alt="" />
</pre>

縮寫：area:d

<pre><area shape="default" href="" alt="" />
</pre>

縮寫：area:c

<pre><area shape="circle" coords="" href="" alt="" />
</pre>

縮寫：area:r

<pre><area shape="rect" coords="" href="" alt="" />
</pre>

縮寫：area:p

<pre><area shape="poly" coords="" href="" alt="" />
</pre>

縮寫：form

<pre><form action=""></form>
</pre>

縮寫：form:get

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

縮寫：form:post

<pre><form action="" method="post"></form>
</pre>

縮寫：label

<pre><label for=""></label>
</pre>

縮寫：input

<pre><input type="text" />
</pre>

縮寫：inp

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

縮寫：input:hidden

別名：input[type=hidden name]

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

縮寫：input:h

別名：input:hidden

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

縮寫：input:text, input:t

別名：inp

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

縮寫：input:search

別名：inp[type=search]

<pre><input type="search" name="" id="" />
</pre>

縮寫：input:email

別名：inp[type=email]

<pre><input type="email" name="" id="" />
</pre>

縮寫：input:url

別名：inp[type=url]

<pre><input type="url" name="" id="" />
</pre>

縮寫：input:password

別名：inp[type=password]

<pre><input type="password" name="" id="" />
</pre>

縮寫：input:p

別名：input:password

<pre><input type="password" name="" id="" />
</pre>

縮寫：input:datetime

別名：inp[type=datetime]

<pre><input type="datetime" name="" id="" />
</pre>

縮寫：input:date

別名：inp[type=date]

<pre><input type="date" name="" id="" />
</pre>

縮寫：input:datetime-local

別名：inp[type=datetime-local]

<pre><input type="datetime-local" name="" id="" />
</pre>

縮寫：input:month

別名：inp[type=month]

<pre><input type="month" name="" id="" />
</pre>

縮寫：input:week

別名：inp[type=week]

<pre><input type="week" name="" id="" />
</pre>

縮寫：input:time

別名：inp[type=time]

<pre><input type="time" name="" id="" />
</pre>

縮寫：input:number

別名：inp[type=number]

<pre><input type="number" name="" id="" />
</pre>

縮寫：input:color

別名：inp[type=color]

<pre><input type="color" name="" id="" />
</pre>

縮寫：input:checkbox

別名：inp[type=checkbox]

<pre><input type="checkbox" name="" id="" />
</pre>

縮寫：input:c

別名：input:checkbox

<pre><input type="checkbox" name="" id="" />
</pre>

縮寫：input:radio

別名：inp[type=radio]

<pre><input type="radio" name="" id="" />
</pre>

縮寫：input:r

別名：input:radio

<pre><input type="radio" name="" id="" />
</pre>

縮寫：input:range

別名：inp[type=range]

<pre><input type="range" name="" id="" />
</pre>

縮寫：input:file

別名：inp[type=file]

<pre><input type="file" name="" id="" />
</pre>

縮寫：input:f

別名：input:file

<pre><input type="file" name="" id="" />
</pre>

縮寫：input:submit

<pre><input type="submit" value="" />
</pre>

縮寫：input:s

別名：input:submit

<pre><input type="submit" value="" />
</pre>

縮寫：input:image

<pre><input type="image" src="" alt="" />
</pre>

縮寫：input:i

別名：input:image

<pre><input type="image" src="" alt="" />
</pre>

縮寫：input:button

<pre><input type="button" value="" />
</pre>

縮寫：input:b

別名：input:button

<pre><input type="button" value="" />
</pre>

縮寫：isindex

<pre><isindex />
</pre>

縮寫：input:reset

別名：input:button[type=reset]

<pre><input type="reset" value="" />
</pre>

縮寫：select

<pre><select name="" id=""></select>
</pre>

縮寫：option

<pre><option value=""></option>
</pre>

縮寫：textarea

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

縮寫：menu:context

別名：menu[type=context]>

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

縮寫：menu:c

別名：menu:context

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

縮寫：menu:toolbar

別名：menu[type=toolbar]>

<pre><menu type="toolbar"></menu>
</pre>

縮寫：menu:t

別名：menu:toolbar

<pre><menu type="toolbar"></menu>
</pre>

縮寫：video

<pre><video src=""></video>
</pre>

縮寫：audio

<pre><audio src=""></audio>
</pre>

縮寫：html:xml

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

縮寫：keygen

<pre><keygen />
</pre>

縮寫：command

<pre><command />
</pre>

縮寫：bq

別名：blockquote

<pre><blockquote></blockquote>
</pre>

縮寫：acr

別名：acronym

<pre><acronym title=""></acronym>
</pre>

縮寫：fig

別名：figure

<pre><figure></figure>
</pre>

縮寫：figc

別名：figcaption

<pre><figcaption></figcaption>
</pre>

縮寫：ifr

別名：iframe

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

縮寫：emb

別名：embed

<pre><embed src="" type="" />
</pre>

縮寫：obj

別名：object

<pre><object data="" type=""></object>
</pre>

縮寫：src

別名：source

<pre><source></source>
</pre>

縮寫：cap

別名：caption

<pre><caption></caption>
</pre>

縮寫：colg

別名：colgroup

<pre><colgroup></colgroup>
</pre>

縮寫：fst, fset

別名：fieldset

<pre><fieldset></fieldset>
</pre>

縮寫：btn

別名：button

<pre><button></button>
</pre>

縮寫：btn:b

別名：button[type=button]

<pre><button type="button"></button>
</pre>

縮寫：btn:r

別名：button[type=reset]

<pre><button type="reset"></button>
</pre>

縮寫：btn:s

別名：button[type=submit]

<pre><button type="submit"></button>
</pre>
下載 API表
文中演示代碼來自于官網(wǎng)API：http://docs.emmet.io/cheat-sheet/

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末浦马，一起剝皮案震驚了整個濱河市时呀，隨后出現(xiàn)的幾起案子张漂，更是在濱河造成了極大的恐慌晶默，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,366評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件航攒，死亡現(xiàn)場離奇詭異磺陡，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門币他，熙熙樓的掌柜王于貴愁眉苦臉地迎上來坞靶，“玉大人，你說我怎么就攤上這事蝴悉≌靡酰” “怎么了？”我有些...
    開封第一講書人閱讀 165,689評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵拍冠，是天一觀的道長尿这。 經(jīng)常有香客問我，道長庆杜，這世上最難降的妖魔是什么射众？ 我笑而不...
    開封第一講書人閱讀 58,925評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮晃财，結果婚禮上叨橱，老公的妹妹穿的比我還像新娘。我一直安慰自己断盛，他們只是感情好罗洗，可當我...
    茶點故事閱讀 67,942評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钢猛，像睡著了一般栖博。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上厢洞，一...
    開封第一講書人閱讀 51,727評論 1贊 305
  • 城市分裂傳說
    那天仇让，我揣著相機與錄音，去河邊找鬼躺翻。 笑死丧叽，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的公你。 我是一名探鬼主播踊淳，決...
    沈念sama閱讀 40,447評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼陕靠！你這毒婦竟也來了迂尝？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 39,349評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤剪芥，失蹤者是張志新（化名）和其女友劉穎垄开，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體税肪，經(jīng)...
    沈念sama閱讀 45,820評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡溉躲，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年榜田，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锻梳。...
    茶點故事閱讀 40,127評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡箭券，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出疑枯，到底是詐尸還是另有隱情辩块，我是刑警寧澤，帶...
    沈念sama閱讀 35,812評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布荆永，位于F島的核電站庆捺，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏屁魏。R本人自食惡果不足惜滔以，卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望氓拼。 院中可真熱鬧你画，春花似錦、人聲如沸桃漾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽撬统。三九已至适滓，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間恋追，已是汗流浹背凭迹。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留苦囱，地道東北人嗅绸。 一個月前我還...
    沈念sama閱讀 48,388評論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像撕彤，于是被迫代替她去往敵國和親鱼鸠。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • Emmet是一款文本編輯器/IDE的插件羹铅，用來快速生成復雜的HTML代碼蚀狰，只要掌握一些常用的語法（類似于CSS選擇...
    我是奮斗哥閱讀 13,709評論 0贊 34
  • Emmet 基本使用 默認快捷鍵 Tab 1. 子代：> 縮寫：nav>ul>li 2. 兄弟：+ 縮寫：div+...
    智慧與力量的賢者閱讀 372評論 0贊 1
  • 生成 HTML 文檔初始結構 HTML 文檔的初始結構，就是包括 doctype职员、html麻蹋、head、body 以...
    RunningCoderLee閱讀 806評論 0贊 0
  • 表單用于收集用戶輸入廉邑。用來包裹其他元素哥蔚，action屬性制定表單提交的地址，method屬性定義表單提交所使用的h...
    饑人谷_Vomx閱讀 244評論 0贊 0
  • 仿佛是只斗敗的公雞 他要找更失敗的顯示威風 所有的不幸和教訓他都已經(jīng)想好了 他既要像個勇士 也要像個智者 既要表現(xiàn)...
    更向遠行閱讀 205評論 0贊 1