首先，想要快速编码需 要在编辑器中安装常用插件，下面是emmet插件的使用：
html5文档结构的生成方式：
1）、!+tab键
2）、html:5 +tab键
头部head中meta字符集的生成：
1）、 meta:utf + tab键 生成：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
2）、meta:vp +tab键 生成 ： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 浏览器视口
3）、meta:compat + tab键 生成 ： <meta http-equiv="X-UA-Compatible" content="IE=8"> 兼容到浏览器IE8
4）、link:css +tab 键 生成 ： <link rel="stylesheet" href="style.css">
5）、script:src + tab 键 生成：<script src=""></script>
内容body中emmet插件的使用：
1）、生成带类样式的标签 p.text +tab键
生成 <p class="text"></p>
2）、生成带ID样式的标签 p#text +tab键
生成 <p id="text"></p>
3）、 a标签生成url前缀 a:link+tab键
生成： <a href="http://"></a>
a标签是邮箱地址 a:mail+tab键
<a href="mailto:"></a>
4）、根据标签间位置关系生成标签
a)、生成同级，兄弟标签，p标签后第一个兄弟元素 p.box+span.box +tab 键
生成：
<p class="box"></p>
<span class="box"></span>
b)、后代标签 ul > li +tab键
如果生成多个相同的后代标签 eg ul > li*4 +tab键 ；表示生成4个li
c)、生成当前标签的父级，也叫上级标签 h2 > span.haha^div.info +tab键 即h2与 div是同级元素
生成 ：
<h2><span class="haha"></span></h2>
<div class="info"></div>
5)、生成标签时同时生成内部文本 a{文本内容}+tab键
生成： <a href="">php中文网</a>
6）、生成标签时，同时生成一些属性 p[title = ‘这是一段说明‘] +tab键
生成 ：<p title="这是一段说明" ></p>
生成标签时，属性与文本内容也直接生成 例如 a[href=‘www.baidu.com‘]{百度搜索} +tab 键
生成 ： <a href="www.baidu.com">百度搜索</a>
7）、快速生成一个有8个列表项的导航 例如 ul.list>li.items*8>a{导航栏信息} +tab键
生成 ：
<ul class="list"> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> <li class="items"><a href="">导航栏信息</a></li> </ul>
8）、给标签自动添加编号或者排序: $,@
a)、ul.list>li.items*5>a{导航栏$}+tab键
<ul class="list"> <li class="items"><a href="">导航栏1</a></li> <li class="items"><a href="">导航栏2</a></li> <li class="items"><a href="">导航栏3</a></li> <li class="items"><a href="">导航栏4</a></li> <li class="items"><a href="">导航栏5</a></li> </ul>
ul.list>li.items*5>a{导航栏$$} +tab键
<ul class="list"> <li class="items"><a href="">导航栏01</a></li> <li class="items"><a href="">导航栏02</a></li> <li class="items"><a href="">导航栏03</a></li> <li class="items"><a href="">导航栏04</a></li> <li class="items"><a href="">导航栏05</a></li> </ul>
ul.list>li.items*5>a{导航栏$$$} +tab 键
//给标签自动添加编号或者排序: $,@ <ul class="list"> <li class="items"><a href="">导航栏001</a></li> <li class="items"><a href="">导航栏002</a></li> <li class="items"><a href="">导航栏003</a></li> <li class="items"><a href="">导航栏004</a></li> <li class="items"><a href="">导航栏005</a></li> </ul>
b) ul.list>li.items*5>a{导航栏[email protected]} + tab键 ----表示降序显示列表项
//ul.list>li.items*5>a{导航[email protected]}+tab键
<ul class="list">
<li class="items"><a href="">导航栏05</a></li>
<li class="items"><a href="">导航栏04</a></li>
<li class="items"><a href="">导航栏03</a></li>
<li class="items"><a href="">导航栏02</a></li>
<li class="items"><a href="">导航栏01</a></li>
</ul>
c)、从指定的编号开始，@后跟数字 ul.list>li.items*5>a{导航栏[email protected]} ---表示从100开始
<ul class="list"> <li class="items"><a href="">导航栏100</a></li> <li class="items"><a href="">导航栏101</a></li> <li class="items"><a href="">导航栏102</a></li> <li class="items"><a href="">导航栏103</a></li> <li class="items"><a href="">导航栏104</a></li> </ul>
更多emmet的 用法可以去官网了解
原文地址：https://www.cnblogs.com/lvxisha/p/9747120.html