Emmet插件快捷使用

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;

注意：写这些指令时不要有空格

官网地址：https://docs.emmet.io/

学习参考地址：https://www.cnblogs.com/freefish12/p/5504404.html