前端开发利器：Emmet 介绍_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:50:08

Original

1205 people have browsed it

Emmet 是一个能提高前端开发效率的编辑器插件，支持 Sublime，Atom，TextMate，Nodepad++ 等主流编辑器。Emmet 定义了一些缩写，当我们输入缩写代码后，按展开键（默认是 Tab 键）后会展开成完整的代码。如，我们在 HTML 文件中输入 ul.list>li{第$个}*2 ，然后按展开键，会展开成如下代码

<ul class="list">  <li>第1个</li>  <li>第2个</li></ul>

Copy after login

在 CSS 文件中输入 posa 会展开成

position: absolute;

Copy after login

是不是很方便~

Emmet 的 HTML 缩写支持 CSS 选择器风格的写法。如我们要写一个 id 为 box，类名为 news-box 的div，div 下面有 a元素，其 href 为 xxx 。只需这么写 div#box.news-box>a[href=xxx] ，和 CSS 选择器的写法完全一致。

下面就介绍下 Emmet 提供的一些常用的缩写。

HTML 简写

html:5 展开为

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title></head><body></body></html>

Copy after login

link:css 展开为

<link rel="stylesheet" href="style.css">

Copy after login

btn 展开为

<button></button>

Copy after login

select+ 展开为

<select name="" id="">  <option value=""></option></select>

Copy after login

ul+ 展开为

<ul>  <li></li></ul>

Copy after login

ol+ 展开为

<ol>  <li></li></ol>

Copy after login

dl+ 展开为

<dl>  <dt></dt>  <dd></dd></dl>

Copy after login

table+ 展开为

<table>  <tr>    <td></td>  </tr></table>

Copy after login

tr+ 展开为

<tr>  <td></td></tr>

Copy after login

cc:ie6 展开为

<!--[if lte IE 6]><![endif]-->

Copy after login

cc:ie 展开为

<!--[if IE]><![endif]-->

Copy after login

cc:noie 展开为

<!--[if !IE]><!--><!--<![endif]-->

Copy after login

CSS 缩写

盒模型相关

d 展开为 display: block;
d:n 展开为 display:none;
d:f 展开为 display:flex;
d:i 展开为 display:inline;
d:ib 展开为 display: inline-block;
fl 展开为 float: left;
fl:r 展开为 float: right;
fl:n 展开为 float: none;
pos 展开为 position:relative;
pos:a 展开为 position: absolute;
pos:f 展开为 position:fixed;
m 展开为 margin: ;
m:a 展开为 margin: auto;
mt 展开为 margin-top: ; 类型的还有 mt,mb,mr
p 展开为 padding: ; 其他和margin类型
bxz 展开为 box-sizing: border-box;

字体相关

f 展开为 font: ;
fz 展开为 font-size: ;
ff 展开为 font-family: ;
fs 展开为 font-style: italic;

文本相关

va 展开为 vertical-align: top;
va:m 展开为 vertical-align: middle;
ta 展开为 text-align: left;
ta:c 展开为 text-align: center;
td:n 展开为 text-decoration: none;
wos 展开为 word-spacing: ;
c 展开为 color: #000;
c:r 展开为 color: rgb(0, 0, 0);
c:ra 展开为 color: rgba(0, 0, 0, .5);
op 展开为 opacity: ;
op+ 展开为
```
opacity: ;filter: alpha(opacity=);
```
Copy after login

背景

bg 展开为 background: #000;
bg+ 展开为 background: #fff url() 0 0 no-repeat;
bgc 展开为 background-color: #fff;
bgi 展开为 background-image: url();
bgr 展开为 background-repeat: ;
bgp 展开为 background-position: 0 0;
bgsz 展开为 background-size: ;

边框和轮廓

bd 展开为 border: ;
bd+ 展开为 border: 1px solid #000;
bd:n 展开为 border: none;
bdl 展开为 border-left: ;
bdl+ 展开为 border-left: 1px solid #000;
bdrs 展开为 border-radius: ;
bdc:t 展开为 border-color: transparent;
ol 展开为 outline: ;

列表

lis 展开为 list-style: ;
lst 展开为 list-style-type: ;
list:n 展开为 list-style-type:none;

其他

! 展开为 !important
anim 展开为 animation: ;
anim- 展开为 animation:name duration timing-function delay iteration-count direction fill-mode;
trf 展开为 transform: ;
trf:r 展开为 transform: rotate(angle);
trf:rx 展开为 transform: rotateX(angle);
trf:sc 展开为 transform: scale(x, y);
trf:t 展开为 transform: translate(x, y);
trf:t3 展开为 transform: translate3d(tx, ty, tz);
trs 展开为 transition: prop time;
us 展开为 user-select: none;

@m 展开为

@media screen {}

Copy after login

@kf 展开为

@keyframes identifier {  from {  }  to {  }}

Copy after login

以上缩写展开时，都会一起生成带浏览器前缀（vendor-prefixed）的。

Emmet 的命令

展开缩写 Tab
每按一下，扩大选择范围：选择当前元素及其父级元素 ⌃D / Ctrl+,
每按一下，缩小选择范围：选择当前元素的第一个字元素 ⌃J / Shift+Ctrl+0
光标移动移动至匹配的标签，多次按时在标签内容的结尾和标签的头部位置切换 – ⇧⌃T / Ctrl+Alt+J
用简写来包裹选中内容 — ⌃W / Shift+Ctrl+G
光标到下一个编辑点。编辑点指的是，没有内容元素内部 — Ctrl+Alt+→ 或 Ctrl+Alt+←
选择元素。多次按会在元素，元素属性，元素属性值之间切换 – ⇧⌘. 或 ⇧⌘, / Shift+Ctrl+. 或 Shift+Ctrl+,
删除标签，但不包括其innerHTML的内容 – ⌘' / Shift+Ctrl+;
数学表达式求值。如：3+2 求值 5 — ⇧⌘Y / Shift+Ctrl+Y
重构CSS3带浏览器前缀（vendor-prefixed）的值 – ⇧⌘R / Shift+Ctrl+R
修改标签的名称 – ⇧⌘K / Shift+Ctrl+'

增减数值类别

增加1: Ctrl+↑ 这个与Mac的按键冲突，需要修改快捷键
减少1: Ctrl+↓
增加0.1: Alt+↑
减少0.1: Alt+↓
增加10: ⌥⌘↑ / Shift+Alt+↑
减少10: ⌥⌘↓ / Shift+Alt+↓
⌃W / Shift+Ctrl+G

注：/ 左边是Mac的快捷键，右边是Windows的快捷键

浏览器前缀补全

-浏览器前缀-属性名其中浏览器前缀包括

w: webkit
m: moz
s: ms
o: o

例如：输入 -wm-somepop + Tab 展开为

-webkit-somepop: ;-moz-somepop: ;somepop: ;

Copy after login

渐变（Gradients）

lg(属性)如 bg:lg(to right, #f60,#f00); + Tab 展开为

background:-webkit-linear-gradient(left, #f60, #f00);background:-o-linear-gradient(left, #f60, #f00);background:linear-gradient(to right, #f60, #f00);

Copy after login