01 -Emmet

emmet

Work Flow - Markup & Styling

Nesting

Example: <

ul>li>a

Result

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

Sibling

Example: +

section+header+nav

Result

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

Repeat

Example: *

ul>li*3

Result

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

Classes

Example: .

div.contenedor

Result

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

Text

Example:{}

div{Lorem Ipsum Dolor}

Result

<ul> <div>Lorem Ipsum Dolor</div> </ul>

Custom Atlr

Example: []

a[href=www.google.com]

Result

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

Numbering

Example: $

ul>li.num$*3

Result

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

Invert Numbs >

Example: @-

ul>li.num$@-*3

Result

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

Leveling

Example: ^

section>article>div^p

Result

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

Grouping >

Example: ()

(header>nav)(section>article)

Result

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

Dummy Text

Example:lorem3

lorem

Result

<ul> Lorem ipsum dolor </ul>
<<<<<<< HEAD

15. Documents HTML

Example

html:xs

html:xt

html:4s

html:4t

html:5

Result

Documento xhtml 1.0 Strict Documento xhtml 1.0 Transitional Documento html 4.01 Strict Documento html 4.01 Transitional Documento html 5

16. Meta TAGS

Example

meta:vp

Result

<meta name="viewport" content=“width=device-width...>
<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"></ul> </div> </div> </nav> </header>