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-