目录
- 下载Sublime Text
- 安装emmet插件
- 常用自动生成HTML代码实例
- 初始化页面
- 自动补全标签配对
- 自动添加类名和id名
- 自动填充文本内容
- 自动生成同级标签
- 自动生成嵌套标签
- 自动生成提级标签
- 自动生成分组标签
- 自动生成多个元素
- 自动生成带多个属性的元素
- 自动生成隐式标签
- 常用自动生成CSS代码实例
- 自动生成值
- 单位别名列表
- 混合输入
- 常用缩写
下载Sublime Text
官网地址：www.sublimetext.com
上面有适合windows、linux、macos系统的各种类型，自行下载安装。
安装emmet插件
刚安装的sublime text是不会自动生成html/css代码的，需要安装插件。
同时按ctrl+shift+p键，或到菜单中点击Perferences->package control，输入install，看下图箭头指向提示点击安装Install Package功能。
同时按ctrl+shift+p键，输入emmet，看下图箭头指向提示点击安装emmet插件。
常用自动生成HTML代码实例
使用自动生成插件之前，得让sublime text先知道文件类型，两种方式：
方式一：新建文件后保存为*.html文件
方式二：软件右下角选择语言类型
初始化页面
输入 ! 或 html:5 ，然后按tab键，自动生成html页面框架代码。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
自动补全标签配对
输入任意成对的标签，如div，按tab键，自动生成一对html标签
<div></div>
自动添加类名和id名
输入div.myclass#div1，按tab键，生成如下代码
<div class="myclass" id="div1"></div>
自动填充文本内容
输入span{hello}和a[href=here]，按tab键，生成如下代码
<span>hello</span><a href="here"></a>
自动生成同级标签
标签之间用+号，输入div+span+p，按tab键，生成如下代码
<div></div><span></span><p></p>
自动生成嵌套标签
标签之间用>号，输入table>tr>td，按tab键，生成如下代码
<table><tr><td></td></tr></table>自动生成提级标签
使用符号，可以上子标签往上提一级，输入div+div>p>span+embq，按tab键，自动生成代码如下
<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>输入div+div>p>span+em^^bq，按tab键，自动生成代码如下
<div></div><div><p><span></span><em></em></p></div><blockquote></blockquote>
自动生成分组标签
输入**(div.class1>span)+(div.class2>span)**，按tab键，生成如下代码
<div class="class1"><span></span></div><div class="class2"><span></span></div>
自动生成多个元素
输入ul>li*6，按tab键，生成如下代码
<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
上面这种感觉是最爽的，也是效率最高的。再比如输入table.table>tr>td*5，按tab键，生成如下代码
<table class="table"><tr><td></td><td></td><td></td><td></td><td></td></tr></table>
自动生成带多个属性的元素
输入ul>li.class$*4，按tab键，生成如下代码
<ul><li class="class1"></li><li class="class2"></li><li class="class3"></li><li class="class4"></li></ul>
自动生成隐式标签
不输入标签名，直接输入.class1，按tab键，会根据父标签判断生成什么，如在body中，生成如下代码
<div class="class1"></div>
如在ul中，生成如下代码
<li class="class"></li>
下面是所有的隐式标签名称：
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
常用自动生成CSS代码实例
与html文件类似，要想使用css自动生成，新建文件后保存成*.css文件，或在软件右下角选择css代码类型。
自动生成值
在一个样式内，输入h20，按tab键，自动生成代码如下
height: 20px;
输入w50，按tab键，自动生成代码如下
width: 50px;
单位别名列表
p 表示%
e 表示 em
x 表示 ex
如输入w100p，按tab键，自动生成代码如下
width: 100%;
混合输入
输入h10p+m5e，按tab键，自动生成代码如下
height: 10%;margin: 5em;
常用缩写
oh : overflow: hidden;
bg : background: #000;
bgi : background-image: url();
mg : margin:
mgl5 : margin-left:5px;
pd : padding:
pdr4 : padding-right:4px;
本篇就介绍到这里，其实idea开发工具也可以实现自动生成代码，只不过杀鸡焉用牛刀，写个前端没必要开启使用系统资源较多的idea。
