Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作。
1.调用方法
Emmet使用Tab作为自动生成HTML代码的触发器。输入完生成HTML的缩写语句后，按下Tab，即可生成对应的HTML代码。
-
html:5 或!：用于HTML5文档类型
-
html:xt：用于XHTML过渡文档类型
-
html:4s：用于HTML4严格文档类型
2.相关语法
(1)后代：> 表父层与子层的关系，例：div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>(2)兄弟：+ 表并列的关系，例：div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>(3)上级元素：^ 例：div+div>p>span+em^bq
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>(4)分组：（） 例：div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>(5)重复多份：* 例：ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>(6)编号：$ 例：ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>(7)ID和类属性
#header
<div id="header"></div>.title
<div class="title"></div>form#search.wide
<form action="" id="search" class="wide"></form>p.class1.class2.class3
<p class="class1 class2 class3"></p>自定义属性 p[title="Hello world"]
<p title="Hello world"></p>文本：{ } a{Click me}
<a href="">Click me</a>3.HTML
*所有未知的缩写都会转换成标签，例如，foo → * 例：!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>本文所列仅为最常用的一些语法和缩写，有关其他较为少用的可参考Emmet官方文档!!!!!
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!!
3069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
