说一个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 + ` ...

随机推荐

WebView用法
在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件. 什么是webkit WebKit是Mac OS X v10.3及以上版本所包含的软件框架(对 ...
跨域请求 & jsonp
0 什么是跨域请求在一个域名下请求另外一个域名下的资源,就是跨域请求.example 1:比如:我当前的域名是http://che.pingan.com.我现在要去请求http://www.cnbl ...
shell 外部传入jmeter脚本线程数，rampUp时间，持续运行时间
jmeter参数化部分参考上一篇 shell参数说明:$1线程数,$2:全部并发数rampup时间,$3:脚本持续运行时间,$4:每次脚本循环持续时间 $5:所以循环持续时间 #!/bin/bash ...
第3章 System V IPC
3.1 概述 System V IPC 包含:System V消息队列.System V信号量.System V共享内存. 3.2 key_t 键和 ftok函数这三种类型的System V IPC ...
JVM加载class文件的原理机制
Java中的所有类,都需要由类加载器装载到JVM中才能运行.类加载器本身也是一个类,而它的工作就是把class文件从硬盘读取到内存中.在写程序的时候,我们几乎不需要关心类的加载,因为这些都是隐式装载的 ...
DualPivotQuicksort 排序算法解析
DualPivotQuicksort是JDK1.7开始的采用的快速排序算法. 一般的快速排序采用一个枢轴来把一个数组划分成两半,然后递归之. 大量经验数据表面,采用两个枢轴来划分成3份的算法更高效,这 ...
struts (三)
1. <action name="test" class="com.gc.Test"> <result name="success& ...
java -d64
在 resin启动时指定java时加上了 -d64选项 JAVA="/xx/java -d64" 选择 "-server"选项必须使用-d64 http://b ...
NYOJ 47-过河问题
点击打开链接过河问题时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不 ...
《Head First 设计模式》ch.1 策略(Strategy)模式
策略模式定义了算法族,分别封装起来,让它们可以互相替换,让算法的变化独立于使用算法的客户. 模式名词的意义威力强大,交流的不止是模式名称,而是一整套模式背后所象征的质量.特性.约束用更少的词汇做 ...

说一个Sublime Text 2插件、emmet（原名：zen Coding)

工具/原料

方法/步骤

说一个Sublime Text 2插件、emmet（原名：zen Coding)的更多相关文章

随机推荐

热门专题