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;