Emmet插件使用教程

Emmet插件可以通過指令快速生成html以及css代碼，給我們地開發工作帶來極大地便利

快速編寫HTML代碼

• 初始化

  HTML文檔需要包含一些固定的標籤，比如：html、head、body等，現在你只需要1秒鐘就可以輸入這些標籤。比如輸入“!”或“html:5”，然後按Tab鍵：
  html:5 或!：用於HTML5文檔類型
  html:xt：用於XHTML過渡文檔類型
  html:4s：用於HTML4嚴格文檔類型

• 輕鬆添加類、id、文本和屬性

  連續輸入元素名稱和ID，Emmet會自動爲你補全
  class: .
  id: #
  屬性: []
  內容:{}
  比如：輸入p.myclass#my自動補全爲

<p class="myclass" id="my"></p>

• 嵌套
  現在你只需要1行代碼就可以實現標籤的嵌套。

  • >：子元素符號，表示嵌套的元素
  • +：同級標籤符號
  • ^：可以使該符號前的標籤提升一行

  輸入h1+h2>span自動補全爲

        <h1></h1>
        <h2><span></span></h2>

• 分組
  你可以通過嵌套和括號來快速生成一些代碼塊，比如輸入(.a#m>h1)+(.b#n>h2)，會自動生成如下代碼：

    <div class="a" id="m">
        <h1></h1>
    </div>
    <div class="b" id="n">
        <h2></h2>
    </div>

• 定義多個帶屬性的元素
  *:乘法
  $:自增($:從1開始遞增，$$：從01開始遞增，依次類推)
  $@-:自減
  $@數字：起序
  如果輸入 ul>li.item$*3，將會生成如下代碼：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

---

CSS縮寫

• 值
  比如分別輸入w1 顯示width 1px;;
  輸入 h1顯示height: 1px;
  輸入bd1-s-red顯示border: 1px solid red;

• 模糊匹配
  如果有些縮寫你拿不準，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：