Otros atajos de Emmet

herramientas

3 Minutos

12 jul 2024

Estructura básica de un documento

! (signo de admiración) para crear la estructura básica de un documento HTML con la versión más actual.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Anteriormente se usaba el atajo html:5.

Ligar archivo CSS

link:css para ligar un archivo CSS a nuestro documento:

<link rel="stylesheet" href="style.css" />

Ligar favicon

link:favicon para ligar un archivo que servirá como el ícono de nuestra pestaña:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Métodos de entrada de datos

Texto

input para agregar un <input> de tipo text:

<input type="text" />

Búsqueda

input:search para agregar un <input> de tipo search:

<input type="search" name="" id="" />

Email

input:email para agregar un <input> de tipo email:

<input type="email" name="" id="" />

Url

input:url para agregar un <input> de tipo url:

<input type="url" name="" id="" />

Contraseña

input:password para agregar un <input> de tipo password:

<input type="password" name="" id="" />

Fecha y hora

input:datetime para agregar un <input> de tipo datetime:

<input type="datetime" name="" id="" />

Fecha

input:date para agregar un <input> de tipo date:

<input type="date" name="" id="" />

Mes

input:month para agregar un <input> de tipo month:

<input type="month" name="" id="" />

Semana

input:week para agregar un <input> de tipo week:

<input type="week" name="" id="" />

Hora

input:time para agregar un <input> de tipo time:

<input type="time" name="" id="" />

Teléfono

input:tel para agregar un <input> de tipo tel:

<input type="tel" name="" id="" />

Número

input:number para agregar un <input> de tipo number:

<input type="number" name="" id="" />

Color

input:color para agregar un <input> de tipo color:

<input type="color" name="" id="" />

Casilla

input:checkbox para agregar un <input> de tipo checkbox:

<input type="checkbox" name="" id="" />

Botón de opción

input:radio para agregar un <input> de tipo radio:

<input type="radio" name="" id="" />

Rango

input:range para agregar un <input> de tipo range:

<input type="range" name="" id="" />

Archivo

input:file para agregar un <input> de tipo file:

<input type="file" name="" id="" />

Enviar

input:submit para agregar un <input> de tipo submit:

<input type="submit" value="" />

Imagen

input:image para agregar un <input> de tipo image:

<input type="image" src="" alt="" />

Botón

input:b, input:btn o input:button para crear un <input> de tipo button:

<input type="button" value="" />

Reiniciar

input:reset para agregar un <input> de tipo reset:

<input type="reset" value="" />

Comentarios

Esta artículo aparece en estas rutas de aprendizaje

Dominando herramientas: Emmet

Mejoremos nuestra velocidad de programación aprendiendo atajos de autocompletado