前端Emmet语法文档

Emmet语法

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

按Ctrl+`调出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

    

        

        

        

        

        

    

后代 nav>ul>li

兄弟 div+p+bq

上级 div+div>p>span+em^bq

div+div>p>span+em^^bq

分组 div>(header>ul>li*2>a)+footer>p

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

乘法 ul>li*5

自增 ul>li.item$*5

h[title=item]{header $}*3

ul>li.item$$$*5

ul>li.item$@-*5

ul>li.item$@3*5

ID和类属性 #header

.title

form#search.wide

p.class1.class2.class3

自定义属性 p[title=”Hello world”]

td[rowspan=2 colspan=3 title]

[a=’value’ b=”value2”]

文本{} a{click me}

    click me

p>{click}+a{here}+{to continue}

    
clickhereto continue

隐式标签 .class

em>.class

ul>.class

table>.row>.col

a

a:link

a:mail

abbr

acronym

base

basefont

br

frame

hr

bdo

bdo:r

bdo:l

col

    col>

link

link:css

link:print

link:favicon

link:touch

link:rss

link:atom

meta

meta:utf

meta:win

meta:vp

meta:compat

style

script

script:src

img

iframe

embed

    
```html

object  

```html
    

param

map

area

area:c

area:r

area:p

form

form:get

form:post

label

input

inp

input:hidden

input:h

input:hidden

input:text,input:t

input:search

input:email

input:url

input:password

input:p

input:datetime

input:date

input:datetime-local

input:month

input:week

input:time

input:number

input:color

input:checkbox

input:c

input:r

input:range

input:file

input:f

input:s

input:image

input:i

input:button

input:b

isindex

input:reset

select

option

textarea

menu:context

menu:c

menu:toolbar

menu:t

video

audio

html:xml

keygen

command

bq

acr

fig

figc

ifr

emb

obj

src

cap

colg

fst,fest

btn

btn:r

btn:s