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的功能和特性。