说一个Sublime Text 2插件、emmet（原名：zen Coding)
工具/原料
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>li.li_$@0*3，
<ul>
<li class="li_0"></li>
<li class="li_1"></li>
<li class="li_2"></li>
</ul>
ul>li.li_$@-*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>
说一个Sublime Text 2插件、emmet（原名：zen Coding)的更多相关文章
- Sublime Text2安装emmet(原名Zen Coding)总结
首先,安装好Sublime( 我用的是版本号2),之后注冊好.Sublime Text2.0.2注冊码:http://xionggang163.blog.163.com/blog/static/376 ...
- 做了一个sublime text插件
做了一个sublime text插件,可以方便地查看C++/python的调用图.插件的演示视频在这里: http://list.youku.com/albumlist/show?id=2820226 ...
- 开发者最常用的 8 款 Sublime Text 3 插件
转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0228/177.html?1456925631Sublime Text作为一个尽为人知的代码编辑器, ...
- 安装Sublime Text 3插件的方法
直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Contr ...
- 8款实用Sublime text 3插件推荐
Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和 ...
- sublime text常用插件
这个比较重要,不会装插件的时候找了好久 sublime text常用插件 1.插件的安装方法 第一种:用package control 这个是用来管理插件的,必备啊,安装package control ...
- 推荐！Sublime Text 最佳插件列表
本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...
- Sublime Text 3插件安装方法
安装Sublime Tex 3t插件的方法: 按快捷键Ctrl + ~ 调出console 粘贴以下代码到console并回车: import urllib.request,os; pf = 'Pac ...
- Sublime Text 3 插件、主题、配置
换电脑,Sublime Text 3 重新配置一遍,做个记录 1. 下载:http://www.sublimetext.com/3 2. 插件管理器 Package Control (Ctrl + ` ...
随机推荐
- Ubuntu 12.04.2搭建nfs服务器
1.安装nfs 服务器(192.168.0.1) apt-get install nfs-kernel-server 2.修改nfs配置文件: vim /etc/exports 在exports文件中 ...
- Python补充03 Python内置函数清单
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明. Python内置(built-in)函数随着python解释器的运行而创建.在Pytho ...
- [Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔
<?xml version="1.0" encoding="utf-8"?><!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPo ...
- C#中修改Dll文件 (反编译后重新编译)
Dll文件生成后,如没有源代码,又要修改其中内容 可以用微软自带的ildasm和ilasm程序 先用ildasm将dll文件反编译成il文件 ildasm Test.dll /out=Test.il ...
- POJ 2524
并查集思想,初始化每个元素的根节点为本身. 求解目标是求解存在几个集合.解决方案:查看有多少个根节点,表现在记忆数组上就是有多少个元素的根是它本身. #include<stdio.h> # ...
- OC基础(16)
autorelease基本使用 autorelease注意事项 *:first-child { margin-top: 0 !important; } body > *:last-child { ...
- 那些年，我们开发的接口之：QQ登录（OAuth2.0）
那些年,我们开发的接口之:QQ登录(OAuth2.0) 吴剑 2013-06-14 原创文章,转载必须注明出处:http://www.cnblogs.com/wu-jian 前言 开发这些年,做过很多 ...
- sort函数CCF
题是比较水的啦,但是好久没有用sort函数啦,有点生疏^...^ #include<stdio.h> #include<string.h> #include<iostre ...
- 举例说明划分子网，路由器IP地址
划分子网的方法是从网络的主机号借用若干位作为子网号,主机号相应地减少了同样的位数.在划分子网前,IP地址是两级结构的:网络号,主机号. 划分子网后,两级IP地址在本单位内部就变为三级IP地址:网络号, ...
- 个人收集（转载）CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...