1. 聊點(diǎn)閑話
今天大數(shù)據(jù)課程學(xué)習(xí)到前端可視化技術(shù)（拉勾教育大數(shù)據(jù)開發(fā)訓(xùn)練營），終于開始接觸我不熟悉的內(nèi)容了。
今天的課程主要包括HTML，CSS，JavaScript，JQuery，Ajax，Vue，Highcharts，ECharts...
好吧，說了一堆跟我的主題沒有用的東西。
學(xué)習(xí)html之后，對(duì)于我們程序員而言如何能快速愉快的碼代碼，節(jié)約出來的時(shí)間就能做更多的事情，學(xué)更多的知識(shí)，今天給大家科普一個(gè)HTML速寫語法規(guī)則，可以讓我們更愉快的寫出html代碼。
什么是 Emmet 語法?簡單來說，就是可以快速構(gòu)建 HTML 結(jié)構(gòu)的快捷語法。Emmet目前支持多種編輯器，包括一些主流編輯器和IDE，在線編輯器以及第三章插件的的支持。
下面我會(huì)通過使用VSCODE來給大家演示具體的一些語法使用。
在新建文檔為html后綴的前提下，編輯器會(huì)幫你選擇合適的插件（這里我已經(jīng)安裝了HTML CSS Support插件）
新建emmet.html，鍵入
輸入
html:5或者!按Tab或者回車，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
接下來我們先測試一下，體會(huì)一下Emmet的優(yōu)越性
輸入
h1#a+h2#b+div.fa>div.child$$*3>span#say+span#talk+img.avaer[src=./img/$$.png alt={img $}],按Tab或者回車，效果如下：
<h1 id="a"></h1>
<h2 id="b"></h2>
<div class="fa">
<div class="child01">
<span id="say"></span>
<span id="talk"></span>
<img src="./img/01.png" alt="img 1" class="avaer">
</div>
<div class="child02">
<span id="say"></span>
<span id="talk"></span>
<img src="./img/02.png" alt="img 2" class="avaer">
</div>
<div class="child03">
<span id="say"></span>
<span id="talk"></span>
<img src="./img/03.png" alt="img 3" class="avaer">
</div>
</div>
是不是感覺很強(qiáng)大，熟練使用以后，可以極大程度上加快我們編寫HTML代碼的速度。
2.規(guī)則
2.1 使用"#"輸入id，"."輸入class，"[]"輸入屬性
div#main.content
<div id="main" class="content"></div>
div#main.content.user
<div id="main" class="content user"></div>
div.content[alter=click]
<div class="content" alter="click"></div>
2.2 使用">"輸入下級(jí)元素，"+"同級(jí)元素，"^"上一級(jí)元素
div>span
div+div
div>ul>li^h1
<div><span></span></div>
<div></div>
<div></div>
<div>
<ul>
<li></li>
</ul>
<h1></h1>
</div>
2.3 使用"*"重復(fù)，"()"分組
div#father>ul>li.child*3
<div id="father">
<ul>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
</ul>
</div>
(div#father1>ul>li.child3)+(div#father2>ul>li.child4)
<div id="father1">
<ul>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
</ul>
</div>
<div id="father2">
<ul>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
</ul>
</div>
2.4 使用"$"進(jìn)行自增，使用@修飾可以完成修改起始數(shù)
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
注意： 每一個(gè)$代表一位數(shù)字
ul>li.item$$$@10*5
<ul>
<li class="item010"></li>
<li class="item011"></li>
<li class="item012"></li>
<li class="item013"></li>
<li class="item014"></li>
</ul>
2.5 使用"{}"文本編輯
ul>li.item$$*3{我是第$個(gè)li標(biāo)簽}
<ul>
<li class="item01">我是第1個(gè)li標(biāo)簽</li>
<li class="item02">我是第2個(gè)li標(biāo)簽</li>
<li class="item03">我是第3個(gè)li標(biāo)簽</li>
</ul>
注意： 可以和$配合使用
ul>li.item$$$@10*5
<ul>
<li class="item010"></li>
<li class="item011"></li>
<li class="item012"></li>
<li class="item013"></li>
<li class="item014"></li>
</ul>
2.6 隱式標(biāo)簽
- div標(biāo)簽
#id.classname
<div id="id" class="classname"></div>
- ul和ol的子標(biāo)簽li
ul>#child$*3
<ul>
<li id="child1"></li>
<li id="child2"></li>
<li id="child3"></li>
</ul>
ol>.child*3
<ol>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
</ol>
select#type[name=ceshi]>#id$*3
<select name="ceshi" id="type">
<option id="id1"></option>
<option id="id2"></option>
<option id="id3"></option>
</select>
諸如此類的隱式標(biāo)簽還有
- tr：用于 table、tbody、thead 和 tfoot
- td：用于 tr
- option：用于 select 和 optgroup
3. 總而言之...
Emmet的語言規(guī)則不復(fù)雜，看完了記得去多寫幾遍，記住并熟練使用你也一樣可以出去裝個(gè)小逼了~~
