介绍: Emmet 是许多流行文本编辑器的插件, 它极大地改进了 html 和 CSS 工作流程 , 为大部分流行的编辑器都提供了安装插件, 核心是缩写语法 + tab 键 (不同编辑器可自行设置), 以下是我整理的常用知识点.
一, 特性
1, 支持定制:
添加新缩写或更新现有缩写, 可修改 snippets.JSON 文件
更改 Emmet 过滤器和操作的行为, 可修改 preferences.JSON 文件
定义如何生成 HTML 或 xml 代码, 可修改 syntaxProfiles.JSON 文件
2, 支持大部分的编辑器:(此处无提供以下插件链接, 附上官网链接: https://www.emmet.io/)
- Sublime Text 3/2
- TextMate 1.x
- Eclipse/Aptana
- Coda 1.6 and 2.x
- Espresso
- Chocolat
- Komodo Edit/IDE
- Notepad++
- PSPad
- CodeMirror2/3
- Brackets
二, 基本语法
1, 后代:> 示例: div>ul>li>a
href="">
2, 兄弟:+ 示例: h1+p
<h1></h1> <p></p>
3, 上级:^ ^^ 示例: div>ul>li>span+a^p div>ul>li>span+a^^p
- href="">
- href="">
4, 分组:() 示例: div>(header>ul>li*2>a)+footer>div
- href="">
- href="">
5, 乘法: 示例: ul>li2
6, 自增减:$ 示例: ul>li.lis$3 ul>[email protected]*3 div>h$[title=th$]{Header$}3
- class="lis1">
- class="lis2">
- class="lis3">
- class="lis3">
- class="lis2">
- class="lis1">
- title="th1">Header1
- title="th2">Header2
- title="th3">Header3
7, 命名, 属性:#head .head p.p1.p2.p3
- id="head">
- class="head">
- class="p1 p2 p3">
8, 自定义属性:[] 示例 div[title="HelloWorld"] div[rowspan=2 colspan=3 title]
- title="HelloWorld">
- rowspan="2" colspan="3" title="">
9, 文本:{} 示例: div>{请点击 }+a{这里}+{ 跳转}
<div> 请点击 <a href=""> 这里 </a> 跳转 </div>
三, HTML 标签语法
1, 所有未知的缩写都会转换成标签
- <gg></gg>
- lang="en">
- charset="UTF-8">
- Document
- @font-face {
- font-family:;
- src:url();
- }
- -webkit-transition: prop time;
- -moz-transition: prop time;
- -ms-transition: prop time;
- -o-transition: prop time;
- transition: prop time;
- background-image: -webkit-linear-gradient(left, yellow 50%, @pink);
- background-image: -o-linear-gradient(left, yellow 50%, @pink);
- background-image: linear-gradient(to right, yellow 50%, @pink);
来源: http://www.bubuko.com/infodetail-3285463.html