工具/原料
- sublime Text 2
- 安装emmet插件
方法/步骤
- 生成html文档初始结构：
!<tab>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
html:5<tab>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
html:xs<tab>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
html:4s<tab>
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
- 生成带有id,class的标签：
Emmet默认标签是div
#id<tab>
<div id="id"></div>
p#id<tab>
<p id="id"></p>
h1#id<tab>
<h1 id="id"></h1>
span#id<tab>
<span id="id"></span>
.class<tab>
<div class="class"></div>
p.class<tab>
<p class="class"></p>
h1.class<tab>
<h1 class="class"></h1>
span.class<tab>
<span class="class"></span>
输入多个class 添加两个.class1.class2
.class1.class2<tab>
<div class="class1 class2"></div>
- 语法：
语法：
>：生成后辈
div>span>p>h1 <tab>
<div>
<span>
<p>
<h1></h1>
</p>
</span>
</div>
+：生成同辈
div+span+p+h1 <tab>
<div></div>
<span></span>
<p></p>
<h1></h1>
^：生产叔辈
div>span>p^h1<tab>
<div>
<span>
<p></p>
</span>
<h1></h1>
</div>
*：生成重复多分
ul>li*3 <tab>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
（）：生成分组
ul>(li.li_1*3)+(li.li_2*3)<tab>
<ul>
<li class="li_1"></li>
<li class="li_1"></li>
<li class="li_1"></li>
<li class="li_2"></li>
<li class="li_2"></li>
<li class="li_2"></li>
</ul>
[attr]:生成属性
a[href=index.html title=index]<tab>
<a href="index.html" title="index"></a>input[type=button]
input[type=submit name=submit]<tab>
<input type="submit" name="submit">
$：生成编号 $的个数就是数字的个数 @指定开始的数字 @–倒序
ul>li.li_$*3<tab>
<ul>
<li class="li_1"></li>
<li class="li_2"></li>
<li class="li_3"></li>
</ul>
ul>[email protected]*3，
<ul>
<li class="li_0"></li>
<li class="li_1"></li>
<li class="li_2"></li>
</ul>
ul>[email protected]*3
<ul>
<li class="li_3"></li>
<li class="li_2"></li>
<li class="li_1"></li>
</ul>
{}:生成内容
p{$}*3<tab>
<p>1</p>
<p>2</p>
<p>3</p>
a[href=index.html]{click}+a[href=test.html]{mouseover}<tab>
<a href="index.html">click</a>
<a href="test.html">mouseover</a>
高级：
Lorem*: 生成测试文本，*表示0-无限个 默认30个单词
p>lorem2<tab>
<p>Lorem ipsum.</p>
p>lorem4<tab>
<p>Lorem ipsum dolor sit.</p>
p>lorem6<tab>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
p>lorem<tab>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, delectus nostrum pariatur accusamus necessitatibus maiores ut natus id sit ab vel assumenda ratione harum quas adipisci eveniet temporibus praesentium ducimus!</p>
套接作用
<ul>
<li></li>
<li></li>
<li></li>
</ul>
全选后，ctrl+shirt+g,输入div.demo1>h1{test1}+div.test2<tab>
<div class="demo1">
<h1>test1</h1>
<div class="test2">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
文本转换成html标签
1.小学生
2.中学生
3.大学生
4.研究生
5.博士生
全选后：Ctrl+shift+g 输入:ul>li*>a<tab>
<ul>
<li><a href="">1.小学生</a></li>
<li><a href="">2.中学生</a></li>
<li><a href="">3.大学生</a></li>
<li><a href="">4.研究生</a></li>
<li><a href="">5.博士生</a></li>
</ul>
去除所有序号
ul>li*>a|t<tab>
<ul>
<li><a href="">小学生</a></li>
<li><a href="">中学生</a></li>
<li><a href="">大学生</a></li>
<li><a href="">研究生</a></li>
<li><a href="">博士生</a></li>
</ul>