emmet快捷键汇总

作者: admin 分类: other 发布时间: 2019-02-08 10:39
初始化 ! 或者 html:5
缩写:!

缩写:html:5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
#(id) .(class) [href=#]
缩写:p#info

缩写:p.info

缩写:a[href=’#’]

<p id="info"></p>
<p class="info"></p>
<a href="#"></a>
1
2
3
后代 >
缩写: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
兄弟:+
缩写:div#warp>p.one+span.two

<div id="warp">
        <p class="one"></p>
        <span class="two"></span>
</div>
1
2
3
4
^ 可以使该符号前的标签提升一行(换行符)
缩写 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>       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
分组 通过嵌套和括号快速生成一些代码块
缩写:(div.foo>h1>p)+(div.bar>h3>p)

    <div class="foo">
        <h1>
            <p></p>
        </h1>
    </div>
    <div class="bar">
        <h3>
            <p></p>
        </h3>
    </div>
1
2
3
4
5
6
7
8
9
10
隐藏标签的快捷键
.itrm 表示 div.item

但是在不同的标签下面代表的情况不一样

li : 在ul或者ol中

tr : table

td : 用于tr中

option : 用于select

定义多个元素
缩写:ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
1
2
3
4
5
缩写:ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>
1
2
3
4
5
css 缩写
w100 => width:100px;
m100 =>margin: 100px;
h100 => height :100px;
默认是 px 其他的单位需要表示

p 表示%
e 表示 em
x 表示 ex
1
2
3
缩写: @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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
模糊匹配
缩写: fz => font-size:; 
缩写: fs => font-style: italic;

供应商模式
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-  
1
2
3
4
渐变
缩写: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);
1
2
3
4
5
填充内容
//缩写: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>   
--------------------- 

发表评论

电子邮件地址不会被公开。 必填项已用*标注