emmet的用法

Posted gdjlc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了emmet的用法相关的知识,希望对你有一定的参考价值。

emmet 是一个提高前端开发效率的一个工具。
emmet允许在html、xml、和css等文档中输入缩写,然后按tab键自动展开为完整的代码片段。

一、Sublime Text 3 安装插件Emmet
点击菜单栏的首选项
->Package Control
-> 在弹出命令行中输入ip,在列表中点击“install Package”
-> 弹出命令行输入框,输入“emmet”进行安装

本人安装完后提示
Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解决方法:
按提示打开https://github.com/emmetio/pyv8-binaries,选择自己版本下载pyv8,本人下载pyv8-win64-p3.zip。
点击Sublime Text 3菜单栏的首选项->浏览插件目录,打开Packages目录,再切换到上一层Installed Packages目录,
新建目录PyV8,把pyv8-win64-p3.zip解压后的文件放进去,重启ST编辑器。

二、emmet的用法
emmet插件的官方文档: https://docs.emmet.io/abbreviations/syntax/

新建一个html文件
1、元素
可以使用元素的名称(如DIV或P)生成HTML标记。
如输入div按tabl键后,自动生成<div></div>。
如果输入!,则自动生成一个HTML5基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、嵌套操作符
(1)子元素:>

<!-- div>ul>li -->

<div>
    <ul>
        <li></li>
    </ul>
</div>

备注:div>ul>li的中间和后面不能有空格,否则按tab键后emmet 会停止解析,后面的例子也一样不能有空格。

(2)兄弟元素:+

<!-- div+p+bq --> -->

<div></div>
<p></p>
<blockquote></blockquote>

(3)向上一层:^,和>相反,可以多次使用

<!-- div+div>p>span+em -->

<div></div>
<div>
    <p><span></span><em></em></p>
</div>


<!-- div+div>p>span+em^^^bq  -->

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

(4)乘法:*,重复指定次数生成元素

<!-- ul>li*5  -->

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

(5)分组:(),括号里面的内容为一个代码块,括号后面的元素与括号的第一个元素在同一级别

<!-- div>(header>ul>li*2>a)+footer>p  -->

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

3、属性操作符

(1)id和class

<!-- div#header+div.page+div#footer.class1.class2.class3 -->

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

(2)自定义属性:[attr]

<!-- td[title="Hello world!" colspan=3] -->

<td title="Hello world!" colspan="3"></td>

(3)项目编号:$

<!-- ul>li.item$*5 -->

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

使用任意个$在数字前加任意个0

<!-- ul>li.item$$*5 -->

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
    <li class="item04"></li>
    <li class="item05"></li>
</ul>

倒序,在$后面加@-

<!-- ul>li.item$@-*5 -->

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

指定开始的序号,在$后面加@N,N为开始的序号

<!-- ul>li.item$@3*5 -->

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

4、文本:,为元素添加文本

<!-- aClick me -->

<a href="">Click me</a>

因为文本也是节点,所以 a[href=1.htm]click me 与 a[href=1.htm]>click me 等价。

但是有多个元素时生成的结果会不同,用子元素>后面有元素时,也会放在a元素里面,例如

<!-- aclick+bhere -->

<a href="">click</a><b>here</b>

<!-- a>click+bhere -->

<a href="">click<b>here</b></a>

 

以上是关于emmet的用法的主要内容,如果未能解决你的问题,请参考以下文章

sublime Emmet的用法及相关语法

vscode中html/css快速补全插件Emmet用法

vscode快捷操作emmet语法

插件Emmet 快速编写代码

VSCode的emmet输入法

VS2013 EMMET插件学习