前端开发快速编写HTML结构标签之Emmet表达式
体验
#page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
父子关系 >
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
兄弟相邻 +
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
找父亲 ^
div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
找任意数量的^运算符
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
乘法 *
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分组 ()
div>(hreader>ul>li*2>a)+footer>p
<div>
<hreader>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</hreader>
<footer>
<p></p>
</footer>
</div>
(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 属性
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>
加自定义属性
td[title="hello" colspan=3]
<td title="hello" colspan="3"></td>
注意：
您不必指定属性值：
td[colspan title]会<td colspan="" title="">在每个空属性内使用制表符产生您可以使用单引号或双引号来引用属性值。
如果值不包含空格，则无需引用它们：td[title=hello colspan=3]可以。
编号 $
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>
您可以$连续使用多个以零填充数字：
ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
更改编号起始值和方向 @
要更改方向，在$之后添加@-：
ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
要更改计数器的基本值，在$之后添加@N修饰符：
ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
上述说的，一起使用：
ul>li.item$@-3*5
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
文本 {}
a{Click Me}
<a href="">Click Me</a>
请注意：{text}被当做一个独立的元素（例如div,p等等）来解析和使用，但是当写在元素的右边的时候有一个特殊的含义，举个例子：a{click}和a>{click}将产生同样的输出结果，但是a{click}+b{here}和a>{click}+b{here}将会产生不同的结果，如下所示:
a{click}+b{here}
<a href="">click</a><b>here</b>
a>{click}+b{here}
<a href="">click<b>here</b></a>
在后面第二个例子中，<b> 标签放置在 <a> 元素的里面，这就是两种情况的不同之处：当 {text} 写在元素的右边是不会更改父级上下文，这里有一个更复杂的例子来显示为什么这点很重要:
p>{Click }+a{here}+{ tocontinue}
<p>Click <a href="">here</a> to continue</p>
在这个例子中，要编写Click here to continue 到 <p> 元素的内部，我们必须使用>运算符将文本移动到树形结构p标签的里面，但是对于a元素来说，我们不能这么做，因为我们只需要带有here文本的 <a> 元素，而不修改父级上下文。
为了进行比较，这是不带子运算符>的相同emmet缩写：
p{Click }+a{here}+{ tocontinue}
<p>Click </p>
<a href="">here</a> tocontinue
缩写注意
不能在元素和运算符之间使用空格，因为空格是Emmet停止缩写解析的停止符号。
错误添加空格：(header > ul.nav > li*5) + footer
隐式标签名称
在许多情况下，您可以跳过键入标签名称的操作，而Emmet会根据上下文选择对应的标签来代替。
例如，div.content 您可以简单地将 .content，其编写并扩展为 <div class="content"></div> 。
- 如果父级是块级元素，则默认隐式标签是div
- 如果父级是行内元素，则默认隐式标签是span
- 如果父级是特殊层级元素，则默认隐式标签是对应父级的子元素，例如:
- li 为 ul 和 ol
- tr为table，tbody，thead和tfoot
- td 对于 tr
- option 为 select 和 optgroup
例子：
.wrap>.content div.wrap>div.content
em>.info em>span.info
ul>.item*3 ul>li.item*3
table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]
生成伪文本 Lorem ipsum
展开lorem或lipsum缩写即可获得
lorem200
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, accusamus. Alias, at ut. Impedit at numquam deserunt eum, dolorem provident voluptate facilis expedita, a ex illum inventore eaque enim perferendis reiciendis repellat non magni quam natus dignissimos optio! Doloribus modi incidunt commodi magnam ab, ad repellat dolorum accusantium nulla autem laboriosam eligendi deserunt suscipit dolorem reiciendis fuga praesentium blanditiis ipsam dolore corrupti eaque ex? Ratione error repudiandae sequi repellat similique eveniet! Commodi accusantium, harum quos quas quidem illo quibusdam? Facere odit, incidunt, inventore nesciunt quibusdam dolorum eos, iure quo maxime doloremque aliquam amet nihil officia architecto. Odit aut, consequuntur aspernatur sit repellendus nemo accusamus distinctio debitis voluptatum corporis error deserunt obcaecati velit dolore qui cupiditate nesciunt harum maxime voluptas accusantium, ipsam tempora quasi? Natus eius exercitationem debitis aspernatur aliquam aperiam a ipsam aliquid provident vitae totam, hic nobis! Voluptates tempore nam in incidunt illum placeat, quod quos ex atque deleniti cum distinctio, mollitia provident libero consectetur officia, vitae quasi ea ad at harum reprehenderit nesciunt dicta ipsam? Deserunt fugit sint excepturi nemo cumque quae ullam, totam aliquam, rerum vel placeat explicabo! Tempora ratione dolorem praesentium dolores eligendi tempore aut eos laudantium porro, voluptatem maiores ullam alias enim quos aliquam veritatis.
ul.generic-lsit>lorem10.item*4
<ul class="generic-lsit">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, perferendis?</li>
<li>Nostrum inventore culpa minus sapiente porro tempora cupiditate asperiores ipsam.</li>
<li>Ad iste fugiat laborum rem quam aliquid dolor nobis dignissimos?</li>
<li>Nisi odio, ex consequatur exercitationem perferendis eum alias cum illo.</li>
</ul>
