Emmet 食用指北

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

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

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

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

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

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

書寫 HTML 標籤時冗餘的尖括號，屬性名，鼠標頻繁的定位操做、重複的封閉標籤、重複的標籤名等等

因此相應的簡便方法天然而然就產生了，根本不須要死記硬背：

1. 針對尖括號，採起只寫標籤名，用Tab鍵補全封閉標籤和一萬個尖括號。
2. 針對鼠標定位，採起幾個定位符號來邏輯上代表其位置。
3. 針對某個重複的標籤名，採起數量符號進行標記。 等等。。

想清楚爲何，也就知道該怎麼作了。根據二八法則，只列最有用的，畢竟咱們要學語文不必認識新華字典裏的全部字。

單個標籤

建立單個標籤

鍵入元素名， Tab補全

增長標籤內的屬性

1. id：a#alpha
2. class：a.beta.gamma
3. attribute：a[title=hello]

增長單個標籤的內容

1. a{你好！}

指定單個標籤的數量

• ul>li*3

兩個元素之間

1. 兩個元素間的三種關係：下一級、同一級、跳至上級接着寫
2. 改變做用域，優先級不一樣：（）

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名、屬性名中

$能夠被如下代替：

• $$$
  • 表明三位數字：00一、00二、003
• $@-
  • 倒序排列，三、二、1
• $@3
  • @第三個位置開始， 三、四、5

其餘經常使用

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

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

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

1. dib: display:inline-block
2. lh: line-height
3. 以此類推

最後一個例子： 生成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
複製代碼