Адреса
м. Кам'янець-Подільський, Україна
vikagladka@ukr.net
Telegram
Ph: +380970241547

Основні скорочення Emmet для HTML – шпаргалка

Ініціація HTML документа:

 !

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

Гіперпосиланя:

 a

<a href=""></a>

Поле форми: телефон

input:tel

<input type="tel" name="" id="" />

Поле форми: кнопка підтвердження

input:button

 <input type="tel" name="" id="" />

Ненумерований список

ul>li*5

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

Ненумерований список з класами

ul>li.item$*5

 <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Групування ()

(div>dl>(dt+dd)*3)+footer>p 

 <div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Операції з атрибутами

div#header+div.page+div#footer.class1.class2.class3

 <div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Кастомні атрибути

td[title=”Hello world!” colspan=3] 

<td title="Hello world!" colspan="3"></td>

Операції з нумеруванням

ul>li.item$$$*5

 <ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Нумерування в зворотньому напрямку

ul>li.item$@-*5 

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

Налаштування нумерування

ul>li.item$@-3*5

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>
Author avatar
Вікторія Гладка
https://victoriaweb.me
Веб майстер, WordPress розробник, автор.

Post a comment

Your email address will not be published. Required fields are marked *

На сайті використовуються куки