Можно ли создать весь HTML-код сайта за считанные минуты, если не секунды? Это возможно, если вы используете Emmet! Этот новый подход позволяет быстро разрабатывать код в HTML, XML и других форматах структурированного кода.
Эммет — плагин для многих популярных текстовых редакторов. С помощью Emmet вы создаете скелет своей страницы с рациональным, но очень сжатым синтаксисом, а затем расширяете его до полного правильного HTML-кода. Результат похож на волшебство: строка текста расширяется до сотен строк синтаксиса, и у вас есть статическая страница или даже полная структура сайта, готовая за считанные минуты.
Здесь вы узнаете, как использовать Emmet для создания полной статической веб-страницы. В этом руководстве используется Код Visual Studio , поскольку он имеет встроенную поддержку Emmet. Вы можете использовать Emmet в других редакторах, например Возвышенный текст и Атом , но вам придется добавить его поддержку через расширение.
Создайте файл вашего сайта
Чтобы начать, откройте Visual Studio Code.
![Сайты за считанные минуты с Emmet Run Vscode](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-run-vscode.jpg)
Выберите «Файл ->Новый файл», чтобы создать новый пустой документ.
![Сайты за считанные минуты с Emmet Создайте новый файл](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-make-new-file.jpg)
Выберите «Файл ->Сохранить как», чтобы сохранить файл, присвоив ему расширение «html».
![Сайт<div id=](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-save-as-html.jpg)
Contents
Создайте файл вашего сайта
нить как Html">Базовая структура
Элементы каждой веб-страницы организованы в группы и подгруппы. При кодировании с помощью Emmet вам всегда нужно помнить, что каждая группа содержит элементы, которые сами по себе могут быть группами из еще большего количества элементов.
Примечание. Несмотря на то, что мы объясним основы, было бы лучше, если бы вы ознакомились с основы синтаксиса HTML , прежде чем продолжить.
На самом базовом, верхнем уровне большинство сайтов содержат три таких группы/раздела: заголовок, основную часть основного контента и нижний колонтитул. Чтобы создать их с помощью Emmet, введите:
#header+#mainsite+#footer
![Сайты за считанные минуты с Emmet Header Нижний колонтитул основного сайта](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-header-mainsite-footer.jpg)
Значок «#» перед каждым словом означает, что каждая группа представляет собой элемент div с идент
Базовая структура
в конце строки, чтобы увидеть, как Эммет превращает эту маленькую фразу в три строки структурированного HTML.![Сайты за считанные минуты с расширенным нижним колонтитулом основного сайта Emmet Header](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-header-mainsite-footer-expanded.jpg)
Структура заголовка
Заголовок типичного сайта содержит его логотип и одно или два меню. Чтобы добавить их на свою страницу, вы можете сохранить расширенный HTML-код из предыдущего шага и ввести его непосредственно в раздел заголовка. Затем вы можете ввести что-то вроде:
#logo+#menu_top+#menu_main
![Сайты за считанные минуты с добавлением логотипа и меню Emmet](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-add-logo-and-menus.jpg)
Нажмите Enter, чтобы развернуть его, и у вас появится еще три элемента Div для логотипа вашего сайта и два меню внутри заголовка.
Группировка в Emmet
В Emmet вы группируете элементы, помещая их в круглые скобки. Это позволяет вам создавать сложные структуры для ваших страниц. Поэтому отмените все, что было до этого момента, и сохраните только ваш базовый код #header+#mainsite+footer
, который вы использовали раньше.
![Сайты за считанные минуты с Emmet Undo и экспериментом](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-undo-and-experiment.jpg)
Замените #header
в своем коде на следующее:
(#header>.logo+.menu.top+.menu.main^)
В Emmet вы можете понизить уровень, используя символ >
, и подняться на уровень, используя символ ^
. Это позволяет вам войти в элемент, добавить туда другие, а затем вернуться обратно.
Результат должен выглядеть следующим образом:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
![Сайты за считанные минуты с контентом Emmet Header Plus](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-header-plus-content.jpg)
Вышеупомянутое можно перевести так: «Добавьте Div (группу)
Структура заголовка
Внутри него добавьте три элемента Div с классами «.logo», «.menu.top» и «.menu.main». Вернитесь на уровень выше, за пределы группы, и добавьте рядом с ней еще два блока Div с идентификаторами «#mainsite» и «#footer».![Сайты за считанные минуты с заголовком Emmet в формате HTML](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-header-as-html.jpg)
Структура сообщения
Базовая публикация на типичном сайте обычно содержит следующие элементы:
- Название
- Изображение
- Отрывок (в виде текстового абзаца)
Он также должен предлагать ссылку, позволяющую посетителю прочитать саму публикацию, и, возможно, ссылки на ее категории, теги и т. д. Однако для простоты мы пока будем использовать только эти три элемента.
Вот код, который мы собираемся добавить:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5
Это говорит Эммету: «Создать Div с классом.post. Внутри него поместите заголовок H3, изображение и абзац отрывка.
При добавлении «{TEXT}» после элемента вы определяете его содержимое. Итак, «{Заголовок сообщения}» сообщает Эммету, что содержимым каждого заголовка H3 будет текст-заполнитель «Заголовок сообщения». Вы можете изменить «Заголовок сообщения» на свое имя или любую текстовую строку, которая вам нравится, и она будет использоваться в качестве содержимого заголовков ваших сообщений при раскрытии кода.
Значок $
рядом с «Заголовком сообщения» — это числовая переменная, которая работает вместе с цифрой «5», которую вы видите за круглыми скобками. *5
после скобок говорит Эммету повторить содержимое скобок пять раз. $
заменяется номером итерации каждого сообщения. Замените это число количеством публикаций, которые вы хотите разместить на своей странице.
Добавьте это в реальный код. Это должно выглядеть так:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)
![Сайты за считанные минуты с сообщениями Emmet в основном синтаксисе](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-posts-in-main-syntax.jpg)
Структура нижнего колонтитула
Для нижнего колонтитула мы добавляем две группы — два блока Div с классами «.design» и «.copyright».
Код следующий:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))
![Сайты за считанные минуты с синтаксисом нижнего колонтитула Emmet](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-footer-syntax.jpg)
Это создаст элемент div с классом «.design». Внутри него находится ссылка с классом «.designerslink». Рядом с ним добавлен второй элемент div с классом «.copyright». Внутри этого div находится абзац обычного текста с содержимым «Copyright 2020 My Name».
![Сайты за считанные минуты с включенным нижним колонтитулом Emmet](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-footer-included.jpg)
Результат будет такой:
Теперь просто нажмите Enter, и ваш сайт готов!
Одним нажатием клавиши все, что мы видели до сих пор, и этот ультра-сжатый набор символов превратится в десятки строк правильного синтаксиса HTML для полной страницы!
![Сайты за считанные минуты с Emmet, весь код расширен](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-all-code-expanded.jpg)
Сохраните изменения в файле, нажав Ctrl+ Sили выбрав «Файл ->Сохранить». Чтобы увидеть свою работу, запустите браузер. Затем, используя «Файл ->Открыть» или внешний файловый менеджер, найдите свой HTML-файл и вручную откройте его в браузере.
![Сайты за считанные минуты с сайтом Emmet в браузере](https://saintist.ru/wp-content/uploads/2024/05/sites-in-minutes-with-emmet-site-in-browser.jpg)
Подведение итогов
Вы изучили основы использования Emmet для создания HTML-файла. Конечно, вы можете вернуться к своему коду в любое время, чтобы настроить его или расширить его новыми элементами.
Вы уже знали об Эммете? Используете ли вы какие-нибудь другие сочетания клавиш, которые помогают при создании сайтов? Расскажите нам в разделе комментариев ниже.