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中，它将会匹配最接近的那个。
曾经沧海难为水，除却巫山不是云。用过高效编辑工具以后，对各类低效工具都感觉不足以顾了。
