emmet 快捷键总结
emmet
快捷键总结
初始化 ! 或者 html:5
缩写:!
缩写:html:5
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
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 1h1>
<h2 title="item2">Header 2h2>
<h3 title="item3">Header 3h3>
//缩写：ul>li.item$$${item $}*5
<ul>
<li class="item001">item 1li>
<li class="item002">item 2li>
<li class="item003">item 3li>
<li class="item004">item 4li>
<li class="item005">item 5li>
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>