Emmet语法规则记录

[infobox title="开始"] 效率就是第一生产力，写html/css这类前段工程我一直都在使用一个插件，Emmet。但是对于这个插件的使用操作我仅仅还是只会一丢丢基础，还是来博客分享一下自己做的笔记吧常用的编辑器都能安装这款插件，如vscode、vs studio、notpad++、sublime text、atom等等如何安装自行解决 [/infobox] [dangerbox title="演示"] 简单看看这个插件的作用吧。这里我用的IDE是Atom 新建html文件，输入 div>ul>li>p ，按下tab键，如图

这里直接就自动补全了你想输入的代码，生产力大大提升好啦，分享一下我自己的笔记吧 [/dangerbox]

实际演示括号内为命令

英文（!）输入英文 ! 按下tab即可补全html的初始结构

id属性（#），class（.）

div#test
div.test

<div id="test"></div>
<div class="test"></div>

子节点（>），兄弟节点（+），上级节点（^）

div>ul>li>p 子节点一直嵌套

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

div+ul+p 加起来

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

div>ul>li^div ^在li的后面，也就是li的上一级，li的上一级也就与ul输入同层关系

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

重复（*）

div*5 重复复制div标签五次

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

分组（()）

div>(ul>li>a)+div>p

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

属性（[attr]）

a[href=’###’ name=‘xiaoA’]

<a href="’###’" name="‘xiaoA’"></a>

ul>li.test$*3

<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>

ul>li.test$@33

<ul>
<li class="test33"></li>
</ul>

文本（{}）

ul>li.test$*3{测试$}

<ul>
<li class="test1">测试1</li>
</ul>

隐式标签

.test

<div class="test"></div>

ul>.test$*3

<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>

select>.test$*5

<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
<option class="test4"></option>
<option class="test5"></option>
</select>

N0ts Blog