前端工程師御用神器Emmet介紹(一)如何快速產生標籤名稱?

前端工程師最愛的的省時神器Emmet,你知道怎麼用最能夠快速產生標籤名稱嗎?

 

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

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

身為一個前端工程師,一定要裝一個「省時神器」 Emmet 外掛,這不僅可以大大節省前端工程師在編寫 HTML 及 CSS 的時間,還可以省下的時間可以讓你去體驗人生各種美好的事物,如玩玩喵星人、上上健身房運動等等。

Emmet 支援的網頁編輯器如下圖:

Emmet 支援的網頁瀏覽器-1.png

安裝的方式會因個網頁編輯器而異,在網路上皆可以查到,故此省略。以下小編先介紹基本的使用方式:

快速產生標籤名稱 (Tag Name)

前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML樣板。透過 Emmet,我們可以先在編輯器中輸入「!」或是「html:5」後,再按下 Ctrl+E 鍵即可。

Emmet中快速產生HTML5樣板

假設我們要產生一個 p 元素,那麼我們只要直接輸入 p 後,再按下 Ctrl+E 鍵,就能自動產生起始元素及結束元素。如下所示:

起始元素與結束元素

只要是 HTML 所定義的元素,如 h1-h6、center、title 等等,都能使用上述方示,快速產生出相對應的語法如下

起始元素與結束元素-2

有些元素還會帶入跟該元素有關的屬性,例如:iframe、a 或是 img 等

有些元素還會帶入跟該元素有關的屬性

快速產生 className 與 id

我們也可以在產生元素時,直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤,則輸入「h1.title」後按 Ctrl+E

產生元素時直接加上指定的 .className

若是要針對單一元素要加上多個 class name 的話,只要把它們用半形的句號隔開,接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤,則輸入「div.news_p.c1」後按 Ctrl+E

單一元素要加上多個className

前端工程師省時神器 Emmet 一般預設的元素是 div,所以如果直接輸入英文句號後,寫 class name 的話,就會自動產生一個 div 元素加上指定的 class name。承上例,輸入「.news_p.c1」後按 Ctrl+E

直接寫.className就會自動產生div元素加上指定的className

除了 class name,我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤,則輸入「#news_p」後按 Ctrl+E

幫元素加上指定的id

class name 和 id 可以同時使用,例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤,則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

className和id可以同時使用

以上介紹為常用的 Emmet 標籤快捷縮寫方式,如果你想要知道更多的元素縮寫方式,都可在 Emmet 官方文件中找到:Emmet cheat sheet

 

 

 

 

推薦閱讀:
前端工程師御用神器Emmet介紹(二)如何快速產生階層?


前端工程師都愛用的CSS,你懂它嗎?


何時才用ID選擇器?前端工程師教你一分鐘學會!


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


達內課程先就業再付款- 中時電子報


AI人工智慧的寫作能力威脅人類? 還可能寫出假新聞誤導民眾?


神奇!人工智慧可讓蒙娜麗莎對你使眼色!?

arrow
arrow

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