Sublime Text 2的Emmet插件使用简介

最新推荐文章于 2018-05-15 11:22:59 发布

酱油能

最新推荐文章于 2018-05-15 11:22:59 发布

阅读量5k

点赞数

分类专栏：前端文章标签： sublime

本文链接：https://blog.csdn.net/martinwangjun/article/details/51372280

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Sublime Text 2的Emmet插件使用简介

Sublime Text可以说是最好用的一个文本编辑器，特别是对于广大码农朋友来说，尤其是前端码农朋友来说。关于Sublime Test的好处我就不多说了，自己去下载吧。相信会用Sublime Text的用户也一定安装了它的包管理器，那么我今天在这里重点介绍一下Emmet这个插件。

1. 快速创建HTML文档

<!-- html:5 + `tab` 或者 `!` + `tab` -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!-- html:xs + `tab` -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!-- html:xt + `tab` -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

2. 语法

2.1. 后代：>

<!-- div>p + `tab` -->
<div>
    <p></p>
</div>

2.2. 兄弟：+

<!-- div+div + `tab` -->
<div></div>
<div></div>

2.3. 上级：^

<!-- div>ul>li*5^p + `tab` -->
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p></p>
</div>

2.4. 分组：()

<!-- div>(header>ul>li*2>a)+footer>p + `tab` -->
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

2.5. 乘法：*

<!-- ul>li*5 + `tab` -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

2.6. 自增符号：$

<!-- ul>li.item$*5 + `tab` -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

<!-- ul>li.item$$$*5 + `tab` -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

<!-- ul>li.item$@-*5 + `tab` -->
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

<!-- ul>li.item$@3*5 + `tab` -->
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

2.7. ID和类属性

<!-- #header + `tab` -->
<div id="header"></div>

<!-- p#header + `tab` -->
<p id="header"></p>

<!-- .title + `tab` -->
<div class="title"></div>

<!-- p.title + `tab` -->
<p class="title"></p>

2.8. 自定义属性

<!-- p[title="Hello world"] + `tab` -->
<p title="Hello world"></p>

2.9. 文本

<!-- a{Click me} + `tab` -->
<a href="">Click me</a>

<!-- p>{Click }+a{here}+{ to continue} + `tab` -->
<p>Click <a href="">here</a> to continue</p>

3. 常用的HTML及CSS缩写方式

3.1. meta

<!-- meta:utf -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!-- meta:vp -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<!-- meta:compat -->
<meta http-equiv="X-UA-Compatible" content="IE=7">

3.2. table

<!-- table+ -->
<table>
    <tr>
        <td></td>
    </tr>
</table>

3.3. css

/* bd+ */
.test{
    border: 1px solid #000;
}

参考资料

酱油能

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录