说一个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 + ` ...
随机推荐
- java的内省（introspector）
package com.wzh.test.introspector; import java.beans.BeanInfo; import java.beans.IntrospectionExcept ...
- python 多线程抓取动态数据
利用多线程动态抓取数据,网上也有不少教程,但发现过于繁杂,就不能精简再精简?! 不多解释,直接上代码,基本上还是很好懂的. #!/usr/bin/env python # coding=utf-8 i ...
- vb eof详解
源地址:https://zhidao.baidu.com/question/87122186.html?qbl=relate_question_1&word=eof%20sql&ski ...
- 20145305 《Java程序设计》第10周学习总结
学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时, ...
- ServiceBroker创建流程
首先为这个数据库开启Service Broker ALTER DATABASE [T_EIP_UnityStore] SET ENABLE_BROKER 创建MessageType CREATE ME ...
- C API 连接MYSQL
#include <iostream> #include <mysql.h> #include <string> #include <assert.h> ...
- 软件开发过程文档-cgaowei
鸡肋——食之无味,弃之可惜”,软件开发过程文档遭遇了鸡肋一样的境遇. 目前敏捷软件开发过程非常流行.相对于软件开发过程文档,敏捷软件开发过程更加重视可运行的程序.关于软件开发过程文档,两个极端都是不可 ...
- sikuli+java实例
新建java工程,导入sikuli-script.jar包 public class TestSikuli { public static void openPage() throws FindF ...
- [SQL] 如何在SQL Server2005数据库中检查一个表是否存在,如存在就删除表记录,如不存在就建表.
. 检索 dbo.sysobjects表, select count(*) from dbo.sysobjects where xtype='U' and Name = '你的表名' . 根据返回的结 ...
- unresolved external symbol "public: virtual __thiscall...错误
今天自己在编写类模板的程序时,遇到了如下的错误:unresolved external symbol "public: virtual __thiscall...错误 调试修改了半天程序,还 ...