Emmet的學習記錄

前端開發中，我們都知道寫html結構是必須的，但過程卻是費時且無聊的。這是因為往往需要寫大量的html標籤來表現網頁文件。很多時候就一小小段的內容，只為了表現段落結構、文件層次或者頁面語義化，就需要書寫大量的標籤來包裹相應部分內容。有沒有一種效率既高又能按預想的那樣實現html結構呢？有！當然有！用起來賊~~~酸爽。

這本來是乙個外掛程式，由於用它人群實在是太多了，很多編輯器都預設配置了emmet。它通過一些預先規定的語法可以快速構建想要的html結構，而且這些語法大多都是與css一樣的，對於前端開發者實在是友好到爆有木有！！！！

本文就用vscode給大家講解。

語句：輸入html:5後按tab

效果：

在上述寫法前加上標籤名即可，不加預設生成div效果：

語法：在上述語句後加上*標籤個數，然後按tab。

如生成8個

很方便吧，一口氣就給你寫了8！！！行（hhhhhh）

語法：當上述的書寫形式存在多個，可以在這些書寫語塊間夾帶子節點符號（>），兄弟節點符號（+），父節點符號（^），以生成各種複雜的文件結構，如

如果某部分標籤是乙個整體，那麼可以使用英文小括號對其視為乙個整體。如上面的父節點應用樣例還可以這樣子寫：

這樣，(p>span*5)就是乙個整體，這個整體與下面的input是兄弟關係，所以他們之間用+號。

如果標籤內還夾帶內容的話，可以使用大括號{}將內容括住，如：

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

如果需要生成帶屬性的標籤，可以使用中括號，然後在中括號內像往常一樣寫上html鍵值對即可，如：

如果有一系列標籤的內容、屬性、id或者class名存在有規律的遞增序號，那麼可以在emmet語句中夾帶符號$，此時的$相當與序號的佔位符，生成後序號列會自動替換該佔位符。注意該功能必須和重複標籤符號 * 一起使用，以此生成一系列相同標籤。示例如下：

我是第1個段落我是第2個段落我是第3個段落我是第4個段落我是第5個段落我是第6個段落

Emmet的學習記錄

前端Emmet的使用

Emmet外掛程式的使用

學習的記錄

Emmet的學習記錄

前端Emmet的使用

Emmet外掛程式的使用

學習的記錄

相關推薦