Web前端:Emmet语法,前端利器!

Emmet使用特定的语法来展开小段代码,它类似CSS选择器,使其成为完整的HTML代码。

运行环境 Runtime environment

1
2
3
操作系统 : Windows10
IDE: JetBrains WebStorm 2018.2.1 x64
浏览器: Google Chrome 版本 67.0.3396.99(正式版本) (64 位)&& FireFox Developer Edition 版本63.0b4 (64位)

背景

感觉背景似乎也没有人看的啦。主要是为方便自己前端开发能够更加省事,所以需要使用Emmet语法。
这已经成为了一种习惯了,确实可以提高开发效率,总是复制粘贴什么的,也是略烦的事情。
本人使用的是 Webstrom 代码编辑器,因此是内置了 Emmet 语法的。
如果你使用的是 Sublime或者Notapad++ 编辑器的话,可以去下载相应插件,这个在网上都是有教程的,可以去搜索一下。

Emmet(以前名为Zen Coding)是一套面向文本编辑器的插件,它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。
此项目2008年由Vadim Makeev发起,并由Sergey Chikuyonok和其他Emmet用户基于Zen Coding 2.0的概念继续积极开发。
这套工具已经被一些高端的文本编辑器采纳,以及存在于Emmet团队开发或其他人独立实现的插件中。
不过,Emmet独立于任何文本编辑器,它的引擎可以直接处理文本,而无需与任何特定软件相关。
Emmet以MIT许可证开源。
简单来说,就是可以快速构建 HTML 结构的快捷语法。

嵌套运算符(Nesting Operator)

嵌套运算符用于在生成的树内定位缩写元素:它是否应该放置在上下文元素内部或附近。

  1. 子代操作符(Child):>

就像我们使用 CSS 选择器那样,我们可以使用 > 操作符来创建我们的子代。
当我在编辑器中使用这个操作符进行如下代码的创建:

div>ul>li>a>p>span>b>h1

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
<ul>
<li>
<a href="">
<p>
<span>
<b>
<h1></h1>
</b>
</span>
</p>
</a>
</li>
</ul>
</div>

通过观察,可以得出结论:Emmet语法的>的递进是可以无穷的,你想包含多少级的HTML标签都没有问题。
“>”符号前的标签包含“>”附后后的标签的意思。例如“ div>ul”,即div标签中有ul标签。


  1. 同级操作符(Sibling):+

上面我们讲到了,创建子代的方法。但是现在,我们希望子代中的 div 有多个 p 标签成为同一级,都是父级 div 的子代而不是递进包含关系。

div>p+span+p+p

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
<div>
<p></p>
<span></span>
<p></p>
<p></p>
</div>

如此,它们就成为了同级的元素。


  1. 返回上级操作符(Climb-up):^

这时候,我想要在父级元素的 div 的同级再创建一个 div 怎么办呢?

div>p+span+p+p^div

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
<div>
<p></p>
<span></span>
<p></p>
<p></p>
</div>
<div></div>(这里多了个div)

每多一个“^”符号就会多返回一层父级

div>div>div>p^^^button

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
8
<div>
<div>
<div>
<p></p>
</div>
</div>
</div>
<button></button>

用了多少“>”,就可以用多少“^”会到顶层父级。


  1. 乘法操作符(Multiplication):*

用到重复元素最多的地方要数 ul 中的 li 了。一个一个复制,这显然是很麻烦而又枯燥的一件事情。

ul>li*5

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

ul标签下出现了5个li标签!


  1. 分组操作符(Grouping):()

以上的方法若是简单的html还行,如果父级太多,那要是返回,那就太麻烦了。
这是就需要“()”来封装它们,它们变成一个整体,就轻松的解决了问题,那就来个困难点的布局。
将网页分为了 header、main 和 footer 三个页面结构。

div>(header>h1+div>b)+(main>(h2>h3+div>p)+(h2>h3+div>p)+(h2>h3+div>p))+(footer>ul>li*5)

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div>
<header>
<h1></h1>
<div><b></b></div>
</header>
<main>
<h2>
<h3></h3>
<div>
<p></p>
</div>
</h2>
<h2>
<h3></h3>
<div>
<p></p>
</div>
</h2>
<h2>
<h3></h3>
<div>
<p></p>
</div>
</h2>
</main>
<footer>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</footer>
</div>

通过观察,很容易就能总结出规律了,“()”分组,可以让复杂的需求简单化。

