先来说些闲话。。。
两个月前来到了新的互联网公司，我才陡然发现自己之前所谓的前端是多么狭隘的称谓，来到这里我才见识了高大上的前端－－工程化，虽然到现在还没上手
，但是我那颗小小的心开始砰动了。。。但我今天要记录的并不是前端工程化的问题（日后待写），今天要记录的是我刚刚学了那么一点的小工具－emmet ，之前不知道编写代码还能这么省事迅速，还一直当着苦逼的码农，哎，只能说见识短了有苦吃啊。。。下面该进入正题了：
Emmet的前身是大名鼎鼎的Zen coding，它使用了仿css选择器的语法生成代码，大大提高了html/css代码的编写速度。
HTML
1. 初始化
html需要包含一些固定的标签，比如<html>、<head>、<body>等，现在只需要输入!或html:5（ html5类型），然后按tab
2. 添加类、id、文本和属性
p.foo#name{sunsan} a[href=#]
3. 嵌套
>：子元素符号，表示嵌套的元素
+：同级标签元素
^：可以使该符号前的标签提神一行
p>span h1+h2 p>span^p
4. 分组
可以通过嵌套和括号来生成一些代码，比如(.foo>h1)+(.bar>h2)
5. 定义多个元素
定义多个元素可以使用*,比如ul>li.item*3 ul>li.item$*3
CSS
1. 值
p：表示％
e：表示em
x：表示ex
比如h10p+m5e
2. 附加属性
比如 @f，可以生成：
@font-face {
font-family: ;
src:url();
}
3. 模糊匹配
ov:h ov-h ovh oh匹配overflow:hidden;
4. 供应商前缀
trf自动生成
也可以使用缩写来指定某些浏览器前缀，比如-wm-trf表示只加上-webkit-和-moz-前缀
前缀缩写如下：
w : -webkit-
m : -moz-
s : -ms-
o : -o-
扫一扫
1888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
