昨天我們已經學會了如何啟用 Emmet 及產生 HTML 的基礎程式碼,今天我們會接續著昨天的內容,繼續來教你使用 Emmet!
首先,先確認我們的游標在 body 內:
接著,輸入 h1
以後按下 鍵:
你可以注意到,如果你打的是 HTML 裡面有的標籤,它會自動幫你打上起始標籤 <h1>
與結束標籤 </h1>
,並且幫你把游標停留在中間,之後你就可以繼續補完 h1
標籤裡面的文字。
接下來我們來新增一張圖片,將游標移動到此處:
然後輸入 img
之後按下 鍵:
你可以注意到如果你輸入的是 HTML 內的特殊標籤,它會將這個標籤常用的屬性順便幫你打出來,並且游標會停在 src=""
裡面來等你輸入圖片網址。
link
標籤也類似 img
,會自動打上標籤的常用屬性,並且游標會停在 href=""
中:
明天待續…