前端開發工具介紹
阿新 • • 發佈：2017-12-06
doc shee -- itl 當前 ade 自動 sersyn style
一、前端開發工具介紹：
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>
前端開發工具介紹