Emmet的高级功能与使用技巧
Emmet系列教程
- 前端开发利器Emmet的介绍
- Emmet快速编写HTML代码
- Emmet快速编写CSS样式
- Emmet快速编写CSS样式
编写好HTML和CSS代码时,我们也需要修改或添加一些内容,Emmet提供了很多非常独特的工具,可以大大提高编辑体验,下面我们挑选几个常用的功能来介绍。
萨龙龙发现在sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不一样,这时我们就要修改Emmet快捷键或者查找在sublime text中的Emmet快捷键。
修改快捷键,打开PreFerences——Package Settings——Emmet中进行修改,只查看快捷键,比如:Match Tag Pair快捷键,打开工具中的命令面板ctrl+shift+p,输入:match就可以查看到。
本文的使用到的快捷键与官方演示中的快捷键一样。
1、展开缩写(Expand Abbreviation) Demo
这个功能在一开始介绍Emmet时就已经介绍,这是Emmet最核心的功能。
2、生成测试文本Lorem Ipsum Demo
在编写HTML代码时,有时需要添加一些内容,Emmet提供了一段随机的看不懂的英文字段,作为测试数据我们就可以调用。而生成Lorem Ipsum文本也非常简单,输入lorem,按Tab键,就可以生成下面这段文字:
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus
- voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
- voluptatem nesciunt voluptate ad veritatis.
Emmet的lorem这一功能不仅仅只为生成一段文本,使用lorem默认生成30个单词的文本,可以为它指定单词的数量来随机生成一大段文本。
3、如果要生成标题呢,只需减少单词的数量,比如:lorem4将生成下面的标题:
- Lorem ipsum dolor sit.
上面的例子只是生成单独的测试文本,与HTML标签一起编写也很简单,就像Emmet快速编写HTML代码文章中生成父子关系的代码一样:
- h2>lorem4
将生成:
- <h2>Lorem ipsum dolor sit.</h2>
- p*4>lorem4
将生成:
- <p>Lorem ipsum dolor sit.</p>
- <p>Dolores, similique veritatis reprehenderit.</p>
- <p>Cupiditate repudiandae numquam earum.</p>
- <p>Atque, sequi autem praesentium?</p>
所以lorem为我们提供了强大的测试数据,提高了编写HTML代码的速度,让我们专心编写代码。
4、扩展缩写(Wrap with Abbreviation)Demo
一个非常强大的功能,在当前HTML代码的基础上添加缩写,将向外扩展代码,比如这段代码,光标在p标签上或者外部:
- <div id="page">
- <p>Hello world</p>
- </div>
再按shift+ctrl+g,弹出:Enter Wrap Abbreviation(输入扩展缩写),在其中输入:
- .wrapper>h1{Title}+.content
将得到:
- <div id="page">
- <div class="wrapper">
- <h1>Title</h1>
- <div class="content">
- <p>Hello world</p>
- </div>
- </div>
- </div>
5、把文本转换成HTML标签
当客户给我们提供了一个文本文档,把标题复制过来,比如:
- 首页
- 公司简介
- 公司动态
- 关于我们
- 联系我们
转换成导航,选择文本,再按shift+ctrl+g,弹出:Enter Wrap Abbreviation(输入扩展缩写),在其中输入:
- nav>ul.nav>li.nav-item$*>a
将得到:
- <nav>
- <ul class="nav">
- <li class="nav-item1"><a href="">首页</a></li>
- <li class="nav-item2"><a href="">公司简介</a></li>
- <li class="nav-item3"><a href="">公司动态</a></li>
- <li class="nav-item4"><a href="">关于我们</a></li>
- <li class="nav-item5"><a href="">联系我们</a></li>
- </ul>
- </nav>
注意,导航中有5个菜单,这里不需要在li标签后面使用*5,只需使用单独的操作符*就可以。
6、删除文本中的列表标记
word文档中的文本很多都是列表块,比如:
- 1.首页
- 2.公司简介
- 3.公司动态
- 4.关于我们
- 5.联系我们
在编写HTML代码又不需要,Emmet让我们可以删除文本中的标记,在上一功能的缩写的基础代码的后面添加|t就可以删除文本中的标记:
- nav>ul.nav>li.nav-item$*>a|t
最终得到的HTML代码与上面的效果是一样的,你可以试试!
7、控制文本的输出位置
默认情况下,用Emmet把文本转换为HTML代码时,使用$#操作符Emmet可以将文本输出到多个元素中,而$#平上Emmet缩写语法中的一部分,所以得将$#放在属性值[]或文本{}操作符中。
以上面的导航文本为例,在Enter Wrap Abbreviation中输入:
- ul>li[title=$#]*>{$#}+img[alt=$#]
将得到:
- <ul>
- <li title="首页">首页<img src="" alt="首页"></li>
- <li title="公司简介">公司简介<img src="" alt="公司简介"></li>
- <li title="公司动态">公司动态<img src="" alt="公司动态"></li>
- <li title="关于我们">关于我们<img src="" alt="关于我们"></li>
- <li title="联系我们">联系我们<img src="" alt="联系我们"></li>
- </ul>
8、分解与添加标签(Split/Join Tag)Demo
光标在标签上时,按ctrl+j,可以将标签:
- <div></div>
转换为
- <div />
标签,反之亦然。当div中有内容时,使用这一功能一样会转换成上一标签,其中的内容也将删除,所以使用的时候我们也需要注意。
9、映射CSS属性值(Reflect CSS Value)Demo
为了浏览器的兼容性,CSS样式中有很多带有属性值的前缀样式,如果修改值,需要修改好几个处,比如:
- div {
- padding: 10px;
- -webkit-transform: rotate(50deg);
- -moz-transform: rotate(50deg);
- -ms-transform: rotate(50deg);
- -o-transform: rotate(50deg);
- transform: rotate(50deg);
- opacity: 0.7;
- filter: alpha(opacity=70);
- }
在Emmet中我们只需修改旋转属性值的其中一个,再按ctrl+b快捷键,其它相关的属性值也相应的改变。
10、选择匹配标签(Match Tag Pair)Demo
在我们编写HTML代码时,需要选择开始标签到闭合标签中的代码,一般我们就用鼠标框选,虽然不是太麻烦,但Emmet为我们提供了更加方便、快捷的功能,扩大与缩少选择。
在鼠标光标处按快捷键ctrl+d,将会选择光标所在标签范围内的所有内容,多次运行将扩大选择。有扩大就有缩小,快捷键:crtl+shift+d,多次运行将缩小选择范围。
11、转到匹配的标签(Go to Matching Pair)Demo
在开始标签与闭合标签中跳转,快捷键:ctrl+t。在编写大型HTML文件时,总是找不到匹配的闭合标签,Emmet提供的这一功能就可以方便的为我们在开始与闭合标签中轻松地跳转。
12、跳转到文本编辑点(Go to Edit Point)Demo
这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转,比如title、a、li、href、src等等需要输入内容的标题中。上一个,下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。
13、添加与删除注释(Toggle Comment)Demo
之前在添加注释时都是一个符号一个的敲出来的,真有点辛苦,也很烦。Emmet提供的注释开关功能太棒了,只需使用ctrl+/快捷键就可以添加与删除注释,不过其注释的范围是以行为单位,在HTML和CSS代码中都可以使用。
14、移除标签(Remove Tag)Demo
在一些大型的HTML代码中,有时标签嵌套的太多,通过Emmet移除标签这一功能,快速的移除多余的匹配的开始标签与闭合标签,快捷键:ctrl+k。
15、更新图片大小(Update Image Size)Demo
很多时候在编写HTML代码中的img标题与CSS样式中的background-image时,需要知道图片的宽度与高度,总是在电脑中找到图片 查看其尺寸,浪费时间又很不爽。而Emmet为我们提供这一功能,只需将光标移动到img或background-image标签上,按下ctrl+shift+u,Emmet会自动读取图片的尺寸并添加。
前提是引用的图片地址正确且存在,而且路径中不能有中文,必需是英文字符,不然把键盘敲烂也不会有反应。
16、数字递增/递减(Increment/Decrement Number)Demo
数字递增/递减,可以以0.1、1和10三个值进行递增/递减,快捷键分别是:ctrl+up/down、alt+up/down和ctrl+alt+up/down。
17、数学计算表达式(Evaluate Math Expression)Demo
有了Emmet在HTML和CSS文件中都可以进行简单的数字运算,神奇了,输入4*8再按ctrl+shift+y,Emmet能给出最终的结果。
18、将图片编译成data:URL模式(Encode/Decode Image to data:URL)Demo
data:URL模式,是利用base64编码把图片数据翻译成标准ASCII字符,在本地直接绘制图片,不是从服务器加载,减小HTTP请求,从而提高网页的加载速度。
将图片转换成data:URL模式,Emmet为我们提供的最简便、快速的方法,将光标放在img或background-image标签的图片上,按ctrl+shift+b快捷键,完美的转换。
转载于:https://www.cnblogs.com/lxthyme/p/4932635.html
Emmet的高级功能与使用技巧相关推荐
- 提升UI设计界面高级感的小技巧
在UI设计中,界面排版同样很重要,将有效的信息传递给用户这才是用户界面的功能,下面小千就给大家介绍五个能够提升你的设计高级感的小技巧,学到就是赚到! 1.强化层次结构来提升UI的清晰度 将必要的文本内 ...
- 苹果手机计算机怎么变高级,苹果手机中隐藏的7个高级功能
苹果手机一直都是非常受到群众的欢迎的,因为很多人觉得使用苹果手机和使用安卓手机给自己的感觉是不一样的,而且苹果手机的使用寿命比安卓手机长.但是很多人觉得苹果手机上的功能和安卓手机没有区别,其实只是你没 ...
- UE4高级功能--初探超大无缝地图的实现LevelStream
转:原地址:http://blog.csdn.net/pizi0475/article/details/49004383 UE4高级功能--初探超大无缝地图的实现LevelStream 前言 好吧,这 ...
- RocketMQ 高级功能介绍
1. 高级功能 1.1 消息存储 分布式队列因为有高可靠性的要求,所以数据要进行持久化存储. 消息生成者发送消息 MQ收到消息,将消息进行持久化,在存储中新增一条记录 返回ACK给生产者 MQ pus ...
- Bash功能与使用技巧
Bash功能与使用技巧 目录: 历史命令 命令别名 管道与重定向 常用快捷键 作业控制 花括号扩展 一个完整计算机的体系结构包括:硬件与软件,而软件又分为系统软件与应用软件,负责对硬件仅需管理与操作的 ...
- python数据库模块_十二、Python高级功能之Mysql数据库模块
Python高级功能之Mysql数据库模块 安装python mysql组件 # yum -y install MySQL-python.x86_64 以下根据实例来说明: >>> ...
- sql取最大值的那一行_从零学会SQL:SQL高级功能
一.什么是窗口函数 1.什么是窗口函数? 窗口函数,也叫OLAP函数(Online Analytical Processing,联机分析处理),可以对数据库数据进行实时分析处理. 窗口函数的基本语法如 ...
- 使用驱动器f:中的光盘之前需要将其格式化_mac虚拟光驱Daemon Tools高级功能详解—光盘刻录...
DAEMON Tools是一种紧凑而智能的解决方案,用于在Mac上安装不同类型的虚拟光盘,并允许您创建ISO,MDX和MDS / MDF图像.通过该程序,系统可识别虚拟图像,并允许您像使用普通光盘一样 ...
- ipadpro+打开html文件,iPadPro日常基本功能的使用技巧汇总
iPadPro日常基本功能的使用技巧汇总今天来给大家分享一下了,苹果的iPadPro这款平板还是很实用的,而且还自带的手写笔,平时大家在使用这款iPadPro中肯定遇到了不少问题,下面小编就来分享一下 ...
- 实现一个可管理、增发、兑换、冻结等高级功能的代币
本文首发于深入浅出区块链社区 原文链接:实现一个可管理.增发.兑换.冻结等高级功能的代币 本文主要介绍代币高级功能的实现: 代币管理.代币增发.代币兑换.资产冻结.Gas自动补充. 写在前面 在上一篇 ...
最新文章
- 2 万字长文深入详解 Kafka,从源码到架构全部讲透
- OpenCV中initUndistortRectifyMap函数存在bug原因探究
- linux 用户管理(3)----查看用户登录时间以及命令历史
- Centos6.0 64位MySQL 5.5.20 CMake 安装部署
- Codeforces Round #341 (Div. 2) D. Rat Kwesh and Cheese 数学
- viwer连接不到服务器 vnc_vnc viewer连不上怎么办 vnc viewer连不上的解决方法
- mysql不兼容_mysql5.7 不兼容问题
- 2021年中国动态内容交付市场趋势报告、技术动态创新及2027年市场预测
- 50欧姆线设计 高频pcb_高频电路布线的应对方法有哪些?
- bouncing-balls-evil-circle
- 转置卷积 反卷积 PyTorch torch.nn.ConvTranspose2d() output_padding
- 如何部署服务器虚拟化,vmware服务器虚拟化方案(vmware虚拟化平台部署)
- uniapp——点击图片放大预览
- 安装rocky8.5
- 1374:铲雪车(snow)
- 深度!全球机器人产业趋势及特征分析
- 【MP】MybatisPlus教程
- Java 基本数据类型 编码方式(小记1.7)
- 比SUM函数还高级的求和函数,你知道吗?
- 关于Mongodb的全面总结
热门文章
- JDK默认是little-endian
- 没解决:MMC不能打开文件MSC可能是由于文件不存在,不是一个MMC控制台,或者用后来的MMC版本创建。也可能你没有访问此文件的足够权限
- 全网独家:LINUX登录桌面后,如何自动运行自己的应用程序
- 成功的人不是最聪明的那个人,但绝对是一个交流很棒的人
- ubuntu无法打开系统设置的解决办法
- list排序sort降序_list.sort和高阶函数sorted
- python获取文件名中两条下划线之间的部分_Python 中的特殊双下划线方法
- java handlerbase_Java Firebase.AuthResultHandler方法代码示例
- android获取组件id,Android 获取控件id的三种方式
- POI设置单元格颜色及枚举颜色对照