`

Emmet

emmet 
阅读更多

先来说些闲话。。。

两个月前来到了新的互联网公司，我才陡然发现自己之前所谓的前端是多么狭隘的称谓，来到这里我才见识了高大上的前端－－工程化，虽然到现在还没上手哭，但是我那颗小小的心开始砰动了。。。但我今天要记录的并不是前端工程化的问题（日后待写），今天要记录的是我刚刚学了那么一点的小工具－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-

分享到：
移动互联网终端的touch事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics