Emmett快捷设计网页

Emmet快捷设计网页

在支持emmet操作的环境下使用
1.快速生成HTML网页
输入一个英文的！再按下tab键或者 输入html:5再按下tab键

2.常用html标签的快速生成
输入任意单词，按下tab都会生成标签

2.1生成后代标签
div>ul>li

<div>
	<ul>
		<li></li>
	</ul>
</div>

2.2生成兄弟标签
div+div+ul+p

<div></div>
		<div></div>
		<ul></ul>
		<p></p>

2.3生成父亲标签
div+div>span^p

<div></div>
<div><span></span></div>
<p></p>

2.4分组操作标签
div>(ul>li)+p

<div>
	<ul>
		<li></li>
	</ul>
	<p></p>
</div>

2.5乘法
ul>li*5

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

2.6自增符号 $
div>span{这是第$个span标签}*5

<div>
	<span>这是第1个span标签</span>
	<span>这是第2个span标签</span>
	<span>这是第3个span标签</span>
	<span>这是第4个span标签</span>
	<span>这是第5个span标签</span>
</div>

修改自增数值的初始值
ul>li$@4*3

<ul>
	<li4></li4>
	<li5></li5>
	<li6></li6>
</ul>

修改自增规则
ul>li$@-4*3

<ul>
	<li6></li6>
	<li5></li5>
	<li4></li4>
</ul>

2.7定义ID标签
div#div1

<div id="div1"></div>

2.8定义class标签
div.tool

<div class="tool"></div>

2.9定义标签的属性
input[type=text]*3

<input type="text">
<input type="text">
<input type="text">

属性中有空格时，使用引号将内容括起来
input[value=“Hello World!”]

<input type="text" value="Hello World!">

3.占位文字的使用
p>lorem*3 生成三段30个单词的随机拉丁语文本内容

<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem impedit quis voluptate deleniti velit possimus autem cum voluptatibus. Debitis quas delectus aliquam perferendis hic. Earum aliquid doloremque unde alias consequatur.</span>
	<span>Ipsam deleniti corporis possimus doloribus rerum temporibus quae sit minima amet nemo fugit mollitia vero quaerat reiciendis sed. Maiores nisi explicabo laborum ex quos officiis quibusdam similique quo facere dicta?</span>
	<span>Quis dolor ducimus in et dignissimos laboriosam harum sapiente omnis neque eaque fuga blanditiis sit distinctio ipsam sed similique temporibus. Eius eos perspiciatis iste maiores facilis assumenda incidunt aperiam minima.</span>
</p>

4.在CSS中的常用快捷用法：
4.1设置盒子的长宽
设置长为100px，宽为100px
w100+tab键
h100+tab键

4.2import属性生成
c#a!

color: #aaa !important;

4.3浏览器供应商前缀
-bg#ccc

-webkit-background: #ccc;
-moz-background: #ccc;
-ms-background: #ccc;
-o-background: #ccc;
background: #ccc;

4.4渐变色
lg(red,black)

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(black));
background-image: -webkit-linear-gradient(red, black);
background-image: -moz-linear-gradient(red, black);
background-image: -o-linear-gradient(red, black);
background-image: linear-gradient(red, black);