Emmet - Elementos Hermanos
Ejemplo:
section+header+nav
<![CDATA[
<section></section>
<header></header>
<nav></nav>
]]>
Emmet - Repetir Elementos
Ejemplo:
ul>li*3
<![CDATA[
<ul>
<li></li>
<li></li>
<li></li>
</ul>
]]>
Emmet - Atributo Clase
Ejemplo:
div.contenedor
<![CDATA[
<div class="contenedor"></div>
]]>
Emmet - Múltiples Clases
Ejemplo:
div.clase1.clase2.clasen
<![CDATA[
<div class="clase1 clase2 clasen"></div>
]]>
Emmet - Atributo Identificador
Ejemplo:
nav#menu
<![CDATA[
<nav id="menu"></nav>
]]>
Emmet - Adicionar Texto
Ejemplo:
a{Click Aquí}
<![CDATA[
<a href="">Click Aquí</a>
]]>
Emmet - Personalizar Atributos
Ejemplo:
a[href=www.google.com]
<![CDATA[
<a href="www.google.com"></a>
]]>
Emmet - Números Consecutivos
Ejemplo:
ul>li.num$*3
<![CDATA[
<ul>
<li class="num1"></li>
<li class="num2"></li>
<li class="num3"></li>
</ul>
]]>
Emmet - Dirección Números Consecutivos
Ejemplo:
ul>li.num$@-*3
<![CDATA[
<ul>
<li class="num3"></li>
<li class="num2"></li>
<li class="num1"></li>
</ul>
]]>
Emmet - Base Números Consecutivos
Ejemplo:
ul>li.num$@3*4
<![CDATA[
<ul>
<li class="num3"></li>
<li class="num4"></li>
<li class="num5"></li>
<li class="num6"></li>
</ul>
]]>
Emmet - Subir Nivel
Ejemplo:
section>article>div^p
<![CDATA[
<section>
<article>
<div></div>
</article>
<p></p>
</section>
]]>
Emmet - Agrupar Elementos
Ejemplo:
(header>nav)(section>article)
<![CDATA[
<header>
<nav></nav>
</header>
<section>
<article></article>
</section>
]]>
Emmet - Generar Lorem Ipsum
Ejemplo:
lorem20
<![CDATA[
lorem)
]]>
Emmet - Documentos HTML
Ejemplo:
ejercicio
header#header>nav.navbar.navbar-inverse>div.container>div.navbar-header>(button[type="button"].navbar-toggle>span.sr-only{Toggle
navigation}+span.icon-bar*3)+a.navbar-brand[href="index.php"]>img[src="imgs/logo.png"
alt=""]^div.collapse>ul.nav.navbar-nav>li>a.link[href="index.html"]{Inicio}^li.active.link>a[href="login.html"]{Ingresar}^li>a.link[href="registro.html"]{Registrarse}^li>a.link[href="contacto.html"]{Contacto}
<![CDATA[
<section>
<header id="header">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"><span class="sr-only">Toggle
navigation</span><span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span></button><a
href="index.php" class="navbar-brand"><img src="imgs/logo.png" alt=""></a>
<div class="collapse">
<ul class="nav navbar-nav">
<li><a href="index.html" class="link">Inicio</a></li>
<li class="active link"><a href="login.html">Ingresar</a></li>
<li><a href="registro.html" class="link">Registrarse</a></li>
<li><a href="contacto.html" class="link">Contacto</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
</section>
<body>
]]>
