Emmet的简单使用

---

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相关内容

---