sublime text2 中Emmet经常使用的技巧和快捷键

时间 2019-11-12

标签 sublime text2 text emmet 经常使用技巧快捷键栏目 HTML 繁體版

原文原文链接

之前写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

sublime text2 中Emmet经常使用的技巧 和快捷键

sublime text2 中Emmet经常使用的技巧和快捷键