Abreviaturas Y Sintaxis DE Abreviaturas Y Sintaxis DE Abreviaturas Y Sintaxis DE Abreviaturas Y Sintaxis DE EmmetEmmetEmmetEmmet

Emmet utiliza una sintaxis similar a los selectores CSS para describir las posiciones dentro de un árbol generado y atributos de elementosPuede utilizar nombres de elementos "como div o p para generar etiquetas HTML. Emmet no tiene un conjunto predefinido de nombres de variables disponibles, puede escribir la palabra para transformarla en una etiqueta: div → <div> </ div>, foo → <foo> </ foo> y así sucesivamente.

Los operadores de la jerarquización

Operadores de anidación se utilizan para colocar elementos en el interior del árbol de abreviatura generada: si debe ser colocado dentro o cerca del elemento de contexto.

HIJO:>

Usted puede utilizar el operador > para anidar elementos dentro de otros:

div>ul>li

Esto producira:

<div>

<ul>

<li></li>

</ul>

</div>

Hermanando con: +Utilice el operador + para colocar elementos cerca uno del otro, en el mismo nivel: div+p+bq

Esto producira:

<div>

<ul>

<li></li>

</ul>

</div>

Suba-up: ^

Con> el operador que está descendiendo por el árbol generado y las posicionesde todos los elementos del mismo nivel,se resolverán contra el elemento más profundo:

div+div>p>span+em

Esto producira:

<div></div>

<div>

<p><span></span><em></em></p>

</div>

Con ^ operador, se puede subir a un nivel superior el contexto de árboles y cambio donde deben aparecer los siguientes elementos:

div+div>p>span+em^bq

Esto producira:

<div></div>

<div>

<p><span></span><em></em></p>

<blockquote></blockquote>

</div>

Puede utilizar tantos operadores ^ como quieras, cada operador se moverá un nivel hacia arriba:

div+div>p>span+em^^^bq

Esto producira:

<div></div>

<div>

<p><span></span><em></em></p>

</div>

<blockquote></blockquote>

Multiplicación: *

* Con el operador puede definir cuántas veces hay que emitir el elemento:

ul>li*5

Esto producira:

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

Agrupación: ()

Parenthesises son utilizados por los usuarios de energía Emmets 'para agrupar subárboles de abreviaturas complejas:

div>(header>ul>li*2>a)+footer>p

Esto producira:

<div>

<header>

<ul>

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

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

</ul>

</header>

<footer>

<p></p>

</footer>

</div>

Si usted está trabajando con el DOM del explorador, es posible pensar en grupos como fragmentos de documentos: cada grupo contiene abreviatura subárbol y todos los elementos siguientes se insertan en el mismo nivel que el primer elemento del grupo.

Puede anidar grupos dentro de otros y combinarlos con la multiplicación * operador:

(div>dl>(dt+dd)*3)+footer>p

Esto producira:

<div>

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

</div>

<footer>

<p></p>

</footer>

Con los grupos, puede, literalmente, escribir la página completa de marcado con una sola sigla, pero por favor, no hagas eso.operadores de atributos

Operadores atributo se utilizan para modificar los atributos de los elementos de salida tipo. Por ejemplo, en HTML y XML, puede agregar rápidamente atributo de clase de elemento generado.Id y class

En CSS, utilice elemento # Identificación y anotación elem.class para llegar a los elementos con id o atributos de clase especificado. En Emmet, puede utilizar la misma sintaxis para agregar estos atributos a los elementos especificados:

div#header+div.page+div#footer.class1.class2.class3

Esto producira:

<div id="header"></div>

<div class="page"></div>

<div id="footer" class="class1 class2 class3"></div>