[suver.ru] developer

19 февраля 2021

Сокращение в Emmet

Таблица сокращений в плагине Emmet


Простынь получилась длинная, поэтому приходиться сворачивать под cut...
Саму таблицу сокращений, смотри по кнопке "Дальше"

Базовый синтаксис 
Сокращение Расшифровка сокращения
Дочерний: > nav>ul>li
                    <nav>
                        <ul>
                            <li></li>
                        </ul>
                    </nav>
Соединение: + div+p+bq
                    <div></div>
                    <p></p>
                    <blockquote></blockquote>
Поместить выше (в деревеHTML): ^ div>p>span+em^bq
                    <div>
                        <p><span></span><em></em></p>
                        <blockquote></blockquote>
                    </div>
Группировать: () div>(header>ul>li)+footer>p
                    <div>
                        <header>
                            <ul>
                                <li></li>
                            </ul>
                        </header>
                 
                        <footer>
                             <p></p>
                        </footer>
                      </div>
Умножение: * ul>li*3
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
Нумерация: $ ul>li.item_$*3
                        <ul>
                            <li class="item_1"></li>
                            <li class="item_2"></li>
                            <li class="item_3"></li>

                        </ul>

ul>li*3>a{item$}
                    <ul>
                        <li><a href="">item1</a></li>
                        <li><a href="">item2</a></li>
                        <li><a href="">item3</a></li>
                    </ul>

ul>li*3>a[href="#$"]{item$} 
                    <ul>
                        <li><a href="#1">item1</a></li>
                        <li><a href="#2">item2</a></li>
                        <li><a href="#3">item3</a></li>
                    </ul>
id и class #header+.class
                    <div id="header"></div>
                    <div class="class"></div>

#hdr.cl_1.cl_2
                     
<div id="hdr" class="cl_1 cl_2"></div>
Атрибуты: [] a[title="Подсказка ссылки"]
                     <a href="" title="Подсказка ссылки"></a>

td[rowspan colspan title]
                     
<td rowspan="" colspan="" title=""></td>
Текст: {} .class{свободный текст}
                    <div class="class">свободный текст</div>

p>{Кликните }+a{сюда}+{ скорее}
                     
<p>Кликните <a href="">сюда</a> скорее</p>
Сокращение тегов .class
                    <div class="class"></div>

em>.class
                    <em><span class="class"></span></em>

ul>.class
                    <ul>
                        <li class="class"></li>
                    </ul>

table>.row>.col
                    <table>
                        <tr class="row">
                            <td class="col"></td>
                        </tr>

                    </table>
HTML сокращения
! <!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>               
 
</body>
</html>
h1{Заголовок <h1>Заголовок</h1>
a <a href=""></a>
a:link <a href="http://"></a>
a:mail <a href="mailto:"></a>
base <base href="">
br <br>
link <link rel="stylesheet" href="">
link:css <link rel="stylesheet" href="style.css">
link:favicon <link rel="shortcut icon" type="image/x-icon"href="favicon.ico">
link:rss <link rel="alternate" type="application/rss+xml"title="RSS" href="rss.xml">
link:atom <link rel="alternate" type="application/atom+xml"title="Atom" href="atom.xml">
meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
meta:vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
meta:compat <meta http-equiv="X-UA-Compatible" content="IE=7">
script:src <script src=""></script>
img <img src="" alt="">
ifr <iframe src="" frameborder="0"></iframe>
emb <embed src="" type="">
obj <object data="" type=""></object>
map <map name=""></map>
map+ <map name="">
        <area shape="" coords="" href="" alt="">
</map>
area <area shape="" coords="" href="" alt="">
form <form action=""></form>
form:getform:post <form action="" method="get"></form>
<form action="" method="post"></form>
label <label for=""></label>
input <input type="text">
inp <input type="text" name="" id="">
input:h <input type="hidden" name="">
input:p <input type="password" name="" id="">
input:c <input type="checkbox" name="" id="">
input:r <input type="radio" name="" id="">
input:f <input type="file" name="" id="">
input:s <input type="submit" value="">
input:i <input type="image" src="" alt="">
input:b <input type="button" value="">
input:reset <input type="reset" value="">
select <select name="" id=""></select>
select+ <select name="" id="">
        <option value=""></option>
</select>
opt <option value=""></option>
tarea <textarea name="" id="" cols="30" rows="10"></textarea>
video <video src=""></video>
audio <audio src=""></audio>
bq <blockquote></blockquote>
fst <fieldset></fieldset>
btn <button></button>
btn:s <button type="submit"></button>
btn:b <button type="button"></button>
btn:r <button type="reset"></button>
sect <section></section>
art <article></article>
hdr <header></header>
ftr <footer></footer>
str <strong></strong>
ol+ <ol>
        <li></li>
</ol>
ul+ <ul>
        <li></li>
</ul>
dl+ <dl>
        <dt></dt>
        <dd></dd>
</dl>
table+ <table>
        <tr>
                <td></td>
        </tr>
</table>
tr+ <tr>
        <td></td>
</tr>
c <!-- Комментарий -->
CSS сокращения
db display: block


Сокращения HTML можно скачать в формате PDF:

Сокращения CSS можно скачать в формате PDF:  




P.S. Для CSS сокращений наверное надо новый список делать, чтобы не создавать ещё больше простынь, которую фиг прокрутишь...
Так что в скором времени опубликую и CSS файл.

P.P.S. Сделал я этот PDF файл, СSS для Emmet... посмотрел на него и думаю : - наверное не буду его публиковать... 24! страницы, куда-на??? Просто дам ссылку, кому надо тот скачает, оставлю самые ходовые сокращения. Можно ещё в комментах добавить, если кто чего не нашёл на странице...
Такие вот дела...

1 комментарий:

  1. Есть ещё ФИШка...😊 пишешь - Lorem жмёшь tab и появляется текст-"рыба". Удобная штука, для наполнения шаблона текстом.
    Но можно эту ФИШку запустить на русском добавив ru - Loremru - тогда текст будет на русском... короче, прикольная тема.😉
    Для примера набрал в VScode - Loremru100 (100 - это количество слов в абзаце)

    [img]https://1.bp.blogspot.com/-Qzr4xWvgJhA/YC-ZguR5MXI/AAAAAAAAAEM/p6A8QJzYuNUAxofICRtX0c-KzajCLYdkACLcBGAsYHQ/s0/lorem.jpg[/img]

    ОтветитьУдалить

Чтобы оставить комментарий, нужно залогиниться в гугле... Такие уж правила гугла.