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

17,468 Responses

  1. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр huawei, можете посмотреть на сайте: сервисный центр huawei в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  2. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр huawei в москве, можете посмотреть на сайте: сервисный центр huawei в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  3. buket_nwma表示:

    Лучшие варианты букета невесты, для незабываемого образа на свадьбе.
    Шаг за шагом: соберите уникальный букет невесты, который станет вашим сокровищем.
    Топ-10 свадебных букетов невесты, для свадебной церемонии.
    Бюджетный вариант букета невесты: красиво и доступно, для экономии на свадьбе.
    Свежие цветы или нет: какой букет невесты лучше, для вечной памяти.
    Простота и гармония: как создать стильный букет невесты в минималистическом стиле, который подчеркнет вашу нежность и изящество.
    Секреты подбора букета невесты к платью, для незабываемых фотосессий.
    букет невесты нн https://buketnevestynn.ru/ .

  4. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр huawei, можете посмотреть на сайте: сервисный центр huawei
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  5. buket_pcma表示:

    Как выбрать идеальный букет невесты, которые вас вдохновят.
    Шаг за шагом: соберите уникальный букет невесты, который станет вашим сокровищем.
    Как выбрать букет невесты, который подчеркнет ваш стиль, для создания завораживающего вида.
    Бюджетный вариант букета невесты: красиво и доступно, который порадует вас и вашего жениха.
    Букет невесты из живых цветов vs искусственных: что выбрать?, чтобы было меньше забот и больше радости.
    Букет невесты в стиле минимализм, который подчеркнет вашу нежность и изящество.
    Стильные сочетания букета и платья невесты, для создания гармоничного образа.
    букет невесты купить в нижнем новгороде https://buketnevestynn.ru/ .

  6. Jamesseids表示:

    Фонд по отъему народных денег

    Почему государство кошмарит народный кооператив «Бест Вей»

    Приморским районным судом Санкт-Петербурга рассматривается уголовное дело, связываемое следствием с компаниями «Лайф-из-Гуд», «Гермес» и кооперативом «Бест Вей», параллельно судами Санкт-Петербурга рассматривается дело о законности кооператива «Бест Вей» – оба разбирательства очень далеки от завершения.

    За преследованиями кооператива правоохранительными органами стоит Фонд по защите вкладчиков и акционеров. Он представляется как государственный фонд – хотя давным-давно лишен государственного финансирования, и изначально он зарегистрирован по указу алкоголика Ельцина, принесенному мутными персонами, которые вокруг него ошивались, как общественно-государственный. Если нет госфинансирования, значит, фонд должен быть негосударственным. Но он частично сохраняет государственный статус, при этом существует без контроля со стороны федеральных ведомств.

    Лях–заказчик

    Но некий административный статус у фонда, видимо, остался – учитывая, что его в августе возглавил Валерий Лях, который долгое время – до своего бегства из страны с началом СВО – возглавлял Департамент противодействия недобросовестным практикам ЦБ РФ (департамент этот Набиуллина ликвидировала из-за заказных включений этим департаментом компаний и организаций в предупредительный список ЦБ).

    Ремарка: Лях по-прежнему, судя по всему, не в России – и руководит Фондом по защите прав вкладчиков и акционеров из-за рубежа, иначе как объяснить его систематическую неявку на суд по уголовному делу, в котором он является свидетелем? Кстати, Прокуратура Санкт-Петербурга проявляет к нему удивительную деликатность, отказываясь обеспечить его привод в суд – не потому ли, что Лях как хочет вертит прокуратурой, по крайней мере прокуратурой Северной столицы, и она фактически выполняет его заказ?

    Фонд пытается отобрать активы на 16 млрд рублей у 20 тыс. пайщиков – при этом все, в том числе так называемые потерпевшие по уголовному делу, получат от фонда не более 35 тыс. рублей! Это черным по белому записано в уставе фонда и многократно подтверждено его сотрудниками. Фонд живет за счет отнятых у организаций денег – он не станет делиться ни с кем, кроме коррумпированных правоохранителей, которые помогают ему отобрать деньги у честных людей!

    Очевидна связь фонда с атаками на кооператив «Бест Вей», которая была заметна задолго до уголовного дела. Фонд от своего имени, на своем сайте, не имеющем лицензии СМИ, публиковал хейтерские статьи о кооперативе.

    Хейтеры – сообщники рейдеров

    Потом были созданы высокобюджетные хейтерские телеграм-канал и сайт, причем работающие в теснейшей связке с бригадой гособвинителей из питерской прокуратуры – публикующие в реальном времени информацию из уголовного дела: только выступил свидетель – и в течение часа появляется документ из уголовного дела. Хейтерскими ресурсами занимаются, в частности, Михаил Степанов и Белла Кесельман, подробная информация о которых готовится к публикации.

    Гособвинители даже публиковали там свои телефоны – для оперативного консультирования выступающих в суде со стороны обвинения: госуслуги на высшем уровне!

    То есть государство срастается с бандитской организацией, обслуживающей частные интересы Ляха и его партнеров. Имена всех хейтеров установлены!

    Малиновская – шестерка коррупционеров

    На этой же стороне выступила судья по гражданским делам Приморского районного суда Малиновская – которая просто подмахнула иск прокуратуры о признании кооператива незаконным, фактически без разбирательства: борьба с этим иском предстоит теперь в Санкт-Петербургском городском суде, в который поступит не только жалоба кооператива, но и тысячи жалоб со стороны пайщиков кооператива, законные интересы которых в нарушение ГК и ГПК не были учтены при рассмотрении этого иска.

    Судья Малиновская помогает обворовывать народ. Малиновская, ущемляя интересы народа, отбирая активы у кооператива и жилье у граждан, провоцирует дестабилизацию в стране. И справляется с этим блестяще! Она пытается отобрать у людей жилье и накопления в народном кооперативе. У военных, фронтовиков, семей фронтовиков!

    Она отбирает жилье у честных людей. Ущемляет военных, которые создали кооператив «Бест Вей» и вошли в него со своими семьями. Тем самым подрывает веру в президента, который наделил ее полномочиями.

    Государство и народ

    Государство, выступая от имени народа, на самом деле грабит этот самый народ. Фонд Ляха и его ручные хейтеры устраивают все так, что народ и компании они обворовывают с помощью народного государства, прокуратурой и судьями которого они манипулируют, чтобы они помогали Ляху грабить народ.

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

    Нет ничего страшнее униженных людей, у которых отобрали накопления и жилье, которым уже нечего терять. Они дойдут до высших инстанций и добьются того, что их мнение будет услышано!

  7. buket_cwma表示:

    Как выбрать идеальный букет невесты, которые вас вдохновят.
    DIY букет невесты: легкий и креативный способ, для особенного момента.
    Лучшие тренды в букете невесты, и не оставит равнодушными гостей.
    Бюджетный вариант букета невесты: красиво и доступно, для экономии на свадьбе.
    Букет невесты из живых цветов vs искусственных: что выбрать?, для сохранения воспоминаний о свадьбе.
    Чистые линии и нежные оттенки: секреты минималистического букета невесты, для свадьбы в скандинавском стиле.
    Секреты подбора букета невесты к платью, для создания гармоничного образа.
    заказать букет невесты нижний новгород https://buketnevestynn.ru/ .

  8. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр philips, можете посмотреть на сайте: сервисный центр philips
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали официальный сервисный центр huawei, можете посмотреть на сайте: сервисный центр huawei в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  10. DarioTob表示:

    vavada kazi: казино вавада – vavada kazi

  11. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр philips в москве, можете посмотреть на сайте: сервисный центр philips в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр philips, можете посмотреть на сайте: сервисный центр philips в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  13. buket_fqma表示:

    Идеальный букет невесты для вашей свадьбы, которые вас вдохновят.
    Шаг за шагом: соберите уникальный букет невесты, который станет вашим сокровищем.
    Как выбрать букет невесты, который подчеркнет ваш стиль, для создания завораживающего вида.
    Как сэкономить на букете невесты без потери красоты, для создания стильного образа без больших затрат.
    Свежие цветы или нет: какой букет невесты лучше, для вечной памяти.
    Букет невесты в стиле минимализм, для современной невесты.
    Стильные сочетания букета и платья невесты, для незабываемых фотосессий.
    букет невесты купить в нижнем новгороде https://buketnevestynn.ru/ .

  14. BryanVef表示:

    Freedom Appliances
    Highest quality service in the Calgary !
    [url=https://calgaryrepairappliances.ca/]Calgary washing machine repair[/url]
    Freedom Appliances serve all brands of major appliances in Calgary.

    Appliance Repair Services Calgary – are services where a qualified technician will come to you home to diagnose, recommend, and repair a common household appliance. The cost of appliance repair services includes a trip charge, labor, and replacement parts. Since the cost is not insignificant, most people elect to repair their larger appliances including washer, dryer, oven, cooktop, dishwasher, and refrigerator where the cost of replacement is high.

    When you call Calgary Appliance Repair, one of our friendly staff members will great you and schedule an appointment, depending on what times work best for you. One of our experienced technicians will arrive at your home and give you a complete diagnosis.
    Appliance Repair Services Calgary
    Have you been looking for an appliance repair service in Calgary? At Freedom Appliances, we can fix your appliances in a timely manner. Our appliance repair services in Calgary are the number one choice if you need fast and effective repairs. Our technicians have all of the necessary tools to complete almost any appliance repair repair service in Calgary. We will be able to get your appliances working again in no time at all!

    Our professional technicians will diagnose the issue with your appliance. And then we’ll come up with the best, most cost effective solution. Because we have everything on hand, we complete a simple repair job or replace a part. Freedom Appliances always provide the costs upfront. We operate with transparency. Our technician won’t begin your Calgary repair services until you give us the green light.

    And you won’t find another company that has better customer service than us, we promise! We want our customers to feel satisfied with their appliance repair services in Calgary so much that they would recommend us to their friends and family members. If there are any issues or problems with our work, we will make sure it gets resolved as soon as possible. There is nothing more important than making sure our customers are happy!

    When it comes to delivering the best appliance repair services in Calgary, Freedom Appliances are the best. Call Freedom Appliances today for quality appliance repair services on your home appliances – Calgary. At Freedom Appliances, your satisfaction is our priority.

  15. Williambob表示:

    They’ve sailed across Southeast Asia for centuries. Now, these sea nomads are being forced to live on land
    [url=https://skupkoff.ru]скупка autel[/url]
    Bilkuin Jimi Salih doesn’t remember how old he was when he learned to dive, only, that all the men in his family can do it.

    It might have been his grandfather who taught him, or his father, or even an uncle or cousin. He recalls swimming dozens of feet underwater among the reefs, collecting spider conches, abalone and sea cucumbers to sell at the local fish market.

    “One of our specialties is that, because we live on the sea and we’re always in the sea, we can dive in the water for a long time,” says Salih, via a translator. “We learn by observing, and from there, we develop our own technique.”

    To most people, Salih’s free diving skills are highly unusual; but not to his community. Salih is Bajau Laut, an indigenous seafaring group in Southeast Asia that has lived a semi-nomadic lifestyle on the ocean for centuries. Living on boats and fishing for income and sustenance, the Bajau Laut aren’t just reliant on the sea: they’re biologically adapted to it, with larger spleens that give them the ability to hold their breath for far longer than the average person.

    “We’re very comfortable in the water,” says Salih. The 20-year-old was born on board a lepa, a type of houseboat, on the shore of Omadal Island, off the coast of Semporna in Malaysian Borneo.

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

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