Emmet语法总结

盐析白兔

这个屌丝很懒，什么也没留下！

关注作者

热门标签

热门文章

111种方法判断软件的安全可靠性_怎么知道一个软件是否安全
2Raft协议是如何实现数据一致性的_raft协议为什么能解决一致性问题
3Uniapp+Vue3+Ts 解决setup语法糖不能export问题＜script＞ and ＜script setup＞ must have the same language type_
当前位置: article > 正文
Emmet语法总结
作者：盐析白兔 | 2024-05-06 10:51:18
赞
踩
emmet语法
1 Emmet简介

Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外，截至2022年，主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具，无需手动安装即可使用。

如在Visual Studio Code中新建index.html，输入div，可以看到Emmet Abbreviation说明这是一个Emmet语法规则，如下图所示：

此时点击Emmet Abbreviation或按Tab键即可生成代码片段，在这个例子中生成的是div标签：

在Emmet中包括HTML语法和CSS语法两个部分，分别包含若干语法用于简化代码输入。

2 HTML语法

 2.1 初始化HTML结构

输入!再按Tab键即可生成HTML初始化结构：
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
```
2.2 生成带有id的标签

使用操作符#即可生成一个带有id的标签，如输入div#main可生成如下代码片段：
```
<div id="main"></div>
1
```
当标签为div时，还可以省略div标签，直接输入#main即可生成与上面相同的代码片段：

2.3 生成带有class的标签

使用操作符.即可生成一个带有class的标签，如输入div.main可生成如下代码片段：
```
<div class="main"></div>
1
```
类似的，当标签为div时，还可以省略div标签，直接输入.main即可生成与上面相同的代码片段：

2.4 生成带有属性的标签

使用操作符[]即可生成一个带有属性的标签，如输入div[name=syz age=18]可生成如下代码片段：
```
<div name="syz" age="18"></div>
1
```
2.5 标签属性值数字编号

使用操作符$即可生成带有数字编号的标签属性值，如输入ul>li.className$*3可生成如下代码片段：
```
<ul>
  <li class="className1"></li>
  <li class="className2"></li>
  <li class="className3"></li>
</ul>
1
2
3
4
5
```
2.6 生成标签内文本

使用操作符{}即可生成带文本内容的标签，如输入div{文本内容}可生成如下代码片段：
```
<div>文本内容</div>
1
```
2.7 子节点生成

使用操作符>即可生成一对父子节点，如输入div>span可生成如下代码片段：
```
<div><span></span></div>
1
```
2.8 兄弟节点生成

使用操作符+即可生成一对兄弟节点，如输入div+div可生成如下代码片段：
```
<div></div>
<div></div>
1
2
```
2.9 父级兄弟节点生成

使用操作符^即可生成一个父级兄弟节点，父级兄弟节点生成通常与子节点生成同时使用，如输入div>span^p可生成如下代码片段：
```
<div><span></span></div>
<p></p>
1
2
```
顾名思义，当使用子节点生成使当前上下文处于子节点时，可以通过^操作符使上下文回到父节点处：

还可以使用多个^操作符使语境处于多个父级中，如div>ul>li^^p可生成如下代码片段：
```
<div>
  <ul>
    <li></li>
  </ul>
</div>
<p></p>
1
2
3
4
5
6
```
在这个例子中使用两个^操作符来生成div的兄弟节点p。

2.10 重复节点生成

使用操作符*即可生成重复的节点，如输入div*3可生成如下代码片段：
```
<div></div>
<div></div>
<div></div>
1
2
3
```
2.11 节点分组

使用操作符()即可将部分节点分组形成一个整体，将()内的节点与外面节点隔离，避免产生嵌套关系，如输入div>(ul>li)+p可生成如下代码片段：
```
<div>
  <ul>
    <li></li>
  </ul>
  <p></p>
</div>
1
2
3
4
5
6
```
在这个例子中(ul>li)可看作一个整体，这里用字母A表示，则表达式转换为div>A+p，这时p标签就为A的兄弟节点。若不加()，输入div>ul>li+p则生成的代码片段如下：
```
<div>
  <ul>
    <li></li>
    <p></p>
  </ul>
</div>
1
2
3
4
5
6
```
可以发现p标签变成了li标签的兄弟节点。

3 CSS语法

本文对Emmet中的CSS语法部分仅做简单介绍并列举一些常用的方法，若读者想详细了解请参阅官方文档CSS Abbreviations。

3.1 width和height

输入w100即可生成width: 100px，输入w100%即可生成width: 100%；height同理。

3.2 margin和padding

输入m10即可生成margin: 10px，当要分别设置四个方向的属性值时，输入m10px20px30px40px即可生成代码片段margin: 10px 20px 30px 40px；padding同理。

3.3 属性值生成
1. 输入fwb即可生成代码片段font-weight: bold；
2. 输入lh20px即可生成代码片段line-height: 20px；
3. 输入df即可生成代码片段display: flex；
4. 输入jcc即可生成代码片段justify-content: center；
5. 输入aic即可生成代码片段align-items: center；
6. 输入poa即可生成代码片段position: absolute；
7. 输入tac即可生成代码片段text-align: center；
8. …
根据上面的例子，其实可以发现规律，Emmet中用首字母+具体值的形式生成CSS代码片段，这里就不一一列举了，读者可以在编辑器中自行尝试一下。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/543847
推荐阅读
相关标签
散列表
数据结构
java
数学建模
matlab
信息可视化
经验分享
redis
bootstrap
数据库
安全
ssl
网络协议
开发语言
视频编解码
ISCC
网络安全
CTF-MISC
b树
hive
hadoop
数据仓库
docker
dockerfile

1 `Emmet`简介

2 HTML语法

2.1 初始化HTML结构

2.2 生成带有`id`的标签

2.3 生成带有`class`的标签

2.4 生成带有属性的标签

2.5 标签属性值数字编号

2.6 生成标签内文本

2.7 子节点生成

2.8 兄弟节点生成

2.9 父级兄弟节点生成

2.10 重复节点生成

2.11 节点分组

3 CSS语法

3.1 `width`和`height`

3.2 `margin`和`padding`

3.3 属性值生成

Emmet语法总结

1 Emmet简介

2 HTML语法

2.1 初始化HTML结构

2.2 生成带有id的标签

2.3 生成带有class的标签

2.4 生成带有属性的标签

2.5 标签属性值数字编号

2.6 生成标签内文本

2.7 子节点生成

2.8 兄弟节点生成

2.9 父级兄弟节点生成

2.10 重复节点生成

2.11 节点分组

3 CSS语法

3.1 width和height

3.2 margin和padding

3.3 属性值生成

1 `Emmet`简介

2.2 生成带有`id`的标签

2.3 生成带有`class`的标签

3.1 `width`和`height`

3.2 `margin`和`padding`