ATOM基础教程一使用前端插件emmet(16)

emmet简介

http://blog.csdn.net/zsl10/article/details/51956791

emmet的前身是Zen coding，从事Web前端开发的工程师对该插件并不陌生，emmet使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。
emmet的主要功能有：

snippet(代码片段)

abbreviation expand(简写展开)

emmet的主要特性有：

简写支持嵌套

简写支持分组

简写支持乘法

简写支持自增和自减,起序,编号

使用emmet快速生成HTML标签

1 .快速编写HTML代码

html:5 或!：用于HTML5文档类型

html:xt：用于XHTML过渡文档类型

html:4s：用于HTML4严格文档类型

使用：输入html:5/html:xt/html:4s按下TAB键



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

class: .

id: #

属性: []

内容:{}

添加class



添加id



添加HTML元素内容
　


添加HTML元素属性



3 .嵌套

> :子元素符号



＋:同级标签符号



^:使该符号后的标签提升到上一级



4 .定义多个元素

*:乘法



$:自增($:从1开始递增，$$：从01开始递增，依次类推)





$@-:自减



$@数字：起序



5 .隐式标签
声明一个带类的标签，Emmet会根据父标签进行判定要生成的标签，比如在

<ul>

中输入.item，就会生成

<li class="item"></li>

隐式标签名称:

li：用于ul和ol中

tr：用于table、tbody、thead和tfoot中

td：用于tr中

option：用于select和optgroup中



6 .分组
通过()进行分组，快速生成代码

使用emmet快速生成CSS代码

1 .值
单位别名：

p ：%

e ：em

x:ex





2 .模糊匹配
有些缩写不太确定的时候，emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

overflow: hidden;

1

1

emmet常用缩写

只列举一部分，其他的可以对比。
1. HTML

a

<a href=""></a>

1

1

link

<link rel="stylesheet" href="" />

1

1

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"  />

1

1

script:src

<script src=""></script>

1

1

form:post

<form action="" method="post"></form>

1

1

inp

<input type="text" name="" id="" />

1

1

input:h

<input type="hidden" name="" />

1

1

input:p

<input type="password" name="" id="" />

1

1

select

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

1

1

select+

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

1

2

3

1

2

3

opt

<option value=""></option>

1

1

tarea

<textarea name="" id="" cols="30" rows="10"></textarea>

1

1

btn:s

<button type="submit"></button>

1

1

2. CSS

pos:a

position:absolute;

1

1

t

top:;

1

1

r

right:;

1

1

fl

float:left;

1

1

d:n

display:none;

1

1

ov:h

overflow:hidden;

1

1

cur:p

cursor:pointer;

1

1

mb

margin-bottom:;

1

1

pl

padding-left:;

1

1

miw

min-width:;

1

1

ta:c

text-align:center;

1

1

bg

background:#000;

1

2

1

2

bg+
background:#fff url() 0 0 no-repeat;

bgc

background-color:#fff;

1

1

bd+
border:1px solid #000;

ac:c
align-content:center;