码迷,mamicode.com
首页 > 其他好文 > 详细

前端开发工具介绍

时间:2017-12-06 13:02:24      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:lis   技巧   text   tle   abc   编辑   styles   前端   安装   

一、前端开发工具介绍:

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>

  

前端开发工具介绍

标签:lis   技巧   text   tle   abc   编辑   styles   前端   安装   

原文地址:http://www.cnblogs.com/qinglin/p/7991982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!