一、前端开发工具介绍：
1.chrome谷歌浏览器的访问助手安装和激活；
2.sublime text3编辑器的配置与插件安装；
3.Atom编辑器的配置与插件、主题的安装与卸载；
4.浏览器的实时刷新工具BrowserSync的安装与配置；
5.前端神器Emmet插件的使用技巧；
具体介绍第5点.前端神器Emmet插件的使用技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端神器Emmet插件的使用技巧</title>
<script src=""></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--5.1 html:5或者！可以生成html5文档结构-->
<!--5.2. link:css,script:src 可以生成css和js的调用样式-->
<p>5.3. 生成带类样式标签：div#book</p>
<div class="book"></div>
<p>5.4. 生成带ID的标签：div.book</p>
<div class="book"></div>
<p>5.5 a标签</p>
<a href=""></a>
<a href="http://"></a>
<a href="mailto:"></a>
<p>5.6 根据标签之间的位置关系来生成标签</p>
<!-- 生成同级，兄弟标签 h2.header+p.info-->
<h2 class="header"></h2>
<p class="info"></p>
<!--后代标签，也叫下线标签 ul>li*数量 -->
<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 生成当前标签的父级标签，也是上级标签 h2>span^p.info-->
<h2><span></span></h2>
<p class="info"></p>
<!-- 生成标签的时候，同时生成内部文本-->
<!-- {} -->
<a href="">php中文网</a>
<!-- [] -->
<p title="这是一段说明文字"></p>
<a href="http://www.abc.com"></a>
<p>重复生成功能:*</p>
<!--快速生成一个8个列表的导航-->
ul.list>li.item*8>a{导航}
给标签自动添加编号或者排序:$,@
ul.list>li.item*8>a{导航$}
ul.list>li.item*8>a{导航$$@-}
ul.list>li.item*8>a{导航$$@100}
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>