1、前端開發工具介紹:php
1.chrome谷歌瀏覽器的訪問助手安裝和激活;
2.sublime text3編輯器的配置與插件安裝;
3.Atom編輯器的配置與插件、主題的安裝與卸載;
4.瀏覽器的實時刷新工具BrowserSync的安裝與配置;
5.前端神器Emmet插件的使用技巧;css
具體介紹第5點.前端神器Emmet插件的使用技巧html
<!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>