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...

6,831 Responses

  1. paulpogbafjSi表示:

    Descubre la historia inspiradora de Pablo Pogba | Conoce al hermano de Pogba y su impacto en el futbol | Lee sobre los momentos mas destacados de Pogba en Juventus | Descubre como Pogba ha crecido en el futbol | Conoce el lado personal de la estrella del futbol, Pogba | Informate sobre las transferencias mas recientes de Pogba | Informate sobre la trayectoria de Pogba y su futuro | Lee sobre la vida de Pogba fuera del futbol | Lee sobre el talento futbolistico de Paul Pogba, logros de Pogba en PSG logros de Pogba.

  2. Diplomi_czMl表示:

    купить работы arusak-diploms.ru .

  3. Istanbul_yist表示:

    Основные моменты Istanbul International Airport, развитие аэропорта на протяжении лет.
    Необычные стороны аэропорта, которые вас удивят.
    Строительство Istanbul International Airport, которые невозможно не отметить.
    Планы и развитие Istanbul International Airport, направления роста и совершенствования.
    Какие новшества ждут пассажиров, какие услуги понравятся каждому.
    airport international istanbul https://airportistanbulinternational.com/ .

  4. Diplomi_qpEn表示:

    купить диплом нового образца в екатеринбурге orik-diploms.ru .

  5. Istanbul_bost表示:

    Основные моменты Istanbul International Airport, успешные этапы развития.
    Загадки и тайны Istanbul International Airport, о которых вы не знали.
    Уникальная архитектура Istanbul International Airport, которые вызывают восхищение.
    Планы и развитие Istanbul International Airport, новые горизонты и возможности.
    Какие новшества ждут пассажиров, на что стоит обратить внимание.
    istanbul ataturk airport https://airportistanbulinternational.com/ .

  6. Diplomi_hiMl表示:

    сколько купить диплом о высшем образовании сколько купить диплом о высшем образовании .

  7. Diplomi_qxkl表示:

    диплом о высшем образовании купить срочно server-diploms.ru .

  8. Istanbul_ivst表示:

    История и развитие Istanbul International Airport, как все начиналось и что из этого вышло.
    Интересные факты о Istanbul International Airport, о которых вы не знали.
    Уникальная архитектура Istanbul International Airport, которые поражают воображение.
    Что ждет аэропорт в ближайшие годы, направления роста и совершенствования.
    Сервисы и удобства Istanbul International Airport, на что стоит обратить внимание.
    istanbul airport international istanbul airport international .

  9. mostbetdrSi表示:

    Мостбет – это ваши любимые игры и ставки в одном месте | Обновлённый интерфейс и удобная навигация в Мостбет | Мостбет – это качество и надёжность для всех игроков | Получите шанс на выигрыш с бонусами от Мостбет | Зарегистрируйтесь на Мостбет и получите бонус на ставки | Игровые автоматы и ставки на киберспорт в одном месте | Найдите свой любимый слот в казино Мостбет | Надёжный доступ к играм через приложение Мостбет | Лучшие бонусы и акции на официальном сайте Мостбет, скачать приложение Mostbet скачать Mostbet на телефон.

  10. Сервисный центр предлагает отремонтировать кофемашины bremer центр ремонта кофемашины bremer

  11. Сервисный центр предлагает починить варочной панели smeg ремонт варочных панелей smeg рядом

  12. Cazrzve表示:

    Как безопасно купить диплом колледжа или ВУЗа в России, что важно знать
    erudio.global/blog/index.php?entryid=44763&nonjscomment=1&comment_itemid=44763&comment_context=35687&comment_component=blog&comment_area=format_blog

  13. пансионат для престарелых в феодосии пансионат для престарелых в феодосии .

  14. Diplomi_hgEn表示:

    купить диплом о высшем образовании в сочи orik-diploms.ru .

  15. Профессиональный сервисный центр по ремонту телефонов в Москве.
    Мы предлагаем: ремонт телефонов по близости
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  16. Sazrarh表示:

    Покупка диплома о среднем полном образовании: как избежать мошенничества?
    study.flybb.ru/viewtopic.php?f=4&t=776

  17. AlbertGrict表示:

    The mysterious symbols found carved in Qatar’s desert
    русский анальный секс

    Some shoot out of the soft rock like reptiles bathing in the sun. Others are mysterious depressions resembling an ancient board game played all over the world. And a few are straight-up puzzling.

    On a desolate and windswept corner of Qatar’s northeastern coast, among the sand dunes of the barren desert, lies Al Jassasiya, the Gulf country’s largest and most important rock art site.

    Here, people centuries ago used a series of low-lying limestone outcrops as a canvas on which they carved symbols, motifs and objects that they observed in their environment.
    Overall, archaeologists have found a total of some 900 rock carvings, or “petroglyphs,” at Al Jassasiya. They are mostly enigmatic cup marks arranged in various patterns, including rows and rosettes, but also eye-catching representations of sailing ships, usually seen from above but also depicted in linear profile, among other symbols and signs.

    “Although rock art is common in the Arabian Peninsula, some of the carvings in Al Jassasiya are unique and cannot be found anywhere else,” Ferhan Sakal, head of excavation and site management at Qatar Museums, told CNN, referring to the petroglyphs of ships seen from a bird’s-eye view.

    “These carvings represent a high degree of creativity and observation skills the part of] the artists who made them,” he said. “Also abstract thinking, as they were not able to see the dhow (a traditional ship) from above.”

  18. Sazrfzs表示:

    Как купить аттестат 11 класса с официальным упрощенным обучением в Москве
    italian-style.ru/Nasha_kompanija/forum/?PAGE_NAME=profile_view&UID=55895

  19. Ronaldphate表示:

    A giant meteorite boiled the oceans 3.2 billion years ago. Scientists say it was a ‘fertilizer bomb’ for life
    домашний анальный секс

    A massive space rock, estimated to be the size of four Mount Everests, slammed into Earth more than 3 billion years ago — and the impact could have been unexpectedly beneficial for the earliest forms of life on our planet, according to new research.

    Typically, when a large space rock crashes into Earth, the impacts are associated with catastrophic devastation, as in the case of the demise of the dinosaurs 66 million years ago, when a roughly 6.2-mile-wide (10-kilometer) asteroid crashed off the coast of the Yucatan Peninsula in what’s now Mexico.

    But Earth was young and a very different place when the S2 meteorite, estimated to have 50 to 200 times more mass than the dinosaur extinction-triggering Chicxulub asteroid, collided with the planet 3.26 billion years ago, according to Nadja Drabon, assistant professor of Earth and planetary sciences at Harvard University. She is also lead author of a new study describing the S2 impact and what followed in its aftermath that published Monday in the journal Proceedings of the National Academy of Sciences.

    “No complex life had formed yet, and only single-celled life was present in the form of bacteria and archaea,” Drabon wrote in an email. “The oceans likely contained some life, but not as much as today in part due to a lack of nutrients. Some people even describe the Archean oceans as ‘biological deserts.’ The Archean Earth was a water world with few islands sticking out. It would have been a curious sight, as the oceans were probably green in color from iron-rich deep waters.”

    When the S2 meteorite hit, global chaos ensued — but the impact also stirred up ingredients that might have enriched bacterial life, Drabon said. The new findings could change the way scientists understand how Earth and its fledgling life responded to bombardment from space rocks not long after the planet formed.

  20. Сервисный центр предлагает сервис ремонта холодильников океан ремонт холодильника океан на дому

  21. Diplomi_jkMl表示:

    купить технический диплом о среднем arusak-diploms.ru .

發佈留言

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