[IDE] Emmet使用
2016-03-05 本文已影响9人
何幻
1. HTML
（1）生成默认文档
!
=> 生成HTML5文档类型
html:5
=> 生成HTML5文档类型
html:xt
=> 生成XHTML过渡文档类型
html:4s
=> 用于HTML4严格文档类型
例如：
!
=>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
（2）快速生成标签
div#test
=>
<div id="test"></div>
div.test
=>
<div class="test"></div>
div#test.test
=>
<div id="test" class="test"></div>
a[href=#]
=>
<a href="#"></a>
div{test}
=>
<div>test</div>
（3）嵌套标签
<u></u>>：子元素符号
<u></u>+：同级标签符号
<u></u>^：可以使该符号后的标签提升一行
div>span+div^p
=>
<div>
<span></span>
<div></div>
</div>
<p></p>
（4）分组
(.foo>h1)+(.bar>h2)
=>
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
（5）隐式标签
不写标签名，会根据父标签自动判断。
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
select>.test^.test
=>
<select name="" id="">
<option class="test"></option>
</select>
<div class="test"></div>
（6）多个元素
ul>li*3
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2. CSS
（1）属性
body{
w100p+h200
}
=>
body{
width: 100%;
height: 200px;
}
单位别名列表：
p 表示%
e 表示 em
x 表示 ex
（2）自动加供应商前缀
trf
=>
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
（3）手动加供应商前缀
-wm-trf
=>
-webkit-transform: ;
-moz-transform: ;
transform: ;
前缀缩写如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
