# <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", }, ```