“一鍵”生成HTML——Emmet插件常用語法

wangtdgoodluck 發布于2019-08-01 15:00 / 1571人閱讀

摘要：是一款文本編輯器的插件，用來快速生成復雜的代碼，只要掌握一些常用的語法類似于選擇器，就可以減少重復編碼的工作主要是懶。我個人慣用的是，因此下文介紹的語法僅在測試通過，不過其它平臺應該也不會有什么出入。快捷鍵使用和作為自動生成代碼的觸發器。

Emmet是一款文本編輯器/IDE的插件，用來快速生成復雜的HTML代碼，只要掌握一些常用的語法（類似于CSS選擇器），就可以減少重復編碼的工作（主要是懶）。
我個人慣用的是sublime，因此下文介紹的語法僅在sublime測試通過，不過其它平臺應該也不會有什么出入。

使用Emmet前提：設置當前為HTML語法模式

在sublime中啟用Emmet，必須把當前代碼的語法模式改為HTML，如果本來就是.html文件那就沒問題；如果是新建的文件還沒有保存過的，則需要手動先設置為HTML：

在sublime右下角點擊Plain Text，彈出菜單，選擇HTML。

按下Ctrl + Shift + P，打開命令控制臺，輸入“HTML”，選擇Set Syntax:HTML即可。

快捷鍵

Emmet使用Tab和Ctrl + e作為自動生成HTML代碼的觸發器。

如上圖所示，輸入完生成HTML的語句后，按下Tab或Ctrl + e，即可生成對應的HTML代碼：

Emmet常用語法

Emmet的語法有很多，還為了進一步提高效率而為比較長的標簽都設置了縮寫，我個人認為記住常用的語法即可，縮寫什么的真的是學習成本太高了。

生成HTML結構：!

輸入!按下Tab，即可生成標準的HTML5結構：

實際上也是可以生成HTML4的結構的，但畢竟已經過時了，這里按下不表。

后代：>

div>ul>li

兄弟：+

div>label+input

分組：()

當我們需要寫一些比較復雜的HTML結構時，有兩種方式能實現，其一是上級^，但是我覺得有點逆推的意味，思路上比較繞，不好用；另外一種就是分組()了，這是程序員普遍具有的分治思想的體現。
div>(ul>li)+(ol>li)

重復多個：*

div>ul>li*5

ID：#，類：.

ID和類可以同時使用也可以分別獨立使用：

div#article.container

div#article

div.container

屬性：[attr="val"]

label[for="passwd"]

文本內容：{}

div>a{點這里跳轉}

點這里跳轉

唯一比較常用的縮寫：input:type

在里，type屬性是必定要填的（你忽略type="text"我就鄙視你），而且各個type都還滿常用的，因此這個縮寫可以記一下：input:type等價于input[type="type"]。
因為type屬性可以取的值太多了，這里僅列出幾個常用的作為示例：

input:text

input:radio

input:checkbox

參考資料

Emmet官方文檔

云服務器 GPU云服務器 python常用語法一鍵生成一鍵生成自己的小程序如何生成js插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49705.html

插件分享大會[不定期更新]

摘要：最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。因為基本只有這個插件，才可以設置一個文件夾下三個項目能分別傳到不同的服務器中。在全球最大的同性交友網站中，只要鼠標懸停到一個項目上時，就會在一個彈窗顯示該項目的信息。最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

CastlePeaK 2019-06-28 13:34 評論0 收藏0
插件分享大會[不定期更新]

摘要：最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。因為基本只有這個插件，才可以設置一個文件夾下三個項目能分別傳到不同的服務器中。在全球最大的同性交友網站中，只要鼠標懸停到一個項目上時，就會在一個彈窗顯示該項目的信息。最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

darkbug 2019-08-20 18:56 評論0 收藏0
超好用的谷歌瀏覽器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一個不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內存的，該插件會自動掛起長時間未使用的網頁，來釋放系統資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個不一樣的 GitHub、瀏覽器、...

Rango 2019-08-22 15:45 評論0 收藏0
sublime Text3 前端常用插件

摘要：前端常用插件文件切換提供了一個非常快速的方式來打開新的文件。繼續，在包控制中安裝插件。使用快捷鍵功能檢測并一鍵去除代碼中多余的空格使用安裝插件并重啟，即可自動提示多余空格。 sublime Text3 前端常用插件 - File Switching （文件切換） --- Sublime Text提供了一個非常快速的方式來打開新的文件。只要按下Ctrl+ P并開始輸入你想要打開的文件的...

xcc3641 2019-08-02 16:02 評論0 收藏0