Emmet
在html文件中，关于Emmet使用
（1）补全文档结构
- html:5或者！ 生成HTML5基本文档结构
- html:xt 生成HTML4过渡型
- html:4s 生成HTML严格型
（2）标签
- 元素#id名 例如：div#a 生成id为a的div元素 <div id="a"></div>
- 元素.类名 例如：p.line 生成class为line的p元素 <p class="line"></p>
- 元素#id名.类名 例如：div#a.line 生成class为line、id为a 的div元素 <div id="a" class="line"></div>
（3）生成下级元素 ：>
父元素>子元素 例如：ul>li
生成代码：
<ul> <li></li> </ul>
（3）生成兄弟元素 ：+
元素1+元素2 例如：p+div
生成代码：
<p></p> <div></div>
（3）生成上级元素：^
父元素>子元素^兄弟元素 例如：ul>li^div
生成代码：
<ul>
<li></li>
</ul>
<div></div>
解析： div元素跳出li元素与ul同级。 跳两级就是两个^符号
（4）生成多分 * 后面跟的是重复次数
例如：ul>li*3 生成包含三个li的ul元素
<ul> <li></li> <li></li> <li></li> </ul>
（5）生成分组，使用()
例如：div>(header>ul>li*2>a)
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
</div>
（6）生成自定义属性：[attr]
例如 a[href="http://www.baidu.com" title="百度"]
（7）生成标签内的文本内容 ：{}
例如 a{点击跳转百度}
<a href="">点击跳转百度</a>
（8）对生成内容编号：$
例如生成5个类名依次递增的li,那么就需要使用$符号：li.item$*3
<li class="item1"></li> <li class="item2"></li> <li class="item3"></li>
在css文件中，Emmet的使用：
（1）简写属性和属性值
定位： 输入简略字母就可以弹出样式提示框
-
- 输入posa 对应 position: absolute;
- 输入poss 对应position: static;
- 输入posr 对应position: relative;
- 输入posf 对应position: fixed;
长度单位：w默认为width，h默认为height 默认单位为px，p---->百分比，e---->em,r----->rem
输入w100，生成 100px;
输入h100p 生成height：100%;
边距等多属性的元素：margin或者padding 生成多个属性值需要用横杠（-）连接，，负值就多加一个横杠
m10-20 生成 margin:10px 20px;
p12-20-30 生成 padding: 12px 20px 30px;
颜色值生成：c#0---->color:#000;
注意：写这些指令时不要有空格