多语言展示
当前在线:955今日阅读:162今日分享:23

Sublime Text3之安裝Emmet及使用技巧

工具/原料

Sublime Text3

方法/步骤
1

首先准备工作:如果你的Sublime Text3没有Package Control组件先看一下这里,如果以安装请忽略;1、按Ctrl+`调出sublime text的console2、粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())3、重启Sublime Text4、在Perferences->package settings中看到package control,则表示安装成功

2

使用Package Control组件来安装Emmet插件:按Ctrl+Shift+P调出命令面板输入install Package,然后在弹出命令面板中再输入emmet找到 Emmet ,点击就可以自动完成安装。

3

完成安装后,会出现以下的安装信息,安装成功,重启一下Sublime Text3

4

接下来开始测试一下,Ctrl+n新建一个文档,输入!然后点击Tab键,出现html5的初始代码,表示Emmet可用。

5

下面开始分享一写Emmet的使用技巧:(emmet可以直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。)乘法符号:*缩写:ul>li*6 点击Tab ---

加法符号:+缩写:div+p+bq 点击Tab ---

自增符:$缩写:ul>li.item$*5
       
  •    
  •    
  •    
  •    
缩写:h$[title=item$]{Header $}*3

Header 1

Header 2

Header 3

缩写:ul>li.item$$$*5
       
  •    
  •    
  •    
  •    
缩写:ul>li.item$@-*5
       
  •    
  •    
  •    
  •    
缩写:ul>li.item$@3*5
       
  •    
  •    
  •    
  •    

6

缩写:div+div>p>span+em^bq

   

   
缩写:div+div>p>span+em^^bq
   

分组:使用()缩写:div>(header>ul>li*2>a)+footer>p
   
       
               
  •            
  •        
   
   
       

   
缩写:(div>dl>(dt+dd)*3)+footer>p
   
       
       
       
       
       
       
   
   

7

ID和类属性缩写:#header

缩写:.title
缩写:form#search.wide缩写:p.class1.class2.class3

8

自定义属性:[ ]缩写:p[title='Hello world']

缩写:td[rowspan=2 colspan=3 title]缩写:[a='value1' b='value2']
文本:{}缩写:a{Click me}Click me缩写:p>{Click }+a{here}+{ to continue}

Click here to continue

隐式标签缩写:.class
缩写:em>.class缩写:ul>.class
       
缩写:table>.row>.col               

推荐信息