sublime text 3安装好emmet插件有什么用处
发布网友
发布时间：2022-04-20 15:37
共2个回答
懂视网
时间：2022-04-20 19:58
摘要：
安装请看上一篇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.生成带 class 的元素
标签 . 类名，如：p.title
<p class="title"></p>
4.生成后代元素：>
如：nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
5.生成兄弟元素：+
如：p+p+p
<p></p> <p></p> <p></p>
6.生成上级元素：^
如：p^p
<p></p> <p></p>
7.重复生成多个元素：*
如：ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
8.生成带自定义属性：[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>
指定序号：可以使用 @N
如：p.item$@4{$$@4}*3
<p class="item4">04</p> <p class="item5">05</p> <p class="item6">06</p>
11.分组：()
如：(ul>ol)*3
<ul> <ol></ol> </ul> <ul> <ol></ol> </ul> <ul> <ol></ol> </ul>
来个综合案例
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>
生成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;
快捷键
如果没作用请检查快捷键是否冲突
快速生成包裹标签：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.
热心网友
时间：2022-04-20 17:06
1、到官网下载最新版安装包（Sublime Text Build 3083 x64 Setup.exe）
2、双击安装包安装。
注意在安装时勾选 Add to explorer context menu ,这样在右键单击文件时就可以直接使用Sublime Text打开；
安装包控制器（Package Control）
只有安装了包控制器才能在线安装所需的插件。
1、通过快捷键ctrl+`或者View > Show Console打开命令控制器，
2、在控制台输入如下的Python命令，后按回车。等待下载安装看到成功的提示，重启就能看到Package Control了。
安装Emmet插件
1、通过快捷键ctrl+shift+p或者菜单栏 Preferences>Package Control，打开Package Control控制面板；
2、搜索框键入Install Package命令（可以简写pcip）点选 Package Control:Install Package并回车会加载一小会，所以耐心等一下。别做多余操作，不然包控制器的界面会消失的。
2、然后在列表选择Emmet（也可以直接搜索Emmett进行检索输入Emmet），点第一个就开始安装Emmet插件，在 Emmet 安装完成后，会显示如下屏幕：然后会自动安装PyV8，安装完成，重启 Sublime Text 3。跳出Emmet信息界面就证明安装成功！然后你就可以开始编代码啦！
常用的命令：
Install Package（安装扩展）
List Package（列出全部扩展）
Remove Package（移除扩展）
Upgrade Package（升级扩展）
查看已经安装的插件
1、Preferences->Package Settings可以看到已经安装的插件
2、重新调出控制面板ctrl+shift+p，键入List Package（可以简写pclp）列出全部扩展，查看是否已经安装成功。
测试使用Emmet：
Emmet安装成功后创建hello.html文件
1、新建html文档结构！按Ctrl+e 生成；
2、ul#test>li*4{hello}按Ctrl+e 生成;
