曾經(jīng)看見一位學(xué)長在PHP-Storm上輸入一段奇怪的代碼，當他按下了Tab鍵后菩收，神奇的事情就發(fā)生了梨睁。
如果HTML也是一種編程語言的話，私以為Html會是我們接觸到的最多的編程語言娜饵∑潞兀可能有人并不知道什么是HTML（超文本標記語言），但是當他人生中第一次上網(wǎng)打開瀏覽器瀏覽網(wǎng)頁的時候，他與HTML的邂逅就開始了……只是當初遍坟，他不知道紛繁絢麗的網(wǎng)頁的背后拳亿，是HTML語言在默默支撐；
HTML+JS+CSS是前端的三大語言政鼠。如果把網(wǎng)頁比作人的話风瘦，HTML給了人以骨架，CSS未知賦予了血肉公般、發(fā)膚以至衣物万搔、妝飾，而JS則給了他運動的靈魂官帘。
這邊文章從HTML講起瞬雹，對于HTML的基本知識在此就不便贅述了，Google一下刽虹，你就知道酗捌。在此，我主要講的是怎樣快捷地搭建起HTML的骨架涌哲。
把HTML比作骨架并非我心血來潮胖缤，我只是在告訴自己寫HTML頁面要有搭框架的意識。不瞞你說阀圾，我以前的HTML的代碼都是拼湊而成的哪廓。哪里不對改哪里，效率很低初烘。正向箭頭 + 標簽名+反響箭頭這種重復(fù)的代碼涡真，寫多了就覺得膩了。那么有沒有什么快捷的方式讓我們關(guān)注HTML的架構(gòu)本身肾筐，而不是繁雜的html語言本身呢哆料？
用Emmet Tab一下
Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發(fā)的話吗铐，對該插件一定不會陌生东亦。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度
Emmet 的語法極客人目前還只是剛剛?cè)腴T唬渗，這里主要是拋磚引玉一下典阵，給大家?guī)讉€例子。
- ** 輸入“!”或“html:5”谣妻，然后按Tab鍵： **
- ** 連續(xù)輸入元素名稱和ID，比如輸入p.foo： **
還有一些較復(fù)雜的用法大家自行研究卒稳，在此不做贅述蹋半，因為我的作用就是拋磚引玉，勾起大家的興趣充坑。
** 要見證奇跡的話建議自己親手試一下＜踅染突！**
一個例子：實現(xiàn)列表
我要實現(xiàn)的效果如下：
按照搭建骨架的意識，我們得弄清這個列表的結(jié)構(gòu)是什么樣子：
** 最外層一個無序列表辈灼，這個無序列表每個列表項都嵌套一個有序列表份企，這個有序列表有兩個列表項，每個列表項含有個無序列表
**
Emmet語法如下：
ul>((li>ol>(li>ul>li*2)*2)*2)
Tab一下：
然后把文字填進去
<ul>
<li>Javascript
<ol>
<li>第一章
<ul>
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul>
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul>
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul>
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
效果預(yù)覽
<ul> <li>Javascript <ol> <li>第一章 <ul> <li>const</li> <li>let</li> </ul> </li> <li>第二章 <ul> <li>function</li> <li>object</li> </ul> </li> </ol> </li> <li>Java <ol> <li>第一章 <ul> <li>class</li> <li>package</li> </ul> </li> <li>第二章 <ul> <li>private</li> <li>public</li> </ul> </li> </ol> </li></ul>
參考文章：
