Emmet for Dreamweaver 整理分享
我是一名技术不是很到位的前端，每次做项目总要写大量的HTML和CSS，耳边经常听到的是快、快点、再快点！我真想说快你妹！但是，我不得不承认的是：我只有两只手...
后来，在群里看到有人分享了一个连接大名鼎鼎的Zen Coding（Emmet的前身）觉得不错，打算研究下。后来一忙，一忙就找不到了...
转眼间，时过境迁。昨日的记忆重新浮现在眼前，瞬间感悟，这次不能再错过！于是，百而度之，获，大喜，乃此篇前因。用，大爽，乃此篇后果。
好了，言归正传。下面来分享一下我的体验：
Emmet并不依赖某个特定的编辑器，它是一个多编辑器支持的可扩展组件。它通过缩写的形式来生成我们想要的代码，本文主要说明在HTML和CSS两个方面的应用。
HTML部分：
1.初始化
只要一秒钟！你就可以创建一个完整的HTML文档类型。
html:5或者！：用于HTML5的文档类型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
html:xt：用于过渡的HTML4文档类型
<!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>Document</title> </head> <body> </body> </html>
html:4s: 用于严格的HTML4文档类型
<!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>Document</title> </head> <body> </body> </html>
2.添加类、ID、文本、属性
2.1添加类
div.className1
2.1生成的代码
<div class="className1"></div>
2.2添加ID
div#className1
2.2生成的代码
<div id="className1"></div>
2.3添加文本{}
div.className1#className{在花括号里面添加文本}
2.3生成的代码
<div class="className1" id="className">在花括号里面添加文本</div>
2.4添加属性[]
a[href=#]{在方括号里添加属性}
2.4生成的代码
<a href="#">在方括号里添加属性</a>
3.嵌套
3.1>子集标签符号
p>span
3.1生成的代码
<p><span></span></p>
3.2+同级标签符号
h1+h2
3.2生成的代码
<h1></h1> <h2></h2>
3.3^返回上级符号
p>span^p
3.3生成的代码
<p><span></span></p> <p></p>
4.分组()
(div.header)+(div.main)+(div.footer)
<div class="header"></div> <div class="main"></div> <div class="footer"></div>
5.隐式标签
正常情况下div.box生成的是<div class="box"></div>
隐式标签是根据父级元素来识别比如在ul下输入.item就会生成<li class="item"></li>
6.定义多个元素*
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7.定义多个带属性的元素$
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
CSS部分：
1.值
w10p width: 10%; w10e width: 10em; w10x width: 10ex;
- p 表示%
- e 表示 em
- x 表示 ex
2.附加属性
通过+来给当前标签添加附加属性
@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;
}
3.模糊匹配
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：
ov:h overflow: hidden; ov-h overflow: hidden; ovh oh overflow: hidden;
4.供应商前缀
如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：
border-radius /*这是我手写的，下面是生成的*/ -webkit-border-radius: ; -moz-border-radius: ; border-radius: ;
如果想自己手动指定
- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-
5.渐变
输入lg(left, #fff 50%, #000)，会生成如下代码：
background-image: -moz-linear-gradient(left, #fff 50%, #000); background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(left, #fff 50%, #000);
官方下载
下载去官方，及时又可靠，轻轻地地点击这里：http://emmet.io/download/ 或者直接狠狠地点击这里：Emmet.zxp
如果你已经安装了Adobe的Extension Manager(扩展管理器)，直接双击安装就可以啦！如果木有，点击这里下载。
下载好了从你的扩展里选择下载好的文件，如图：
无视，点安装即可。
针对不同编辑器的插件 http://emmet.io/download/
-
Emmet为大部分流行的编辑器都提供了安装插件，下面是它们的下载链接：
-
在线编辑器的支持：
-
第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。
