说一个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调用FFmpeg及mencoder转换视频为FLV并截图
Conver.java package com.ll19.flv; public class Conver { public void run() { try { // 转换并截图 String fi ...
- 离线安装PM2
因为要部署应用的机器没有公网连接,所以直接npm install pm2是不可能了, 简单记录一下怎么离线安装pm2 首先,找一台可以在线安装pm2的机器 执行 npm install pm2 -g ...
- oracle中统计重复几次的数据有几条
源地址:http://zhidao.baidu.com/link?url=ZgCztNzCScRI5kAqGqug1LJvf7IX311EQs6fJ0-W1kOtWaaR7MrtLoV_228Ed8F ...
- [SQL]SQL优化34条
我们要做到不但会写SQL,还要做到写出性能优良的SQL,以下为笔者学习.摘录.并汇总部分资料与大家分享! () 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照从右到 ...
- 列出当前ARM开发板系统加载的模块
lsmod 列出当前系统中加载的模块,其中左边第一列是模块名,第二列是该模块大小,第三列则是使用该模块的对象数目
- Temporary Segments: What Happens When a Sort Occurs (文档 ID 102339.1)
APPLIES TO: Oracle Database - Enterprise Edition - Version 8.1.7.4 to 11.2.0.1 [Release 8.1.7 to 11. ...
- SQL在指定列后添加新的列
ALTER TABLE `MR_CustomerShopFuture` ADD COLUMN `ProcessID` INT(11) DEFAULT '0' COMMENT '审核流程ID';
- 海外支付：抵御信用卡欺诈的CyberSource
海外支付:抵御信用卡欺诈的CyberSource 吴剑 2014-06-04 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian 吴剑 http://www.cn ...
- Loadrunner性能指标分析
Transactions(用户事务分析)----用户事务分析是站在用户角度进行的基础性能分析. Transation Sunmmary(事务综述)----对事务进行综合分析是性能分析的第一步,通过分析 ...
- 【转贴】全站 HTTPS 来了
http://geek.csdn.net/news/detail/48765 作者:腾讯TEG架构平台部静态加速组高级工程师 刘强 最近大家在使用百度.谷歌或淘宝的时候,是不是注意浏览器左上角已经全部 ...