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

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;