Una referencia de Emmet para HTML

Emmet es una herramienta genial que te ayuda a escribir HTML muy, muy rápido. Es como magia. Emmet no es algo nuevo, ha existido durante años y hay un complemento para cada editor.

Emmet es una herramienta genial que te ayuda a escribir HTML muy, muy rápido.

Es como magia.

Emmet no es algo nuevo, ha existido durante años y hay un complemento para cada editor. EnCódigo VS, Emmet está integrado de fábrica, y siempre que el editor reconozca un posible comando de Emmet, le mostrará una información sobre herramientas.

Emmet in VS Code

Si lo que escribe no tiene otras interpretaciones, y VS Code cree que debe ser una expresión de Emmet, lo previsualizará directamente en la descripción emergente, muy bien:

Emmet preview in VS Code

Sin embargo, realmente no sabía cómo usarlo en todas sus complejidades hasta que me propuse investigar y escribir sobre él, así que tuve que aprender a usarlo en profundidad.

Quiero usarlo en mi trabajo diario, así que esto es lo que aprendí al respecto.

Crea un archivo HTML desde cero

Escribe!y obtendrá un código HTML básico con el que trabajar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
</body>
</html>

> y +

>significa niño

+significa hermano

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

div+p+span
<div></div>
<p></p>
<span></span>

Puede combinarlos para realizar marcas más complejas. VS Code es tan agradable para mostrar una vista previa cuando el fragmento de Emmet no tiene

ul>li>div+p+span
<ul>
<li>
<div></div>
<p></p>
<span></span>
</li>
</ul>

Elevar a mismo nivel

Usando^puedes subir de nivel desde cualquier momento que usaste>para crear un hijo:

ul>li>div+p^li>span
<ul>
<li>
<div></div>
<p></p>
</li>
<li><span></span></li>
</ul>

Puede usarlo varias veces para "subir" más de una vez:

ul>li>div+p^^p
<ul>
<li>
<div></div>
<p></p>
</li>
</ul>
<p></p>

Multiplicadores

Cualquier etiqueta se puede agregar varias veces usando*:

ul>li*5>p
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>

Agrupa una expresión para hacerla más legible

Con la multiplicación en la mezcla, las cosas comienzan a ponerse un poco más complejas. ¿Qué pasa si quieres multiplicar 2 elementos? Los agrupa entre paréntesis( ):

ul>li>(p+span)*2
<ul>
<li>
<p></p>
<span></span>
<p></p>
<span></span>
</li>
</ul>

`id`y`class`atributos

idyclassson probablemente los atributos más utilizados en HTML.

Puede crear un fragmento de HTML que los incluya utilizando una sintaxis similar a CSS:

ul>li>p.text#first
<ul>
<li>
<p class=“text” id=“first”></p>
</li>
</ul>

Puede agregar varias clases:

ul>li>p.text.paragraph#first
<ul>
<li>
<p class=“text paragraph” id=“first”></p>
</li>
</ul>

Agregar una clase o identificación única

iddebe ser único en su página, en cualquier momento.

classpuede repetirse, pero a veces desea uno incremental para sus elementos.

Puedes hacer eso usando$:

ul>li.item$*2>p
<ul>
<li class=“item1”>
<p></p>
</li>
<li class=“item2”>
<p></p>
</li>
</ul>

Otros atributos

Los atributos que no sean class e id deben agregarse usando[]paréntesis:

ul>li.item$*2>p[style="color: red"]
<ul>
<li class=“item1”>
<p style=“color: red”></p>
</li>
<li class=“item2”>
<p style=“color: red”></p>
</li>
</ul>

Puede agregar varios atributos a la vez:

ul>li.item$*2>p[style="color: red" title="A color"]
<ul>
<li class=“item1”>
<p style=“color: red” title=“A color”></p>
</li>
<li class=“item2”>
<p style=“color: red” title=“A color”></p>
</li>
</ul>

Agregar contenido

Por supuesto, también puede llenar el HTML con contenido:

ul>li.item$*2>p{Text}
<ul>
<li class=“item1”>
<p>Text</p>
</li>
<li class=“item2”>
<p>Text</p>
</li>
</ul>

Agregar un número incremental en su marcado

Puede agregar un número incremental en el texto:

ul>li.item$*2>p{Text $}
<ul>
<li class=“item1”>
<p>Text 1</p>
</li>
<li class=“item2”>
<p>Text 2</p>
</li>
</ul>

