sublime text2 中Emmet經常使用的技巧和快捷鍵

時間 2019-11-12

標籤 sublime text2 text emmet 經常使用技巧快捷鍵欄目 HTML 简体版

原文原文鏈接

Emmet 的官網：http://emmet.io/css

之前寫html和css經常使用的插件就是zen_coding，後來它升級爲emmet了，如今蒐集一下經常使用的技巧，但願對新手一些幫助。html

在html文件中輸入下面的簡寫腳本，按tab鍵就可生成標準的代碼了。html5

一、html5css3

腳本：
html:5
生成：
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

二、簡單標籤測試

腳本：
div.header#header
生成：
<div class="header" id="header"></div>

三、模糊標籤編碼

腳本：
.wrap>ul>.item
生成：

<div class="wrap">
  <ul>
    <li class="item"></li>
  </ul>
</div>

四、鏈式縮寫spa

> 子節點：在DOM樹下一層添加建立一個元素
+ 同級別：在DOM樹同一層添加建立一個元素
^ 向上層：向上一層添加建立建立一個元素。插件

腳本：
.outer>.inner>div+p>a^span
生成：
<div class="outer">
  <div class="inner">
    <div></div>
    <p><a href=""></a></p>
    <span></span>
  </div>
</div>

五、分組code

腳本：
(.top>a)+(.bom>a)
生成：
<div class="top"><a href=""></a></div>
<div class="bom"><a href=""></a></div>

六、添加文本和屬性htm

腳本：
div[title='測試']>span{測試}+a[href='/a/b']{測試}
生成：
<div title="測試"><span>測試</span><a href="/a/b">測試</a></div>

七、多個class

腳本：
.left.con.info
生成：
<div class="left con info"></div>

八、控制標籤個數

腳本：
.wrap>ul>li*5
生成：
<div class="wrap">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

腳本：
.wrap>(h1+p.con)*3
生成：
<div class="wrap">
  <h1></h1>
  <p class="con"></p>
  <h1></h1>
  <p class="con"></p>
  <h1></h1>
  <p class="con"></p>
</div>

九、列表自動添加行號

腳本：
ul>li.nav${$$標題}*5
生成：
<ul>
  <li class="nav1">01標題</li>
  <li class="nav2">02標題</li>
  <li class="nav3">03標題</li>
  <li class="nav4">04標題</li>
  <li class="nav5">05標題</li>
</ul>

可用的操做
展開縮寫 - Tab鍵或按Ctrl + E

互動「展開縮寫」 - 按Ctrl + Alt + Enter鍵

對外的標籤匹配對 - ^ D（MAC）/ Ctrl鍵 + ,（PC）

做用：選中光標所在的標籤或文本,每多按一次都會向外層元素擴展選擇。

標籤匹配對向內 - ^ J / 按Ctrl + Alt +，

做用：選中光標所在的標籤或文本,每多按一次都會向內層元素收縮選擇。

對匹配 - ⇧^ T / 按Ctrl + Alt + J

做用：在標籤的開始<>和結束</>來回跳轉。

使用縮寫包裹 - ^ W / Shift鍵+ Ctrl鍵+ G

ul.nav>li.nav-item$*>a|t |t可以去掉ul,ol等列表項的包裹內容標記，好比排序的數字。

ul>li[title=$#]*>{$#}+img[alt=$#] $#能夠控制包裹內容位置

轉到編輯點 - 按Ctrl + Alt +→或按Ctrl + Alt +←

使用縮寫包裹 - ^ W / Shift鍵+ Ctrl鍵+ G

選擇「屬性值」html和css均可以選 - 「 ⇧⌘。或⇧⌘ / 按Ctrl + Shift +。或Shift + Ctrl + ,

切換註釋 - ⇧⌘/ / Shift + Ctrl鍵+ /

拆分/加入標籤 - ⇧⌘ / Shift + Ctrl +`

刪掉標籤間的內容，併合並標籤開始和結束符。生成標籤的開始和結束符。

刪除標記 - ⌘' / Ctrl + Shift +;

快速刪掉標籤並保留標籤中的內容調整縮進。

更新圖片大小 - ⇧^ I / 按Ctrl + U

html和css中設置默認圖片大小

評估數學表達式 - ⇧⌘Ÿ / Shift鍵+ Ctrl鍵+ Y

2*4 or 10/2 作簡單的加減乘除算術

體現價值CSS - ⇧⌘直徑 / 按Ctrl + Shift + R

統一修改css3數據，修改透明數值。

編碼/解碼圖像數據：URL - ⇧^ D / 按Ctrl +'

圖片轉編碼

遞增/遞減編號操做：

改變數值

增量爲1：按Ctrl +↑

減1：按Ctrl +↓

增量0.1：Alt +↑

遞減0.1：Alt +↓

10增量：⌥⌘↑ / Shift鍵+ Alt +↑

遞減10：⌥⌘↓ / Shift鍵+ Alt +↓

補充：

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html:xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

emmet.evget.com

相關文章

相關標籤/搜索

Mockplus使用技巧

Github使用技巧

Xcode使用技巧

Ubuntu使用技巧

經常使用參數配置技巧

XLink 和 XPointer 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<