🔥🔥🔥“前端一万小时”两大明星专栏限时折扣中，点击下方公众号详细了解：
原创：itsOli @前端一万小时
本文版权归作者所有，未经授权，请勿转载！
本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
本篇目录：
1 ! + tab
2 p + tab
3 .header + tab
4 #header + tab
5 #header.logo + tab
6 p#header.logo.layout + tab
7 li*3 + tab
8 li*3>div.box + tab
9 li*3>{hello} + tab
10 li*3>{hello$} + tab
11 #header+#content+#footer + tab
12 (#header>.logo+.nav)+#content+#footer + tab
前言：在这之前的文章中，我们都倡导用“手写”的方式，一个代码一个代码地敲写。经历了 20 多篇文章的练习，代码的基本结构我们应该烂熟于心了。当务之急，我们该考虑考虑“编码效率”了！
在进入后续的“实战”之前，我们先来熟悉一下 Emmet 常用的语法。在实际工作中，我们的代码都是写在编辑器中的，而绝大多数代码编辑器都支持 Emmet 语法。
下面我们介绍一些常见的 Emmet 语法，不用死记硬背，先跟着文章一起在编辑器里敲一次，然后在后边的实战系列文章中灵活运用，提高编码效率。
🔗更多快捷键使用方法见《Emmet 文档》
https://docs.emmet.io/
❗️以下快捷方式都是和键盘上的 Tab 键合用！
1 ! + tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>2 p + tab
<p></p>3 .header + tab
<div class="header"></div>4 #header + tab
<div id="header"></div>5 #header.logo + tab
<div id="header" class="logo"></div>6 p#header.logo.layout + tab
<p id="header" class="logo layout"></p>7 li*3 + tab
<li></li>
<li></li>
<li></li>8 li*3>div.box + tab
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>
<li>
<div class="box"></div>
</li>9 li*3>{hello} + tab
<li>hello</li>
<li>hello</li>
<li>hello</li>10 li*3>{hello$} + tab
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>11 #header+#content+#footer + tab
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>12 (#header>.logo+.nav)+#content+#footer + tab
<div id="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
后记：在后边的代码编辑中，我们可以多尝试用 Emmet 语法来提高效率。但，手写代码的能力一定不能丢。
祝好，qdywxs ♥ you！
发表评论