Если вы используете Visual Studio Code . Знайте эти сочетания клавиш

Знание сочетаний клавиш Visual Studio сэкономит вам больше времени, чем вы можете себе представить при написании кода. Ознакомьтесь с некоторыми из этих сочетаний клавиш, которые вы можете попробовать, чтобы сэкономить время.

1. Атрибуты ID и Class

— Добавление атрибута Id в HTML-тег
(div#info)

<div id="info"></div>

— Добавление атрибута class в тег html
(div.header)

<div class="header"></div>

— Добавление Id и атрибута class
(Form#.info)

<form action="" id="" class="info"></form>

— Добавление нескольких атрибутов Id и класса
(p.info1.info2.info3.info4#info)

<p class="info1 info2 info3 info4" id="info"></p>

2.Нумерация элементов

— Добавление упорядоченного количества имен классов к дочерним элементам.
(ul>li.items$*5)

<ul>
    <li class="items1"></li>
    <li class="items2"></li>
    <li class="items3"></li>
    <li class="items4"></li>
    <li class="items5"></li>
</ul>

3.Дочерние элементы в одном классе (неявные имена тегов )

(ul>.item)

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

             OR

(table>.row>.col*3)

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

4.Размещение в группах

(div> (header>ul>li*2>a) +footer>p)

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

5.HTML-тег с текстом

(a{Google})

`<a href="https://www.google.com/">Google</a>`

6.Добавление HTML-тега к другому HTML-тегу (Siblings)

(div+sec+p)

<div></div>
<sec></sec>
<p></p>

7.Добавление дочерних и родительских элементов

-Добавление нескольких дочерних элементов

(ul>li*)

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

-Добавление дочерних элементов к родительским элементам

(ul>li)

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