属性操作符(Attribute Operators)

通过以上一些实例都是在HTML标签嵌套并级的快捷生成上做文章,要给各种标签添加”id、class”属性,
是不是也能用Emmet语法快捷生成呢?
答案:可以啊,当然可以!
属性运算符用于修改输出元素的属性。

  1. ID 和 Class(ID and CLASS)

div#wrapbox1>div.container>p.news

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
<div id="wrapbox1">
<div class="container">
<p class="news"></p>
</div>
</div>

So easy!标签后跟上“#”然后是id名,即可。如果跟上“.”+class名,即可。
但是如果一个标签含有多个class或者id的话,要如何实现?

div#wrapbox1#rank-list>div.container.text-center.flags>p.news#music

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
<div id="wrapbox1 rank-list">
<div class="container text-center flags">
<p class="news" id="music"></p>
</div>
</div>

以上代码,实现三种情况,多个id的情况,多个class的情况,以及class和id一起的情况。


  1. 定制属性(Custom attributes)

那么如果当碰到类似“a”标签这样有“href、target、title”多个属性的,用Emmet语法改怎么实现呢?
这时候,我们就需要使用中括号[] 来将其括起来。[]中间的内容就是该标签的各个属性了。

div>a[href=’#’ target=’’ title=’nya’]*5

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
<div>
<a href="#" target="" title="nya"></a>
<a href="#" target="" title="nya"></a>
<a href="#" target="" title="nya"></a>
<a href="#" target="" title="nya"></a>
<a href="#" target="" title="nya"></a>
</div>

这样就可以自由的操作标签的属性了。


  1. 文本操作符(Text):{}

使用大括号 {} 来对其输入一定的内容,就是生成标签中夹着的内容。这个操作符就很简单啦。

h1{喵喵喵}+p{汪汪汪}+b{咕咕咕}

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
<h1>喵喵喵</h1>
<p>汪汪汪</p>
<b>咕咕咕</b>

太简单了,没啥总结的一看就懂了。


  1. 计算操作符(Item numbering):$

随着乘法操作符的生成,可以递增或者递减的变化数字

ul#id-$3>[email protected]{内容[email protected],内容[email protected]}5

在Emmet语法的最后瞧上tab键,便会得出以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="id-1">
<li class="class-5">内容7,内容3</li>
<li class="class-4">内容6,内容4</li>
<li class="class-3">内容5,内容5</li>
<li class="class-2">内容4,内容6</li>
<li class="class-1">内容3,内容7</li>
</ul>
<ul id="id-2">
<li class="class-5">内容7,内容3</li>
<li class="class-4">内容6,内容4</li>
<li class="class-3">内容5,内容5</li>
<li class="class-2">内容4,内容6</li>
<li class="class-1">内容3,内容7</li>
</ul>
<ul id="id-3">
<li class="class-5">内容7,内容3</li>
<li class="class-4">内容6,内容4</li>
<li class="class-3">内容5,内容5</li>
<li class="class-2">内容4,内容6</li>
<li class="class-1">内容3,内容7</li>
</ul>

以上包含了五种规律:
(1)只加”$”符号ul标签的id名字为递增;
(2)”$”后加上”@-“符号li标签的class名字为递减,还说明class命名也受”$”的变化而变化;
(3)”[email protected]”+数字”3”,使其内容部分以”3”为初始值然后递增;
(4)如果使用”[email protected]“+数字”3”,则是从别的数字倒数至”3”;
(5)说明”id、class、{}”也受”$”的变化而变化;

总结

Emmet常用的用法就在于此了,当然这也不是全部。还有一部分是Emmet对css快捷生成的语法,但是用得太少了,就不多介绍了。
最后来一串超级秀的Emmet的语句作为本次学习的收尾!

(li>(p.update-list-left>a[href=’#’ target=’_blank’ title=’书的类别’]{类型$《}+a[href=’#’ target=’_blank’ title=’书的名字’]{书名$》})+p.update-list-center>a[href=’#’ target=’_blank’ title=’书的名字’]{标题$}+(p.update-list-right>a.update-writer[href=’#’ target=’_blank’ title=’作者名’]{作者$}+span.update-time{18-10-0$}))*20

×

也就放着玩的

扫码支持
扫码打赏,其实感觉也没人会给的。。

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 运行环境 Runtime environment
  • 背景
  • 嵌套运算符(Nesting Operator)
  • 属性操作符(Attribute Operators)
  • 总结
  • ,