前端工程師之Emmet入門課程(三)快速複製元素與設定編號

 身為前端工程師的你,如果還不知道怎麼用Emmet來幫你快速複製元素跟設定編號的話,就太遜囉!

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

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

複製元素

當前端工程師要產生 ol 或是 ul 清單標籤時，都會包含一拖拉庫的 li 元素。假設要一個一個手動輸入的話，就算是使用 Emmet 的「+」快捷輸入法，還是會花不少時間的。幸好 Emmet 有複製的快捷輸入法：「*」。用法是：若想要一次產生 5 個相同的元素的話，就在原宿後方輸入「*5」。由此類推，產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤，包含 5 個 li 元素，語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

再假設我們要在一個 .news 中放置 5 個 .block，然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落，每個 p 段落中又放置兩張圖片，則輸入「.news>(.block>h2+(p>img*2)*2)*5」

編號

有時前端工程師會在HTML輸入 li 標籤時，會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時，就可以快速的產生。例如，今天我們要輸入五個 li 標籤，標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5，則輸入「li.list-$*5」

若要在這些流水編號前面加個「零」，例如 01、001，則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例，我們得輸入「li.list-$$*5」以及「li.list-$$$*5」

設定起始編號

$的用法，預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字，這時則在 $ 後面多補上一個 @ 並加上指定的起始數字，承接上例，我們要設定起始數字為 5 就輸入「li.list-$$@5*5」

Emmet 預設的編號是由小到大，若是希望編號由大到小，那麼就是在 @ 後面補上一個 - 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤，編號由大到小，就輸入「li.list-$@-*5」 我們要設定起始數字為 5 ，就輸入「li.list-$@-5*5」。

更多閱讀:
前端工程師之Emmet入門課程(四)-設定顯示文字與屬性值

前端工程師不藏私教學,告訴你Class選擇器最佳使用時機!

五分鐘搞好CSS跟HTML的關係,簡單到前端工程師做夢也會笑!

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

中國IT教育領導品牌　達內教育集團第一家海外授權中心

語言程式Java還真的是咖啡名字!快看其他程式語言的名字故事! 

人工智慧主宰的世界長怎樣?他們用音樂說給你聽!!