emmet
快捷键总结
初始化 ! 或者 html:5
缩写:!
缩写:html:5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
#(id) .(class) [href=#]
缩写:p#info
缩写:p.info
缩写:a[href=’#’]
<p id="info"></p>
<p class="info"></p>
<a href="#"></a>
后代 >
缩写:div#warp>ul>li*10
<div id="warp">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
兄弟:+
缩写:div#warp>p.one+span.two
<div id="warp">
<p class="one"></p>
<span class="two"></span>
</div>
^ 可以使该符号前的标签提升一行(换行符)
缩写 p.class>span^div.info
缩写 ul>li*10^ol>li*6
<p class="class"><span></span></p>
<div class="info"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
分组 通过嵌套和括号快速生成一些代码块
缩写:(div.foo>h1>p)+(div.bar>h3>p)
<div class="foo">
<h1>
<p></p>
</h1>
</div>
<div class="bar">
<h3>
<p></p>
</h3>
</div>
隐藏标签的快捷键
.itrm 表示 div.item
但是在不同的标签下面代表的情况不一样
li : 在ul或者ol中
tr : table
td : 用于tr中
option : 用于select
定义多个元素
缩写:ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
缩写:ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
css 缩写
- w100 => width:100px;
- m100 =>margin: 100px;
- h100 => height :100px;
默认是 px 其他的单位需要表示
p 表示%
e 表示 em
x 表示 ex
缩写: @f
缩写: @f
@font-face {
font-family:;
src:url();
}
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
模糊匹配
缩写: fz => font-size:;
缩写: fs => font-style: italic;
供应商模式
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
渐变
缩写:lg(left, #fff 50%, #000)
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
填充内容
//缩写:h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
//缩写:ul>li.item$$${item $}*5
<ul>
<li class="item001">item 1</li>
<li class="item002">item 2</li>
<li class="item003">item 3</li>
<li class="item004">item 4</li>
<li class="item005">item 5</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 //$@3 从三开始
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
缩写:ul>li.item$@-3*5 //$@-3 倒数到三
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>