前端開發工具介紹

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>
相關文章
相關標籤/搜索