Emmet 是書寫 HTML 元素時的簡易標記，它有各種規則，幫助你快速生成 HTML 標簽。

比如僅輸入一個!, 再按下鍵盤上的Tab按鍵，一個HTML基本模板就生成了（前提是安裝了 Emmet 插件）。

偉大的 VS Code 內置了這個插件。

如果當時老師有這么個酷酷的東西，我可能就不會對.jsp混亂的標記的學習感到厭煩了。

最重要的：解決了什么問題

規則的細枝末節是其次的，想想它解決了什么問題？

書寫 HTML 標簽時冗余的尖括號，屬性名，鼠標頻繁的定位操作、重復的封閉標簽、重復的標簽名等等

所以相應的簡便方法自然而然就產生了，根本不需要死記硬背：

針對尖括號，采取只寫標簽名，用Tab鍵補全封閉標簽和一萬個尖括號。

針對鼠標定位，采取幾個定位符號來邏輯上表明其位置。

針對某個重復的標簽名，采取數量符號進行標記。 等等。。

想清楚為什么，也就知道該怎么做了。根據二八法則，只列最有用的，畢竟我們要學語文沒必要認識新華字典里的所有字。

單個標簽

創建單個標簽

鍵入元素名， Tab補全

增加標簽內的屬性

id：a#alpha

class：a.beta.gamma

attribute：a[title=hello]

增加單個標簽的內容

a{你好！}

指定單個標簽的數量

• ul>li*3

兩個元素之間

兩個元素間的三種關系：下一級、同一級、跳至上級接著寫

改變作用域，優先級不同：（）

child >

• nav>ul>li

<nav><ul><li></li></ul> </nav> 復制代碼

sibling +

• nav+main+footer

<nav></nav> <main></main> <footer></footer> 復制代碼

climb-up ^

爬升一層接著寫

• p>span+em^bq

<p><span></span><em></em></p> <blockquote></blockquote> 復制代碼

Grouping ()

指定優先級為一組

• div>(header>ul>li*2>a)+footer>p

Item numbering $

• ul>li.argument$*3

<ul><li class="argument1"></li><li class="argument2"></li><li class="argument3"></li> </ul> 復制代碼

可以用在內容、類名、id名、屬性名中

$可以被以下代替：

• $$$
  • 代表三位數字：001、002、003
• $@-
  • 倒序排列，3、2、1
• $@3
  • @第三個位置開始， 3、4、5

其他常用

各種特定屬性的默認用法：

• a:link
• a:mail
• link:css
• meta:utf
• meta:vp
• input:submit

CSS 中的屬性一般都是音節首字母開頭, 再按Tab鍵

dib: display:inline-block

lh: line-height

以此類推

最后一個例子： 生成Table

一個帶表名、表頭、表尾、中間數據是10行5列的表！

table>caption{表名}+thead>tr*1>th*5{表頭$}^^tbody>tr*10>td*5{$$$}^^tfoot>tr*1>td{總計：}+td*4

附代碼

CSS樣式

* {padding: 0;border: 0;margin: 0; } table {width: 100%;font-size: 1em;border-collapse: collapse; } caption {text-align: center;font-weight: bold;font-size: 200%;letter-spacing: 2em;color: black;margin: 0.8em; } th {text-align: left;padding: 0.3em;background: #8c8caa;color: white; } td {text-align: left;padding: 0.1em; } tfoot td {border-top: 1px solid black;border-bottom: 1px solid black; } 復制代碼

JS 代碼

null 復制代碼

轉載于:https://juejin.im/post/5becf25d51882545235798a2

總結

以上是生活随笔為你收集整理的Emmet 食用指北的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。