Emmet — инструмент которые помогает вам быстро создавать структуру сайта.
Базовые правила для быстрой вертски сайта
Конструкция html
! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> !!! <!DOCTYPE html>
Классы и id (class)
#test_id <div id="test_id"></div> .test_class <div class="test_class"></div> .test_class#test_id <div class="test_class" id="test_id"></div>
Вложенность элементов
.gallery__list>img.gallery_item*3 <div class="gallery__list"> <img src="" alt="" class="gallery_item"> <img src="" alt="" class="gallery_item"> <img src="" alt="" class="gallery_item"> </div> ul.list>li.item*3 <ul class="list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
Атрибуты элементов
img.gallery_item*3[src="./assets/img/galery/galery$.jpg"] <img src="./assets/img/galery/galery1.jpg" alt="" class="gallery_item"> <img src="./assets/img/galery/galery2.jpg" alt="" class="gallery_item"> <img src="./assets/img/galery/galery3.jpg" alt="" class="gallery_item"> .gallery__list>img.gallery_item*5[src="./assets/img/galery/galery$.jpg"] <div class="gallery__list"> <img src="./assets/img/galery/galery1.jpg" alt="" class="gallery_item"> <img src="./assets/img/galery/galery2.jpg" alt="" class="gallery_item"> <img src="./assets/img/galery/galery3.jpg" alt="" class="gallery_item"> <img src="./assets/img/galery/galery4.jpg" alt="" class="gallery_item"> <img src="./assets/img/galery/galery5.jpg" alt="" class="gallery_item"> </div>
