【插件】Emmet 快速编写代码
最近新下载了一个编辑器，叫brackets。里面插件挺好弄的，直接安装就行。
据说Emmet很好用，所以打算把一些用法写在这里，方便查看。
一、在<head></head>中
link:css，然后按Tab键 快速引入css文件
<link rel="stylesheet" href="style.css">
二、在HTML中搞起来
1.初始化
输入！（叹号）或html：5，然后按Tab键
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
2.添加类、id、文本和属性
输入p.p1 给p标签添加一个叫p1的类
<p class="p1"></p>
输入p#p2 给p标签添加一个叫p2的id
<p id="p2"></p>
输入p.p1#p2 给p标签同时添加一个叫p1的类和p2的id
<p class="p1" id="p2"></p>
输入h1{你好，我是h1标签} 在{}中填写文本内容
<h1>你好，我是h1标签</h1>
输入a[href=#] 在[]中填写元素的属性
<a href="#"></a>
3.嵌套
① >:子元素符号，表示嵌套的元素
父级元素>子级元素
输入h1>p 子元素p被嵌套在父元素h1的里面
<h1> <p></p> </h1>
② +:同级标签符号
同级的元素+同级的元素
输入h1+p 没有上下级关系
<h1></h1> <p></p>
③ ^:让这个符号前的标签提升一行
h1>h2^p 这个没太看懂，总之p和h1是同一级
<h1> <h2></h2> </h1> <p></p>
h1>h2+p h2和同一级的p被h1嵌套
<h1> <h2></h2> <p></p> </h1>
4.分组
用嵌套>和括号{}来快速生成一些代码块
(.person1>p)+(#person2>p+span.span1)
<div class="person1"> <p></p> </div> <div id="person2"> <p></p> <span class="span1"></span> //还能继续给span加上类 </div>
5.隐式标签
会根据父元素，自动添加上标签
在文档中，直接输入 .div1
<div class="div1"></div>
在<ul></ul>中，输入 .div1
系统直接给你套上<li>标签
<ul> <li class="div1"></li> </ul>
注意：
li→用于ul/ol中
tr→用于table/thead/tbody/tfoot中
td→用于tr中
option→用于select/optgroup中
6.定义多个元素
用*号
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
7.定义多个带属性的元素
ul>li.item*6
<ul> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
ul>li.item$*6 加上$这个符号，可以进行排序
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> </ul>
三、CSS缩写
1.值
输入：w100h300
h1{
width: 100px;
height: 300px;
}
输入：h10p+m5e+p20x
h2{
height: 10%;
margin: 5em;
padding: 20ex;
}
注意：
单位：p代表%
e代表em
x代表ex
CSS相对长度单位
| em | 元素的字体高度 |
| ex | 字母x的高度 |
| px | 像素 |
| % | 百分比 |
元素: w代表width宽度
h代表height高度
m代表margin外边距
p代表padding内边距
2.附加属性
@f
@font-face {
font-family:;
src:url();
}
@f+
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
3.模糊匹配
有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法
比如：输入ov:h、ov-h、ovh和oh，生成的代码是一样的
overflow: hidden;
注意：
bot 代表border-top
bob 代表border-bottom
bol 代表border-left
bor 代表border-right
4.供应商前缀
输入 trf
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
输入 -syr-good 任意属性加上+，也可以添加前缀
-webkit-syr-good: ;
-moz-syr-good: ;
-ms-syr-good: ;
-o-syr-good: ;
syr-good: ;
如果不希望加上所有前缀，可以使用缩写来指定，比如-ow-trf表示只加上-o-和-webkit前缀：
-o-transform: ;
-webkit-transform: ;
transform: ;
注意：
w 表示 -webkit- 谷歌chrome/苹果safari的
m 表示 -moz- 火狐firefox的mozilla
s 表示 -ms- IE的
o 表示 -o- 欧朋的opera
5.渐变
输入lg(left, #fff 50%, #000) lg为linear-gradient，线性渐变。
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);
四、附加功能
生成一段测试用的文字
输入：lorem 或 lipsum
或者还可以指定文字个数，比如 lipsum13
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quidem est magnam quis.
有点酷炫的，我得熟练熟练~
