为什么有Emmet
Q:新手们(比如说我2333)开始学HTML的时候,都会一个字母一个字母敲代码,后来做小项目使用IDE,也有快捷键可以帮助我们快速写出一些标签。但随着我们越学越深,项目越来越大,常常会遇到项目里面重复的html结构非常多的情况,举例来说我们需要插入9个板式一样的图片,这个时候难道还是用键盘一个一个输
<image>
标签吗?
A:Emmet就解决了这个问题,大大加速了大型项目结构代码的构建效率。(对于菜鸟我来说它的存在就像一个小仙女,以后实践各种demo效率不愁了哈哈 :-D)
Emmet又称ZenCoding,绝对是web开发人员人手必备的提高效率的工具。最近我在学习Emmet,借此机会将语法整理下来。
Emmet语法缩写规范
快捷键
在SublimeText3中 (我用的是mac),是用control + e
代替tab
,可以快速生成标签
元素
在官方文档声明Emmet使用与CSS选择器类似的语法,来描述元素在已生成DOM树中的位置以及元素的属性。注意,在Emmet中,你可以使用任意标签名来生成,比如
div
→ <div></div>
foo
→ <foo></foo>
我个人认为,这里给出的自由度也许与XML有些关联,因为XML语言也方便了大家可以自定义想要的标签名(有待考证哈,知道的前辈可以留下评论,欢迎指正)。
嵌套操作符
Child子节点:>
使用>
操作符来嵌套节点
div>ul>li
…结果如下
<div>
<ul>
<li></li>
</ul>
</div>
Sibling兄弟节点:+
使用+
操作符来放置节点
div+p+bq
…结果如下
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up返回上一级(DOMtree的层级):^
如果你输入div+div>p>span+em
, 会输出结果:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
那么如果我们想在<p>
元素后面加一个兄弟节点呢?我们可以使用^
操作符
即这样写div+div>p>span+em^bq
, ^
被使用时,将返回上一级,所以输出如下
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote> <!-- 在这里添加了兄弟节点bq -->
</div>
我们可以使用任意个^
操作符来返回任意层级之前,比如:
div+div>p>span+em^^^bq
会生成代码:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
<blockquote></blockquote>
所以官方文档给其起名为Climb-up操作符还是很精准的,一层一层像上爬嘛。
Multiplication乘号:*
这是我觉得Emmet最方便的地方了,你可以仅用一行代码写出任意个重复的单元。
比如ul>li*5
会输出:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
怎么样,很方便吧?
Grouping括号:()
是不是感觉Climb-up机制使用起来很不方便,稍微复杂一点感觉就要绕晕了@.@,那么有一个非常简单的代替,就是()
啦,与算术表达式中的括号一样,它可以帮助我们清晰的看明白表达式所代表的DOM树的层级。
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>
你想在哪一级使用括号都可以(比如最上一级),并且可以将他们与任意个乘号*
连用,实现复杂的DOM结构
(div>dl>(dt+dd)*3)+footer>p
将会输出:
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
确实使用括号可以方便到你可以把整个文档结构一次写出来,但官方建议不这么做,毕竟太容易出错了嘛。
属性操作符
ID和CLASS
和在CSS中的语法一样,使用elem#id
或者elem.class
来为节点添加属性,如
div#header+div.page+div#footer.class1.class2.class3
将输出:
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
<待完善:其他的等用到的时候再来补充 :) >
(以上代码均参考自官方文档)