Emmet 網頁開發界的超跑

在這個速度的時代,網頁也擁有非常多加速開發的工具,例如今天要介紹的這個外掛「Emmet」,他支援的開發軟體也相當多,也就是不管腳踏車、機車還是房車,都可以裝上這個超跑的引擎,廢話不多說,先讓大家知道他如何節省網頁開發的時間,如果我們在網頁上要輸入以下的HTML結構:

<div>
    <ul>
       <li><a href="#">選項1</a></li>
       <li><a href="#">選項2</a></li>
       <li><a href="#">選項3</a></li>
       <li><a href="#">選項4</a></li>
       <li><a href="#">選項5</a></li>
       <li><a href="#">選項6</a></li>
    </ul>
</div>

在我們安裝好Emmet之後,僅需輸入以下的縮寫,再按下Tab鍵,即可以產生如上述般的HTML結構:

div>ul>li*6>a[#]{選項$}

仔細看看應該不難發現HTML標籤名稱的部分都在縮寫裡面,只是利用>來區隔每一層,如果要多個同樣的標籤可以用*後來輸入個數,標籤內的屬性值是利用[ ]來包住,{ }是標籤內的值。

是不是很神奇呀?趕快到Emmet的官方網頁下載或直接利用你的網頁編輯器來安裝這個外掛吧!

Emmet 官方網站截圖
Emmet 官方網站截圖

官方網站提到Emmet的特色有六點,分別是:

  • HTML from CSS:如果你已經對CSS的選取器有概念,那就已經知道Emmet該如何去縮寫你的HTML代碼。
  • Dynamic snippets:在使用縮寫的時候,只要稍微更動一些名稱,就可以得到截然不同的結果。
  • Ultra-fast coding:快速的編寫模式,可以快速選取標籤、移動游標、產生上一層或下一層結構。
  • Customizable:可以透過編輯JSON檔案來客製化一些程式碼。
  • Platform for new tools:透過編輯開放的程式碼,可以產生新的使用模式。
  • Highly portable:高度輕便可攜。

Emmet支援的網頁編輯器也非常多,如下圖所示:

Emmet 支援的網頁編輯器

Emmet 支援的網頁編輯器

快速鍵:

(快速鍵的部分有可能跟原先的編輯器或電腦的一些應用程式有衝突而無法使用)

  • Tab:展開縮寫
  • Ctrl+Alt+→:將游標移動到下一個可以輸入屬性或值的地方。
  • Ctrl+Alt+←:將游標移動到上一個可以輸入屬性或值的地方。
  • Ctrl+D:選取一整個標籤(包含標籤的起始與結束)。
  • Shift+Ctrl+.:選取下一個標籤或屬性。
  • Shift+Ctrl+,:選取上一個標籤或屬性。
  • Ctrl+/:將選取的部分變成註解。

使用的部分功能相當多,可以參考官方網頁中的文件介紹,或是繼續閱讀馬老師針對Emmet的後續介紹。

You may also like...

22,067 Responses

  1. WilliamDeeli表示:

    Мы готовы предложить дипломы любой профессии по выгодным тарифам. Дипломы производят на оригинальных бланках государственного образца Купить диплом университета asxdiplommy.com

  2. GarrettMom表示:

    en iyi bahis siteleri 2024 casibom canlД± casino deneme bonusu veren siteler casibom1st.shop

  3. RobertCex表示:

    canlД± bahis siteleri: casibom giris adresi – en iyi iddaa sitesi casibom1st.com

  4. Sazrvxl表示:

    Мы изготавливаем дипломы любых профессий по приятным ценам.
    Вы заказываете документ в надежной и проверенной временем компании. Заказать диплом о высшем образовании– http://adminka.getbb.ru/viewtopic.phpf=2&t=1833/ – adminka.getbb.ru/viewtopic.phpf=2&t=1833

  5. Sazruvw表示:

    Мы предлагаем дипломы любых профессий по приятным тарифам.– diplomc-v-ufe.ru/poluchite-diplom-visshego-obrazovaniya-s-reestrovoj-zapisyu/

  6. Cazrjpd表示:

    Мы готовы предложить дипломы любой профессии по невысоким ценам. Метод использования и приобретение чистого диплома — kyc-diplom.com/diplom-articles/metod-ispolzovaniya-i-priobretenie-chistogo-diploma.html

  7. Cazrkcd表示:

    Мы предлагаем дипломы любой профессии по приятным тарифам. Купить диплом иностранного ВУЗа — kyc-diplom.com/diplom-articles/kupit-diplom-inostrannogo-vuza.html

  8. Xazrauf表示:

    Купить диплом ВУЗа!
    Мы изготавливаем дипломы любой профессии по приятным тарифам. Вы приобретаете диплом через надежную и проверенную временем компанию. : blogsfere.com/viewtopic.php?t=222931

  9. RobertCex表示:

    gГјzel siteler: casibom giris – en iyi casino oyunlarД± casibom1st.com

  10. Sazrjrp表示:

    Купить диплом университета по невысокой цене возможно, обратившись к надежной специализированной фирме. Мы оказываем услуги по продаже документов об окончании любых ВУЗов России. Приобрести диплом любого ВУЗа– vacshidiplom.com/kupit-diplom-s-vneseniem-v-reestr-bistro-i-bezopasno-4/

  11. Cazrzyv表示:

    Заказать диплом о высшем образовании мы поможем. Купить диплом специалиста в Барнауле – diplomybox.com/kupit-diplom-spetsialista-v-barnaule

  12. Cazrcge表示:

    Заказать диплом ВУЗа поможем. Заказать справку – diplomybox.com/zakazat-spravku

  13. mostbet_vxSn表示:

    поддержка мостбет https://mostbet6034.ru .

  14. Sazrzyi表示:

    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по приятным ценам.– vuz-diplom.ru/kupit-diplom-s-zaneseniem-v-reestr-bistro-i-prosto/

  15. BradyGem表示:

    lisansl? casino siteleri: casino siteleri 2025 – casino siteleri 2025 casinositeleri1st.com

  16. Mazrlez表示:

    Мы предлагаем дипломы любой профессии по выгодным ценам. Всегда стараемся поддерживать для покупателей адекватную ценовую политику. Важно, чтобы документы были доступны для большого количества наших граждан.
    Приобретение диплома, подтверждающего обучение в ВУЗе, – это выгодное решение. Приобрести диплом любого ВУЗа: 1magistr.ru/kupit-diplom-meditsinskogo-uchilisha-7/

  17. Mazrpyv表示:

    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по разумным тарифам. Стараемся поддерживать для заказчиков адекватную ценовую политику. Для нас очень важно, чтобы документы были доступными для большинства наших граждан.
    Приобретение диплома, подтверждающего окончание института, – это рациональное решение. Купить диплом любого ВУЗа: zakaz-na-diplom.ru/diplom-meditsinskogo-kolledzha-kupit-3/

  18. Sazrstn表示:

    Мы изготавливаем дипломы любой профессии по доступным тарифам.– diplomh-40.ru/kupite-diplom-instituta-s-reestrom-legko-i-bistro/

  19. Uazrpol表示:

    Доброго времени суток!
    Для определенных людей, купить диплом о высшем образовании – это необходимость, уникальный шанс получить достойную работу. Но для кого-то – это желание не терять время на учебу в ВУЗе. Что бы ни толкнуло вас на это решение, мы готовы помочь вам. Быстро, профессионально и по доступной цене сделаем документ любого ВУЗа и любого года выпуска на подлинных бланках с реальными печатями.
    Основная причина, почему люди прибегают к покупке документов, – желание занять определенную работу. Предположим, навыки и опыт дают возможность человеку устроиться на привлекательную работу, но подтверждения квалификации нет. В случае если для работодателя важно наличие “корочек”, риск потерять вакантное место довольно высокий.
    Заказать документ о получении высшего образования можно в нашей компании. Мы предлагаем документы об окончании любых ВУЗов Российской Федерации. Вы получите диплом по любой специальности, включая документы Советского Союза. Даем гарантию, что в случае проверки документа работодателем, подозрений не возникнет.
    Ситуаций, которые вынуждают купить диплом много. Кому-то очень срочно потребовалась работа, и нужно произвести хорошее впечатление на начальника при собеседовании. Некоторые задумали попасть в серьезную компанию, для того, чтобы повысить собственный статус в социуме и в будущем начать свой бизнес. Чтобы не терять впустую годы жизни, а сразу начать эффективную карьеру, применяя имеющиеся навыки, можно приобрести диплом в онлайне. Вы сможете стать полезным для социума, обретете финансовую стабильность максимально быстро и просто- диплом купить

  20. Stevensot表示:

    helpful hints Social

  21. Stevensot表示:

    click this link here now DOB

  22. Stevensot表示:

    visit homepage [url=https://tlo-ssndob.com]TLO lookup bot[/url]

  23. Stevensot表示:

    browse this site [url=https://tlo-ssndob.com]Lookup bot[/url]

  24. Stevensot表示:

    have a peek at this web-site TAX

  25. Jeremycenly表示:

    more tips here [url=https://jaxxblog.io]jaxx liberty[/url]

發佈回覆給「Jeremycenly」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。