Sublime Text 3插件之Emmet:HTML/CSS代码快速编写神器

一、快速编写HTML代码 

1.  初始化 

HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:

  • html:5 或!:用于HTML5文档类型
  • html:xt:用于XHTML过渡文档类型
  • html:4s:用于HTML4严格文档类型

2.  轻松添加类、id、文本和属性 

连续输入元素名称和ID,Emmet会自动为你补全,比如p.bar#foo,会自动生成:

<p class="bar" id="foo"></p>

下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

<h1>foo</h1>  
<a href="#"></a>

3.  嵌套 

现在你只需要1行代码就可以实现标签的嵌套。 

  • >:子元素符号,表示嵌套的元素
  • +:同级标签符号
  • ^:可以使该符号前的标签提升一行

4.  分组 

你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码: 

<div class="foo"><h1></h1>
</div>
<div class="bar"><h2></h2>
</div>

5.  隐式标签 

声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。 

在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。

下面是所有的隐式标签名称: 

    • li:用于ul和ol中
    • tr:用于table、tbody、thead和tfoot中
    • td:用于tr中
    • option:用于select和optgroup中

 6.  定义多个元素 

要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码: 

    <ul><li></li><li></li><li></li></ul>

7.  定义多个带属性的元素 

如果输入 ul>li.item$*3,将会生成如下代码: 

    <ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul>

 

二、CSS缩写 

1.  值 

比如要定义元素的宽度,只需输入w100,即可生成

width: 100px; 

除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

height: 10%;  
margin: 5em; 

单位别名列表: 

    • p 表示%
    • e 表示 em
    • x 表示 ex

 2.  附加属性 

可能你之前已经了解了一些缩写,比如 @f,可以生成: 

@font-face {font-family:;src:url();
}

一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

 @font-face {font-family: 'FontName';src: url('FileName.eot');src: url('FileName.eot?#iefix') format('embedded-opentype'),url('FileName.woff') format('woff'),url('FileName.ttf') format('truetype'),url('FileName.svg#FontName') format('svg');font-style: normal;font-weight: normal;}

3.  模糊匹配 

如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的: 

 overflow: hidden;

4.  供应商前缀 

如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成: 

-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;

你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

-webkit-transform: ;
-moz-transform: ;
transform: ;

前缀缩写如下: 

    • w 表示 -webkit-
    • m 表示 -moz-
    • s 表示 -ms-
    • o 表示 -o-

5.  渐变 

