Documentación Emmet

Volver al sitio web principal

Tu nueva carrera de
desarrollo te espera.
Echa un vistazo a los
últimos listados.

anuncios a través de
Carbon

abreviaturas
Sintaxis
Tipos de elementos
Nombres de etiquetas implícitos
Generador “Lorem Ipsum”

Abreviaturas CSS
Prefijos de proveedores
Gradientes
Búsqueda borrosa

Comportamiento
Expandir abreviatura
Equilibrio
Ir a Par coincidente
Envolver con abreviatura
Ir a Editar punto
Seleccione un artículo
Alternar comentario
Etiqueta de división/unión
Remover etiqueta
Combinar líneas
Actualizar tamaño de imagen
Evaluar expresión matemática
Número de incremento/decremento
Reflejar valor CSS
Codificar/Decodificar imagen a datos:URL

filtros
Yandex BEM/OOCSS

personalización
 fragmentos.json
preferencias.json
syntaxProfiles.json

Hoja de trucos

Más herramientas para desarrolladores:

Estilo de vida de Emmet

Herramienta de edición bidireccional en tiempo real para CSS, LESS y SCSS.

Emmet Re: ver

Una forma rápida y fácil de probar el diseño receptivo en paralelo.

¶ Nombres de etiquetas implícitos

Incluso con un motor de abreviaturas tan poderoso, que puede expandir grandes
estructuras HTML a partir de abreviaturas cortas, escribir nombres de etiquetas puede ser
muy tedioso.

En muchos casos, puede omitir escribir nombres de etiquetas y Emmet lo sustituirá por
usted. Por ejemplo, en lugar de div.contentsimplemente puede escribirlo .contenty
expandirlo en <div class="content"></div>.

Cómo funciona
Cuando expande la abreviatura, Emmet intenta tomar el contexto principal, por ejemplo,
el elemento HTML, dentro del cual está expandiendo la abreviatura. Si el contexto se
tomó con éxito, Emmet usa su nombre para resolver los nombres implícitos:

Jugar demo Inténtalo tú mismo

1 < cuerpo >

2 < div >
3
4 </ div >
5 ​
6 < intervalo ></ intervalo >
7 ​
8 < ul clase = "navegación" >
9
Ver demostración
10
11 ​
</ ul > ▶
12 </ cuerpo >
Como puede ver en el ejemplo anterior, Emmet mira el nombre de la etiqueta principal
cada vez que expande la abreviatura con un nombre implícito. Así es como resuelve los
nombres de algunos elementos principales:

lipara ulyol
trpara table, y tbody_theadtfoot
td por tr
optionpara selectyoptgroup

Eche un vistazo a algunos equivalentes de abreviaturas con nombres de etiquetas

implícitos y explícitos:

.wrap>.content div.wrap>div.content

em>.info em>span.info

ul>.item*3 ul>li.item*3

table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]

comentarios impulsados ​por Disqus

Soporte: info@emmet.io

Creado con DocPad y Gulp.js

Tema mínimo por lista ordenada

Ver código fuente de la página en GitHub