Emmet简介:
通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为 “片段或代码模板”。虽然片段能很好地推动我们的生产力,但大多数的实现都有这样一个缺点:我们必须先定义代码片段,并且不能再运行时进行拓展。而Emmet把片段这个概念提高到了一个新的层次:我们可以设置CSS形式的能够动态被解析的表达式,然后根据输入的缩写来得到相应的内容。Emmet很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员,但也可以用于编程语言。它支持大多数流行文本编辑器,极大的 改善 了开发html/css的 效率
句法:
类似于css选择器的语法,用来控制元素在文档树中的位置及其属性
eg: nav>div#nav+ul>li*5>a+span
<nav>
<div id="nav"></div>
<ul>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
</ul>
</nav>
HTML 5 基本文档结构生成:
eg1: html:5
eg2: !
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
关系符:
关系符 >:用于定位嵌套关系的元素,">" 左右两端分别是父元素、子元素
eg: nav>div>ul>li
<nav>
<div>
<ul>
<li></li>
</ul>
</div>
</nav>
关系符 +:用于定位同级关系的元素,"+"左右两端分别是上下两个元素
eg: nav>div>ul>li>p+span+strong
<nav>
<div>
<ul>
<li>
<p></p>
<span></span>
<strong></strong>
</li>
</ul>
</div>
</nav>
关系符 ^:用于在HTML片段中爬到上一层并更改应该出现以下元素的上下文
eg: nav>div>q>strong+em^blockquote
<nav>
<div>
<q>
<strong></strong><em></em>
</q>
<blockquote></blockquote>
</div>
</nav>
^也可以连续多个使用
eg: nav>div>div>div^^^strong
<nav>
<div>
<div>
<div></div>
</div>
</div>
</nav>
<strong></strong>
关系符 * :用于定义输出元素的次数
eg: div>ul>li*5>a+span
<div>
<ul>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
</ul>
</div>
关系符 ():用于将定义代码片段的缩写分组为复杂的结构
eg: article>(header>div+div>img+h1+p)+(footer>div>ul>li*5>h4+q)
<article>
<header>
<div></div>
<div>
<img src="" alt="">
<h1></h1>
<p></p>
</div>
</header>
<footer>
<div>
<ul>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
</ul>
</div>
</footer>
</article>
以上分组也可以用^代替,如下:
eg: article>header>div+div>img+h1+p^^footer>div>ul>li*5>h4+q
<article>
<header>
<div></div>
<div>
<img src="" alt="">
<h1></h1>
<p></p>
</div>
</header>
<footer>
<div>
<ul>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
<li>
<h4></h4>
<q></q>
</li>
</ul>
</div>
</footer>
</article>
属性运算符:
属性运算符 #:将id属性指向指定的元素
eg: div#header1
<div id="header1"></div>
属性运算符 .:将class属性指向指定的元素
eg:div#header2.clearfix
<div id="header2" class="clearfix"></div>
属性运算符 [ ]:自定义属性与相应的值
eg: input#in1.form-control[name=“queryBtn” value=“提交” type=“button” disabled=“disabled”]
<input type="button" id="in1" class="form-control" name="queryBtn" value="提交" disabled="disabled">
属性运算符 $ :在元素的名称、属性的名称或属性值中输出当前重复元素的数量
eg: div>ul>li#li$*5
<div>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
<li id="li5"></li>
</ul>
</div>
属性运算符 @-:用在 $ 之后,用来更改 $ 的递增方向
eg: div>ul>li#lili@-*5
<div>
<ul>
<li id="lili5"></li>
<li id="lili4"></li>
<li id="lili3"></li>
<li id="lili2"></li>
<li id="lili1"></li>
</ul>
</div>
属性运算符 @N:用在 $ 之后,用来更改 $ 的递增基数
eg: div>ul>li#demo$@3*5
<div>
<ul>
<li id="demo3"></li>
<li id="demo4"></li>
<li id="demo5"></li>
<li id="demo6"></li>
<li id="demo7"></li>
</ul>
</div>
综合示例:倒序、基数不为1
eg:div>ul>li#link$@-5*5
<div>
<ul>
<li id="link9"></li>
<li id="link8"></li>
<li id="link7"></li>
<li id="link6"></li>
<li id="link5"></li>
</ul>
</div>
案文 {}:使用大括号向元素添加文本
用法一:
eg: div{他山之石,可以攻玉}+q{时间就像海绵里的水,想挤总能挤出来的}+cite{鲁迅}
<div>他山之石,可以攻玉</div>
<q>时间就像海绵里的水,想挤总能挤出来</q>
用法二:
当元素直接加{}时,元素与{}为一个整体,它们与后面追加元素是同级关系,当元素与 {} 用 > 连接时,它与后面追加元素 (包括{}) 是父子关系
eg: div>{他山之石,可以攻玉}+q{时间就像海绵里的水,想挤总能挤出来的}+cite{鲁迅}
<div>他山之石,可以攻玉<q>时间就像海绵里的水,想挤总能挤出来的</q><cite>鲁迅</cite></div>
lorem:自动填充文本
eg: div.showdiv>ul>li#link$@-20*5>lorem20
<div class="showdiv">
<ul>
<li id="link20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos ducimus
illo nam nulla numquam pariatur perferendis perspiciatis quae suscipit!
</li>
<li id="link19">Ipsam, libero, repellat? Accusamus aliquam aspernatur dolorum ducimus error ex, expedita
impedit iure magnam, maiores, perspiciatis qui rem sunt ut.
</li>
<li id="link18">Dignissimos inventore, laboriosam laborum nam odio officiis optio perspiciatis possimus
quaerat sapiente. Animi blanditiis impedit maiores voluptate! Autem numquam, quam!
</li>
<li id="link17">Eum molestias mollitia optio quasi voluptas. Dicta doloribus eveniet impedit iste itaque
officiis quo ratione rerum? Corporis quibusdam quos sed.
</li>
<li id="link16">Architecto aut consequuntur cum cumque delectus doloremque dolores enim fugiat labore
laboriosam laudantium libero minus modi, nisi quisquam saepe soluta.
</li>
</ul>
</div>
css缩写:当使用缩写定义css属性时,Emmet会自动附加兼容不同浏览器的前缀
<style type="text/css">
body {
/* bdrs */
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
/* bg */
background: #000;
/* lh */
line-height: 1000px;
/* fs */
font-style: italic;
/* co */
color: red;
/* fl */
float: left;
... ...
}
</style>
注意事项:
1.表达式中不能使用空格,空间是停止符号,Emmet停止缩略语解析的地方,如果使用空格,Emmet会停止解析
2.每个表达式可以写在支持Emmet文本的任何地方,不用另起一行