亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Emmet語法讓編寫HTML飛起來。
VSCode內置了Emmet插件，不用自己安裝。

生成html5源碼模板：!+tab。

1.標簽與內容 {text}

Emmet語法：h3{標題} + tab
生成：

<h3>標題</h3>

如果不輸入標簽，而是使用屬性，默認會添加div標簽
Emmet語法：.title{class為title的div}
生成：

<div class="title">class為title的div</div>

上述Emmet語法等同于div.title{class為title的div}

2.屬性和語法糖 [attr]

Emmet語法：h2[class=title]{標題} + tab
生成：

 <h2 class="title">標題</h2>

上面Emmet語法前面的標簽名可以省略，省略后會自動生成div標簽。
Emmet語法：[id=app]{app} + tab
生成：

<div id="app">app</div>

Emmet語法：[class=title]{title} + tab

<div class="title">title</div>

id和class是高頻屬性、通用屬性。Emmet為它們定制了語法糖：#表示id，.表示class。

上面的Emmet語法可以使用語法糖進行簡化。
Emmet語法：#app1{app1} + tab
生成：

<div id="app1">app1</div>

Emmet語法：.title1{title1} + tab

<div class="title1">title1</div>

3.重復生成 *

可以同時生成多個元素。
比如，下面是生成三個div
Emmet語法：.container{box}*3 + tab
生成：

  <div class="container">box</div>
  <div class="container">box</div>
  <div class="container">box</div>

層級關系

4.父子關系 >

比如，快速生成有三個li的ul，可以使用下面的方法。
Emmet語法：ul>li{item}*3 + tab
生成：

  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>

5.兄弟關系 +

Emmet語法：h3{標題}+p{內容} + tab
生成：

  <h3>標題</h3>
  <p>內容</p>

6.父級關系 ^

父級就是上一級。
Emmet語法：.box>span{text}^h3{小標題} + tab
生成：

  <div class="box"><span>text</span></div>
  <h3>小標題</h3>

7.分組 (...)

Emmet語法：nav>h3{導航}+ul>li*3>a{link} + tab
生成：

  <nav>
    <h3>導航</h3>
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </nav>

但是，上面的寫法不夠清晰，可以使用分組增加可讀性。
Emmet語法：nav>h3{導航}+（ul>li*3>a{link}） + tab

8.序號 $ $@

默認從1開始
Emmet語法：ul>li{item-$}*3 + tab
生成：

  <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
  </ul>

自定義起始序號
上面使用$，默認是從1開始的，我們可以使用$@指定任意起始序列號。
Emmet語法：ul>li{item-$@6}*3 + tab
生成：

  <ul>
    <li>item-6</li>
    <li>item-7</li>
    <li>item-8</li>
  </ul>

倒序
在$@后面的數(shù)字前面加上-即可。
Emmet語法：ul>li{item-$@-1}*3 + tab
生成：

  <ul>
    <li>item-3</li>
    <li>item-2</li>
    <li>item-1</li>
  </ul>

批改老師：PHPz

批改狀態(tài)：合格

老師批語：