Sublime 學習記錄（三） Emmet 插件

 i. 安裝 ： 打開命令面板 輸入pci 回車  而後輸入emmet 回車便可

 ii.用處 ： 快速編寫html和css代碼（快捷鍵：tab建）

 iii.html用法： 

　　1)     初始化，html文檔包含一些固定標籤，經過emmet 一鍵生成。

　　　　　　html:5或！生成html5文檔類型

　　　　　　html:xt 生成XHTML過分文檔類型

　　　　　　html:4 生成html4文檔類型

　　2)     輕鬆添加類、id、文本和屬性

　　　　　　添加id : 標籤名#ID名+tab鍵

　　　　　　添加類：標籤名.類名+tab鍵

　　　　　　添加內容：標籤名{內容}+tab鍵

　　　　　　添加便籤內部屬性：標籤名[屬性名=內容]+tab鍵

　　3)     嵌套

　　　　　　> : 子元素符號，表示嵌套元素 eg:p>span 生成 <p><span></span></p>

　　　　　　+ : 同級標籤符號 eg:p+span 生成<p></p><span></span>

　　　　　　^ : 能夠使符號錢的標籤提高一行

　　4)     分組

　　　　　　能夠經過組合達到快速生成代碼 eg:(.foo>h1)+(.bar>h2)

 　　　　　　

　　5)     隱式標籤

　　　　　　Emmet會根據父標籤進行判斷，能夠隱去標籤名不寫

　　　　　　全部隱式標籤有

　　　　　　　　Li : 用於ul 和 ol 中

　　　　　　　　Tr : 用於table、tbody 、thead 和 tfoot 中

　　　　　　　　Option : 用於select 和 optgroup中

　　6)     定義多個元素

　　　　　　Eg: ul>.item *3  注：.item$ $會自動累加

 　　　　　　

 iv. CSS 縮寫

　　1) 值

　　　　　好比定義寬度  只需w100便可 除了生成px還能夠生成其餘單位如h10p + m5e

 　　　　　

　　2) 附加屬性

　　　　　如@f 生成

 　　　　　

　　　　　@f+

 　　　　　

　　3) 模糊匹配

　　　　　　如ov:h、ov-h、ovh和oh  代碼都相同的

　　4) 供應商前綴

　　　　　　輸入非W2C標準的css emmet 會自動加上前綴

　　　　　　在任意屬性前加上- 也可加上前綴

　　　　　　不但願加上全部前綴，可以使用縮寫來指定 如-wm-trf

　　　　　　　　W 表示  -webkit-

　　　　　　　　M 表示 –moz-

　　　　　　　　S  表示 –ms-

　　　　　　　　O 表示 –o-

　　5) 漸變

　　　　　　輸入lg(left,#fff 50%,#000)