zoukankan      html  css  js  c++  java
  • Sublime Text 2 安装emmet插件和常用快捷键

    一、先安装package control
    1、按Ctrl+`调出console,输入以下命令然后回车

    import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

    2、安装成功后显示:Please restart Sublime Text to finish installation 重启

    二、使用package control 安装emmet
    1、按ctrl+shift+p,调出控制台
    2、输入install,选择install package
    3、弹出列表之后,在输入框中输入emmet,然后选择emmet插件进行安装。
        安装过程中会有介绍文件打开,安装结束后会有成功提醒。

    三、测试安装是否成功,输入以下命令

    <html>
    div#cc>div.css>ul>li*4>a:link
    </html>

    按tab键,如果安装成功的话会出现以下代码,其中div可以省略,如果id或者class前面没有标签,默认就是div  

    <html>
    <div id="cc">
    	<div class="css">
    		<ul>
    			<li><a href="http://"></a></li>
    			<li><a href="http://"></a></li>
    			<li><a href="http://"></a></li>
    			<li><a href="http://"></a></li>
    		</ul>
    	</div>
    </div>
    </html>

    其他快捷方式:

    • 输入html:5,按Tab或Ctrl+E键,看看发生了什么;
    • 输入a,同样按Tab或Ctrl+E键,看看发生了什么;
    • 输入div+p+bq

    官方参考手册:http://docs.emmet.io/

    常用快捷键:
    1、多个重复对象,用*,如li*3
        如果是重复多个对象,可以用括号,把不同的对照组合成一个整体,比如table下面有多个tr,tr下面又有多个td,输入:tbody>(tr>td*4)*2,按tab,效果如下

    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>


    2、多个class赋给同一个对象,直接连着写就可以了,如 .class1.class2

  • 相关阅读:
    腾讯精选50题算法【二叉搜索树的最近公共祖先】
    潜水一周,我精心整理了两个超级有用的职场生存之道
    全球用尽IPv4的一点思考
    Leetcode算法【114. 二叉树展开为链表】
    【翻译】全新16英寸MacBook Pro评测:开发人员的梦想成真
    Medium高赞系列,如何正确的在Stack Overflow提问
    Typora+PicGo+GitHub实现md自带图床效果
    SpringBoot输出日志到文件
    Mybatis用SQL做自连表查询
    IDEA实用插件推荐及使用方法详解
  • 原文地址:https://www.cnblogs.com/AmilyWilly/p/6022263.html
Copyright © 2011-2022 走看看