---

Emmet的简单使用

  如果你目前在搞前段的事情，写页面HTML和CSS，而对于每一对标签，你需要去认真的去敲打，就算使用工具提供的提示。那么这是你应该看一下的，因为所有工具都是用来节约时间，把时间放在思考之上。
  Emmet是在Zencoding上面发展而来的，它使用仿CSS选择器的语法来生成代码，大大提高了html/css的编写速度。

当然不要忘记插件名为Emmet

---

1.快速编写html代码

1.初始化

代码 内容 html:5 / !: html5文档类型 html:xt xhtml过滤文档类型 html:4s html４严格文档类型

2.添加类、id、文本和属性

代码 内容 p.bar class为内容 p#bar id为内容 h1{foo} 内容 a[href=#] 你懂

3.嵌套

代码 内容 > 子元素符号，表示嵌套的元素 ＋ 同级标签符号 ^ 可以使该符号前的标签提升一行

4.分组

代码 内容 (.foo>h1)+(.bar>h2） 通过嵌套和括号来实现一些代码

5.隐式标签

代码 内容 .item 默认就是div，现在可以根据父标签判定 li 用于ul和ol中 tr 用于table、tbody、thead、tfoot中 td 用于tr中 option 用于select和optgroup

6.定义多个元素

代码 内容 ul>li*3 生成三个列表 ul>li.item$*3 依次编号 ul>li.item@-*6 逆序 ul>li.item@2*5 从２开始吧

---

CSS缩写

1.值

代码 内容 w100 width:100px; p 表示％ e 表示em x 表示ex

2.附加属性

代码 内容 @f font-face: @f+ 你试试吧 还有很多的 你自己可以搜索

3.模糊匹配

代码 内容 ov:h 输入内容最接近的语法 非W3C标准的 会生成供应商前缀 w -webkit- m -moz- s -ms- o -o-

4.渐变

代码 内容 lg(left,#fff 50%,#000） 你试试吧 我连渐变 都不知道是啥

---

附加功能

生成Lorem ipsum文本Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
这个比你乱敲比较好

---

定制

你还可以定制Emmet插件：

• 添加新缩写或更新现有缩写，可修改snippets.json文件
• 更改Emmet过滤器和操作的行为，可修改preferences.json文件
• 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

---

针对不同的编辑器

你自己找就好了

---

下面的更全吧，我不想看了。。。

前端观察的相关内容

W3C的emment相关内容

---