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

3,396 Responses

  1. Escolha esta casa de apostas mais confiavel Tigrinho

  2. tenevoy_txma表示:

    Теневой плинтус: стильное решение для обновления интерьера,
    Шаг за шагом инструкция по установке теневого плинтуса,
    Теневой плинтус как элемент декора: идеи и варианты применения,
    Теневой плинтус: классический стиль в современном исполнении,
    Гармония оттенков: выбор цвета теневого плинтуса для любого интерьера,
    Теневой плинтус: простое решение для скрытия кабелей и проводов,
    Теневой плинтус с подсветкой: создаем эффектное освещение в интерьере,
    Современные тренды в использовании теневого плинтуса для уюта и красоты,
    Теневой плинтус: деталь, которая делает интерьер законченным и гармоничным
    купить плинтус купить плинтус .

  3. Confie neste cassino confiavel Tigrinho

  4. Отличный сайт! Рекомендую заглянуть тудаГрадостроительный консалтинг

  5. Ganhos maximos neste cassino Tigrinho

  6. O cassino mais confiavel para voce Tigrinho

  7. A melhor opcao para jogos de azar Tigrinho

  8. Отличный сайт! Рекомендую заглянуть тудаСтроительный консалтинг в Москве

  9. Отличный сайт! Рекомендую заглянуть тудаСтроительный консалтинг в Москве

  10. aicont表示:

    Your capability to describe intricate concepts is truly a present. Hold enlightening us!

  11. aicont.xyz表示:

    Your writing adds a lot worth to the net community. Thank you!

  12. Efeebb表示:

    claritin pills support – loratadine vital loratadine merry

  13. SLhaneevige表示:

    Диплом В Астрахани
    Чтобы получить ответ на любой вопрос, связанный с этим решением, достаточно связаться с менеджером нашей компании. Очень часто возникают ситуации, когда человек длительное время учиться на конкретного специалиста. Для получения хорошей должности одновременно нужны диплом о высшем образовании и опыт работы, который приобретают на практике. При выборе компании для покупки диплома следует обращать внимание на её репутацию, опыт работы и отзывы клиентов. Институты Гуманитарный, Военный, Дополнительного профобразования, Центры науки и бизнеса, Научные формирования докторантуру, аспирантуру, Отделение довузовской подготовки. Если вы решили приобрести его, то внимательно подбирайте исполнителя. Кроме того, на сайте есть популярная услуга написания работы на заказ.
    russkiy365-diploms-srednee.ru
    Доверенность На Пользование Автомобилем
    При желании Вы можете взять с собой ультрафиолетовый детектор купюр, что бы лично убедиться в том, что мы предлагаем купить диплом на бланке Гознака. В нем находятся все выпускники ВУЗов нашей страны, Мы удаляем информацию сразу после доставки покупки клиенту, после согласования макета, работник заполняет бланк вручную, настоящий гознак без предоплаты гарантия качества. Документ будет выполнен в срок, и обладать высоким качеством в этом можете не сомневаться.
    Аттестат После 11 Класса
    Так же “бумага” позволит пройти проверку в организации СРО – строителей и проектировщиков. Своим клиентам мы предлагаем только высококачественные документы, полностью соответствующие государственному образцу, и гарантируем исполнение в кратчайшие сроки. Для определения трудоемкости в непрерывном образовании применяется система зачетных единиц (ЗЕТ): 1 ЗЕТ равен 1 академическому часу. Данная процедура осуществляется при помощи единого портала Госуслуг.

  14. Jogos de azar no melhor cassino Fortune Tiger

  15. Poerdv表示:

    priligy marvel – priligy prompt priligy article

  16. JseraldAposy表示:

    Нотариальное Согласие

    Нотариальное Согласие
    Если помощи ждать неоткуда, то нужно самостоятельно зарабатывать деньги на жизнь, в этом случае времени на учебный процесс просто не останется. В целом работой довольна, очень рекомендую данную компанию, если нужно быстро и качественно. С дипломом можно легко найти работу, а также получить нотариальное согласье. Чтобы не попасть на мошенников, нужно удостовериться, что покупаете не кустарную подделку, а легитимный документ, отпечатанный на государственном бланке ГОЗНАК, с учетом требований оформления, характерными для конкретного учебного заведения. После отправки заявки с клиентом связывается наш специалист и уточняет детали заказа. Ведь нотариальное согласье диплома бакалавра открывает большие перспективы и возможности. Их нужно принести в приемную комиссию или передать по электронной почте.
    http://www.russkiy365-diploms-srednee.ru
    Доверенность На Регистрацию Автомобиля
    Если сравнить дипломы ВУЗа разных лет, то они будут отличаться и порой просто кардинально, как и качество образования. Просим Вас прислать свои согласья и предложения по содержанию документов. Чтобы получить диплом о неполном высшем образовании, нужно подать письменное заявление непосредственно на руководителя факультета ВУЗа.
    Образец Генеральной Доверенности
    Есть ещё второй вариант, который отличается простой и быстротой. Мы готовы изготовить любые документы на взаимовыгодных условиях. Вся персональная информация является доступной только нам, вплоть до её нотариального согласья и никогда не передавалась и не будет передана проверяющим органам. Поинтересуйтесь, можно ли купить диплом о среднем нотариальном согласьи с оплатой после получения.

  17. Shaneevige表示:

    Купить Диплом Юриста

    Купить Диплом Юриста
    Мы не берем предоплату, если доставка документа в пределах России. Такой диплом Украинского вуза не вызовет сомнений даже при самом тщательном осмотре. Во избежание возможных конфликтов с клиентом, мы предварительно все согласовываем по почте или другим удобным способом. Покупая диплом юриста у нас, вы получаете: профессиональное качество: мы используем современные технологии и высококачественные материалы для изготовления каждого диплома. Затянутая работа может не только потерять актуальность, но и доставить переживания в виду упущенной возможности.
    http://https://gruppa365-diploms-srednee.ru
    Какие Цвета Аттестатов 9 Класс
    Мы рекомендуем заказать док-ты об успешном окончании этих ВУЗов до указанного периода. Согласовываем макет с клиентом и купимте Диплом Юриста фото-видео изделия с содержащейся в нем информацией. Это не значит, что госдиплом выдают только госучреждения, частные вузы, прошедшие аккредитацию, тоже владеют этой привилегией.
    Купить Свидетельство О Рождении
    и не работают по специальности. Такие бумаги пройдут проверку подлинности и не вызовут подозрений в своём происхождении. В последнее время все чаще встречаю людей, которые окончили ВУЗы, получили диплом экономиста, юриста, психолога и т.

  18. SShaneevige表示:

    Купить Диплом О Высшем
    Не купить Диплом ограничивать себя в развитии и материальном благополучии. Каждый документ, предлагаемый нами, это дополнительный документ, гарантия вашей уверенности, в качестве и подлинности документа. Диплом кандидата или доктора наук позволяет повысить имидж среди коллег и конкурентов. Опять таки учитывая опыт нашей работы и то что неоднократно нам задавали вопросы по теме покупки проведенного диплома, сразу хотим рассказать что дело в том, что это ни как не реализовать. Чаще называемые в Узбекистане Академический лицей или профессиональный колледж.
    http://https://rudik-diploms-srednee.ru
    Справка Об Обучении В Университете
    Продажа диплома – это не просто продажа корочки, она должна быть подлинной по оформлению и качеству бланка. Магистр это академическая степень или квалификация, приобретаемая по окончании второго уровня в двухуровневой системе высшего образования. По опыту работы видим, что последнее часто играет существенную роль для работодателя. Главной разницей между магистром и специалистом служит подготовительная база: специалиста подготавливают для профессиональной деятельности в одной из областей производства, в то время как обучение в магистратуре несет в себе глубокое изучение теоретических знаний по выбранному направлению подготовки и ориентирует студента на научно-исследовательскую деятельность в данной отрасли.
    Купить Дипломы О Высшем Образовании Цена
    Литовчина) Институт гостиничного и туристического менеджмента (ИГиТМ) Институт гуманитарного образования и информационных технологий (ИГУМО) Институт рыночной экономики, социальной политики и права (ИРЭСПиП) Институт Содружества Независимых Государств (Институт СНГ) Московский городской институт международного туризма (МГИМТ) Московский государственный академический художественный институт имени В. Сурикова (МГАХИ им. С момента развала Советского Союза прошло более 30 лет и за это время, многие учебные заведения купили Диплом или претерпели реорганизацию. Большинство сограждан поступают в академии, на престижные профессии.

  19. SShaneevige表示:

    Купить Диплом Гознак
    Профессиональное-техническое училище относится к начальным профессиональным учебным заведениям. Не бойтесь перемен и смело обращайтесь к нам, если хотите начать карьеру с нуля. Учебный центр Softline авторизован лидерами мирового рынка ИТ и проводит обучение по 1 500 авторизованным и авторским курсам. Также этот вариант можно использовать для трудоустройства в другие сферы, где не требуются специальные знания. Все, что вам необходимо сделать, – это выбрать ВУЗ и специальность, оформить заявку и оплатить заказ. Они отлично справляются со своей задачей, делают все, согласно требованиям клиента. Наличие документа указывает на желание специалиста профессионально купи и развиваться, получать дополнительные знания и навыки.
    russkiy365-diploms-srednee.ru
    Цвета Аттестатов 9 Класс
    Наши менеджеры знают, какие люди требуются организация, предприятиям и учреждениям, и выпускников каких учебных учреждений хотят видеть в штате работодатели. Поступившая к нам Ваша анкета будет зашифрована на нашем сервере, а по выполнении заказа полностью удалена. Однако, прежде чем принимать такое ответственное решение, важно обратиться к надежному поставщику оригинальных документов. Никто не сомневается в том, что купить Диплом Гознак настоящий документ об окончании ВУЗа возможно, но мало кто понимает, как правильно подойти к решению этой проблемы.
    Бланк Генеральной Доверенности На Автомобиль Без Нотариуса
    Звоните или оформляйте заявку на получение диплома на нашем сайте и ваша жизнь изменится в лучшую сторону. Фон лицевой и оборотной сторон бланка титула, лицевой и оборотной сторон бланка приложения выполняется с наложением двух фоновых сеток с переменным шагом и с ирисовыми раскатами. Напишем купи Диплом Гознак бизнес-план: определяемся со специальностью, которая сегодня наиболее востребована, и высокооплачиваемая на рынке, впитываем нужные знания, при возможности получаем опыт, приобретаем диплом младшего специалиста по выбранной профессии, устраиваемся на работу в компанию, которая заслуживает внимания, работаем, трудимся, развиваемся идем вверх по карьерной лестнице. Единую базу выпускников казахстанских вузов создадут в МОН с нового учебного года.

  20. Ismaelfer表示:

    Сколько Стоит Аттестат За 9 Класс
    Как получить документ чтобы заказать диплом, необходимо пройти несколько этапов. Помогут стоит Аттестат За 9 Класс диплом фармацевта отзывы, собранные на нашем сайте. Купить диплом техникума сегодня может каждый, быстро отыскать его получается далеко не всегда, купить академическую справку можно при помощи нашего сайта. Последний документ, пожалуй, является основным, так как это подтверждение наличия у вас необходимого работодателю опыта для осуществления трудовой деятельности. Если вы хотите получить диплом, который будет отвечать всем требованиям и стандартам, то обращайтесь к нам. Покупка диплома об окончании техникума, в котором вы реально учились, реальна и легко осуществима.
    http://https://rudik-diploms-srednee.ru
    Купить Вкр Магистра
    В настоящее время многие компании предлагают оформить на заказ диплом о получении высшего образования. Обращаясь в нашу компанию, вы получаете уникальный шанс купить диплом колледжа 2015. В процессе перевода было много вопросов и хочется отметить ту неоценимую помощь и поддержку, которую оказала мне мой куратор Татьяна Андреевна Панова, она всегда оперативно и на высоком профессиональном уровне консультировала меня. В связи с этим работодатели неохотно принимают на работу людей, не имеющих профильного образования.
    Купить Диплом О Среднем Образовании
    По завершению согласований мы непосредственно приступим к работе по изготовлению диплома. Продажа свидетельств о разводе, позволяет избежать спорных ситуаций в юридических и финансовых вопросах, а также возвращают статус холостне замужем, что, в случае неудачного опыта семейной жизни, является приятным бонусом. Для выполнения заказов, мы используем только официальные бланки и качественные расходные материалы, поэтому отличить нашу полиграфию от оригинальной продукции невозможно даже специалистам.

  21. Tente a sua sorte neste cassino Fortune Tiger

  22. Jogue em um cassino confiavel Fortune Tiger

  23. Ganhos maximos neste cassino Fortune Tiger

  24. Jogue em um cassino confiavel Fortune Tiger

  25. Eu recomendo o cassino mais confiavel Fortune Tiger

  26. Fpxbrr表示:

    claritin pills again – claritin pills feather loratadine medication cell

  27. Ryxqrb表示:

    valtrex pills fantastic – valacyclovir online temple valtrex pills yield

  28. Eu recomendo o melhor cassino Fortune Tiger

  29. O melhor cassino do mundo Fortune Tiger

發佈留言

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