Sublime Text3—经常使用插件Emmet

时间 2019-11-15

标签 sublime text3 text 经常使用插件 emmet 栏目 HTML 繁體版

原文原文链接

摘要

安装请看上一篇Sublime Text—安装，和sublime自带快捷键一块儿用，写html简直快的飞起。css

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

html

1、生成标签

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 过渡型bash
html:4s 生成 HTML4 严格型post

2.生成带 id 的元素

标签 # ID名，如：div#header测试

<div id="header"></div>复制代码

3.生成带 class 的元素

标签 . 类名，如：div.titlespa

<div class="title"></div>复制代码

4.生成后代元素：>

如：nav>ul>li插件

<nav>
    <ul>
        <li></li>
    </ul>
</nav>复制代码

5.生成兄弟元素：+

如：div+p+divcode

<div></div>
<p></p>
<div></div>复制代码

6.生成上级元素：^

如：p^divhtm

<p></p>
<div></div>复制代码

7.重复生成多个元素：*

如：ul>li*5blog

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>复制代码

8.生成带自定义属性：[attr]

如：div[value=1]

<div value="1"></div>复制代码

9.生成带文本内容：{}

如：a{Click me}

<a href="">Click me</a>复制代码

10.加编号：$

从1开始：加$

如：div.item${$$}*3

<div class="item1">01</div>
<div class="item2">02</div>
<div class="item3">03</div>复制代码

倒序： $ 后面增长 @-

如：div.item$@-{$$@-}*3

<div class="item3">03</div>
<div class="item2">02</div>
<div class="item1">01</div>复制代码

指定序号：可使用 @N

如：div.item$@4{$$@4}*3

<div class="item4">04</div>
<div class="item5">05</div>
<div class="item6">06</div>复制代码

11.分组：()

如：(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>复制代码

12.来个综合案例

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

<table id="tab" value="1" class="a">
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
</table>复制代码

2、生成css

css样式多，缩写天然也不少，列举经常使用的触类旁通便可。

其中css缩写是采用模糊搜索匹配的，好比ov:h == ov-h == ovh == oh。

w10 width: 10px; w10p width: 10%; w10e width: 10em; w10x width: 10xe;
h10 height: 10px;
por position: relative; poa position: absolute;
fll float: left; fr float: right;
dt display: table; db display: block; dib display: inline-block;
ovy overflow-y: hidden;
cb clear: both;
mt margin-top: ; mb margin-bottom: ;
pt padding-top: ; pb padding-bottom: ;
tac text-align: center;
lh line-height:;
tsn text-shadow: none;
tja text-justify: auto;
c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);
op opacity: ;
cnt content: '';
ol outline: ;
bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;
bd2px#333s border: 2px #333 solid;

3、快捷键

若是没做用请检查快捷键是否冲突

快速生成包裹标签：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

4、生成测试文本

输入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.复制代码

2017.09.18补充内容

如上输入lorem再按tab扩展的代码是已经设置好的，sublime还提供自定义代码片断的功能，详细内容请移步Sublime Text3—自定义代码片断(Code Snippets)。

参考

emmet官方文档

掘金：Sublime Text3—经常使用插件Emmet
简书：Sublime Text3—经常使用插件Emmet
博客园：Sublime Text3—经常使用插件Emmet