前端工程師

前端工程師開發神器! Emmet快速設定顯示文字、自訂屬性值!

2019-07-17

前端工程師開發神器 Emmet,讓你快速設定顯示文字、自訂屬性值!

前端工程師開發神器 Emmet,讓你快速設定顯示文字、自訂屬性值!
前端工程師開發神器 Emmet,讓你快速設定顯示文字、自訂屬性值!

 

顯示文字

使用 Emmet 可以讓前端工程師迅速展開各種 HTML 元素。不過若能夠在撰寫的時候就產生內文,而不需等到元素展開後才補上那就更棒了!

沒想到這個功能 Emmet 也有!不虧是前端工程師的省時神器啊!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。

 

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生。

如果想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

 

 

 

若想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

 

 
 

若想要多增加一些屬性值,只要在同一個 [] 中括號中,將每個屬性值用空格隔開就可以了。如在上個例子中,想要設定HTML 網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

 

 

 

 

相關文章

 

前端工程師開發神器! Emmet快速產生標籤名!

 

前端工程師開發神器! Emmet快速產生階層!

 

前端工程師開發神器! Emmet快速複製元素、設定編號!

 

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

 

鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了

 

你有人工智慧幫你點餐的經驗嗎?去這家麥當勞就知道啦!

 

想看經典電影主角換人演嗎?人工智慧可幫你實現!

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料