详解Sublime Text 插件Emmet的使用
摘要：
安装请看上一篇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.
以上是详解Sublime Text 插件Emmet的使用的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
html应该用什么打开
Apr 21, 2024 am 11:33 AM
要打开HTML文件，您需要使用浏览器，例如谷歌Chrome或Mozilla Firefox。要使用浏览器打开HTML文件，请遵循以下步骤：1. 打开您的浏览器。2. 将HTML文件拖放到浏览器窗口中，或单击“文件”菜单并选择“打开”。
python编程用什么软件好
Apr 20, 2024 pm 08:11 PM
初学者推荐 IDLE 和 Jupyter Notebook，中/高级推荐 PyCharm、Visual Studio Code 和 Sublime Text。云端 IDE Google Colab 和 Binder 提供交互式 Python 环境。其他推荐包括 Anaconda Navigator、Spyder 和 Wing IDE。选择标准包括技能水平、项目规模和个人偏好。
python复制的代码怎么用
Apr 20, 2024 pm 06:26 PM
在 Python 中使用复制的代码的步骤如下：将代码复制并粘贴到文本编辑器中。创建一个 Python 文件。在命令行中运行代码。理解代码的用途和工作原理。根据需要修改代码并重新运行它。
html怎么打开本地文件
Apr 22, 2024 am 09:39 AM
HTML 可用于打开本地文件，步骤如下：创建一个 .html 文件并导入 jQuery 库。创建一个输入字段，允许用户选择文件。监听文件选择事件并使用 FileReader() 对象读取文件内容。将读取的文件内容显示到网页上。
python怎么建立py文件
May 05, 2024 pm 07:57 PM
在 Python 中创建 .py 文件的步骤：打开文本编辑器（例如 Notepad、TextMate 或 Sublime Text）。创建新文件并输入 Python 代码，注意缩进和语法。保存文件时，使用 .py 扩展名（例如，my_script.py）。
html用什么可以打开
Apr 21, 2024 am 11:36 AM
HTML文件可使用浏览器（如Chrome、Firefox、Edge、Safari、Opera）打开：找到HTML文件（.html或.htm扩展名）；右键单击/长按文件；选择"打开"；选择您要使用的浏览器。
创建和打开 HTML 空文档
Apr 09, 2024 pm 12:06 PM
创建HTML文档：使用文本编辑器输入HTML结构，并保存为.html文件。打开HTML文档：双击文件或在浏览器中使用“文件”>“打开”选项。实战案例：创建新HTML文件，添加标题、样式表和内容，并保存为.html文件。
html编辑器哪个软件好用
Apr 17, 2024 am 04:54 AM
综上所述，以下 HTML 编辑器广受好评：Visual Studio Code：跨平台、功能丰富、免费开源。Sublime Text：高性能、定制性强、付费软件。Atom：跨平台、可扩展、开源免费。Brackets：前端开发专用、直观界面、开源免费。Notepad++：轻量快速、功能强大、开源免费。选择 HTML 编辑器时，请考虑平台兼容性、功能、扩展性、价格和用户友好性等因素。
