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

21,445 Responses

  1. 1win_enpt表示:

    что делать с бонусным балансом на 1win 1win6047.ru .

  2. 1win_fhEt表示:

    1вин официальный http://www.1win6045.ru .

  3. Lazrvae表示:

    Приобрести диплом университета!
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по выгодным ценам— freediplom.com/diplom-o-visshem-obrazovanie-kupit-2/

  4. Trefern表示:

    Быстро и просто приобрести диплом университета. Покупка документа о высшем образовании через проверенную и надежную фирму дарит ряд плюсов. Такое решение позволяет сэкономить время и серьезные финансовые средства. apex-workforce.com/employer/eonline-diploma

  5. Trefsgh表示:

    Приобрести диплом любого института. Приобретение диплома через надежную компанию дарит ряд достоинств для покупателя. Данное решение позволяет сберечь как личное время, так и значительные деньги. justclassify.com/profile/kryaubrey1969

  6. SteveViand表示:

    http://usmexpharm.com/# mexican pharmacy

  7. Mazroqr表示:

    Мы изготавливаем дипломы любой профессии по невысоким тарифам. Стараемся поддерживать для покупателей адекватную политику тарифов. Важно, чтобы документы были доступны для большинства наших граждан.
    Заказ диплома, который подтверждает окончание университета, – это выгодное решение. Приобрести диплом университета: sdiplom.ru/diplom-o-visshem-obrazovanii-kupit-v-spb-2/

  8. MicahTails表示:

    mexican border pharmacies shipping to usa: mexican pharmacy – Us Mex Pharm

  9. Sazrsge表示:

    Мы можем предложить дипломы любой профессии по приятным ценам.
    Вы заказываете документ через надежную и проверенную временем компанию. Заказать диплом о высшем образовании– http://maxima.2ua.in.ua/viewtopic.phpf=3&t=8131/ – maxima.2ua.in.ua/viewtopic.phpf=3&t=8131

  10. Williefet表示:

    Моя мама, та ещё модница. Каждые выходные, её можно было найти в нашем Торговом Комплексе (ТК). Пропадая там часами и толком ничего не купив, за такое проведённое время, если только так по мелочи, у меня это вызывало недоумение. И тут же напрашивался, естественно закономерный вопрос. Что можно там делать, целый день?
    [url=https://proverkasaitov.ru/uniteto-live-obzor-i-otzyvy/]Free porn videos[/url]
    Конечно, я много раз навязывался на поход в ТК с мамой, объясняя разные причины, чтобы посетить, это «чудесное» заведение. Но каждый раз слышал, от неё только отказ.

    Мама была у меня симпатичной женщиной с приличной грудью третьего размера, да и в меру обладая стройностью тела, выглядела в свои сорок лет, даже очень ничего. Многие мужчины, часто поглядывали в её сторону, на что мама строя им глазки, пыталась флиртовать с ними. Меня же это раздражало. Возможно во мне играла ревность, что не я центр её внимания.
    [url=https://www.e1.ru/text/business/2023/07/15/72500345/]Porn models[/url]
    Но странное поведение мамы, вынуждало меня узнать всё таки истинную причину, её не обычного влечения к шопомании.

    Заранее купив новой одежды, чтобы не быть узнаным, и облачившись в эти шмотки, изменив облик, а на глаза нацепив солнцезащитные очки с бейсболкой, я решил проследить за мамой, когда она в очередной раз, пошла за покупками в ТК.
    [url=https://tsukanovphoto.ru/151124/zhk-bestvej-poslednie-novosti/]Порно видео бесплатно[/url]
    Неотступно ступая ей в след, я добрался с ней до ТК. Не распознав меня, хотя я перед мамой часто светился, проверяя свою маскировку, мы вошли во внутрь этого грандиозного здания. По началу она и вправду ходила по бутикам, оглядываясь не редко на мужчин, а с некоторыми даже беседовала, но коротко, перекидываясь всего парой фраз. Я не слышал о чем они говорили, но по виду мужчин, можно сказать, что оппоненты очень были заинтересованы в этом разговоре.

    Спустя час, её брожения по лабиринтам этих бутиков, она остановилась в одном из них и выбрав какую-то блузку, двинулась в сторону кабинки. Подойдя к ней, она оглянулась по сторонам и еще раз взглянув на номер над шторкой и убедившись, что именно в эту примерочную ей надо, мама не суетясь зашла туда.

    Подумав, что здесь нет ничего необычного, я приметил молодого человека, с которым мама останавливалась и разговаривала. Он бродил по бутику и высматривал вещи, всё время поглядывая на кабинки. Выбрав что-то из одежды, он подошёл именно к той самой примерочной, куда некоторое время назад зашла моя мама. На вид парень был, чуть старше меня и испуганно взирая по сторонам, открыв штору кабинки, прошёл не задерживаясь во внутрь.

    Я глазам своим не мог поверить, что это происходит. Разные мысли в голове, стали меня посещать и в основном они были интимного характера. Неужели моя мама, встречается с этим юнцом и в тайне от отца, изменяет ему, таким способом в примерочной кабинке ТК.

    Да, да. У мамы был муж, который приходился мне отцом. Но у меня и в мыслях не было, что мама может так незатейливо, наставлять ему рога, посреди бела дня, да ещё при скоплении множества народа.

    Мне стало любопытно, что же они там делают, и я подошёл к кабинке поближе. Стоя у шторы и прислушиваясь, я ничего не мог расслышать. Вокруг голдели люди и звуки сливались, теряясь в пространстве. Смирившись с этим, я отошёл в сторону якобы высматривая, что купить, но неизменно поглядывая в сторону примерочных. Тут неожиданно я увидел ещё пару человек, с которыми мама разговаривала. Они тоже ходили по магазинчику и что-то выбирали, косясь на кабинки с соответствующим номером. Вскоре со временем у примерочной скопилось более пяти человек. И они тупо озираясь друг на друга, не понимали, что вообще происходит. Некоторые примерочные были пусты, но никто в них не заходил из парней, ждавшие не понятно чего, как мне казалось.

    И вот, этот парень, что был первый, быстро вылетев из кабинки, как ошпаренный, тут же помчался прочь, поправляя на ходу свои штаны. Я не понимал, что твориться здесь, смотря ему в след, как он удаляется. И пока у меня в голове это переваривалось, в кабинку прошмыгнул следующий из очереди, что стихийно образовалась у заманчивой для них примерочной.
    Популярне порно
    https://prav.io/browse/questions/kak-vernut-dengi-iz-piramidy-hermes-vista-scheta-cheki-sud

  11. Sazrdcl表示:

    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по приятным тарифам.
    Вы заказываете диплом в надежной и проверенной временем компании. Приобрести диплом ВУЗа– http://ros.listbb.ru/viewtopic.phpf=2&t=2526/ – ros.listbb.ru/viewtopic.phpf=2&t=2526

  12. Sazrxam表示:

    Мы готовы предложить дипломы любой профессии по приятным ценам.– dip-lom-rus.ru/bistraya-i-tochnaya-registratsiya-diploma-bez-oshibok/

  13. mostbet_cpsa表示:

    мостбет вход mostbet6035.ru .

  14. mostbet_busa表示:

    мостбет скачать андроид https://www.mostbet6035.ru .

  15. SteveViand表示:

    http://usmexpharm.com/# mexican pharmacy

  16. Sazreja表示:

    Мы можем предложить дипломы любой профессии по невысоким ценам.– vuz-diplom.ru/kupit-diplom-s-reestrom-bistro-i-nadezhno-dlya-vas/

  17. Cletusiders表示:

    UsMex Pharm: UsMex Pharm – Mexican pharmacy ship to USA

  18. Sazrwxn表示:

    Заказать диплом ВУЗа!
    Заказать диплом института по выгодной стоимости возможно, обращаясь к проверенной специализированной компании. Купить диплом о высшем образовании: diplomskiy.com/nadezhnij-i-dostupnij-xml-diplom-s-garantiej-podlinnosti-2

  19. Sazrspz表示:

    Приобрести диплом института !
    Приобретение диплома любого университета РФ у нас является надежным делом, потому что документ заносится в государственный реестр. Заказать диплом университета diplomnie.com/kupit-diplom-s-zaneseniem-v-reestr-rossii-bistro-legko

  20. DennisDor表示:

    mexican pharmacy: certified Mexican pharmacy – certified Mexican pharmacy

  21. Sazrxop表示:

    Приобрести диплом возможно используя сайт компании. sev-school24.maxbb.ru/viewtopic.phpf=3&t=1143

  22. Sazrpvs表示:

    Приобрести диплом на заказ можно используя официальный сайт компании. collieforum.ru/posting.phpmode=post&f=17

  23. Sazrstq表示:

    Заказать диплом возможно через официальный сайт компании. tsnlp.5nx.ru/viewtopic.phpf=26&t=1096

  24. Cletusiders表示:

    mexican pharmacy: usa mexico pharmacy – mexican pharmacy

  25. Diplomi_ohEa表示:

    Заказать диплом о высшем образовании!
    Мы можем предложить документы институтов, расположенных на территории всей России.
    diplom-kaluga.ru/kupite-diplom-s-zaneseniem-v-reestr-bistro-i-legko/

  26. Sazrfqx表示:

    Заказать диплом института !
    Приобретение диплома ВУЗа России у нас является надежным делом, потому что документ будет заноситься в государственный реестр. Приобрести диплом университета rusd-diplomj.ru/gde-kupit-diplom-s-reestrom-7

  27. Sazriyy表示:

    Быстро и просто купить диплом об образовании!
    Заказать диплом университета по доступной цене возможно, обратившись к надежной специализированной фирме. Приобрести диплом: diplomc-v-ufe.ru/diplomi-vuzov-s-reestrom-garantiya-podlinnosti

  28. Jarioregr表示:

    Где купить диплом специалиста?
    Мы предлагаемвыгодно и быстро купить диплом, который выполнен на оригинальном бланке и заверен печатями, водяными знаками, подписями официальных лиц. Документ способен пройти любые проверки, даже при использовании профессионального оборудования. Достигайте свои цели максимально быстро с нашими дипломами. Приобрести диплом о высшем образовании! raiter.flyboard.ru/viewtopic.php?f=3&t=2963

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

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