一、Emmet的安装与介绍
Emmet(前身为Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现HTML、CSS的快速编写。
- 官网地址：http://emmet.io/
- 官方文档：http://docs.emmet.io/cheat-sheet/
- Atom的emmet介绍页面：https://atom.io/packages/emmet
1，使用Emmet的好处
- 通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。
- 而Emmet把片段这个概念提高到了一个新的层次：我们可以设置CSS形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。
2，安装Emmet
Emmet为大部分流行的编辑器都提供了安装插件，本文演示如何在Atom中使用Emmet插件。
（1）点击Atom的“Preferences”菜单选项（Windows下是“Settings”菜单选项）
（2）进入到Install页面。
（3）搜索“Emmet”包，点击Install按钮即可安装。
3，简单的使用样例
（1）我们在编辑器中输入如下代码：
1 | ul>li*6 |
（2）接着按下tab键，之前的缩写代码就会自动扩展为完整的html代码片断。
二、基本语法
1，后代：>
缩写：nav>ul>li
1 2 3 4 5 | <nav><ul><li></li></ul></nav> |
2，兄弟：+
缩写：div+p+bq1 2 3 | <div></div><p></p><blockquote></blockquote> |
3，上级：^
（1）缩写：div+div>p>span+em^bq1 2 3 4 5 | <div></div><div><p><span></span><em></em></p><blockquote></blockquote></div> |
（2）缩写：div+div>p>span+em^^bq
1 2 3 4 5 | <div></div><div><p><span></span><em></em></p></div><blockquote></blockquote> |
4，分组：()
（1）缩写：div>(header>ul>li*2>a)+footer>p1 2 3 4 5 6 7 8 9 10 11 | <div><header><ul><li><ahref=""></a></li><li><ahref=""></a></li></ul></header><footer><p></p></footer></div> |
（2）缩写：(div>dl>(dt+dd)*3)+footer>p
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div><dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl></div><footer><p></p></footer> |
5，乘法：*
缩写：ul>li*51 2 3 4 5 6 7 | <ul><li></li><li></li><li></li><li></li><li></li></ul> |
6，自增符号：$
（1）缩写：ul>li.item$*51 2 3 4 5 6 7 | <ul><liclass="item1"></li><liclass="item2"></li><liclass="item3"></li><liclass="item4"></li><liclass="item5"></li></ul> |
（2）缩写：h$[title=item$]{Header $}*3
1 2 3 | <h1title="item1">Header 1</h1><h2title="item2">Header 2</h2><h3title="item3">Header 3</h3> |
（3）缩写：ul>li.item$$$*5
1 2 3 4 5 6 7 | <ul><liclass="item001"></li><liclass="item002"></li><liclass="item003"></li><liclass="item004"></li><liclass="item005"></li></ul> |
（4）缩写：ul>li.item$@-*5
1 2 3 4 5 6 7 | <ul><liclass="item5"></li><liclass="item4"></li><liclass="item3"></li><liclass="item2"></li><liclass="item1"></li></ul> |
（5）缩写：ul>li.item$@3*5
1 2 3 4 5 6 7 | <ul><liclass="item3"></li><liclass="item4"></li><liclass="item5"></li><liclass="item6"></li><liclass="item7"></li></ul> |
7，ID和类属性
（1）缩写：#header1 | <divid="header"></div> |
（2）缩写：.title
1 | <divclass="title"></div> |
（3）缩写：form#search.wide
1 | <formid="search"class=
知识推荐
我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8
不良信息举报平台
互联网安全管理备案
Copyright 2023 www.wodecom.cn All Rights Reserved |