Sublime 插件 快捷键
标签（空格分隔）： sublime
<!-- html:4s -->
<!-- ! ctrl+e -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link -->
<link rel="stylesheet" type="text/css" href="">
<!-- script:src -->
<script src=""></script>
<style type="text/css">
div{
/*w30*/
width: 30px;
/*h30*/
height: 30px;
/*mg30*/
margin: 30px;
/*pd30*/
padding: 30px;
/*lh12px*/
line-height: 12px;
/*bg*/
background: #000;
/*bgc*/
background-color: #fff;
/*渐变*/
/*lg(left, #fff 50%, #000) */
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);
/*fz*/
font-size: 20px;
/*fs*/
font-style: italic;
}
</style>
</head>
<body>
<!-- 嵌套操作 -->
<!-- 1.使用“>”生成子元素 -->
<!-- div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>
<!-- 2.使用“+”生成兄弟元素 -->
<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>
<!-- 3.^表示向上一级,^^表示两级-->
<!-- div+div>p>span+em^bq -->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
<!-- 4.使用“*”生成多个相同元素 -->
<!-- div>ul>li*5 -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 5.使用“()”将元素分组 -->
<!-- div>(header>ul>li*2)+footer>p -->
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
<!-- 属性操作 -->
<!-- 1.id与class：元素与 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.使用“[]”标记其他属性 -->
<!-- td[title='hello' colspan=3] -->
<td title="hello" colspan="3"></td>
<!-- 3.用“$”符号实现1到n的自动编号（“*”实现多个元素） -->
<!-- li.item$*3 -->
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<!-- 可在 “$” 后添加 “@n” 修改编号的起始值为n -->
<!-- li.item$@3*3 -->
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<!-- 可在 “$” 后添加 “@-” 修改编号的方向 -->
<!-- li.item$@-3*3 -->
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<!-- 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>
<!-- 4.用“{}”添加文本内容 -->
<!-- a[href=me.htm]{click me} -->
<a href="me.htm">click me</a>
<!-- 填充内容 -->
<!-- h$[title=item$]{Header $}*3 -->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<!-- ul>li.item$$${item $}*5 -->
<ul>
<li class="item001">item 1</li>
<li class="item002">item 2</li>
<li class="item003">item 3</li>
<li class="item004">item 4</li>
<li class="item005">item 5</li>
</ul>
<!-- img -->
<img src="">
<!-- inp -->
<input type="" name="">
<!-- input:p -->
<input type="password" name="" id="">
<!-- btn -->
<button></button>
<!-- btn:s -->
<button type="submit"></button>
<!-- btn:r -->
<button type="reset"></button>
<!-- 随机文字 -->
<!-- lorem -->
<!-- h1>lorem10 -->
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, perspiciatis.</h1>
<!-- 下一个编辑点”(Ctrl+Alt+→) “前编辑点”(Ctrl+Alt+←) -->
</body>
</html>