淘宝地址：https://shop145710529.taobao.com
极客软件园：goodkee.cn
上章也和大家分享了10个插件了，今天特别Emmet插件拿出来讲，因为这个插件很重要
Emmet html/CSS快速编辑（原名Zen Coding）
概括地说，Emmet（译者注：前身就是以前大名鼎鼎的Zen Coding，这个如果你没听说和使用过，就悲哀了）是一个可以让你更快更高效地编写HTML和CSS，节省你大量时间的插件。怎么使用？你只需按约定的缩写形式书写而不用写整个代码，然后按“扩展”键，这些缩写就会自动扩展为对应的代码内容。 比如，你只需要输入((h4>a[rel=external])+p>img[width=500 height=320])*12，然后它会被扩展转换成12个列表项和紧随其后的图像。然后你就可以在此基础上再填写内容，就这么简单。
emmet的基本使用方法
HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：
轻松添加类、id、文本和属性，连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成：
<p class="bar" id="foo"></p>
嵌套
现在你只需要1行代码就可以实现标签的嵌套。
- >：子元素符号，表示嵌套的元素
- +：同级标签符号
- ^：可以使该符号前的标签提升一行
分组
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：
01.<div class="foo"> 02. <h1></h1> 03.</div> 04.<div class="bar"> 05. <h2></h2> 06.</div>
定义多个元素
要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：
01.<ul> 02. <li></li> 03. <li></li> 04. <li></li> 05.</ul>
定义多个带属性的元素
如果输入 ul>li.item$*3，将会生成如下代码：
01.<ul> 02. <li class="item1"></li> 03. <li class="item2"></li> 04. <li class="item3"></li> 05.</ul>
css缩写值
比如要定义元素的宽度，只需输入w100，即可生成
淘宝地址：https://shop145710529.taobao.com
极客软件园：goodkee.cn
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
