Alex
0%

记Emment使用

置顶 | 发表于 更新于 分类于
本文字数： 3.7k 阅读时长 ≈ 3 分钟

清明上河图

导读

在我们手写 HTML 和 CSS 的时候往往都是一个一个字符的输入或者一次只输入一对标签，这种刀耕火种的方式已经不太适合现在这个追求效率的时代；所以诞生了缩写语法，使用缩写语法能大大的提高开发效率。Emment 就是提供缩写语法翻译的这么一个插件。如何安装插件请查看相关连接中的连接。

  • 本文只是 Emment 的部分内容，更多内容请到官网查阅。
  • 本文所有操作均在 VSCODE 编辑器下进行，请注意不同编辑器或配置下 Emment 生成代码的触发方式。

缩写语法

HTML 文档模板生成

  • 在编辑器中直接输入半角符号(英文版)的感叹号后直接回车
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ! + 回车键
!

# 生成的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

单个标签生成

1
2
3
4
div + 回车键

# 生成div标签
<div></div>

多个相同标签生成[乘法]

1
2
3
4
5
6
7
8
div*5 + 回车键

# 生成了5对div标签
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

父标签生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div>ul>li*3^ul>li*5 + 回车键

# 生成结果如下
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

兄弟标签生成

1
2
3
4
5
6
7
8
9
div*3+h1*3 + 回车键

# 生成了3对div标签和3对h1兄弟标签
<div></div>
<div></div>
<div></div>
<h1></h1>
<h1></h1>
<h1></h1>

子标签生成

1
2
3
4
5
6
7
8
9
10
div>ul>li*3 + 回车键

# 生成结果如下
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

添加 ID 和 CLASS

1
2
3
4
5
6
div#header+div.content+div#footer.class1.class2.class3 + 回车键

# 生成结果如下
<div id="header"></div>
<div class="content"></div>
<div id="footer" class="class1 class2 class3"></div>

标签内添加文本

1
2
3
4
a{Click me} + 回车键

# 生成结果如下
<a href="">Click me</a>

多个相同标签/不同 ID/相同 CLASS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
div#top.top>ul>li#top_ul_li_$*5.nav + 回车键

# 生成结果如下
<div id="top" class="top">
    <ul>
        <li id="top_ul_li_1" class="nav"></li>
        <li id="top_ul_li_2" class="nav"></li>
        <li id="top_ul_li_3" class="nav"></li>
        <li id="top_ul_li_4" class="nav"></li>
        <li id="top_ul_li_5" class="nav"></li>
    </ul>
</div>

# 其他
ul>li.item$$$*5 + 回车键

# 生成结果如下
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></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>

组合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div>(header>ul>li*2>a)+footer>p + 回车键

# 生成结果如下
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

CSS 缩写语法

  • 请在 style 标签内或者 CSS 文件内书写 CSS 缩写语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# =>前是Emment的CSS缩写语法，=>后是生成后的CSS代码
ov:h => overflow: hidden;
ov-h => overflow: hidden;
ovh  => overflow: hidden;
oh   => overflow: hidden;

# 使用“bxz:cb”官网生成了如下代码
bxz:cb => -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;

# 本地使用“bxz:cb”生成了如下代码,产生差异的原因可能是官网的版本更新
bxz:cb => box-sizing: content-box;

pos:a => position: absolute;
pos:r => position: relative;
pos:f => position: fixed;

bi:u => background-image: url();
  • 更多内容请到官网查阅

相关连接

Emment
Emment Github
Emmet Documentation