版权声明：本文为博主原创文章，仅供学习交流，未经博主允许不得转载。 https://blog.csdn.net/zjy_android_blog/article/details/81810116
本人使用的代码编辑工具是SublimeText，Emmet是一个代码的缩写插件，使用代码缩写快速完成代码编写，前提条件需要安装emmet插件，如下图，打开SublimeText 使用快捷键 Ctrl + Shift + P，显示 Package Control功能，你也可以直接在 首选项>>Package Control 使用功能，输入 install ，选择第一项，鼠标单击：
输入Emmet，选择第一个，稍等片刻，窗口左下角会有来回移动的加载动画
安装完成会弹出配置文件，你可以在Package Control中输入remove，点击remove package，再输入Emmet，就可以看到这个插件出现在可删除的列表里，说明插件安装成功。
下面是快捷缩写的使用方式：
<!DOCTYPE html>
<html lang="en">
<!-- 以下注释中的代码缩写，都是输入之后按tab键才会自动补全 -->
<head>
<!-- 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=edge">
<!-- link:css -->
<link rel="stylesheet" href="style.css">
<script src="bootstrap"></script>
<!-- <meta charset="UTF-8"> -->
<title>Document</title>
</head>
<body>
<!-- 以下都是输入之后按tab键才会自动补全 -->
<p>1. 生成带类样式的标签 "." </p>
<!-- p.info -->
<p class="info"></p>
<!-- .red -->
<div class="red"></div>
<p>2. 生成带ID的标签 "#" </p>
<!-- h2#header -->
<h2 id="header"></h2>
<!-- #header -->
<div id="header"></div>
<p>3. a标签 ":"</p>
<a href=""></a>
<!-- a:link -->
<a href="http://"></a>
<p>4. 根据标签之间的位置关系来生成标签 "+" ">" </p>
<!-- 生成同级别兄弟标签 h2.header+p.info -->
<h2 class="header"></h2>
<p class="info"></p>
<!-- 后代标签，也叫下级标签 -->
<!-- ul>li+li -->
<ul>
<li></li>
<li></li>
</ul>
<!-- 生成当前标签的父级，也叫上级标签 -->
<!-- h2>span^p.info -->
<h2><span></span></h2>
<p class="info"></p>
<p>5. 可以在生成标签时，创建内部的文本</p>
<!-- a{php中文网} -->
<a href="">php中文网</a>
<!-- p[title="这是一段说明文字"] -->
<p title="这是一段说明文字"></p>
<!-- a[href="http://www.php.cn"]{php中文网} -->
<a href="http://www.php.cn">php中文网</a>
<p>6. 重复生成功能</p>
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>7. 快速生成有8个列表项的导航：</p>
<!-- ul.list>li.item*8>a{导航} -->
<ul class="list">
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
</ul>
<p>8. 给标签自动添加编号或者排序：$(编号),@(升降序)</p>
<!-- ul.list>li.item*8>a{导航$$} -->
<ul class="list">
<li class="item"><a href="">导航01</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航08</a></li>
</ul>
<!-- ul.list>li.item*8>a{导航$$@-} -->
<ul class="list">
<li class="item"><a href="">导航08</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航01</a></li>
</ul>
<!-- ul.list>li.item*8>a{导航$$@100} -->
<ul class="list">
<li class="item"><a href="">导航100</a></li>
<li class="item"><a href="">导航101</a></li>
<li class="item"><a href="">导航102</a></li>
<li class="item"><a href="">导航103</a></li>
<li class="item"><a href="">导航104</a></li>
<li class="item"><a href="">导航105</a></li>
<li class="item"><a href="">导航106</a></li>
<li class="item"><a href="">导航107</a></li>
</ul>
<!-- ul.list>li.item*8>a{导航$$$$@100} -->
<ul class="list">
<li class="item"><a href="">导航0100</a></li>
<li class="item"><a href="">导航0101</a></li>
<li class="item"><a href="">导航0102</a></li>
<li class="item"><a href="">导航0103</a></li>
<li class="item"><a href="">导航0104</a></li>
<li class="item"><a href="">导航0105</a></li>
<li class="item"><a href="">导航0106</a></li>
<li class="item"><a href="">导航0107</a></li>
</ul>
<!-- ul.list>li.item*8>a{导航$$$$@-100} -->
<ul class="list">
<li class="item"><a href="">导航0107</a></li>
<li class="item"><a href="">导航0106</a></li>
<li class="item"><a href="">导航0105</a></li>
<li class="item"><a href="">导航0104</a></li>
<li class="item"><a href="">导航0103</a></li>
<li class="item"><a href="">导航0102</a></li>
<li class="item"><a href="">导航0101</a></li>
<li class="item"><a href="">导航0100</a></li>
</ul>
</body>
</html>