什么是Emmet

Emmet 是一种可以快速构建HTML结构的语法。通过Emmet可以用一行代码创建各种结构的HTML元素组合， 以及创建批量的元素，便捷且高效。

如何下载和启用 Emmet

如果是Vscode用户， Emmet已经内置在编辑器中了， 可以直接使用，默认触发Emmet的快捷键是tab键；Sublime Text编辑器的话， 则需要去插件面板搜索安装一下。

使用示例

快速创建HTML文档结构

! => tab
这个简单的操作可以创建出如下的HTML结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  10. </body>
  11. </html>

这样一来就减少了很多重复性的工作， 可以直接开始写body内的标签内容了。

元素层级操作

创建基本元素

使用div+tab键来生成一个div标签<div></div>

父级元素嵌套

可以使用>来生成创建一组父子元素， 比如div+ p的效果是

  1. <div>
  2.     <p></p>
  3. </div>

相邻元素嵌套