Rumah > Artikel > hujung hadapan web > 详解Sublime Text 插件Emmet的使用
详解Sublime Text 插件Emmet的使用
- 高洛峰asal
- 2017-03-26 10:14:511787semak imbas
摘要：
安装请看上一篇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
<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 10px;w10pwidth: 10%;w10ewidth: 10em;w10xwidth: 10xe;h10
<a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>: 10px;por
<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative;poaposition: absolute;fll
<a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left;frfloat: <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>;dt
<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: table;dbdisplay: block;dibdisplay: inline-block;ovy
<a href="http://www.php.cn/wiki/926.html" target="_blank">overflow-y</a>: hidden;cb
<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>: both;mt
<a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ;mb<a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</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;crcolor: rgb(0, 0, 0);cracolor: 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.
Atas ialah kandungan terperinci 详解Sublime Text 插件Emmet的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!