Emmet——html的快捷键

最新推荐文章于 2024-12-04 11:16:10 发布

转载最新推荐文章于 2024-12-04 11:16:10 发布 · 129 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/qq_40070622/article/details/81773077?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160928896016780304612579%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fall.%252522%25257D&request_id=1

本文详细介绍了Emmet这款强大的前端快捷键工具，涵盖了HTML、CSS、JavaScript、布局、选择器、CSS预设、模糊匹配、CSS供应商模式、渐变、内容填充和更多高级技巧。掌握这些能大幅提高前端开发效率。

emmet

快捷键总结

转载自https://blog.csdn.net/Merciwen/article/details/72935414 感谢原作者
初始化 ! 或者 html:5

缩写:!

缩写:html:5

<!doctype html>

Document

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
#(id) .(class) [href=#]

缩写：p#info

缩写：p.info

缩写：a[href=’#’]

1
2
3
1
2
3
后代 >

缩写：div#warp>ul>li*10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
兄弟：+

缩写：div#warp>p.one+span.two

1
2
3
4
1
2
3
4
^ 可以使该符号前的标签提升一行（换行符）

缩写 p.class>span^div.info

缩写 ul>li10^ol>li6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
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

1
2
3
4
5
1
2
3
4
5
缩写：ul>li.item$*3

1
2
3
4
5
1
2
3
4
5
css 缩写

w100 => width:100px;
m100 =>margin: 100px;
h100 => height :100px;
默认是 px 其他的单位需要表示

p 表示%
e 表示 em
x 表示 ex

1
2
3
4
1
2
3
4
缩写： @f
缩写： @f

@font-face {
        font-family:;
        src:url();
    }

@font-face {
    font-family: 'FontName';
    src: url(https://blog.csdn.net/'FileName.eot');
    src: url(https://blog.csdn.net/'FileName.eot?#iefix') format('embedded-opentype'),
         url(https://blog.csdn.net/'FileName.woff') format('woff'),
         url(https://blog.csdn.net/'FileName.ttf') format('truetype'),
         url(https://blog.csdn.net/'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
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
5
1
2
3
4
5
渐变

缩写：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
1
2
3
4
5
填充内容

//缩写：h $[t i t l e = i t e m$ ]{Header $}*3