埃米特常用的 5 个缩写

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

有很多 Web 开发人员刚刚开始他们的旅程，却在枯燥乏味的 HTML 代码上浪费了大量时间，但读完这篇博客后，你的编码过程将会变得相当快，所以这里是一些 Emmet 缩写。

在继续讲解之前，让我先解释一下什么是Emmet。Emmet
是一套插件，它能帮助Web开发人员实现高速编码，我们只需要输入一些简短的缩写，Emmet就会自动补全。

1) .container(.className) :
这将创建一个类名为 container 的div 。

2) #container (#idName) :
这将创建一个id 为 container 的div 。

3) .header>ul>li*4 :
这将创建一个带有 header 类的div，然后嵌套一个由 4 个li标签组成的ul标签。

4.) .main>.top+.bottom：
这将创建一个带有 main 类的div，然后创建两个兄弟元素，一个带有 top 类的div和一个带有 bottom 类的div 。

5.) .header>(div.links>a{Google})+.footer：
这将创建一个带有 header 类的div 元素，并在其内部创建两个元素：一个带有 links 类的div 元素和一个包含 Google 内容的a标签，以及一个与 .links div元素同级的 footer 元素。

欢迎访问我和我的朋友@sumeet16创建的社区，那里有更多精彩有趣的内容，如果您想推荐什么或提供反馈，请随时评论😇！

CodeBox 的句柄：
https://linktr.ee/CodeBox