sublime快速生成html模板、标签

一、设置快速生成模板

1、安装 Package Control

ctrl + ` 呼出控制台，将以下代码粘贴到控制台光标闪烁处，回车
(代码仅适用于sublime text 3)

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'Package Control' + pf.replace(' ','%20')).read())

2、 利用Package Control安装Sublime Tmpl

ctrl + shift + p 呼出Package Control界面
输入install——回车——输入SublimeTmpl——回车

3、自定义模板

工具(Tools) —— 插件开发(Developer) —— 新建代码片段(New Snippet...),出现下图：

<![CDATA[
    这里填入你的代码模板（内容要靠左）
]]>

tabTrigger 标签注释打开--内容是快捷键

修改后如下图：

4、Ctrl+s，后缀名是.sublime-snippet即可。

5、新建index.html文件，打开输入html5,按下Tab键。

二、标签快捷键

{value$}: 内容value  $数字 
ul>li.list$*2>a{value$}
<ul>
	<li class="list1"><a href="">value1</a></li>
	<li class="list2"><a href="">value2</a></li>
</ul>


div简写：
#header{头信息}
    <div id="header">头信息</div>
.title{标题}
    <div class="title">标题</div>

1、初始化

html5 按Tab键--------HTML5文档模型

2、嵌套操作

子元素>: div>ul>li

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

并列+： div+ul>li

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

上级^： ul>li^div

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

上级多层^^: ul>li>a^^div

<ul>
	<li><a href=""></a></li>
</ul>
<div></div>

重复* : ul>li*3

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

分组()：div>(p>span)*2

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

3、 属性操作

id和类: div#header+div.main+div#footer

<div id="header"></div>
<div class="main"></div>
<div id="footer"></div>

属性值: a[title=test target=_self]

<a title="test" target="_self" href=""></a>

数列值 $: p.item$*3

<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>

p.item$$*3

<p class="item01"></p>
<p class="item02"></p>
<p class="item03"></p>

数列操作符@: p.item$@-*3
(@- = -1)

<p class="item3"></p>
<p class="item2"></p>
<p class="item1"></p>

p.item$@3*3
@3 从3开始3次

<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>

p.item$@-3*3
@-3 = 3次后到3结束

<p class="item5"></p>
<p class="item4"></p>
<p class="item3"></p>

4、 字符操作

字符操作{} : a{click}

<a href="">click</a>   

         
    a>{click}+span{me}
<a href="">click<span>me</span></a>

5、 缺省元素

.header+.footer  ---------------  div.header+div.footer
 
ul>.item*3 -------------- ul>li.item*3
 
table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3

6、css缩写

w100
width:100px;

h10p
height:10%;

m5e
margin:5em;