前端开发工具介绍

一、前端开发工具介绍：

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>

　　

posted @ 2017-12-06 11:53  滴水穿石！  阅读(288)  评论(0)    收藏  举报