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

最新推荐文章于 2024-08-17 21:31:15 发布

weixin_30672295

最新推荐文章于 2024-08-17 21:31:15 发布

阅读量79

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/bjmumu/p/3356868.html

版权

Emmet 的官网：http://emmet.io/

以前写html和css常用的插件就是zen_coding，后来它升级为emmet了，现在搜集一下常用的技巧，希望对新手一些帮助。

在html文件中输入下面的简写脚本，按tab键就可生成标准的代码了。

1、html5

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

2、简单标签

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

3、模糊标签

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

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

4、链式缩写

> 子节点：在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>

5、分组

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

6、添加文本和属性

脚本：
div[title='测试']>span{测试}+a[href='/a/b']{测试}
生成：
<div title="测试"><span>测试</span><a href="/a/b">测试</a></div>

7、多个class

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

8、控制标签个数

脚本：
.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>

9、列表自动添加行号

脚本：
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

转载于:https://www.cnblogs.com/bjmumu/p/3356868.html

weixin_30672295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sublime text2 中Emmet常用的技巧和快捷键

Emmet 的官网：http://emmet.io/以前写html和css常用的插件就是zen_coding，后来它升级为emmet了，现在搜集一下常用的技巧，希望对新手一些帮助。在html文件中输入下面的简写脚本，按tab键就可生成标准的代码了。1、html5脚本：html:5生成：<!doctype html><html lang="en"&g...
复制链接

扫一扫