快速开发html插件emmet（小白需知）

￡神魔★判官ぃ 2022-12-07 01:12 229阅读 0赞

群里的小伙伴是不是的就会冒出一个来问：

> 老师老师，怎么视频中老师的  `ul>li*6` 能打出来？我的出不来？

![11e92627e47d43cf479e7796b40a12b3.png][]

咱先不说为什么出不来，这个我......（点点点就是不想说了）

## **我想告诉你的是：它为什么能出来。** ##

平时我们在做开发的时候

*  最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。
 *  还经常会写一些结构重复的html。如果每个重复的代码都去复制粘贴，就会很麻烦！

你也知道程序猿都很懒惰

![4f9a87b1de90664de2a446e4376dc092.png][]

所以就有了一个叫** emmet **的插件，是不是想说你没有安装过？放心这个工具绝大部分的编辑器都内置了。

例如：`hbuilderX`、`Sublime Text`、`Notepad++`、`VS code`、`Dreamweaver` 等等。

## 接下来我们来看一下 emmet 这个插件的使用！ ##

在你的编辑器新建一个html文件，创建基本的html结构代码，然后跟我一起来体验 **emmet **！

![b1dbcdc9073eed5fc959d634c0554508.png][]

对！没错错，首先就是咱们常用的 html初始结构；这一坨的html初始结构，如果每次要手打，想想都。。。

> `vscode`为例：直接一个！然后按 Tab 解决战斗；  
> `hbuilderX`为例：直接一个html 然后回车 解决战斗；

## 开始说一说语法规则： ##

现在就开始解决开头提出来的问题

## 1、后代嵌套 ##

如果你想写一个`ul`，`ul`内部写一个`li`，`li`内部写一个`span`，就可以

在html文档中输入 `ul>li>span`，然后按下你的`tab`键，就会生成以下代码

![59d354416024c6e62cb12b86f640d992.png][]

## 2、兄弟 ##

如果你想写一个`h2`，下面跟着一个`p`。

在html文档中输入 `h2+p`，然后按下你的`tab`键，就会生成以下代码

![2b7aad0e4c7bcde96a5cc99ea63a4429.png][]

## 3、分组嵌套 ##

如果你的`div`中要写一个`h2`和`p`。

在html文档中输入 `div>(h2+p)`，然后按下你的tab键，就会生成以下代码：

![b2bd66db9c7fc087ce126a42597c8bac.png][]

## 4、乘法 ##

解决你们问题的来喽！！！

如果你想写一个`ul`，`ul`内部写多个`li`，每个`li`内部写一个`span`，那怎么写呢？

我们在html文档中输入` ul>li*5>span`，然后按下你的`tab`键，就会生成以下代码：

![fa63ae3243d5b4609e8b129979be13a8.png][]

这样是不是很方便？写`table`表格的时候是不是也很有用？

还有很多有用的小技巧咱们继续说；

## 5、自动增长 ##

如果你想创建一个`ul`，里面有5个`li`，并且`li`的类名还是类似`item-1`这的形式

在html文档中输入 `ul>li.item-$*5`，然后按下你的`tab`键，就会生成以下代码：

![8255fbf590c79ba7ca29790911dd1110.png][]

## 6、id和类 ##

`div#box`

`div.box`

## 7、文本 ##

`div{test}`

![4eee001a74dbb9dff1c261bcc74904eb.png][]

以上就是`emmet`的常用语法！

![cc7295c9bfa4d8a7d7939b6f099a0f03.png][]

我补充一句：还需要多加练习！才能得心应手！

![b2f6ed009ad621217b00a10355721e72.png][]

[11e92627e47d43cf479e7796b40a12b3.png]: /images/20221123/7c8eb671d3884c6ab882774fa73ca3ca.png
[4f9a87b1de90664de2a446e4376dc092.png]: /images/20221123/d768e035ba2c4f358d14d86e0ab6ba50.png
[b1dbcdc9073eed5fc959d634c0554508.png]: /images/20221123/47f96aed1a8542babf5fa14058bb22fd.png
[59d354416024c6e62cb12b86f640d992.png]: /images/20221123/d2578bff1cdd42f9900b09690a486f0c.png
[2b7aad0e4c7bcde96a5cc99ea63a4429.png]: /images/20221123/f0a2271a26a0409bafc1a6014384287a.png
[b2bd66db9c7fc087ce126a42597c8bac.png]: /images/20221123/d208d83ef2e948a0b69d7bbc0f50d039.png
[fa63ae3243d5b4609e8b129979be13a8.png]: /images/20221123/09afe485d83d40e0aea7d188903da4ac.png
[8255fbf590c79ba7ca29790911dd1110.png]: /images/20221123/a12229ced4d64f379a823c3fc260ce01.png
[4eee001a74dbb9dff1c261bcc74904eb.png]: /images/20221123/ee24218f504243cdad9769f5a72ac0d6.png
[cc7295c9bfa4d8a7d7939b6f099a0f03.png]: /images/20221123/c7fa1cb6d5bb469bbc9768bc782089d5.png
[b2f6ed009ad621217b00a10355721e72.png]: /images/20221123/3c747fbcf13e4393b4ed4fb8cc24cf94.png