2. 操作
3. emmet 快捷鍵
-
快速編寫HTML代碼：「!」+ tab、「html:5」+ tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
-
添加 class，id，標籤和屬性
id： p#foo => <p id="foo"></p>
class：.container => <div class="container"></div>
內容： h1{foo} => <h1>foo</h1>
屬性： a[href=#] => <a href="#"></a>
-
嵌套
>：子元素符號，表示嵌套的元素 p>span => <p><span></span></p>
+：同级標籤符號 h1+h2 =>
<h1></h1> <h2></h2>
^：可以使該符號前的標籤提升一行 p>span^p
<p><span></span></p> <p></p>
- 分組
(.foo>h1)+(.bar>h2)
<div class="foo"> <h1></h1> </div> <div class="bar"> <h2></h2> </div>
-
隱式標籤
聲明一個帶類的標籤，只需輸入div.item，就會生成<div class="item"></div>。
在過去版本中，可以省略掉div，即輸入.item即可生成<div class="item"></div>。現在如果只輸入.item，則Emmet會根據父標籤進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。
下面是所有的隱式標籤名稱：
li：用於ul和ol中
tr：用於table、tbody、thead和tfoot中
td：用於tr中
option：用於select和optgroup中 - 定義多個元素
要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼：<ul> <li></li> <li></li> <li></li> </ul>
- 定義多個帶屬性的元素
如果輸入ul>li.item$*3，將會生成如下代碼：<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>
- CSS縮寫
w10 => width: 10px; h10 => height: 10px; bg:#000 => background: #000;
- 假字
loremLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.