说一个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 + ` ...
随机推荐
- android webview type=file文件上传，安卓端代码
http://stackoverflow.com/questions/5907369/file-upload-in-webview http://blog.csdn.net/longlingli/ar ...
- Tomcat启动过程原理详解
基于Java的Web 应用程序是 servlet.JSP 页面.静态页面.类和其他资源的集合,它们可以用标准方式打包,并运行在来自多个供应商的多个容器.Web 应用程序存在于结构化层次结构的目录中,该 ...
- 使用BeanUtils操作Bean属性
package com.wzh.test.beanutils; import java.lang.reflect.InvocationTargetException; import java.text ...
- codeblocks调试快捷键说明
使用codeblocks避免不了快捷键: 在调试程序的时候: 首先在view->toolbar->debugger调出来:快捷方式可以自己看 RUN to Cursor :F4 单步调试 ...
- DELPHI下的SOCK编程(转)
DELPHI下的SOCK编程 本文是写给公司新来的程序员的,算是一点培训的教材.本文不会涉及太多的编程细节,只是简单讲解在DELPHI下进行Winsock编程最好了解的知识. 题外话:我认为 ...
- 荣耀6 Plus 的屏幕大小pt计算方法
使用 gomobile 检测 华为荣耀 6 Plus 的屏幕大小为: 1080*1776 px ; 162pt*266.40pt ; 每pt像素个数:6.666665个. 而实际的数据是: 主 ...
- cmd中目录的变更
1.在同一个盘符下的目录的切换使用cd加空格加子目录进行切换 2.在不同的盘符下进行切换直接使用在当前目录后面加上其他盘符的名称即可
- KSImageNamed-Xcode-master 对项目中图片提供自动提示功能的插件
.使用介绍: (1)KSImageNamed-Xcode-master的使用 安装该插件后,会对文件中图片进行智能提示. 下载地址:http://yun.baidu.com/s/1qWNkvGK
- Activity代码结构
把一个Nova项目中典型的Activity代码结构简单归纳一下,保持代码风格的一致,有助于日常开发效率提升以及日后维护 Class Name 变量 constants requests ...
- ibatis cannot find <sql> pattern
"Could not find SQL statement to include with refid xxx"A: 认真把每个用到xxx的地方都看一遍