admin管理员组

文章数量:1794759

Emmet语法

Emmet语法

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

安装方式和平时安装插件一样搜索这个emmet插件安装，每个编辑器安装方式不同，请各自尝试

1.html初始结构(!)

  • ！
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title>
</head>
<body></body>
</html>

2.id（#）,class（.）

  • div#test
<div id="test"></div>
  • div.test
<div class="test"></div>

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

  • div>ul>li>p
<div><ul><li><p></p></li></ul></div>
  • div>ul>li^div
  • div>(ul>li)+div
<div><ul><li></li></ul><div></div></div>

4.重复（*）

  • div*5（*号后面添加数字表示重复的元素个数）
   <div></div><div></div><div></div><div></div><div></div>

5.属性（[attr]）

  • a[href=’###’ name=‘xiaoA’]
<a href="###" name="xiaoA"></a>
  • ul>li.test$＊3 （＄代表一位数，后面更上*数字就代表从1递增到填写的数字）
<ul><li class="test1"></li><li class="test2"></li><li class="test3"></li></ul>
  • ul>li.test$@3*4
<ul><li class="test3"></li><li class="test4"></li><li class="test5"></li><li class="test6"></li>
</ul>

６．文本（{}）

  • ul>li.test＄*3{测试＄} （{里面填写内容，可以和$一起组合使用哦}）
<ul><li class="test1">测试1</li><li class="test2">测试2</li><li class="test3">测试3</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>

隐私标签有如下几个：

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

本文标签： emmet语法

版权声明：本文标题：Emmet语法 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1731086532a981767.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。