HTML/CSS速写神器之Emmet语法

Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，你使用的开发HTML/CSS的编辑器如果没有内置该插件，则需要先安装，HBuildX中时内置好的。下面我们来学一下它的语法。

说明：所有的语法写好后都要按Tab键生成对应得HTML/CSS代码

1、HTML5模版
输入!或html:5，然后按下Tab键即可

2、其他HTML模版

• html:5 + Tab 或者 ! 生成 HTML5 结构
• html:xt + Tab 生成 HTML4 过渡型
• html:4s + Tab 生成 HTML4 严格型

3、任意一个 html 标签输入都会生成完整的闭合标签
例如输入div 按 Tab，生成如下

<div></div>

4、生成带有 id 、class 的 HTML 标签
1）使用#生成id属性，例如输入 div#header则生成：

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

2）使用.生成class属性，例如输入 div.section则生成：

<div class="section"></div>

3）结合使用，例如输入 div#header.section则生成：

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

5、使用>生成后代标签
例如输入div>span，则生成：

<div><span></span></div>

6、使用+生成兄弟标签
例如输入div+p，则生成：

<div></div>
<p></p>

7、使用^生成上级标签：
例如输入ul>li>a^h1 则生成：

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

也可以使用多个 ^,例如输入ul>li>a^^h1 则生成:

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

8、使用*重复生成多个标签
例如输入div*3,则生成：

<div></div>
<div></div>
<div></div>

例如输入ul>li*3,则生成：

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

9、使用()生成分组的标签
例如输入ul>(li>a)*3则生成：

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

注意和ul>li>a*3 生成是不一样的

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

10、使用[]生成自定义属性
例如输入a[href=http://www.panziye.com][alt=潘子夜博客] 则生成：

<a href="http://www.panziye.com" alt="潘子夜博客"></a>

11、使用$生成递增的属性标签
例如输入ul>li.item$*3 则生成

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

$结合其他的还有如下使用：
1）$可以使用多次，表示位数，实现多位递增，想生成几位就输入几个$，例如输入ul>li.item$$$*3 则生成:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

2）结合@N想要从某个特定的顺序开始生成
例如输入ul>li.item$@10*3 则生成：

<ul>
    <li class="item10"></li>
    <li class="item11"></li>
    <li class="item12"></li>
</ul>

3）结合@-逆序生成到某个数
例如输入ul>li.item$@-5*3 则生成：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
</ul>

12、使用{}生成文本内容
例如输入div{我是文字内容} 则生成:

<div>我是文字内容</div>

13、缺省元素
1）声明一个带class的div可以不用输入div，直接输入.header+.main+.footer 则生成:

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

2）Emmet 还会根据父标签进行判定例如输入table>.row*3>.col*2 则生成:

<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
    </tr>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
    </tr>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>

下面是所有的隐式标签名称：

• li：用于 ul 和 ol 中
• tr：用于 table、tbody、thead 和 tfoot 中
• td：用于 tr 中
• option：用于 select和 optgroup 中