sublimetext2中Emmet的8個常用技巧
sublimetext2中Emmet的8個常用技巧
在sublime中,促發emmet可以先保存為.html文件。然后輸入下面的簡寫,按tab鍵就可促發效果了。1.生成html格式。輸入html:5;2.簡寫Div;大家可以看到,不管你是否添加了div,emmet都會自動生成需要div元素。含糊標簽名稱;這個技巧屬于implicittagnames特性,你不需要指定div或者li,emmet會自動幫助你生成,如下:3.帶有DOM導航的鏈式縮寫。如果你使用emmet來擴展簡單的class名稱生成div的話。這個方式可以幫助你省去大量的時間。你只需要記住如下語法。>;子節點:在DOM樹下一層添加創建一個元素。+同級別:在DOM樹同一層添加創建一個元素。^向上層:向上一層添加創建創建一個元素。向上一層;如果需要的話你可以向上多層,如下:
導讀在sublime中,促發emmet可以先保存為.html文件。然后輸入下面的簡寫,按tab鍵就可促發效果了。1.生成html格式。輸入html:5;2.簡寫Div;大家可以看到,不管你是否添加了div,emmet都會自動生成需要div元素。含糊標簽名稱;這個技巧屬于implicittagnames特性,你不需要指定div或者li,emmet會自動幫助你生成,如下:3.帶有DOM導航的鏈式縮寫。如果你使用emmet來擴展簡單的class名稱生成div的話。這個方式可以幫助你省去大量的時間。你只需要記住如下語法。>;子節點:在DOM樹下一層添加創建一個元素。+同級別:在DOM樹同一層添加創建一個元素。^向上層:向上一層添加創建創建一個元素。向上一層;如果需要的話你可以向上多層,如下:
![](https://img.51dongshi.com/20250105/wz/18523377052.jpg)
因為開始做web項目,所以最近在用sublime編輯器,知道了一個傳說中的emmet,原名是zencoding。html神插件可以說是。文章部分內容轉自http:///meetrice/archive/2013/01/27/2878548.html在sublime中,促發emmet可以先保存為.html文件。然后輸入下面的簡寫,按tab鍵就可促發效果了。1.生成html格式輸入html:52.簡寫Div大家可以看到,不管你是否添加了div,emmet都會自動生成需要div元素。含糊標簽名稱這個技巧屬于implicittagnames特性,你不需要指定div或者li,emmet會自動幫助你生成,如下:3.帶有DOM導航的鏈式縮寫如果你使用emmet來擴展簡單的class名稱生成div的話。這個方式可以幫助你省去大量的時間。你只需要記住如下語法:>子節點:在DOM樹下一層添加創建一個元素+同級別:在DOM樹同一層添加創建一個元素^向上層:向上一層添加創建創建一個元素。向上一層如果需要的話你可以向上多層,如下:4.使用分組來簡化你的代碼結構有的時候你可能會發現使用向上符號比較復雜,這時候可能使用分組更加的合理。如下:一個更復雜一些的例子,如下:5.插入文本和屬性如果你需要生成HTML,內容和屬性也是你常常需要添加的。很多開發人員只是使用emmet來生成框架,然后再添加內容。其實你可以在生成頁面框架的過程中同時添加屬性和內容。從下面代碼可以看到,你輸入的文字和屬性都可以分別通過大括號和中括號來生成。6.添加多個class到一個元素?這個非常簡單,你只需要使用逗號來添加多個class,如下:7.?重復添加這可能是最讓人舒服的操作了,幫助你重復添加元素:如果你整合分組功能,那么你將能夠處理更復雜的HTML生成:8.自動列表記數?如果你需要按順序生成HTML元素,這個技巧你一定喜歡,使用$符號可以幫助你生成一系列數字,支持class,id,屬性,內容等等。如下:注意如果你需要生成2位的數字,使用兩個$符號即可。?
sublimetext2中Emmet的8個常用技巧
在sublime中,促發emmet可以先保存為.html文件。然后輸入下面的簡寫,按tab鍵就可促發效果了。1.生成html格式。輸入html:5;2.簡寫Div;大家可以看到,不管你是否添加了div,emmet都會自動生成需要div元素。含糊標簽名稱;這個技巧屬于implicittagnames特性,你不需要指定div或者li,emmet會自動幫助你生成,如下:3.帶有DOM導航的鏈式縮寫。如果你使用emmet來擴展簡單的class名稱生成div的話。這個方式可以幫助你省去大量的時間。你只需要記住如下語法。>;子節點:在DOM樹下一層添加創建一個元素。+同級別:在DOM樹同一層添加創建一個元素。^向上層:向上一層添加創建創建一個元素。向上一層;如果需要的話你可以向上多層,如下:
為你推薦