Emmet语法规则记录

 

开始

效率就是第一生产力,写html/css这类前段工程我一直都在使用一个插件,Emmet。

但是对于这个插件的使用操作我仅仅还是只会一丢丢基础,还是来博客分享一下自己做的笔记吧

常用的编辑器都能安装这款插件,如vscode、vs studio、notpad++、sublime text、atom等等

如何安装自行解决

 

演示

简单看看这个插件的作用吧。这里我用的IDE是Atom

新建html文件,输入 div>ul>li>p ,按下tab键,如图

这里直接就自动补全了你想输入的代码,生产力大大提升

好啦,分享一下我自己的笔记吧

实际演示   括号内为命令

英文 (!)

输入英文 ! 按下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>
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注