Emmet快速語法—助力HTML/CSS一行程式碼一個頁面
學會之後牛掰的場景如下
我們的目標就是用一行程式碼=>寫下面這樣的長長長長的HTML結構來.
如：table>(thead.text>th{手機1}*4)+(tbody.text$*4>td{曉龍865}*4)+tfoot.test>td
<table> <thead class="text"> <th>手機1</th> <th>手機1</th> <th>手機1</th> <th>手機1</th> </thead> <tbody class="text1"> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> </tbody> <tbody class="text2"> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> </tbody> <tbody class="text3"> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> </tbody> <tbody class="text4"> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> <td>曉龍865</td> </tbody> <tfoot class="test"> <td></td> </tfoot> </table>
甚至是一行程式碼寫頁面的結構
(抱歉！！！這個地方沒有圖，我也懶得傳圖床，反正就是直接一個頁面出來了，大大的牛逼克拉斯！)
ul>(li>a[href=#]>img[src=img/pro/$.jpg]+div.right>div.title+div.money+div>span.love+span.num)*9
<ul> <li><a href="#"> <img src="img/pro/1.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/2.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/3.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/4.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/5.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/6.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/7.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/8.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> <li><a href="#"> <img src="img/pro/9.jpg" alt=""> <div class="right"> <div class="title"></div> <div class="money"></div> <div><span class="love"></span><span class="num"></span></div> </div> </a></li> </ul>
Emmet語法—助力HTML/CSS快到起飛
1.概述
在前端開發的過程中， HTML、CSS 程式碼中大量重複的標籤、屬性、括號等，讓人頭疼。
這裡推薦一個Emmet語法規則，能大大提高程式碼書寫，只需要敲一行程式碼就能生成你想要的完整HTML結構，或者你想要的程式碼塊。簡單來說用這個快速語法能快速寫HTML/CSS快到起飛，減少重複操作。
Emmet是一款外掛，能裝就能用現在基本寫前端的都在用,我們平時開發的Sublime Text、Eclipse、Notepad++、VS code、Hbuilder、Atom、Dreamweaver等等編輯器都可以使用。
例子：
比如以前寫這段，怎麼也要一分鐘吧！
<div> <ul> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> </ul> <ul> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> </ul> </div>現在只需要10秒以內就可以搞定。
div>ul*3>li{你好，我是Lisa}*3+Tab鍵還有複雜一點的,比如這個
<div class="box"> <p id="title"> <ul> <li class="child1">我是第1個</li> <li class="child2">我是第2個</li> <li class="child3">我是第3個</li> <li class="child4">我是第4個</li> </ul> <div class="box2"></div> </p> </div>只需要輸入
div.box>p#title>ul>li.child${我是第$個}*4^div.box2+Tab鍵。
2.語法講解
1.HTML的初始結構
直接 "!"+Tab ,防止徒手寫出錯。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
2.id(#),class(.)
id指令：# ； class指令：.；
div#title
<div id="title"></div>
div.title
<div class="title"></div>
niha
3.子節點>、兄弟節點+、上級節點^、
子節點指令：>,兄弟節點指令：+,上級節點指令：^。
div>ul>li>p
<div>
<ul>
<li>
<p></p>
</li>
</ul>
</div>
div+ul+p
<div></div>
<ul></ul>
<p></p>
- div>ul>li^div (這裡的
^是接在li後面所以在li的上一級，與ul成了兄弟關係,當然兩個^^就是上上級）
<div>
<ul>
<li></li>
</ul>
<div></div>
</div>
4.重複*
重複指令*(*號後面數字就是重複的元素數量)
- div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
5.分組()
分組指令:()
- div>(ul>li>a)+div>p (括號內部為一個程式碼塊，表示括號內部巢狀與外邊的層級無關)
<div>
<ul>
<li><a href="#"></a></li>
</ul>
<div>
<p></p>
</div>
</div>
如果不寫括號，那
a標籤和div標籤就是兄弟關係
<div>
<ul>
<li>
<a href="#"></a>
<div>
<p></p>
</div>
</li>
</ul>
</div>
6.屬性[attr]
id、class都有，肯定少不了屬性呀！
屬性指令:
[]
a[href=# name=小明](中括號內填寫鍵值對的形式，並且用空格隔開)
<a href="#" name="小紅"></a>
7.編號$
編號指令：$
-
ul>li.text$*3 (
$代表一位數，後面加上*3就代表這從1遞增到填寫的數字)<ul> <li class="text1"></li> <li class="text2"></li> <li class="text3"></li> </ul>一個$就是一位數，兩個$就是兩位數，$$$就是三位數
-
ul>li.text$$$*3
<ul> <li class="text001"></li> <li class="text002"></li> <li class="text003"></li> </ul> -
自定義數字遞增
從幾開始遞增可以寫成：**$@+數字*數字 **
ul>li.text$@3*3<ul> <li class="text3"></li> <li class="text4"></li> <li class="text5"></li> </ul>
8.文字{}
文字指令： {}
-
ul>li.text${測試$}*3 (裡面填寫內容，可以和
$組合使用)<ul> <li class="text1">測試1</li> <li class="text2">測試2</li> <li class="text3">測試3</li> </ul>
9.隱式標籤
這個標籤沒有指令，而是部分標籤可以不使用輸入標籤，直接輸入指令，即可識別父類標籤。
(1)如預設div，.test
<div class="test"></div>
(2)li:可以在ul和ol中使用 li>.test$*3
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
(3)option:可在select中使用 select>.test$*3
<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
</select>
tr：可在 table、tbody、thead 和 tfoot 中使用
td：可在 tr 中使用
如：table>(thead.text>th{手機1}*4)+(tbody.text$*4>td{曉龍865}*4)+tfoot.test>td
<table>
<thead class="text">
<th>手機1</th>
<th>手機1</th>
<th>手機1</th>
<th>手機1</th>
</thead>
<tbody class="text1">
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
</tbody>
<tbody class="text2">
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
</tbody>
<tbody class="text3">
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
</tbody>
<tbody class="text4">
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
<td>曉龍865</td>
</tbody>
<tfoot class="test">
<td></td>
</tfoot>
</table>
我們的目標就是用一行程式碼=》寫出來這樣的長長長長的HTML結構來.