前端Emmet語法文檔

Emmet語法

https://www.w3cplus.com/tools/emmet-cheat-sheet.html
sublime安裝emmet

按Ctrl+`調(diào)出sublime text的console
粘貼以下代碼到底部命令行并回車: import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(’ ‘,’%20’)).read())
重啟Sublime Text
在Perferences->package settings中看到package control于个,則表示安裝成功

ul>li*5

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

后代 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>
        </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>
        <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

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

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 action="" 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=’value’ b=”value2”]

    <div a="value" 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></div>

em>.class

    <em><span class></span></em>

ul>.class

    <ul>
        <li class></li>
    </ul>

table>.row>.col

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

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="">
```html

object  

```html
    <object data="" type=""></object>

param

    <param name="" value="">

map

    <map name=""></map>

area

    <area shape="" coords="" 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:h

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

input:hidden

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

input:text,input:t

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

input:search

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

input:email

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

input:url

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

input:password

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

input:p

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

input:datetime

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

input:date

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

input:datetime-local

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

input:month

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

input:week

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

input:time

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

input:number

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

input:color

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

input:checkbox

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

input:c

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

input:r

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

input:range

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

input:file

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

input:f

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

input:s

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

input:image

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

input:i

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

input:button

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

input:b

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

isindex

    <isindex>

input: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>

menu:c

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

menu:toolbar

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

menu:t

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

acr

    <acronym title=""></acronym>

fig

    <figure></figure>

figc

    <figcaption></figcaption>

ifr

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

emb

    <embed src="" type="">

obj

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

src

    <source></source>

cap

    <caption></caption>

colg

    <colgroup></colgroup>

fst,fest

    <fieldset></fieldset>

btn

    <button></button>

btn:r

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

btn:s

    <button type="submit"></button>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市喜爷,隨后出現(xiàn)的幾起案子皮璧,更是在濱河造成了極大的恐慌火俄,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異夫啊,居然都是意外死亡,警方通過查閱死者的電腦和手機辆憔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門撇眯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虱咧,你說我怎么就攤上這事熊榛。” “怎么了腕巡?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵玄坦,是天一觀的道長。 經(jīng)常有香客問我绘沉,道長煎楣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任车伞,我火速辦了婚禮择懂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘帖世。我一直安慰自己休蟹,他們只是感情好沸枯,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赂弓,像睡著了一般绑榴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上盈魁,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天翔怎,我揣著相機與錄音,去河邊找鬼杨耙。 笑死赤套,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的珊膜。 我是一名探鬼主播容握,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼车柠!你這毒婦竟也來了剔氏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤竹祷,失蹤者是張志新(化名)和其女友劉穎谈跛,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體塑陵,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡感憾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了令花。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阻桅。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖彭则,靈堂內(nèi)的尸體忽然破棺而出鳍刷,到底是詐尸還是另有隱情占遥,我是刑警寧澤俯抖,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站瓦胎,受9級特大地震影響芬萍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搔啊,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一柬祠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧负芋,春花似錦漫蛔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蠕嫁。三九已至,卻和暖如春毯盈,著一層夾襖步出監(jiān)牢的瞬間剃毒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工搂赋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留赘阀,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓脑奠,卻偏偏與公主長得像基公,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子宋欺,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

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

  • 原文:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 語...
    情懷已售罄丶閱讀 448評論 0 0
  • 使用方法 emmet的使用方法也非常簡單酌媒,以sublime text為例,直接在編輯器中輸入HTML或CSS的代碼...
    jrg陳咪咪sunny閱讀 367評論 0 1
  • Child: >nav>ul>li Sibling: +div+p+bq Clim...
    Michael_涵閱讀 411評論 0 1
  • [TOC] 插件 VSCode折騰記-(1)快捷鍵大全 【備忘】 vscode 必備插件VsCode中使用Emme...
    百煉閱讀 985評論 0 1
  • 不知不覺迄靠,從研究生開學到現(xiàn)在已經(jīng)整整一個學期了秒咨,跟本科相比,變化還真的是蠻大的掌挚。 去年的現(xiàn)在雨席,還在辛辛苦苦的準備考...
    小陽光Sunshine閱讀 605評論 2 13