HTML/CSS速写神器--Emmet

前端开发过程中总避免不了要写一些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" content="text/html;charset=UTF-8" />
  <title></title>
</head>
<body>
  
</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title></title>
</head>
<body>

</body>

生成带有id，class的HTML标签

div#name.user

<div id="name" class="user"></div>

div#name.user.user-adim

<div id="name" class="user user-admin"></div>

兄弟 +

div+p+a

<div></div>
<p></p>
<a href=""></a>

后代 >

div>ul>li

<div>
  <ul>
    <li></li>
  </ul>
</div>

上级元素 ^

div>ul>li^p 一个^表示向上一层

<div>
  <ul>
    <li></li>
  </ul>
  <p></p>
</div>

div>ul>li^^p 两个^表示向上两层

<div>
  <ul>
    <li></li>
  </ul>
</div>
<p></p>

重复多份 *

ul>li*5

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

分组 ()

div+div>ul>li+div 未分组，最后的div将和li平级

<div></div>
<div>
  <ul>
    <li></li>
    <div></div>
  </ul>
</div>

div+(div>ul>li)+div 分组以后最后一个div将和第一个div平级

<div></div>
<div>
  <ul>
    <li></li>
  </ul>
</div>
<div></div>

属性 [attr]

a[href="http://bubkoo.com" title="bubkoo's blog"] 属性可以写在[ ]内部

<a href="http://www.google.com" title="google"></a>

编号 $

ul>li.list-item$ 一个$可以生成递增的一位数字

<ul>
  <li class="list-item1"></li>
  <li class="list-item2"></li>
  <li class="list-item3"></li>
  <li class="list-item4"></li>
  <li class="list-item5"></li>
</ul>

ul>li.list-item$$ 一个$可以生成递增的两位位数字

<ul>
  <li class="list-item01"></li>
  <li class="list-item02"></li>
  <li class="list-item03"></li>
  <li class="list-item04"></li>
  <li class="list-item05"></li>
</ul>

ul>li.list-item$@3*5 后面加@N可以从数字N计起

<ul>
  <li class="list-item3"></li>
  <li class="list-item4"></li>
  <li class="list-item5"></li>
  <li class="list-item6"></li>
  <li class="list-item7"></li>
</ul>

ul>li.list-item$@-3*5 后面加@-N可以从数字N反向计起

<ul>
  <li class="list-item7"></li>
  <li class="list-item6"></li>
  <li class="list-item5"></li>
  <li class="list-item4"></li>
  <li class="list-item3"></li>
</ul>

文本内容 {}

div>a[href="http://www.google.com"]{google} 文本内容可以用{ }包含起来

<div><a href="http://www.google.com">google</a></div>

经常用到的几个HTML缩写

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

link:css

  <link rel="stylesheet" href="style.css" media="all">

a:link

<a href="http://"></a>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

input:text

<input id="" type="text" name="">

input:password

<input id="" type="password" name="">

script:src

<script src=""></script>

CSS简写

简写属性和属性值

w100 属性名加属性值，单位默认为px

width: 100px;

w100p 表示width: 100%;
w100e 表示width: 100em;
w100x 表示width: 100ex;

m10-10--20 中间加-连接多个属性，--中第二个-表示负数

margin: 10px 10px -20px;

h10e+w100p +可连接两个属性

 height: 10em;
 width: 100%;

!

  !important

附加属性

@f 生成字体代码结构

  @font-face {
    font-family: ;
    src: url();
  }

@f+ 生成加强版

 @font-face {
    font-family:  'FontName';
    src:  url('FileName.eot');
    src:  url('FileName.eot?#iefix') format('embedded-opentype'),
       url('FileName.woff') format('woff'),
       url('FileName.ttf') format('truetype'),
       url('FileName.svg#FontName') format('svg');
    font-style:  normal;
    font-weight:  normal;
  }
}

浏览器前缀

-foo 属性前面加-，即可添加浏览器前缀

  -webkit-font-smooth: ;
  -moz-font-smooth: ;
  -o-font-smooth: ;
  -ms-font-smooth: ;
  font-smooth: ;

另外，如果输入的缩写不在Emmet中，它将会匹配最接近的那个。

曾经沧海难为水，除却巫山不是云。用过高效编辑工具以后，对各类低效工具都感觉不足以顾了。