В первой части мы узнали о возможностях Emmet и о том, как он может ускорить ваш рабочий процесс. В этой части мы узнаем, как установить и использовать Emmet.
Emmet доступен для очень многих текстовых редакторов, но я буду использовать SublimeText , очень популярный и многофункциональный текстовый редактор. Если вы используете другой текстовый редактор, проверьте документацию по адресу http://emmet.io/download/ .
Установка Emmet в SublimeText
Для установки Emmet в SublimeText необходимо выполнить два шага. Сначала я установлю Package Control для SublimeText, а затем я установлю плагин Emmet.
Шаг 1. Установите пакет управления
С SublimeText Package Control мы можем легко установить новые плагины. После установки SublimeText зайдите на сайт https://sublime.wbond.net/installation, чтобы скопировать код для SublimeText2 или SublimeText3 — какую бы версию вы не использовали — нажмите ctrl+` или перейдите в« View > Show Console . После открытия вставьте соответствующий код для вашей версии SublimeText в консоль. После завершения установки перезапустите SublimeText.
Шаг 2: Установите плагин Emmet
После перезапуска SublimeText перейдите в « Preferences > package Control и введите « install package . В появившемся окне введите / найдите Emmet и выберите, чтобы установить его. После завершения установки перезапустите SublimeText, чтобы изменения вступили в силу.
Начало работы с Эмметом
Если вы никогда не использовали Emmet, вы знаете, что написание HTML-кода занимает много времени. Давайте предположим, что вы создаете новый HTML-файл и вам нужны некоторые необходимые теги html, head, title, body с HTML5 doctype , например:
<!doctype HTML> <HTML Lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </HTML>
У вас может быть шаблон по умолчанию для начала, или, возможно, вы сохраняете код и просто копируете и вставляете код каждый раз. Если вы делаете это, вы тратите свое драгоценное время. С Emmet создание кода выше займет около двух или трех секунд. Создайте новый файл и сохраните его как .html (например, index.html) и введите html:5 или ! и нажмите tab , или ctrl+e или любую другую клавишу триггера в текстовом редакторе, чтобы развернуть аббревиатуру, и у вас будет HTML5 doctype и несколько необходимых тегов.
В SublimeText Tab есть ключ, используемый для расширения аббревиатур. Давайте начнем с некоторых основ, а позже мы узнаем о более сложных примерах. Создайте новый файл с SublimeText, сохраните его как emmet.html или index.html. Теперь введите HTML:5 или ! и нажмите Tab и вы получите базовый HTML-код для нашей страницы.
Некоторые полезные ярлыки HTML
Есть так много ярлыков для HTML и CSS, вот некоторые из наиболее широко используемых.
1: Основная разметка с HTML5 Doctype
!илиhtml:5
расширяется до
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2: скрипт с источником
script:src
расширяется до
<script src=""></script>
3: X-UA-совместимый метатег
meta:compat
расширяется до
<meta http-equiv="X-UA-Compatible" content="IE=7">
4: мета-порт viwe
meta:vp
расширяется до
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
5: стиль CSS
style
расширяется до
<style></style>
6: Связывание favicon
link:favicon
расширяется до
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
7: Ссылка для RSS
link:rss
расширяется до
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
8: ссылка для атома
link:atom
расширяется до
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">
9: тег привязки
a
расширяется до
<a href=""></a>
10: ссылка со значением по умолчанию
a:link
расширяется до
<a href="http://"></a>
11: почта для ссылки
a:mail
расширяется до
<a href="mailto:"></a>
12: изображение
img
расширяется до
<img src="" alt="">
13: Форма с методом get
form:get
расширяется до
<form action="" method="get"></form>
14: Форма с методом сообщения
form:post
расширяется до
<form action="" method="post"></form>
15: ввод по умолчанию
input
расширяется до
<input type="text">
16: вход скрыт
input:hidden
расширяется до
<input type="hidden" name="">
17: кнопка
btn
расширяется до
<button></button>
18: кнопка отправки
btn:s
расширяется до
<button type="submit"></button>
19: Необходимая таблица разметки
table+
расширяется до
<table> <tr> <td></td> </tr> </table>
20: Слепой Элемент
select+
расширяется до
<select name="" id=""> <option value=""></option> </select>
21: условные стили для IE6
cc:ie6
расширяется до
<!--[if lte IE 6]> <![endif]-->
22: условные стили для IE
cc:ie
расширяется до
<!--[if IE]> <![endif]-->
23: условные стили для браузеров без IE
cc:noie
расширяется до
<!--[if !IE]><!--> <!--<![endif]-->
Эммет Шпаргалка
Это всего лишь несколько тегов, которые часто используются веб-разработчиками. Вы можете просмотреть полный список поддерживаемых синтаксисов по адресу http://docs.emmet.io/cheat-sheet/ .
Таблицы стилей CSS
Вы можете легко добавить CSS по умолчанию или печатать таблицы стилей. Просто введите link для базовой ссылки, link:CSS для файла style.css по умолчанию и link:print для таблицы стилей печати. Вы можете переопределить значения атрибутов по умолчанию и добавить новые. Дочерние элементы также могут быть добавлены.
1. Базовая ссылка CSS
Link преобразуется в следующий код с табуляцией внутри пустого атрибута href="" .
<link rel="stylesheet" href="">
2. Связывание ссылки по умолчанию style.css
Link:css превратится в следующий код
<link rel="stylesheet" href="style.css">
3. Связывание таблицы стилей печати
Link:print превратится в.
<link rel="stylesheet" href="print.css" media="print">
4. Переопределение атрибута по умолчанию
link[rel=prefetch title="Hello world"]
расширяется до
<link rel="prefetch" href="" title="Hello world">
5. Добавление дочерних элементов
link>xsl:apply-templates расширяется до
<link rel="stylesheet" href=""> <xsl:apply-templates></xsl:apply-templates> </link>
Понимание CSS-подобных сокращений
Сокращения в Emmet делают написание утомительного кода разметки быстрым. Сокращения оптимизированы для генерации HTML и XML, но не ограничиваются ими. Синтаксис аббревиатур выглядит как селекторы CSS, поэтому вам не составит труда выучить его, если вы знакомы с CSS.
Давайте использовать сокращения для создания некоторой базовой разметки HTML для нашей веб-страницы с заголовками, разделами основного и нижнего колонтитула с необходимыми классами.
Давайте начнем с очень простого примера. просто введите
header#site-header
и ты увидишь
<header id="site-header"></header>
Если вы печатаете
header#site-header>h1.logo>a{site name}
и нажмите Tab, он расширится до
<header id="site-header"> <h1 class="logo"><a href="">site name</a></h1> </header>
Основная разметка для страницы
Чтобы создать веб-страницу с необходимой основной разметкой, введите следующий код и нажмите клавишу Tab или Ctrl + E в редакторе.
header#site-header^div.container#main>.primary+aside#sidebar^footer#site-footer
Вышеуказанное сокращение создаст следующую разметку. Как вы видите, у нас есть три раздела для нашей страницы: сначала у нас есть header с идентификатором site-header , затем у нас есть основной div с классом .container и id main , а затем у нас есть раздел нижнего колонтитула с Идентификатор site-footer . Вы можете применять идентификаторы и классы к любым элементам, как я применил к нашему <div class="container" id="main">
<header id="site-header"></header> <div class="container" id="main"> <div class="primary"></div> <aside id="sidebar"></aside> </div> <footer id="site-footer"></footer>
Более сложный пример : в приведенном выше примере я создал разделы (верхний, основной, основной, боковой, нижний колонтитул) для нашей веб-страницы, но теперь я собираюсь добавить дополнительную информацию и разметку в наших разделах. Emmet очень мощный, и вы можете генерировать очень сложный код. В следующем примере я собираюсь создать разметку для всей веб-страницы. Посмотрите на это, и тогда я определю это.
(header#site-header>h1.logo>a[href=#]{site name})^div.container#main>(.primary>h1.post-title{post title here}+img.featured-img+p{post text here})+(aside#sidebar>#widget>h2.widget-title+p{widget text})^footer.#site-footer>.col-4.widget*3>h2.widget-title+p.widget-text
Приведенный выше код сгенерирует следующую разметку HTML:
<header id="site-header"> <h1 class="logo"><a href="#">site name</a></h1> </header> <div class="container" id="main"> <div class="primary"> <h1 class="post-title">post title here</h1> <img src="" alt="" class="featured-img"> <p>post text here</p> </div> <aside id="sidebar"> <div id="widget"> <h2 class="widget-title"></h2> <p>widget text</p> </div> </aside> </div> <footer class="" id="site-footer"> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> </footer>в<header id="site-header"> <h1 class="logo"><a href="#">site name</a></h1> </header> <div class="container" id="main"> <div class="primary"> <h1 class="post-title">post title here</h1> <img src="" alt="" class="featured-img"> <p>post text here</p> </div> <aside id="sidebar"> <div id="widget"> <h2 class="widget-title"></h2> <p>widget text</p> </div> </aside> </div> <footer class="" id="site-footer"> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> </footer>
Теперь внимательно посмотрите на приведенный выше код и обратите внимание на функции и символы, которые я использовал для генерации приведенного выше кода. Я использовал скобки () для группировки секции заголовка, затем я использовал ^ чтобы подняться на одну секцию вверх, чтобы отделить заголовок и контейнер #main. Чтобы сделать вышеупомянутое длинное сокращение более простым, давайте разберем его на три части.
Эта аббревиатура будет генерировать разметку для раздела заголовка:
(header#site-header>h1.logo>a[href=#]{site name})^
Эта аббревиатура будет генерировать разметку для основного раздела:
div.container#main>(.primary>h1.post-title{post title here}+img.featured-img+p{post text here})+(aside#sidebar>#widget>h2.widget-title+p{widget text})^
Эта аббревиатура будет генерировать разметку для раздела нижнего колонтитула:
footer.#site-footer>.col-4.widget*3>h2.widget-title+p.widget-text
Вы можете видеть, что я использовал () и ^ несколько раз, чтобы разделить разделы и создать более сложный код.
В третьей части я расскажу о синтаксисе и функциях.