工具/原料

  • sublime Text 2

  • 安装emmet插件

方法/步骤

  1. 生成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>

  2. 生成带有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>

  3. 语法：

    语法：

    >：生成后辈

    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)的更多相关文章

  1. Sublime Text2安装emmet(原名Zen Coding)总结

    首先,安装好Sublime( 我用的是版本号2),之后注冊好.Sublime Text2.0.2注冊码:http://xionggang163.blog.163.com/blog/static/376 ...

  2. 做了一个sublime text插件

    做了一个sublime text插件,可以方便地查看C++/python的调用图.插件的演示视频在这里: http://list.youku.com/albumlist/show?id=2820226 ...

  3. 开发者最常用的 8 款 Sublime Text 3 插件

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0228/177.html?1456925631Sublime Text作为一个尽为人知的代码编辑器, ...

  4. 安装Sublime Text 3插件的方法

    直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Contr ...

  5. 8款实用Sublime text 3插件推荐

    Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和 ...

  6. sublime text常用插件

    这个比较重要,不会装插件的时候找了好久 sublime text常用插件 1.插件的安装方法 第一种:用package control 这个是用来管理插件的,必备啊,安装package control ...

  7. 推荐！Sublime Text 最佳插件列表

    本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...

  8. Sublime Text 3插件安装方法

    安装Sublime Tex 3t插件的方法: 按快捷键Ctrl + ~ 调出console 粘贴以下代码到console并回车: import urllib.request,os; pf = 'Pac ...

  9. Sublime Text 3 插件、主题、配置

    换电脑,Sublime Text 3 重新配置一遍,做个记录 1. 下载:http://www.sublimetext.com/3 2. 插件管理器 Package Control (Ctrl + ` ...

随机推荐

  1. Bug 是改不完滴

    ​

  2. Jmeter Html 报告优化

    转载自南风_real博客园:http://www.cnblogs.com/jaychang/p/5881525.html 但是最近在查阅相关资料时,发现基本都是重复一篇文章Jmeter使用笔记之htm ...

  3. mysql 如何用root 登录

    mysql -uroot -p 如果没有密码,按两下回车就进去了

  4. inno setup 在卸载时如果想保留文件 使用uninsneveruninstall

    一般来说,inno只卸载你安装的文件,自动生成如Thumb.db(缩略图)等文件,卸载程序是不会删除这些的,此时你希望整个安装目录删除则可用你说的方法删除.若想保留某些文件,则必须在[File]段中拷 ...

  5. 算法库：Matlab与C++混合编程

    算法库:Matlab与C++混合编程 最近做光流算法预演过程中,下载的源码中涉及到了Matlab和C++的混合编程.在同事Matlab2014的环境下,程序到是一下就运行通过了.但在我这Matlab2 ...

  6. 倍增法lca

    ][N],siz[N];//rt数组需要在dfs之前置-1. void dfs(int pos,int deep){ dep[pos]=deep; siz[pos]=; for(edge *it=ad ...

  7. NYOJ 52-无聊的小明

    点击打开链接 无聊的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述       这天小明十分无聊,没有事做,但不甘于无聊的小明聪明的想到一个解决无聊的办法,因为他突 ...

  8. php mysql 中文乱码解决方法

    本文章向码农们介绍php mysql 中文乱码解决方法,对码农们非常实用,需要的码农可以参考一下. 从MySQL 4.1开始引入多语言的支持,但是用PHP插入的中文会出现乱码.无论用什么编码也不行 解 ...

  9. cocos2d-x的环境的搭建

    1.首先提出一个我从开始接触cocosstudio和cocos2d-x的认识的误区,就是cocosstudio和cocos2d-x的区别是什么呢? cocosstudio是辅助工具,只不过它可以帮助我 ...

  10. transform的使用

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...