Emmet插件的使用方法
Emmet插件官网地址：https://www.emmet.io/
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- 1.上方meta:utf信息更加完善，注释下方信息 -->
<!-- <meta charset="UTF-8"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 上方是视口信息，生成方式为meta:vp，注释下方信息 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 上方meta信息是为兼容IE8，生成方式为meta:compat -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7"> -->
<!-- link:css -->
<link rel="stylesheet" href="style.css">
<!-- script:src -->
<script src=""></script>
<title>Document</title>
</head>
<body>
<!-- html或者！可以生成html5文档结构 -->
<!-- 1.生成带有类样式的标签 -->
<!-- p.info -->
<p class="info"></p>
<!-- div.red -->
<div class="red"></div>
<!-- div为默认标签,所以.red -->
<div class="red"></div>
<!-- 2.生成带id的标签 -->
<!-- div#header -->
<div id="header"></div>
<!-- #header -->
<div id="header"></div>
<!-- 3.a标签 -->
<!-- a:link -->
<a href="http://"></a>
<!-- a:mail -->
<a href="mailto:"></a>
<!-- 4.根据位置关系生成标签 -->
<!-- 同级标签 -->
<!-- h2.header+p.info -->
<h2 class="header"></h2>
<p class="info"></p>
<!-- 后代标签，也叫下线标签 -->
<!-- ul>li -->
<ul>
<li></li>
</ul>
<!-- ul>li+li+li -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 生成上级标签 -->
<!-- h2>span^p.info -->
<h2><span></span></h2>
<p class="info"></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>
<!-- 重复生成，前端工程师的最爱 -->
<!-- ul>li*6 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 快速生成8个列表项的导航 -->
<!-- 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>
<!-- 给标签自动添加编号或排序：$,@ -->
<!-- ul.list>li.item*8>a{导航$} -->
<ul class="list">
<li class="item"><a href="">导航1</a></li>
<li class="item"><a href="">导航2</a></li>
<li class="item"><a href="">导航3</a></li>
<li class="item"><a href="">导航4</a></li>
<li class="item"><a href="">导航5</a></li>
<li class="item"><a href="">导航6</a></li>
<li class="item"><a href="">导航7</a></li>
<li class="item"><a href="">导航8</a></li>
</ul>
<!-- 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>
</body>
</html>