Ese número normalmente comienza en 1, pero puede hacer que comience en un número arbitrario:

ul>[email protected]*2>p{Text [email protected]}
<ul>
<li class=“item10”>
<p>Text 3</p>
</li>
<li class=“item11”>
<p>Text 4</p>
</li>
</ul>

Una referencia para las etiquetas utilizadas en la página.`head`

Abreviatura	HTML renderizado
Enlace	`<link rel="stylesheet" href="" />`
enlace: css	`<link rel="stylesheet" href="style.css" />`
enlace: favicon	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />`
enlace: rss	`<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />`
meta: utf	`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />`
meta: vp	`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />`
estilo	`<style></style>`
texto	`<script></script>`
guión: src	`<script src=""></script>`

Una referencia para etiquetas comunes

Abreviatura	HTML renderizado
img	`<img src="" alt="" />`
a	`<a href=""></a>`
br	`<br />`
hora	`<hr />`
C	`<!-- -->`
tr +	`<tr><td></td></tr>`
ol +	`<ol>`
ul +	`<ul>`

Una referencia para etiquetas HTML semánticas

Abreviatura	HTML renderizado
Minnesota	`<main></main>`
secta	`<section></section>`
Arte	`<article></article>`
hdr	`<header></header>`
ftr	`<footer></footer>`
adr	`<address></address>`
str	`<strong></strong>`

Una referencia para elementos de formulario

Abreviatura	HTML renderizado
formulario	`<form action=""></form>`
forma: obtener	`<form action="" method="get"></form>`
formulario: poste	`<form action="" method="post"></form>`
etiqueta	`<label for=""></label>`
aporte	`<input type="text" />`
En p	`<input type="text" name="" id="" />`
entrada: oculta, entrada: h	`<input type="hidden" name="" />`
entrada: texto, entrada: t	`<input type="text" name="" id="" />`
entrada: búsqueda	`<input type="search" name="" id="" />`
entrada: correo electrónico	`<input type="email" name="" id="" />`
entrada: url	`<input type="url" name="" id="" />`
entrada: contraseña, entrada: p	`<input type="password" name="" id="" />`
entrada: fecha y hora	`<input type="datetime" name="" id="" />`
entrada: fecha	`<input type="date" name="" id="" />`
entrada: fecha y hora-local	`<input type="datetime-local" name="" id="" />`
entrada: mes	`<input type="month" name="" id="" />`
entrada: semana	`<input type="week" name="" id="" />`
entrada: tiempo	`<input type="time" name="" id="" />`
entrada: tel	`<input type="tel" name="" id="" />`
número de entrada	`<input type="number" name="" id="" />`
entrada: color	`<input type="color" name="" id="" />`
entrada: casilla de verificación, entrada: c	`<input type="checkbox" name="" id="" />`
entrada: radio, entrada: r	`<input type="radio" name="" id="" />`
rango de entrada	`<input type="range" name="" id="" />`
entrada: archivo, entrada: f	`<input type="file" name="" id="" />`
entrada: enviar, entrada: s	`<input type="submit" value="" />`
entrada: imagen, entrada: i	`<input type="image" src="" alt="" />`
entrada: botón, entrada: b	`<input type="button" value="" />`
entrada: restablecer	`<input type="reset" value="" />`
botón: enviar, botón: s, btn: s	`<button type="submit"></button>`
botón: reiniciar, botón: r, btn: r	`<button type="reset"></button>`
botón: desactivado, botón: d, btn: d	`<button disabled="disabled"></button>`
btn	`<button></button>`
fieldset: deshabilitado, fieldset: d, fset: d, fst: d	`<fieldset disabled="disabled"></fieldset>`
fst, fset	`<fieldset></fieldset>`
optg	`<optgroup></optgroup>`
Seleccione	`<select name="" id=""></select>`
seleccionar: desactivado, seleccionar: d	`<select name="" id="" disabled="disabled"></select>`
seleccionar +	`<select name="" id=""><option value=""></option></select>`
opción, optar	`<option value=""></option>`
mesa +	`<table><tr><td></td></tr></table>`
textarea	`<textarea name="" id="" cols="30" rows="10"></textarea>`
tarea	`<textarea name="" id="" cols="30" rows="10"></textarea>`