首頁 > 文章 > web前端 > 詳解Sublime Text 外掛程式Emmet的使用

詳解Sublime Text 外掛程式Emmet的使用

高洛峰原創: 2017-03-26 10:14:511787瀏覽

摘要：

安裝請看上一篇Sublime Text—安裝，和sublime自備快捷鍵一起用，寫html簡直快的飛起。

下面整理的是常用的，完整的可看emmet官方文件。

產生標籤

1.快速產生文件結構

#!或html:5，快速產生HTML5 結構(都需要再按tab鍵)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

html:xt 產生HTML4 過渡型
html:4s 產生HTML4 嚴格類型

##2.產生帶有id 的元素

#標籤# ID名，如：

p#header

<p id="header"></p>

3.產生帶

屬性：[attr]

如：

p[value=1]

<p value="1"></p>

9.產生帶文字內容：{}

如：

a{Click me}

<a href="">Click me</a>

10.加編號：$

從1開始：加$

如：

p.item${$$}*3#

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>

倒序： $ 後面增加@-

如：

p.item$@-{$$@-}*3#

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>

p.item$@4{$$@4}*3

<pre class="brush:php;toolbar:false">04 05 06</pre>11.

分組

：()如：

(ul>ol)*3

<pre class="brush:php;toolbar:false"><ul> <ol></ol> </ul> <ul> <ol></ol> </ul> <ul> <ol></ol> </ul></pre>來個

綜合案例

table#tab[value=1].a>tr*3>(td{$$}>span)*3

<pre class="brush:php;toolbar:false"><table id="tab" value="1" class="a"> <tr> <td>01</td> <td>02</td> <td>03</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> </tr> </table></pre>產生css

css樣式多，縮寫自然也很多，列舉常用的舉一反三即可。

其中css縮寫是採用模糊搜尋匹配的，例如ov:h == ov-h == ovh == oh。

width: 10px;<a href="http://www.php.cn/wiki/835.html" target="_blank"> w10p </a>width: 10%; w10e width: 10em; w10x width: 10xe;
height: 10px;<a href="http://www.php.cn/wiki/836.html" target="_blank"></a>
position: relative;<a href="http://www.php.cn/wiki/902.html" target="_blank"> poa </a>position: absolute;
float: left;<a href="http://www.php.cn/wiki/919.html" target="_blank"> fr </a>float: right;<a href="http://www.php.cn/wiki/905.html" target="_blank"></a>
display: table;<a href="http://www.php.cn/wiki/927.html" target="_blank"> db </a>display: block; dib display: inline-block;
overflow-y: hidden;<a href="http://www.php.cn/wiki/926.html" target="_blank"></a>
clear: both;<a href="http://www.php.cn/wiki/917.html" target="_blank"></a>
margin-top: ;<a href="http://www.php.cn/wiki/933.html" target="_blank"> mb </a>margin-bottom: ;<a href="http://www.php.cn/wiki/935.html" target="_blank"></a>
pt <a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>: ; pb <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>: ;
tac <a href="http://www.php.cn/wiki/870.html" target="_blank">text-align</a>: center;
lh <a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>:;
tsn <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>: none;
tja <a href="http://www.php.cn/wiki/881.html" target="_blank">text-justify</a>: auto;
c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);
op opacity: ;
cnt content: '';
ol <a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>: ;
bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;
bd2px#333s border: 2px #333 solid;

快捷键

如果没作用请检查快捷键是否冲突

快速生成包裹标签：Ctrl+Shift+G

只有文本没有结构时，如下

首页
简介
动态

选中文本按快捷键Ctrl+Shift+G，再弹出的：Enter Wrap Abbreviation（输入扩展缩写）中输入nav>ul>li.item$*>a就会生成

<nav>
    <ul>
        <li class="item1"><a href="">首页</a></li>
        <li class="item2"><a href="">简介</a></li>
        <li class="item3"><a href="">动态</a></li>
    </ul>
</nav>

如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。

1首页
2简介
3动态

自动添加/更新图片尺寸：ctrl+U

光标移到标签上的任意位置，按下快捷键ctrl+U即可。

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />

删除标签：shift+ctrl+;
定位到上个编辑点：ctrl+alt+left
定位到下个编辑点：ctrl+alt+right
选中下一项：shift+ctrl+.
加/减1：ctrl+up/ctrl+down
加/减10：shift+alt+up/shift+alt+down
展开缩写：ctrl+e（和tab键作用相同）
重命名标签(rename_tag)：ctrl+shift+'
更换标签(update_as_you_type)：ctrl+Shift+U
匹配标签对：ctrl+alt+j

生成测试文本

输入lorem再按tab会随机生成一段英文,默认是生成30个单词，可以加上数字控制单词数量，如lorem5。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!

Lorem ipsum dolor sit amet.

以上是詳解Sublime Text 外掛程式Emmet的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用html實作定位程式碼實例下一篇：如何使用html實作定位程式碼實例

看更多

詳解Sublime Text 外掛程式Emmet的使用

摘要：

產生標籤

1.快速產生文件結構

class 的元素

如：
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

屬性：[attr]

：()如：

css樣式多，縮寫自然也很多，列舉常用的舉一反三即可。

快捷键

生成测试文本

相關文章

詳解Sublime Text 外掛程式Emmet的使用

摘要：

產生標籤

1.快速產生文件結構

class 的元素

如：ul>li*5<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

屬性：[attr]

：()如：

css樣式多，縮寫自然也很多，列舉常用的舉一反三即可。

快捷键

生成测试文本

相關文章

如：
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>