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>[email protected]*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>[email protected]*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;
}参考资料
时间： 2024-10-23 06:01:59