输入lg(left, #fff 50%, #000),会生成如下代码:

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

三、附加功能 

生成Lorem ipsum文本 

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章,主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet,你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数,比如lorem10,将生成:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, maxime.

四、定制 

你还可以定制Emmet插件: 

  • 添加新缩写或更新现有缩写,可修改snippets.json文件
  • 更改Emmet过滤器和操作的行为,可修改preferences.json文件
  • 定义如何生成HTML或XML代码,可修改syntaxProfiles.json文件

相关文档:http://docs.emmet.io/(其中包含了一个Demo,你可以试验文中所提到的这些缩写)

转载于:https://www.cnblogs.com/yanchuanblog/p/3817157.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359765.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

批处理停止php服务,通过批处理启动和停止MSSQL+IIS

电脑安装了不少的开发工具环境&#xff0c;如MSSQL2005(2000)IIS\MySQLApache等等&#xff0c;开机和娱乐时为了加快速度&#xff0c;都得把这些占用内存的开发工具系统服务停止&#xff0c;每项手工操作明显麻烦&#xff0c;用批处理就简单多了... 点一下启动&#xff0c;再点…

k8s secret使用_Java Secret:使用枚举构建状态机

k8s secret使用总览 Java中的枚举比许多其他语言更强大&#xff0c;可以导致令人惊讶的用途。 在本文中&#xff0c;我概述了Java 枚举的一些单独功能&#xff0c;并将它们放在一起形成一个状态机。 单例和实用程序类的枚举 您可以非常简单地将枚举用作Singleton或Utility。…

mydumper备份原理和使用方法

mydumper介绍 MySQL自身的mysqldump工具支持单线程工作&#xff0c;依次一个个导出多个表&#xff0c;没有一个并行的机&#xff0c;这就使得它无法迅速的备份数据。 mydumper作为一个实用工具&#xff0c;能够良好支持多线程工作&#xff0c;可以并行的多线程的从表中读入数据…

大津阈值分割matlab实验,OTSU(大津法)分割源程序(MATLAB版)

接下来介绍OTSU方法的原理&#xff1a;***************************************************************************************************************************************************************OTSU法对于具有双峰性质的灰度图像或是彩色图像的某一通道的分割效…

BZOJ-1798 维护序列

线段树。支持区间加、区间乘、区间查询和。 标记下移还有取模要注意。 var n,p,q,i,s,t:longint; a:int64; num,n1,n2,n3:array[0..500000] of int64; procedure build(o,l,r:longint); var m,i:longint; begin m:(lr) div 2; if lr then begin n1[o]:num[l];…

matlab pca可视化,利用Matlab实现PCA demo展示

input_data rand(1000,3);%随机生成1000个样本&#xff0c;每个样本有x,y,z三个属性 figure(1);%控制画图的窗口为1hold off;%使当前轴和图形不再具备被刷新的性质&#xff0c;关闭在此基础上再画图plot3(input_data(:,1), input_data(:,2), input_data(:,3), ‘ro‘);%% Func…

matlab短均线滞后项,均线理论的滞后性问题

对移动平均线有一定了解的人都会发现移动平均线理论存在一个缺点&#xff0c;那就是移动平均线的信号具有一定的滞后性&#xff0c;这是制约移动平均线运用的最大因素。介绍了均线的计算方法.从它的计算方法中也能看出目前均线的数值要受到前一阶段股价的影响&#xff0c;而且均…

IOS侧滑框架合集

侧滑框架 https://github.com/gresrun/GHSidebarNav https://github.com/ipup/PPRevealSideViewController https://github.com/gotosleep/JASidePanels https://github.com/jamztang/JTRevealSidebarDemo https://github.com/ECSlidingViewController/ECSlidingViewController…

python捕获摄像头帧_Xuggler教程:帧捕获和视频创建

python捕获摄像头帧注意&#xff1a;这是我们的“ Xuggler开发教程 ”系列的一部分。 到目前为止&#xff0c;在我们的Xuggler教程系列中&#xff0c;我们已经对视频处理的Xuggler进行了介绍&#xff0c;并讨论了转码和媒体修改 。 在本教程中&#xff0c;我们将看到如何解码视…

【python核心编程】第六章 序列

1、操作符 &#xff08;1&#xff09;成员关系操作符&#xff1a;in 、not in >>> string abcdefg>>> a in stringTrue>>> h in stringFalse>>> h not in stringTrue *补充知识*&#xff1a;string模块 >>> import string>>…

java物业管理系统设计,JAVA物业管理系统设计与实现(论文+源代码)

【实例简介】JAVA物业管理系统设计与实现(论文源代码)【实例截图】【核心代码】JAVA物业管理系统设计与实现(论文源代码)└── JAVA物业管理系统设计与实现(论文源代码)├── JAVA物业管理系统设计与实现(论文源代码)│ ├── JAVA物业管理系统│ │ ├── JWS│ │…

MyEclipse 编写 ExtJS 卡死问题解决方法

MyEclipse 8.6 在 jsp 中编写 ExtJS时&#xff0c;会出现卡死现象&#xff0c;让人甚是头疼。网上找了很多方法&#xff0c;折腾半天&#xff0c;还是不管用。 什么MyEclipse 优化&#xff0c;Validation 取消&#xff0c;MyEclipse 在 JSP 中打 "点" 时&#xff0…

matlab试用版的user id,免费试用MATLAB

请选择其一AlabamaAlaska美属萨摩亚APO/FPO AAAPO/FPO AEAPO/FPO APArizonaArkansasCaliforniaCaroline IslandsColoradoConnecticutDelawareDistrict of ColumbiaFlorida格鲁吉亚关岛HawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMariana Islands马绍尔群岛Mar…

java的aqs是什么,AQS在Java中的应用

上篇文章我们详细分析了AQS的底层实现原理,这节就来探索jdk中使用AQS实现的工具类ReentrantLock一, 是什么?怎么用?是什么?是一个独占锁,也就是在并发环境下同一时刻只能有一个线程获得资源,也是一个可重入锁.可重入锁: 一个线程已经获取到了该资源,下次再次获取资源时不会出…

jasper 获取当前日期_入侵Jasper以获取JSP页面的对象模型

jasper 获取当前日期为了对我的JSP执行一些检查和统计分析&#xff0c;我需要一个包含在其中的元素的类似于DOM的层次模型。 但是&#xff0c;解析JSP页面并不是一件容易的事&#xff0c;最好留给它一个出色的工具-Tomcat&#xff0c;Jetty&#xff0c;GlassFish以及其他所有工…

php怎么把字符转成大写,php怎么把字符串转换为大写

php把字符串转换为大写的方法&#xff1a;可以利用内置函数strtoupper()来进行转换。strtoupper()函数可以把指定的字符串转换为大写&#xff0c;并返回被转换为大写的字符串。使用函数&#xff1a;(学习视频推荐&#xff1a;php视频教程)strtoupper() 函数把字符串转换为大写&…

C#开发 —— 基础知识

C# 用于开发可以运行在 .Net 平台上的应用程序&#xff0c;C# 本身只是一种语言&#xff0c;尽管它是用于生成面向 .Net 环境的代码&#xff0c;但它本身不是 .Net 的一部分 Console.WriteLine 命名空间 —— using 指令将命名空间名所标识的命名空间内的类型成员导入到当前编译…

JMS 2.0的新增功能

这篇文章列出了JMS 2.0 &#xff08; Java EE 7平台的一部分&#xff09;引入的所有新API&#xff08;接口/类/注释等&#xff09;。 这些分类如下 API简化 使用方便 异常处理 杂 这是一个简短的摘要以及一些代码片段 API简化 JMSContext 在Connection和Session对象之上…

oracle存储过程与函数的区别及作用,Oracle存储过程与存储函数-入门

文章思维导图一. 存储过程和存储函数的定义定义&#xff1a;存储在数据库中&#xff0c;供所有用户程序调用的子程序叫做存储过程/存储函数。复杂点的解释&#xff1a;存储过程(Stored Procedure)&#xff0c;就是一组用于完成特定数据库功能的SQL 语句集&#xff0c;该SQL语句…

CC++初学者编程教程(8) VS2013配置编程助手与QT

1. 2. 配置编程助手 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19&#xff0e; 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30&#xff0e; 31. 32&#xff0e; 33. 34. 35. 36. 37. 38. 39 40 41 42 43 这个时候我们就在VS2013里面集成了QT&#xff0c;编程助…