01-emmet

work flow-markup & styling

Emmet

Anidar Elementos

Ejemplo:

ul>li>a>

Resultado:

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

Elementos hermanos

Ejemplo:

section+header+nav

Resultado:

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

Repetir Elementos

Ejemplo:

ul>li*3

Resultado:

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

Artibuto Clase

Ejemplo:

div.contenedor

.contenedor2

Resultado:

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

Multiples Clases

Ejemplo:

div.clase1.clase2.clasen

Resultado:

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

Atributo Identificador

Ejemplo:

nav#menu

Resultado:

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

Adicionar Texto

Ejemplo:

div{Lorem Ipsum Dolor}

a{Click Aquí}

Resultado:

<div>Lorem Ipsum Dolor</div><a href="">Click Aquí</a>

Personalizar Atributos

Ejemplo:

a[href=www.google.com]

Resultado:

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

Números Consecutivos

Ejemplo:

ul>li.num$*3

section>article.sec$$$*3

Resultado:

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

Dirección Números Consecutivos

Ejemplo:

ul>li.num$@-*3

Resultado:

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

Base Números Consecutivos

Ejemplo:

ul>li.num$@3*4

Resultado:

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

Subir Nivel

Ejemplo:

section>article>div^p

Resultado:

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

Agrupar Elementos

Ejemplo:

(header>nav)(section>article)

Resultado:

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

Generar "Lorem Ipsum Dolor"

Ejemplo:

lorem

lorem20

lorem*5

Resultado:

Lorem ipsum dolor sit amet.

Documents HTML

Ejemplo:

html:xs --Documento xhtml 10.Strict

html:xt --Documento xhtml 10. Transitional

html:4s --Documento html 4.01 Stric

html:4t --Documento html 4.01 Transitional

html:5 --Documento html5

Meta TAGS

Ejemplo:

meta:vp --meta name="viewport" content="width=device-width...

Reto

Ejemplo:

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})

<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> <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> </nav> </header>