iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
2
Software Development

精通 Visual Studio Code系列 第 20

DAY 20 HTML 神器 - Emmet (Part 3)

  • 分享至 

  • xImage
  •  

DAY 20 HTML 神器 - Emmet (Part 3)

加上 id、class 與屬性

Emmet 支援使用 css selector 來讓快速幫你打上對應的程式碼:

你可以注意到 . 變成 class="" 的內容,# 變成 id="" 裡面的內容,然後 [] 內的文字會直接變成對應的額外屬性,然後在這個範例內我省略了 HTML 的標籤,當省略的時候,Emmet 自動會幫你填 div

子元素

你可以使用 CSS Selector 中的 > 符號來快速產生子元素,如 ul>li

如果你想要一次產生很多層也沒有問題!

一次產生多個

你可以使用 * 來一次產生多個,如 ul>li*5

實際上,像這樣打也一樣可以使用喔!

明天待續…


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

尚未有邦友留言

立即登入留言