iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

大二萌新的學習紀錄系列 第 3

Day 3 : HTML - 快速打出HTML的代碼,超好用的Emmet語法!

  • 分享至 

  • xImage
  •  

想必大家都有這個困擾
如果今天要叫出10個div、再宣告不同的class
就要一直反覆的輸入div、enter,class、class1 2 3…、enter 10次
這樣不僅效率慢,也會覺得一直重複很煩躁


那有沒有什麼方法能快速打出HTML的代碼呢?
有的,那就是超好用的Emmet!
它可以幫助你省掉很多打代碼的時間

Emmet在Visual studio code裡已經自動安裝好

2022/07/14 - 03:11 PM 更新
目前 vscode 的 Emmet 功能預設是沒開啟的,所以要去settings搜尋"emmet.triggerExpansionOnTab",並把它勾選起來
https://ithelp.ithome.com.tw/upload/images/20220714/20141088nf9XoQzXwc.png

假設你想打<div></div>,只要打div,就會跳出一個div的選項,再按enter
https://ithelp.ithome.com.tw/upload/images/20210917/20141088rq6u28lGfZ.png

就會自動幫你架構好,是不是超方便又貼心
那事不宜遲,趕緊向各位介紹一下Emmet的幾個重要用法


1. !
輸入!,就會跳出一個HTML的基本文件架構
幫你把一些重要的東西先寫好,ex:第5行的UTF-8(防止中文亂碼)
你就可以直接在<body></body>裡輸入你想要的代碼
https://ithelp.ithome.com.tw/upload/images/20210917/201410886hjERntQHR.png

2. > (進入下一層)
假設我們想要1個div再包1個p
只要輸入div>p,即可達到此效果
https://ithelp.ithome.com.tw/upload/images/20210917/20141088B6XAZpwiSl.png

3. + (接在後面)
假設我們想要1個div包1個p,1個a
只要輸入div>p+a,即可達到此效果
https://ithelp.ithome.com.tw/upload/images/20210917/20141088LkeFRCO4rq.png

4. ^ (回到上一層)
有人會問,我如果想先跳進下一層輸入代碼,再跳出來可以嗎?
當然是可以囉!只要用^就可以了
https://ithelp.ithome.com.tw/upload/images/20210917/20141088Om6ZCvQaU5.png

5. * (重複幾次)
和乘法是同個符號,想必功能也和乘法是一樣的
https://ithelp.ithome.com.tw/upload/images/20210917/20141088MjSqkmycOY.png

6. () (分組進行)
為了防止自己組別的人被隔壁組搶走,當然要用()區隔開囉!
https://ithelp.ithome.com.tw/upload/images/20210917/20141088Vr3OGewC9K.png


介紹了上述語法,一定會有人好奇
我們可不可以在按下enter前把class、ID…等一起設置好?
當然可以囉!Emmet就是這麼的好用

7. Class(.)、ID(#)
假設我們想叫出1個p,它的class是text
只要輸入p.class,即可達到此效果
https://ithelp.ithome.com.tw/upload/images/20210917/20141088Hy8D3t3QkJ.png

如果不想用class,想用ID
只要把.改成#即可
https://ithelp.ithome.com.tw/upload/images/20210917/20141088y6Nxs6zfYs.png

如果想一次宣告3個class,或1個class、1個ID
只要串在一起就好囉!
https://ithelp.ithome.com.tw/upload/images/20210917/20141088HJm3h6o29J.png

那如果不想用p想用div呢?
你也不用把p改成div了,直接打.text#text即可
但僅限div可以,其他標籤仍要乖乖打出來喔!
https://ithelp.ithome.com.tw/upload/images/20210917/20141088TmPJequZqg.png


8. [] (設定屬性)
假設我們想叫出1個p,它的title是Hello
只要在[]內輸入title=”Hello”,即可達到此效果
https://ithelp.ithome.com.tw/upload/images/20210917/20141088xXQpvWxgOI.png

如果想把p改成div,直接省略div打[]即可https://ithelp.ithome.com.tw/upload/images/20210917/20141088OEEgvC0nO5.png


9. {} (輸入內容)  注意:此div不可省略!!!
假設我們想叫出1個p,顯示的內容為Hello
只要輸入p{Hello},即可達到此效果
https://ithelp.ithome.com.tw/upload/images/20210917/20141088y4FyeBaMua.png

切記,此div不可省略!!!
省略了會直接顯示內容,而不會顯示在div裡
https://ithelp.ithome.com.tw/upload/images/20210917/20141088cuHTthvi9H.png


10. $ (編號)
假設我們想叫出5個div,並分別將class設置為box_1 2 3 4 5
只要輸入.box_$*5,即可達到此效果
https://ithelp.ithome.com.tw/upload/images/20210917/20141088XJZ8wAclAc.png

那如果我想一次設置3個地方,且header的數字從001開始呢?
只要有$的地方,就會從1~3依序列出來
你想要幾位數就打幾個$,想要三位數就打3個$
https://ithelp.ithome.com.tw/upload/images/20210917/20141088OXDxL1cSTM.png


11. @ (起始值)
有人會問,我如果不想從1開始,想從3開始呢?
那就在$後面加@,還有你的起始值,起始值後面再*上你要的數量
https://ithelp.ithome.com.tw/upload/images/20210917/20141088fKo6ZJ8XGY.png

那我如果不想1 2 3…依序下去,我想顛倒過來呢?
那就在@後面加-,此時你的起始值會變成結束值,
https://ithelp.ithome.com.tw/upload/images/20210917/201410883rSuMNwgcY.png


以上就是一些Emmet的基本常用語法

如果想知道更多Emmet的語法可以去以下網址:
https://docs.emmet.io/cheat-sheet/
所有的Emmet語法都在這裡面,可以堪稱是Emmet的語法大全!


上一篇
Day 2 : HTML - 給我去刻個網站!之 我幹了件蠢事
下一篇
Day 4 : HTML – 別動!你就停在那裡!CSS position定位屬性是什麼?
系列文
大二萌新的學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言