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
按一下Ctrl+y,松开后再按,)，或者一些编辑器只需要按下Tab就可以了，然后就会惊奇发现，生成了下面的代码。
<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文件=>键入语法命令=>按下
=>生成代码,
需要注意的一点是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
<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
<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">googlea>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中，它将会匹配最接近的那个。
曾经沧海难为水，除却巫山不是云。用过高效编辑工具以后，对各类低效工具都感觉不足以顾了。