Sintaks Emmet
Memulai
Mari kita mulai untuk meningkatkan perkembangan Anda dengan kecepatan cahaya.
- Emmet di Visual Studio Code (code.visualstudio.com)
- Emmet 2 untuk Sublime Text (github.com)
- Emmet untuk Coda (emmet.io)
- Emmet untuk Atom (github.com)
Perkalian: *
ul>li*5
<ul>
<li></li>
<li></li> <li></li>
<li></li> <li></li>
<li></li> <li></li>
<li></li> <li></li>
</ul>
Anak: >
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
Atribut khusus
p [title = “Halo dunia”]
<p title = "Halo dunia"></p>
td [rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td
[a = ’nilai1’ b = “nilai2”]
<div a="value1" b="value2"></div>
Teks:
a{Klik saya}
<a href="">Klik saya</a>
p>{Klik }+a{di sini}+{ untuk melanjutkan}
<p>Klik <a href="">di sini</a> untuk melanjutkan</p>
Atribut ID dan CLASS
#header
<div id="header"></div>
.title
<div class="title"></div> </div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>
Nama tag implisit
.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul>
<li class="class"></li>
</ul>
table>.row>.col
<tabel>
<tr class="row">
<td class="col"></td>
</tr>
</table>
Saudara kandung: +
div + p + bq
<div> </div>
<p></p>
<kutipan blok </kutipan blok>
Memanjat: ^
div+div>p>span+em^bq
<div></div> </div
<div>
<p><span></span><em></em></p>
<kutipan blok></kuotasi blok>
</div> </div>
div+div>p>span+em^^bq
<div></div> </div
<div>
<p><span></span><em></em></p>
</div> </div>
<kutipan blok></kuotasi blok>
Pengelompokan: ()
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> </div>
(div>dl>(dt+dd)*4)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dt></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
$
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
h$[judul=item$]{Header $}*3
<h1 title = "item1">Header 1</h1>
<h2 title = "item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
ul>li.item$$$*3
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>
ul>li.item$@-*3
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
ul>li.item$@2*3
<ul>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>
Lihat juga
- [Lembar contekan Emmet] (https://docs.emmet.io/cheat-sheet/) (docs.emmet.io)