前端工程師御用神器Emmet介紹(四)-設定顯示文字與屬性值

前端工程師總說Emmet好用,但你知道最好用的其實是它可以快速設定顯示文字跟屬性值嗎?

 

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 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。

Emmet-自訂屬性

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

Emmet-自訂屬性與顯示文字

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

Emmet-自訂多個屬性與顯示文字

 

 

 

推薦閱讀:
前端工程師網頁設計初級課程-CSS背景位置設定​​​​​​​


CSS標籤也玩父與子?就讓前端工程師來解密!


CSS跟HTML怎樣才能迸出愛的火花?前端工程師笑說其實很簡單!


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


網路行銷課程教你把玩低成本高效益的關鍵字相關詞​​​​​​​


還在為誰來演出電影主角而煩惱嗎?交給人工智慧就對了!!​​​​​​​


人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

 

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()