加速工具Emmet

标签：

前端开发神器 Emmet 介绍

Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

Emmet 严格意义上来说，并不是一款软件或者工具，它是一款编辑器插件，必须要基于某个编辑器使用。

Emmet 的工作流程：打开 HTML 或 CSS 文件（或者设置语法格式）->按语法编写指令->摁下 TAB 键->生成！

• html:5 或者 ! 生成 HTML5 结构
• html:xt 生成 HTML4 过渡型
• html:4s 生成 HTML4 严格型

生成 id 为 aaa 的 div 标签，我们只需要编写下面指令：

#aaa

如果编写一个 class 为 bbb 的 span 标签，我们需要编写下面指令：

span.bbb

编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签，我们可以这样写：

ul#ccc.ddd

生成后代：>

大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表，而且被 class 为 aaa 的 div 包裹，那么可以使用下面指令：

div.aaa>ul>li

面是生成下级元素，如果想要生成平级的元素，就需要使用 + 号。例如下面指令：

div+p+bq

生成上级元素：^

上级 （Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“>”，当使用 div>ul>li 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签，那么我需要先用 “^” 提升一下层次。例如：

div>ul>li^span

重复生成多份：*

特别是一个无序列表，ul 下面的 li 肯定不只是一份，通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字：

ul>li*5

生成分组：()

用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系，例如：

div>(header>ul>li*2>a)+footer>p

a 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 “http://blog.wpjam.com” ，title 为“我爱水煮鱼”的 a 标签，可以这样写：

a[href="http://blog.wpjam.com" title="我爱水煮鱼"]

对生成内容编号：$

例如无序列表，我想为五个个 li 增加一个 class 属性值 item1 ，然后依次递增从 1-5，那么就需要使用 $ 符号：

ul>li.item$*5

生成文本内容：{}

上面讲解了如何生成 HTML 标签，那里面的内容呢？当然也可以生成了：

a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼}

Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum的文字让人看不懂，这样才能忽略内容的含义而专注内容的排版，作为测试数据填充用的。使用 Emmet 生成Lorem Ipsum 文本非常简单，只需要使用 lorem 这一条命令即可，敲击 Tab 键之后，就会生成如下一段文字：

加速工具Emmet

标签：

原文地址：http://www.cnblogs.com/paranoidboy/p/4342693.html