前端工程師之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。
更多閱讀:
如何利用CSS來設定背景位置?資深前端工程師教你小撇步!
前端工程師常用的CSS竟然有父與子標籤?繼承關係怎麼看?
五分鐘搞好CSS跟HTML的關係,簡單到前端工程師做夢也會笑!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
網路行銷課程還能教什麼?當然要教主關鍵字的相關詞呀!
想要看清自己,預知未來,就快來上Python課程學習AI
人工智慧主宰的世界長怎樣?他們用音樂說給你聽!!
