資訊專欄INFORMATION COLUMN
摘要：是一款文本編輯器的插件，用來快速生成復雜的代碼，只要掌握一些常用的語法類似于選擇器，就可以減少重復編碼的工作主要是懶。我個人慣用的是，因此下文介紹的語法僅在測試通過，不過其它平臺應該也不會有什么出入?？旖萱I使用和作為自動生成代碼的觸發(fā)器。
Emmet是一款文本編輯器/IDE的插件，用來快速生成復雜的HTML代碼，只要掌握一些常用的語法（類似于CSS選擇器），就可以減少重復編碼的工作（主要是懶）。
我個人慣用的是sublime，因此下文介紹的語法僅在sublime測試通過，不過其它平臺應該也不會有什么出入。
在sublime中啟用Emmet，必須把當前代碼的語法模式改為HTML，如果本來就是.html文件那就沒問題；如果是新建的文件還沒有保存過的，則需要手動先設置為HTML：
在sublime右下角點擊Plain Text，彈出菜單，選擇HTML。
按下Ctrl + Shift + P，打開命令控制臺，輸入“HTML”，選擇Set Syntax:HTML即可。
Emmet使用Tab和Ctrl + e作為自動生成HTML代碼的觸發(fā)器。
如上圖所示，輸入完生成HTML的語句后，按下Tab或Ctrl + e，即可生成對應的HTML代碼：
Emmet的語法有很多，還為了進一步提高效率而為比較長的標簽都設置了縮寫，我個人認為記住常用的語法即可，縮寫什么的真的是學習成本太高了。
生成HTML結(jié)構(gòu)：!輸入!按下Tab，即可生成標準的HTML5結(jié)構(gòu)：
實際上也是可以生成HTML4的結(jié)構(gòu)的，但畢竟已經(jīng)過時了，這里按下不表。
div>ul>li
兄弟：+
div>label+input
分組：()
當我們需要寫一些比較復雜的HTML結(jié)構(gòu)時，有兩種方式能實現(xiàn)，其一是上級^，但是我覺得有點逆推的意味，思路上比較繞，不好用；另外一種就是分組()了，這是程序員普遍具有的分治思想的體現(xiàn)。
div>(ul>li)+(ol>li)
重復多個：*
div>ul>li*5
ID：#，類：.
ID和類可以同時使用也可以分別獨立使用：
div#article.container
div#article
div.container
label[for="passwd"]
div>a{點這里跳轉(zhuǎn)}
在里，type屬性是必定要填的（你忽略type="text"我就鄙視你），而且各個type都還滿常用的，因此這個縮寫可以記一下：input:type等價于input[type="type"]。
因為type屬性可以取的值太多了，這里僅列出幾個常用的作為示例：
input:text
input:radio
input:checkbox
Emmet官方文檔
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49705.html
摘要：最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。因為基本只有這個插件，才可以設置一個文件夾下三個項目能分別傳到不同的服務器中。在全球最大的同性交友網(wǎng)站中，只要鼠標懸停到一個項目上時，就會在一個彈窗顯示該項目的信息。 最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...
摘要：最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。因為基本只有這個插件，才可以設置一個文件夾下三個項目能分別傳到不同的服務器中。在全球最大的同性交友網(wǎng)站中，只要鼠標懸停到一個項目上時，就會在一個彈窗顯示該項目的信息。 最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...
摘要：分享一些超好用插件，打造一個不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內(nèi)存的，該插件會自動掛起長時間未使用的網(wǎng)頁，來釋放系統(tǒng)資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個不一樣的 GitHub、瀏覽器、...
摘要：前端常用插件文件切換提供了一個非常快速的方式來打開新的文件。繼續(xù)，在包控制中安裝插件。使用快捷鍵功能檢測并一鍵去除代碼中多余的空格使用安裝插件并重啟，即可自動提示多余空格。 sublime Text3 前端常用插件 - File Switching （文件切換） --- Sublime Text提供了一個非?？焖俚姆绞絹泶蜷_新的文件。只要按下Ctrl+ P并開始輸入你想要打開的文件的...
閱讀 2092·2021-10-11 10:59
閱讀 936·2021-09-23 11:21
閱讀 3571·2021-09-06 15:02
閱讀 1623·2021-08-19 10:25
閱讀 3380·2021-07-30 11:59
閱讀 2376·2019-08-30 11:27
閱讀 2589·2019-08-30 11:20
閱讀 2980·2019-08-29 13:15
