博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
emmet的用法
阅读量:2119 次
发布时间:2019-04-30

本文共 1722 字,大约阅读时间需要 5 分钟。

emmet 是一个提高前端开发效率的一个工具。

emmet允许在html、xml、和css等文档中输入缩写,然后按tab键自动展开为完整的代码片段。

一、Sublime Text 3 安装插件Emmet

点击菜单栏的首选项
->Package Control 
-> 在弹出命令行中输入ip,在列表中点击“install Package”
-> 弹出命令行输入框,输入“emmet”进行安装

本人安装完后提示

Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解决方法:
按提示打开https://github.com/emmetio/pyv8-binaries,选择自己版本下载pyv8,本人下载pyv8-win64-p3.zip。
点击Sublime Text 3菜单栏的首选项->浏览插件目录,打开Packages目录,再切换到上一层Installed Packages目录,
新建目录PyV8,把pyv8-win64-p3.zip解压后的文件放进去,重启ST编辑器。

二、emmet的用法

emmet插件的官方文档: https://docs.emmet.io/abbreviations/syntax/

新建一个html文件

1、元素
可以使用元素的名称(如DIV或P)生成HTML标记。
如输入div按tabl键后,自动生成<div></div>。
如果输入!,则自动生成一个HTML5基本结构

    
    Document    

2、嵌套操作符

(1)子元素:>

    
            
  •     

备注:div>ul>li的中间和后面不能有空格,否则按tab键后emmet 会停止解析,后面的例子也一样不能有空格。

(2)兄弟元素:+

-->

(3)向上一层:^,和>相反,可以多次使用

    

    

(4)乘法:*,重复指定次数生成元素

        
  •     
  •     
  •     
  •     

(5)分组:(),括号里面的内容为一个代码块,括号后面的元素与括号的第一个元素在同一级别 

    
        
                
  •             
  •         
    
    
        

    

3、属性操作符

(1)id和class

(2)自定义属性:[attr]

(3)项目编号:$

        
  •     
  •     
  •     
  •     

使用任意个$在数字前加任意个0

        
  •     
  •     
  •     
  •     

倒序,在$后面加@-

        
  •     
  •     
  •     
  •     

指定开始的序号,在$后面加@N,N为开始的序号

        
  •     
  •     
  •     
  •     

4、文本:{},为元素添加文本

Click me

因为文本也是节点,所以 a[href=1.htm]{click me} 与 a[href=1.htm]>{click me} 等价。

但是有多个元素时生成的结果会不同,用子元素>后面有元素时,也会放在a元素里面,例如

clickhere
clickhere

 

转载地址:http://eezrf.baihongyu.com/

你可能感兴趣的文章
Joda Time API -2
查看>>
Spring使用Cache、整合Ehcache
查看>>
Chrome调试工具奇淫技
查看>>
30分钟快速掌握Bootstrap
查看>>
如何针对业务做DB优化
查看>>
程序猿都该知道的MySQL秘籍
查看>>
Eclipse全面提速小技巧
查看>>
前端程序员必知的30个Chrome扩展
查看>>
memcached分布式实现原理
查看>>
怎么成为架构师
查看>>
40个重要的HTML 5面试问题及答案
查看>>
在Java中如何高效判断数组中是否包含某个元素
查看>>
设计模式总结
查看>>
什么时候可以使用Ehcache缓存
查看>>
Java核心知识点-JVM结构和工作方式
查看>>
Java编程中“为了性能”一些尽量做到的地方
查看>>
Java并发编程:线程池的使用
查看>>
redis单机及其集群的搭建
查看>>
Java多线程学习
查看>>
检查Linux服务器性能
查看>>