HTML->Emmet语法篇

1.emmet作用：

在HTML文档中，按emmet语法规则输入部分HTML标签，通过自动补全得出所需HTML结构。

2.emmet语法规则：

HTML初始文档：

!+tab或者html:5   生成html5文档的初始结构
html:xt           生成html4过渡型
html:4s           生成html4严格型）

标签嵌套：

//使用">"生成子元素：
//输入：
div>div>div
//输出：
<div>
    <div>
        <div></div>
    </div>
</div>

//使用"+"生成兄弟元素：
//输入：
div+div+div
//输出：
<div></div>
<div></div>
<div></div>

//使用"*n"重复n个兄弟元素：
//输入：
div*3
//输出：
<div></div>
<div></div>
<div></div>

//使用"^"生成父类兄弟元素：
//输入：
ol>li+li+li^ol>li+li+li
//输出：
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

//使用"()"里外分组：
//输入：
div>((ol>li*3)*2)>ul>li*3
//输出：
<div>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

属性嵌套：

// id|class选择器使用"#"|"."生成属性：
//输入：
div.class_name>div#id_name
//输出：
<div class="class_name">
    <div id="id_name"></div>
</div>

//使用"[]"包含其他属性：
//输入：
p[style="font-size:18px;line-height:20px"]>a[https://blog.csdn.net/]
//输出：
<p style="font-size:18px;line-height:20px"><a href="https://blog.csdn.net/"></a></p>

//使用"$@i*n"生成自定义有序编号：
//ps:@i为初始数字i,*n生成n个标签，默认升序，@-i则为降序；
//输入：
ol>li#identify$@3*4
******************************
ol>li#identify$@-3*4
//输出：
<ol>
    <li id="identify3"></li>
    <li id="identify4"></li>
    <li id="identify5"></li>
    <li id="identify6"></li>
</ol>
******************************
<ol>
    <li id="identify6"></li>
    <li id="identify5"></li>
    <li id="identify4"></li>
    <li id="identify3"></li>
</ol>

//"{}"生成元素文本内容：
//输入：
p{对面五个菜鸡}>a[www.lol.com]{first blood}
//输出：
<p>对面五个菜鸡<a href="http://lol.qq.com">撸一撸真舒服</a></p>

3.快捷键：

emmet默认自动补全快捷键为：tab键。
user 修改快捷键方法：

属性–>插件包设置–>默认快捷键/用户快捷键。

将默认快捷键的代码复制粘贴到用户快捷键中。

复制粘贴后将对应的快捷键修改，注意所有快捷键代码需用中括号[ ]包裹，里面用大括号{}包裹单个快捷键代码块，以”,”分离。