W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj
Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
Inne podstawowe i często używane to:
<!-- 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" />
<!-- style -->
<style></style>
<!-- script -->
<script></script>
<!-- script:src -->
<script src=""></script>
<!-- img -->
<img src="" alt="" />
<!-- a -->
<a href=""></a>
<!-- br -->
<br />
<!-- hr -->
<hr />
<!-- mn -->
<main></main>
<!-- sect -->
<section></section>
<!-- art -->
<article></article>
<!-- hdr -->
<header></header>
<!-- ftr -->
<footer></footer>
<!-- adr -->
<address></address>
<!-- str -->
<strong></strong>
<!-- for -->
<form action=""></form>
<!-- input -->
<input type="text" />
<!-- label -->
<label for=""></label>
<!-- button:s -->
<button type="submit"></button>
<!-- button:r -->
<button type="reset"></button>
<!-- btn -->
<button></button>
<!-- select -->
<select name="" id=""></select>
<!-- tarea lub textarea -->
<textarea name="" id="" cols="30" rows="10"></textarea>> oraz +
<!-- nav>ul>li -->
<nav>
<ul>
<li></li>
</ul>
</nav>
<!-- div+p+span -->
<div></div>
<p></p>
<span></span>Teraz pomieszamy lekko 😉
<!-- ul>li>div+p+span -->
<ul>
<li>
<div></div>
<p></p>
<span></span>
</li>
</ul>Każdy tag możemy dodać wiele razy *
<!-- ul>li*3>p -->
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>Grupowanie przez użycie ()
<!-- ul>li(p+span)*2 -->
<ul>
<li></li>
<p></p>
<span></span>
<p></p>
<span></span>
</ul>Dodanie class i id
<!-- ul>li>p.text#top -->
<ul>
<li>
<p class="text" id="top"></p>
</li>
</ul>Można dodać kilka klas
<!-- ul>li>p.text.top#top -->
<ul>
<li>
<p class="text top" id="top"></p>
</li>
</ul>Dodać można również unikalne class czy id
<!-- ul>li.text*2>p -->
<ul>
<li class="text">
<p></p>
</li>
<li class="text">
<p></p>
</li>
</ul>Dodanie treści { }
<!-- ul>li>p.text*2>p{Treść} -->
<ul>
<li>
<p class="text">
<p>Treść</p>
</p>
<p class="text">
<p>Treść</p>
</p>
</li>
</ul>Dodanie numerowania za pomocą $
<!-- ul>li>p.text$*2>p{Treść $} -->
<ul>
<li>
<p class="text1">
<p>Treść 1</p>
</p>
<p class="text2">
<p>Treść 2</p>
</p>
</li>
</ul>Można też zacząć od konkretnego numeru @
<!-- ul>li>p.text$@10*2>p{Treść $@3} -->
<ul>
<li>
<p class="text10">
<p>Treść 3</p>
</p>
<p class="text11">
<p>Treść 4</p>
</p>
</li>
</ul>A i najważniejsze do uzupełniania treści a mianowicie lorem ipsum wystarczy wpisać lorem i treść gotowa 🙂