Emmet语法

痛定思痛。 2021-09-30 01:00 407阅读 0赞

Emmet是一款可以提高前端代码书写效率的插件，可以不需要一行行的写html标签等，只需要写一行就可以生成完整的html解构，大部分编辑器都有，但若没有可以自行百度安装。

其实，大家可以查看此处：[https://docs.emmet.io/cheat-sheet/][https_docs.emmet.io_cheat-sheet]，语法介绍很详细。而且通俗易懂，可以花十几分钟看看，那么一下内容你就可以忽略了。

**1.快速生成一个html结构**  
语法解构特简单，只需要输入！号后，按键盘上的【tab】或【enter】既可以生成  
![image.png][]

生成后代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      
    </body>
    </html>

**2.生成5个类名为item的div**  
语法：  
![image.png][image.png 1]

生成代码：  
![image.png][image.png 2]

**3.生成一个类名为item，每个item数值递增div内容也递增。**

语法：

![image.png][image.png 3]  
生成代码：

<div class="item item01">内容 01</div>
      <div class="item item02">内容 02</div>
      <div class="item item03">内容 03</div>
      <div class="item item04">内容 04</div>
      <div class="item item05">内容 05</div>

[https_docs.emmet.io_cheat-sheet]: https://docs.emmet.io/cheat-sheet/
[image.png]: /images/20210724/629cc2cea7154e4ca6c5959ebf7128ce.png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NjQ2ODc0LTU1OTk1OTUwZDUyNTZkOTUucG5n
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NjQ2ODc0LTNmN2JlNzNmNDA4NmQ1YjEucG5n
[image.png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NjQ2ODc0LTI1Yjg0YjI2YWVkZjdhMzQucG5n

发表评论取消回复

表情：

评论列表（有 0 条评论，407人围观）

还没有评论，来说两句吧...

相关阅读

相关 webstorm 编写前端emmet语法

> 前端开发神器 Emmet： > 生成 HTML 文档初始结构 > html:5 或者 ! 生成 HTML5 结构 > htm

小咪咪/ 2023年10月09日 03:22/ 0 赞/ 37 阅读

相关 Emmet语法

Emmet语法 Emmet语法使用缩写，来提高html、css的编写速度，Vscode内部已经集成该语法 1 快速生成HTML结构语法 1. 生成标签：直接输入

向右看齐/ 2023年01月13日 04:21/ 0 赞/ 141 阅读

相关 Emmet语法快速学习

![2021012421124854.png][] 在进行前端开发的时候，经常要手动写一些Html和CSS代码，有时候手写比较的繁琐。所以Emmet语法就出现了，主要作用就是

落日映苍穹つ/ 2023年01月10日 14:37/ 0 赞/ 236 阅读

相关 VSCode使用Emmet语法

Emmet语法的前身是Zencoding，它使用缩写，来提高html/css的编写速度Vscode内部已经集成该语法。 1. 快速生成HTML结构语法 2. 快速生成CS

偏执的太偏执、/ 2022年11月17日 14:57/ 0 赞/ 169 阅读

相关 Emmet (Zen Coding) HTML基本语法

1. 嵌套操作———- 子操作： > div>ul>li <div> <ul> <li></li>

骑猪看日落/ 2022年07月13日 12:10/ 0 赞/ 201 阅读

相关 emmet语法简介

为什么使用emmet 在前端开发中，常常需要打 < 尖括号以及闭合符号，并且如果html一写多会造成大量的层次混乱。但是这些问题大多繁琐重复会大量浪费开发者的时间

落日映苍穹つ/ 2022年07月12日 00:00/ 0 赞/ 268 阅读

相关 Emmet缩写语法

缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。元素可以使用元素名（如 div 或者 p）来生成 HTML 标签

男娘i/ 2022年06月09日 07:24/ 0 赞/ 235 阅读

相关 emmet语法

emmet输入法可以快捷输入批量的html和css p 按tab也是快捷的一种 ul>li\3 回车会出来 <ul> <li></li>

淡淡的烟草味﹌/ 2021年10月24日 00:50/ 0 赞/ 399 阅读

相关 Emmet语法

Emmet是一款可以提高前端代码书写效率的插件，可以不需要一行行的写html标签等，只需要写一行就可以生成完整的html解构，大部分编辑器都有，但若没有可以自行百度安装。其

痛定思痛。/ 2021年09月30日 01:00/ 0 赞/ 408 阅读

相关 Emmet插件常用语法

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器）。我个人惯用的是sublime，因此下文介绍的语法仅在su

爱被打了一巴掌/ 2021年09月22日 09:04/ 0 赞/ 464 阅读