Emmet工具 Html CSS快速編寫語法

emmet (前身為 zen coding) 是乙個能大幅度提高前端開發效率的乙個工具，它使用仿css選擇器的語法來生成**，大大提高了html/css**編寫的速度。如果你也使用sublime進行前端開發，在sublime中安裝外掛程式即可使用emmet，以下為html/css快速編寫語法。

html:5 或!：用於html5文件型別 html:xt：用於xhtml過渡文件型別

html:4s：用於html4嚴格文件型別

eg:p#foobr 
eg:p.bar#foo 
eg:a[href=#] 
eg:h2

>：子元素符號，表示巢狀的元素 
+：同級標籤符號 
^：可以使該符號前的標籤提公升一行 
eg:p>span 
eg:h1+h2eg:p>span^p

eg:(.foo>h2)+(.bar>h2)

如果只輸入.item則會根據父標籤進行判定，下面是除div和span外所有的隱式標籤名稱： li：用於ul和ol中 tr：用於table、tbody、thead和tfoot中 td：用於tr中 option：用於select和optgroup中

eg:ul>.item

eg:ul>li*3

eg:ul>.item$*3

p 表示% e 表示 em x 表示 ex

eg:w100eg:h10p+m5e

eg:@feg:@f+

p;

輸入非w3c標準的css屬性，emmet會自動加上**商字首 eg:trf在任意屬性前加上「-」符號，也可以為該屬性加上字首。eg:-super-foo如果不希望加上所有字首，可以使用縮寫來指定 w 表示 -webkit- m 表示 -moz- s 表示 -ms- o 表示 -o-

eg:-wm-trf

eg:lg(left, #fff 50%, #000)