详解Sublime Text 插件Emmet的使用-html教程-PHP中文网

首页

web前端

html教程

详解Sublime Text 插件Emmet的使用

高洛峰

Mar 26, 2017 am 10:14 AM

sublime

摘要：

安装请看上一篇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; w10p width: 10%; w10e width: 10em; w10x width: 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; poa position: absolute;
fll <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left; fr float: <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; db display: block; dib display: 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; cr color: rgb(0, 0, 0); cra color: 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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

sublime怎么用replaceApr 03, 2024 am 05:51 AM

Sublime Text 替换功能允许用户搜索和替换文本。该功能可通过 "查找" 菜单中的 "替换" 选项启用。使用此功能的步骤包括：输入要搜索的文本、输入替换文本、选择是否启用正则表达式、选择替换所有或选择性替换。高级选项包括匹配大小写、匹配整个单词和使用选区。

sublime怎么显示运行结果Apr 03, 2024 am 07:06 AM

Sublime Text 中可通过以下三种方法显示运行结果：使用控制台窗口：打开控制台窗口并使用 print 语句打印结果。使用快速面板：打开快速面板，选择终端选项卡并运行代码。使用第三方插件：安装 SublimeREPL 或 Console 2 等插件，运行代码后结果将在专属窗口中显示。

sublime怎么编写python代码Apr 03, 2024 am 05:30 AM

在 Sublime Text 中编写 Python 代码，请按照以下步骤操作：安装 Sublime Text。创建新项目并保存文件为 .py。通过快捷键 Ctrl + B (Windows) / Cmd + B (Mac) 运行 Python 代码。此外，还可以通过安装 Python 插件、设置 Python 解释器、启用自动缩进和语法高亮等方式增强 Python 代码编写体验。

sublime怎么执行Apr 03, 2024 am 07:15 AM

是，Sublime Text可以通过以下步骤执行代码：为特定编程语言安装插件配置构建系统创建构建文件使用键盘快捷键（Mac：Command + B；Windows/Linux：Control + B）执行代码

phpstudy配置文件怎么改Apr 02, 2024 pm 03:57 PM

可以通过以下步骤修改 phpStudy 配置文件：找到配置文件（Windows：C:\Windows\phpStudy\php\php.ini；Mac：/Applications/phpStudy/php/php.ini）使用文本编辑器打开并查找要修改的设置编辑设置的值，如修改时区：date.timezone = Asia/Shanghai保存更改并重启 Apache 服务

sublime怎么运行结果Apr 03, 2024 am 07:24 AM

在 Sublime 中运行代码的方法包括：使用快捷键 (Ctrl + B)通过菜单 (工具 > 构建 > 运行)使用命令面板 (Ctrl + Shift + P > 输入“运行”)使用构建系统 (工具 > 构建系统 > 选择一个构建系统)设置默认构建系统 (首选项 > 设置 - 用户 > 添加“build_system”键值)

Flask和Sublime Text集成: Python web应用程序开发技巧（第六部分）Jun 17, 2023 pm 04:08 PM

Flask和SublimeText集成:Pythonweb应用程序开发技巧（第六部分）SublimeText和Flask都是Pythonweb应用程序开发中的重要工具。然而，如何将二者集成起来，使得开发过程更加高效呢？本文将介绍一些SublimeText的插件和配置技巧，帮助你更方便地开发Flask应用程序。一、安装SublimeText插件F