Сайт emmet

EMMET — плагин для ускорения верстки.

Первоначальная разметка:  !+tab

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Вставить ссылку на css: link+tab

 <link rel="stylesheet" href="style.css">

Добавить div с определенным классом  .class1+tab

 <div class="class1"></div>

> добавляет дочерний элемент:   .class1>p + tab

<div class="class1"><p></p></div>

* Добавление нескольких однотипных элементов: nav>ul>li*4 + tab

<nav>
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</nav>

Создание таблички 3 строчки по 3 ячейки: table>tr*3>td*3 + tab

<table>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
</table>

+ Соединение:  header+section+footer + tab

 <header></header> 

 <section></section> 

<footer></footer>

^ Переместить выше в DOM html: ul>li*2^p

<ul>
 <li></li>
 <li></li>
</ul>
<p></p>

Если в этой конструкции вместо ^ поставить >, абзацы вложатся каждый элемент списка. Если поставить +, абзац будет стоять последним элементом после всех li

Группировка (): .class1>(.class2+.class3)+tab

<div class="class1">
 <div class="class2"></div>
 <div class="class3"></div>
</div>

Нумерация $: a.class$*3+tab

<a href="" class="class1"></a>
<a href="" class="class2"></a>
<a href="" class="class3"></a>

id для div ##element$*3

<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>

Ссылка: a+tab

<a href=""></a>

Ссылка с адресом: a[href=irenebelle.com]

<a href="irenebelle.com"></a>

Обычный текст: a{ссылка}

<a href="">ссылка</a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

lorem и loremru — вставляет произвольный текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae maxime, necessitatibus accusantium magnam maiores.

В EMMET очень много различных сокращений, посмотреть их можно в документации на официальном сайте.

Скачать плагин для своего редактора можно здесь