Emmet語法

Emmet語法的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度, Vscode內部已經整合該語法.

1. 快速生成HTML結構語法
2. 快速生成CSS樣式語法

快速生成HTML結構語法

生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵， 就可以生成

<!-- div  輸入div 按tab鍵，直接生成div標籤-->
    <div></div>

如果想要生成多個相同標籤 加上 * 就可以了 比如 div*6 就可以快速生成6個div

 <!-- div*6  快速生成6個div標籤-->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

如果有父子級關係的標籤，可以用 >，比如 ul > li就可以了

<!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

如果有兄弟關係的標籤，用 + 就可以了 比如 div+p

<!-- div+p*3 -->
    <div></div>
    <p></p>
    <p></p>
    <p></p>

如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #one tab 鍵就可以了

 <!-- .dome -->
    <div class="dome"></div>

 <!-- #one -->
    <div id="one"></div>

如果生成的div 類名是有順序的， 可以用 自增符號$

<!-- .dome$*5 -->
    <div class="dome1"></div>
    <div class="dome2"></div>
    <div class="dome3"></div>
    <div class="dome4"></div>
    <div class="dome5"></div>

<!-- .#dome$*3 -->
    <div id="dome1"></div>
    <div id="dome2"></div>
    <div id="dome3"></div>

如果想要在生成的標籤內部寫內容可以用 { } 表示

<!-- p{我是一個段落} -->
    <p>我是一個段落</p>

<!-- p{我是很多的段落}*3 -->
    <p>我是很多的段落</p>
    <p>我是很多的段落</p>
    <p>我是很多的段落</p>

<!-- p.dome$*3{我是段落} -->
    <p class="dome1">我是很多的段落</p>
    <p class="dome2">我是很多的段落</p>
    <p class="dome3">我是很多的段落</p>
     
<!-- p{我是有順序的段落$}*3 -->
    <p>我是有順序的段落1</p>
    <p>我是有順序的段落2</p>
    <p>我是有順序的段落3</p>

<!-- p{$我是有順序的段落}*3 -->
	<p>1我是有順序的段落</p>
	<p>2我是有順序的段落</p>
	<p>3我是有順序的段落</p>

快速生成css樣式

CSS 基本採取簡寫形式即可.

1. 比如 w200 按tab 可以 生成 width: 200px;
2. 比如 lh26px 按tab 可以生成 line-height: 26px;

 p {
     /* w200 */
     width: 200px;
     /* h200 */
     height: 200px;
     /* tac */
     text-align: center;
     /* ti2e */
     text-indent: 2em;
  }