01- Emmet

01- Emmet

Work Flow - Merkup & Styling

📂 Anidar Elementos

Example:

ul>li>a

result:

<ul> <li><a href=""></a></li> </ul>

👯 Elementos Hermanos

Example:

section+header+nav

result:

<section></section> <header></header> <nav></nav>

🔁 Repetir Elementos

Example:

ul>li*3

result:

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

🏷️ Atributo Clase

Example:

div.contenedor

result:

<div class="contenedor"></div>

🏷️🏷️ Múltiples Clases

Example:

div.clase1.clase2.clasen

result:

<div class="clase1 clase2 clasen"></div>

🆔 Atributo Identificador

Example:

nav#menu

result:

<nav id="menu"></nav>

📝 Adicionar Texto

Example:

div{Lorem Ipsum Dolor}

result:

<div>Lorem Ipsum Dolor</div>

⚙️ Personalizar Atributos

Example:

a[href=www.google.com]

result:

<a href="www.google.com"></a>

🔢 Números Consecutivos

Example:

ul>li.num$*3

result:

<ul> <li class="num1"></li> <li class="num2"></li> <li class="num3"></li> </ul>

⬇️🔢 Dirección Números Consecutivos

Example:

ul>li.num$@-*3

result:

<ul> <li class="num3"></li> <li class="num2"></li> <li class="num1"></li> </ul>

🔢📌 Base Números Consecutivos

Example:

ul>li.num$@3*4

result:

<ul> <li class="num3"></li> <li class="num4"></li> <li class="num5"></li> <li class="num6"></li> </ul>

⬆️ Subir Nivel

Example:

section>article>div^p

result:

<section> <article> <div></div> </article> <p></p> </section>

🗂️ Agrupar Elementos

Example:

(header>nav)+(section>article)

result:

<header> <nav></nav> </header> <section> <article></article> </section>

📄 Generar “Lorem Ipsum Dolor”

Example:

lorem

result:

Lorem ipsum dolor sit amet...

🌐 Documents HTML

Example:

html:xs

result:

<html:xs></html:xs>

🏷️ Meta TAGS

Example:

meta:vp

result:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

RETOOO

Example:

header#header>nav.navbar.navbar-inverse>div.container>div.navbar-header>button.navbar-toggle[type="button"]>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}

result:

<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 class="navbar-brand" href="index.php"> <img src="logo-html.png" alt=""> </a> </div> <div class="collapse"> <ul class="nav navbar-nav"> <li> <a class="link" href="index.html">Inicio</a> </li> <li class="active link"> <a href="login.html">Ingresar</a> </li> <li> <a class="link" href="registro.html">Registrarse</a> </li> <li> <a class="link" href="contacto.html">Contacto</a> </li> </ul> </div> </div> </nav> </header>