HTML/CSS速寫 Emmet | 使用方法

安裝

我使用的IDE是MacOS上的Brackets。Brackets在牆內安裝插件的地址以下：

https://brackets-registry.abo...
下載Zip拖入到拓展管理器安裝便可。

---

HTML篇

生成HTML模版

HTML5模版

輸入!或html:5，而後按下Tab鍵便可

其餘HTML模版

• html:5 + Tab 或者 ! 生成 HTML5 結構
• html:xt + Tab 生成 HTML4 過渡型
• html:4s + Tab 生成 HTML4 嚴格型

---

生成帶有 id 、class 的 HTML 標籤

1. E 表明HTML標籤。
2. E#id 表明id屬性。
3. E.class 表明class屬性。
4. E[attr=foo] 表明某一個特定屬性。
5. E{foo} 表明標籤包含的內容是foo。
6. E>N 表明N是E的子元素。
7. E+N 表明N是E的同級元素。
8. E^N 表明N是E的上級元素。

分組（）與重複多份*

用括號進行分組，表示一個代碼塊，分組內部的嵌套和層級關係和分組外部無關。
須要多少份結構，就在後面乘以幾

---

CSS篇

---

更詳細的使用方法見：

http://bubkoo.com/2014/01/04/...在-sublime-text-3-中安裝-emmet