iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
2
Software Development

精通 Visual Studio Code系列 第 19

DAY 19 HTML 神器 - Emmet (Part 2)

  • 分享至 

  • xImage
  •  

DAY 19 HTML 神器 - Emmet (Part 2)

昨天我們已經學會了如何啟用 Emmet 及產生 HTML 的基礎程式碼,今天我們會接續著昨天的內容,繼續來教你使用 Emmet!

透過 HTML 標籤來自動補全

首先,先確認我們的游標在 body 內:

接著,輸入 h1 以後按下 鍵:

你可以注意到,如果你打的是 HTML 裡面有的標籤,它會自動幫你打上起始標籤 <h1> 與結束標籤 </h1> ,並且幫你把游標停留在中間,之後你就可以繼續補完 h1 標籤裡面的文字。

接下來我們來新增一張圖片,將游標移動到此處:

然後輸入 img 之後按下 鍵:

你可以注意到如果你輸入的是 HTML 內的特殊標籤,它會將這個標籤常用的屬性順便幫你打出來,並且游標會停在 src="" 裡面來等你輸入圖片網址。

link 標籤也類似 img,會自動打上標籤的常用屬性,並且游標會停在 href="" 中:

明天待續…


上一篇
DAY 18 HTML 神器 - Emmet (Part 1)
下一篇
DAY 20 HTML 神器 - Emmet (Part 3)
系列文
精通 Visual Studio Code31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言