HTML代码简写法:Emmet

HTML代码简写法:Emmet

Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。
按Tab键来生成结果

可以使用元素名（如 div 或者 p）来生成 HTML 标签。Emmet 没有预定义的有效元素名的集合，可以把任何单词当作标签来生成和使用：div → <div></div>, foo → <foo></foo> 等。

嵌套运算符

• 子:>
• 兄弟: +
• 上升: ^
• 重复: *
• 分组: ()

属性运算符

• ID : #
• CLASS: .
• 设置属性: [ ]
• 编号: $
• 改变编号的基数和方向:@
• 文本: {}

注意事项

一，嵌套运算符

嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置：将其放在内部或成为相邻的元素。

---------- (1) 子: >

可以使用 > 运算符指定嵌套元素在另一个元素内部：

示例：

div>ul>li

生成结果后：

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

---------- (2) 兄弟: +

使用 + 运算符将相邻的其它元素处理为同级：

示例：

div+ul+li

生成结果后：

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

---------- (3) 上升: ^

使用 ^ 运算符，能够提升元素在生成树中的一个级别，并同时影响其后的元素：

示例：

p>^bq

生成结果后：

<p></p>
<blockquote></blockquote>

---------- (4) 重复: *

使用 * 运算符可以定义一组元素：

示例：

ul>li*7

生成结果后：

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

---------- (5) 分组: ()

括号用于在复杂的 Emmet 缩写中处理一组子树

示例：

div>(ul>li>span)+strong

生成结果后：

<div>
    <ul>
        <li><span></span></li>
    </ul>
    <strong></strong>
</div>

二，属性运算符

属性运算符用于编辑所生成的元素的属性，在 HTML 和 XML 中可以快速地为生成元素添加 class 属性。

---------- (1) ID : #

指定元素的id属性

示例：

div#box

生成结果后：

<div id="box"></div> 

---------- (2) CLASS: .

指定元素的class属性

示例：

div.box

生成结果后：

<div class="box"></div>

---------- (3) 设置属性: [ ]

可以使用 [attr] 注解来为元素设置属性

示例：

input[type='text',placeholder='请输入用户名',style='width:500px;height:200px']

生成结果后：

<input type="text" placeholder="请输入用户名" style="width:500px;height:200px"/>

---------- (4) 编号: $

把 $ 放在元素名、属性名或者属性值中，将为每个元素生成编号
使用多 $ 可以填充前导的零(见示例2)

示例1：

ul>li.class$*7

生成结果后：

<ul>
    <li class="class1"></li>
    <li class="class2"></li>
    <li class="class3"></li>
    <li class="class4"></li>
    <li class="class5"></li>
    <li class="class6"></li>
    <li class="class7"></li>
</ul>

示例2：

 ul>li.class$$$*7

生成结果后

<ul>
    <li class="class001"></li>
    <li class="class002"></li>
    <li class="class003"></li>
    <li class="class004"></li>
    <li class="class005"></li>
    <li class="class006"></li>
    <li class="class007"></li>
</ul>

---------- (5) 改变编号的基数和方向:@

使用 @ ，可以改变数字的走向（升序或降序）和基数（起始值）。

示例 1：

在$后加@-可以改变数字走向

ul>li.item$@-*7

生成结果后：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

示例 2：

在@后加数字可以设置编号的起始值

ul>li.item$@3*7

生成结果后：

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
    <li class="item8"></li>
    <li class="item9"></li>
</ul>

示例 3：

编号走向和起始值可以一起设置

ul>li.item$@-3*7

生成结果后：

<ul>
    <li class="item9"></li>
    <li class="item8"></li>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

---------- (6) 文本: {}

用{}设置标签的文本

示例：

div{这是文本}

生成结果后：

<div>这是文本</div>

三，注意事项

当熟悉了 Emmet 的缩写语法后，可能会想要使用一些格式来生成更可读的缩写。例如，在元素和运算符之间使用空格间隔：

(header > ul.nav > li*5) + footer

但是这种写法是错误的，因为空格是 Emmet 停止缩写解析的标识符。

请多用户误以为每个缩写都应写在新行上，但是他们错了：可以在文本的任意位置键入和扩展缩写。