div可以设置鼠标悬浮状态吗_前端插件emmet语法速查表，学会可以节省一半的敲代码时间...

不管用什么编辑器，基本都有这个emmet插件了。会用了，用的多了还是很省力。

基本语法

• 子级：>

nav>ul>li

• 同级：+

div+p+bq

• 向上爬一层，下方生成：^

div+div>p>span+em^bq

有几个^，可以向外爬几层。当然爬到body就爬不动了。

• 组：()

先算乘除后算加减，括号内的要先算，一个道理

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

• 相乘：*

ul>li*5

• 累加：$

相当于js中for循环变量i.

ul>li.item$*5

• id和class快捷命名

#header

p.class1.class2.class3

• 自定义属性

p[][a='value1' b="value2"]

• 文本

a{Click me}Click mep>{Click }+a{here}+{ to continue}

Click here to continue

• 一些默认用法

.classul>.class

html用法

基本是加tab键自动闭合的用法。

！ 自动生成html5规范文档

a

a:link

a:mail

abbr (鼠标移动悬浮title标签)

acronym, acr (理解可同abbr)

base (所有链接规定默认的地址)

basefont (写到head内，默认颜色和字号)

br

frame

hr

---

bdo (可覆盖文本方向)

bdo:r

bdo:l

col

link

link:css

link:print

link:favicon

link:touch

link:rss

link:atom

link:import, link:im

meta

meta:utf

meta:win

meta:vp

meta:compat

style

script

script:src

img

img:srcset, img:s

img:sizes, img:z

picture

source, src

source:src, src:sc

source:srcset, src:s

iframe

embed

object

param

map

area

area后可以加d,c,r,p来生成不同的形状

form

form:get

form:post

label

input

inp

input:hidden, input:h

input:text, input:t

input:search

input基本是什么加类型就可以生成，如input:time,password，后面就不再列举

select

select:disabled, select:d

option, opt

textarea

marquee

menu:context, menu:c

menu:toolbar, menu:t

video

audio

html:xml

keygen

command

button:submit, btn:s

button:reset, btn:r

button:disabled, btn:d

fieldset:disabled, fst:d

bq

fig

figc

pic

ifr

emb

obj

cap

colg

fst, fset

btn

optg

tarea

leg

sect

art

hdr

ftr

adr

dlg

str

prog

mn

tem

datag

datal

kg

out

det

cmd

doc

 Document

doc4

 Document

ri:dpr, ri:d

ri:viewport, ri:v

ri:art, ri:a

ri:type, ri:t

html:4t

 Document

html:4s

 Document

html:xt

 Document

html:xs

 Document

html:xxs

 Document

html:5

 Document

ol+

ul+

dl+

map+

table+

colgroup+, colg+

tr+

select+

optgroup+, optg+

pic+

!!!

!!!4t

!!!4s

!!!xt

!!!xs

!!!xxs

c

cc:ie6

cc:ie

cc:noie

其他

除了基本语法和html,emment还提供了css及xsl的使用。

用法也是简写+tab,有兴趣可以参考官方的文档

docs.emmet.io/cheat-sheet

一行代码搭建页面框架

div#header>ul.nav>li*5^^^div#content>h1>a^^^div#footer