---
# System prepended metadata

title: <font class="h2">Emmet學習</font>
tags: [vscode]

---

# <font class="h2">Emmet學習</font>
###### tags: `vscode`
<style>
.h2 {
  background: linear-gradient(135deg,#fff,#537479) ;
  color: #537479;
  display:block;
  padding: 6px 5px;
  border-radius: 4px;
}
.h3 {
    background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
  color: #537479;
  display:block;
  padding: 6px 5px;
  border-bottom: 3px solid #537479;
}
.h4 {
  color: #537479;
  font-weight:bold;
  font-size:1.1em;
}
</style>

>快速產生代碼工具[color=#907bf7]
>快捷列表 https://docs.emmet.io/cheat-sheet/

### <font class="h3">產生出基本的網頁架構 </font>

:::info
 !+tab鍵
:::
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
<br>

### <font class="h3">自動產生多組 </font>

:::info
 `*`
:::
```htmlembedded
p*5
```
等於
```htmlembedded
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
```
<br>

### <font class="h3">子元素 </font>
:::info
 `>`
:::
```htmlembedded
ul>li*5{內容}
```
等於
```html
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>
```
<br>

### <font class="h3">寫出排序的li </font>

```htmlembedded
ul>li{$}*10
```
等於
```htmlembedded
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>
```
<br>

### <font class="h3">相鄰 </font>
:::info
 `+`
:::

```htmlembedded
div>h1+h2+p*3
```
等於
```htmlembedded
<div>
    <h1></h1>
    <h2></h2>
    <p></p>
    <p></p>
    <p></p>
</div>
```
<br>

### <font class="h3">a連結 </font>
`ul>li*5>a{$}[href=#]`
等於
```htmlembedded
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
```

<br><br><br><br><br><br><br><br>

`#container>(header>(h1>a)+(nav>a*5))+(main>div*3)+(footer>p)`
等於
```htmlembedded
    <div id="container">
        <header>
            <h1>
                <a href=""></a>
            </h1>
            <nav>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </nav>
        </header>
        <main>
            <div></div>
            <div></div>
            <div></div>
        </main>
        <footer>
            <p></p>
        </footer>
    </div>
```


### <font class="h3">在 js、vue檔裡使用 Emmet</font>
打開 setting.json，輸入以下程式碼:
```
// emmet tab 展開
"emmet.triggerExpansionOnTab": true,
// 不支援的語言中啟用 Emmet
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade",
    "ejs": "html",
},
```