HTML/CSS速写神器--Emmet

最新推荐文章于 2024-10-01 11:34:40 发布

Adambee08

最新推荐文章于 2024-10-01 11:34:40 发布

阅读量386

点赞数 1

本文链接：https://blog.csdn.net/Adambee08/article/details/78620535

版权

Emmet是一款强大的前端开发效率工具，用于快速编写HTML和CSS代码。本文介绍了如何利用Emmet的HTML基础语法，如生成文档结构、设置属性、创建元素关系等，并探讨了CSS简写技巧，如简写属性、附加属性和浏览器前缀，帮助开发者大幅提升编写速度。

摘要由CSDN通过智能技术生成

这篇文章首发于我的博客，转载可注明出处。

前端开发过程中总避免不了要写一些HTML和CSS，于是Emmet应运而生，它可以极大的简化我们写代码的流程，提高书写的效率。

Emmet（以前名为Zen Coding）是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。Emmet目前支持多种编辑器，包括一些主流编辑器和IDE，在线编辑器以及第三章插件的的支持。

我用vim来安装和使用Emmet，安装方法见emmet-vim的github文档。

HTML基础语法

安装好后，用 vim index.html 新建文件，键入

html:5

按一下<C-y> ,(先按Ctrl+y,松开后再按,)，或者一些编辑器只需要按下Tab就可以了，然后就会惊奇发现，生成了下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
</html>

原本需要三四分钟的头部被我们几秒搞定了。

再来试一试这个命令

div.hander+div#main$0.column*3^div.footer

发现很轻松就生成了一个圣杯布局的html结构。

  <div class="hander"></div>
  <div id="main1" class="column"></div>
  <div id="main2" class="column"></div>
  <div id="main3" class="column"></div>
  <div class="footer"></div>

现在我们来总结一下刚刚的流程。

打开HTML文件=>键入语法命令=>按下<C-y> ,=>生成代码

需要注意的一点是Emmet的语法中不允许有空格，比如前面的命令为了好看写成
div.hander + div#main$0.column*3 ^ div.footer**

以上全部就是Emmet的工作方式，超简洁的工作流完成重复的工作。

下面列出了HTML简写规则。

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

我们来逐步体验Emmet的优雅和强大。

生成HTML文档的初始结构

html:5 或 ! 生成HTML5的初始结构
html:xt 生成HTML4过渡型
html:4s 生成HTML4严格型

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type"