首页 / HTML / Emmet插件使用方法总结

Emmet插件使用方法总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Emmet插件使用方法总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7347字，纯文字阅读大概需要11分钟。

内容图文

Emmet插件是一种简化开发的工具，不难发现在前端开发的过程中，很大一部分的工作内容是 HTML、CSS 代码的编写。尤其是没有编辑器的帮助或者工具的使用时效率会特别低下。所以根据HTML和CSS语言的特点诞生了 Emmet(前身是Zen Coding)，它可以帮助你更快的进行前端开发，实现自动补齐、填充和代码生成等功能，在它的帮助下能极大的提高代码编写的效率，更有效率的进行前端开发。

一、安装emmet：packages安装

下面方法适用于 sublime text 3。

1、安装 Package ctrl：使用 ctrl + ～打开控制台，输入以下代码：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2、在 Package ctrl 中选择 Install package；

3、搜索 emmet 并安装。

Emmet插件使用方法总结 - 文章图片

二、快速编写HTML代码

先来看一下这个插件的效果，

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：

Emmet插件使用方法总结 - 文章图片

基本语法：

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

命令：nav>ul>li

每个命令输完后按下Tab键即可快速得到代码

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

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

命令：p+p+bq 得到代码如下：

<p></p>
<p></p>
<blockquote></blockquote>

3、生成上级元素：^ 表示^后面的元素与^前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

命令：p+p>p>span+em^bq 得到代码如下：

<p></p>
<p>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</p>

命令：p+p>p>span+em^^bq 得到代码如下：

<p></p>
<p>
    <p><span></span><em></em></p>
</p>
<blockquote></blockquote>

4、生成类名： . Emmet 默认的标签为 p ，如果我们不给出标签名称的话，默认就生成 p 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

命令：.container 得到代码如下：

<p class="container"></p>

如果想生成多个类名可连续写

命令： .container.wrapper.more 得到代码如下：

<p class="container wrapper more"></p>

5、生成ID：#

命令：#container 得到代码如下：

<p id="container"></p>

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

命令：(.foo>h1)+(.bar>h2) 得到代码如下：

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

7、重复生成多份：* *号后面是想重复生成的份数

命令：ul>li*5 得到代码如下：

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

8、对生成内容依次编号：$ $就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5 得到代码如下：

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

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：

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

同样，我们也可以使用 @N 指定开始的序号

命令：ul>li.item$@3*5 得到代码如下：

<ul>
     <li class="item3"></li>
     <li class="item4"></li>
     <li class="item5"></li>
     <li class="item6"></li>
     <li class="item7"></li>
</ul>

至于ul>li.item$@-3*5 生成什么你们自己琢磨吧！

9、生成自定义属性：[attr] 中括号里面的内容是你想添加的属性

命令：td[rowspan=2 colspan=3 title] 得到代码如下：

<td rowspan="2" colspan="3" title=""></td>

10、生成文本内容：{} 大括号里面是你想添加的文本内容

命令：a{Click me} 得到代码如下：

<a href="">Click me</a>

命令：p>{Click }+a{here}+{ to continue} 得到代码如下：

<p>Click <a href="">here</a>to continue</p>

到此为止基本语法内容也就这么多，剩下的就是加强理解与练习了。

注意：在写命令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下，这将会导致代码无法使用。但是{}[]中可存在空格

ul>li.item${item$}*3

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

#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

    <p id="content">
    	<p class="article">
    		<h1 class="ok" title="papername" style="color:#000;"></h1>
    		<h3 class="no" title="subname" style="color:#fff;"></h3>
    		<p class="words"></p>
    	</p>
    </p>

练习的过程中我们可以试着反推出命令行

    <p class="header">
    	<ul class="nav">
    		<li><a href="" style="block"><span>name</span></a></li>
    		<li><a href="" style="block"><span>name</span></a></li>
    		<li><a href="" style="block"><span>name</span></a></li>
    		<li><a href="" style="block"><span>name</span></a></li>
    		<li><a href="" style="block"><span>name</span></a></li>
    		<li><a href="" style="block"><span>name</span></a></li>
    	</ul>
    </p>

    <table>
    	<thead>
    		<td class="col1"></td>
    		<td class="col2"></td>
    		<td class="col3"></td>
    		<td class="col4"></td>
    	</thead>
    	<tbody>
    		<tr class="row01">
    			<td class="col1"></td>
    		</tr>
    		<tr class="row02">
    			<td class="col2"></td>
    		</tr>
    		<tr class="row03">
    			<td class="col3"></td>
    		</tr>
    	</tbody>
    	<tfoot>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tfoot>
    </table>

    <html>
    <head>
    	<title></title>
    	<style type="text/css"></style>
    	<script src="abc1.js" type="text/javascript"></script>
    	<script src="abc2.js" type="text/javascript"></script>
    	<script src="abc3.js" type="text/javascript"></script>
    </head>
    <body>
    	<p class="content">
    		<p class="nav">
    			<ul>
    				<li><a href=""><span></span></a></li>
    			</ul>
    		</p>
    	</p>
    	<p class="sidebar">
    		<p class="top"></p>
    		<p class="middle"></p>
    		<p class="bottom"></p>
    	</p>
    	<p class="mian">
    		<p class="article">
    			<h1>article1</h1>
    		</p>
    		<p class="article">
    			<h1>article2</h1>
    		</p>
    		<p class="article">
    			<h1>article3</h1>
    		</p>
    	</p>
    </body>
    <p class="footer">copyright</p>
    </html>

这些代码的命令你反推出来了吗？

1.命令：.header>ul.nav>li*6>a[style=block]>span{name}

2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

下面只列出一些常用的快速编辑方式

命令：link

<link rel="stylesheet" href="" />

命令：script:src

<script src=""></script>

命令：img

<img src="" alt="" />

命令：inp

<input type="text" name="" id="" />

命令：input:p

<input type="password" name="" id="">

命令：btn 结果：<button></button>

命令：btn：s 结果：<button type="submit"></button>

命令：btn：r 结果：<button type="reset"></button>

CSS中缩写

单位：

p 表示%
e 表示 em
r表示 rem

宽度：

命令：w100 结果：width:100px; 默认单位px

命令：w100p 结果：width:100%;

高度：

命令：h100r 结果：height: 100rem;

颜色：

命令：c#3 结果： color: #333;

命令：c#e0 结果： color: #e0e0e0;

命令：c#fc0 结果： color: #ffcc00;

CSS3前缀：

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

命令：-wmso-transform

结果：

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

属性模糊匹配：

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

所以在平时使用的时候可留意emmet的提示

命令：h10p+m5e 结果：height: 10%;margin: 5em;

四、定制Emmet插件

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

这里都是英文文档，没有英语基础的同学可就有点抓瞎了。

“公欲利其事，必先利其器”，在前端的开发过程中，掌握一些开发工具的使用技巧，能够使开发过程变得轻松快捷，更有利于关注于代码程序的开发。

内容总结

以上是互联网集市为您收集整理的Emmet插件使用方法总结全部内容，希望文章能够帮你解决Emmet插件使用方法总结所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/403074.html

来源：【匿名】

【上一篇】css3媒体查询实现网站响应式布局_html/css_WEB-ITnose 【下一篇】PHP 和 HTML

更多 ►

【Emmet插件使用方法总结】教程文章相关的互联网学习教程文章

距离计算方法总结转自http://www.cnblogs.com/xbinworld/archive/2012/09/24/2700572.html#2663469【图】

在做分类时常常需要估算不同样本之间的相似性度量(Similarity Measurement)，这时通常采用的方法就是计算样本间的“距离”(Distance)。采用什么样的方法计算距离是很讲究，甚至关系到分类的正确与否。　　本文的目的就是对常用的相似性度量作一个总结。本文目录：1. 欧氏距离2. 曼哈顿距离3. 切比雪夫距离4. 闵可夫斯基距离5. 标准化欧氏距离6. 马氏距离7. 夹角余弦8. 汉明距离9. 杰卡德距离 & 杰卡德相似系数10. 相关系数 & 相关距...

htmli是什么标签？htmli标签的使用方法总结【图】

本篇文章主要讲述了关于HTML i标签的介绍，还有HTML i标签的使用方法的介绍，最后是我的个人总结，接下来就让我们一起来看看这篇文章吧首先我们说说html i标签是什么？我们来看看关于i标签的介绍：<i>定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。<i>标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。在没有其他适当语义的元素可以使用时，请使用<i>元素。提示:在HTML4.01中，<i>标签呈...

div+css在各浏览器间的兼容性问题解决方法总结_html/css_WEB-ITnose

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/...

tmalPHP将整个网站生成HTML纯静态网页的方法总结

代码如下://在你的开始处加入 ob_start(); ob_start(); //以下是你的代码 //在结尾加入 ob_end_clean(),并把本页输出到一个变量中 $temp = ob_get_contents(); ob_end_clean(); //写入文件 $fp = fopen(‘文件名','w'); fwrite($fp,$temp) or die(‘写文件错误'); ?> 这只是最基本的方法，还不是很实用，因为网站是要更新的，要定期重新生成HTML 下面是我用的方法：代码如下:if(file_exists(“xxx.html”)) { $time = time(); //...

PHP将整个网站生成HTML纯静态网页的方法总结_PHP教程

PHP移除指定HTML标签方法总结_PHP教程【图】

在php中我们最常用的指定HTML标签可以直接使用strip_tags函数来替换了，利用它可以过滤所有的html标签哦，下面我来给大家介绍除了此函数之外的其它办法。有时候我们需要把html标签页存到数据库里，但是有些场合却需要拿无html标签的纯数据，这个时候就要对带html标签的数据进行处理，把html标签都去掉。平时用 htmlspecialchars() 来过滤html，但是把html的字符转义了，最后显示出来的就是html源代码，利用strip_tags()就可以把htm...

PHP将HTML转换成文本一些方法总结_PHP教程

在php中html转换成文本提供了自带的函数strip_tags了，但有时此函数不够用，下面总结了一些用户自定的函数，各位可参考。最常用的使用php函数strip_tags代码如下$mystr= 此处省略几十行HTML代码^_^ SATO; $str=strip_tags($mystr); //到这里就已经达到我的HTML转为TXT文本的目的了，哈哈，使用这个函数真方便 //下面是插件的一些切词等操作，这里就不多说了 ?>自定义函数代码如下// $document 应包含一个 HTML 文档。 // 本例将去...

PHP生成静态html文件一些方法总结_PHP教程

利用php生成静态文件我们用到最多的是以模板形式来替换生成了，如我把{A}定义为标签在php中只要利用fopen读取模板文件，然后再利用replace替换{A}为PHP生成静态html文件实例即可。1,下面使用模版的一个方法!代码如下$fp = fopen ("templets.html","a"); if ($fp){ $fup = fread ($fp,filesize("templets.html")); $fp2 = fopen ("html.shtml","w"); if ($fwrite ($fp2,$fup)){ $fclose ($fp); $fcolse ($fp2); die ("写入模...

PHP抓取网页、解析HTML常用的方法总结，php抓取_PHP教程

PHP抓取网页、解析HTML常用的方法总结，php抓取概述爬虫是我们在做程序时经常会遇到的一种功能。PHP有许多开源的爬虫工具，如snoopy，这些开源的爬虫工具，通常能帮我们完成大部分功能，但是在某种情况下，我们需要自己实现一个爬虫，本篇文章对PHP实现爬虫的方式做个总结。 PHP实现爬虫主要方法 1.file()函数 2.file_get_contents()函数 3.fopen()->fread()->fclose()方式 4.curl方式 5.fsockopen()函数，socket方式 6.使用开源工...

PHP抓取网页、解析HTML常用的方法总结_PHP教程

PHP抓取网页、解析HTML常用的方法总结　　这篇文章主要介绍了PHP抓取网页、解析HTML常用的方法总结,本文只是对可以实现这两个需求的方法作了总结,只介绍方法,不介绍如何实现,需要的朋友可以参考下概述爬虫是我们在做程序时经常会遇到的一种功能。PHP有许多开源的爬虫工具，如snoopy，这些开源的爬虫工具，通常能帮我们完成大部分功能，但是在某种情况下，我们需要自己实现一个爬虫，本篇文章对PHP实现爬虫的方式做个总结。PHP实现...

php删除html标签和标签内的内容的方法总结【图】

php删除html标签和标签内的内容的方法总结经常扒别人网站文章的坑们；我是指那种批量式采集的压根不看内容的，少不了都会用到删除html标签的函数；这里介绍3种不同用途上的方法；$str=这里是p标签这里是a标签;1：删除全部或者保留指定html标签 php自带的函数strip_tags即可满足要求，使用方法：strip_tags(string,allow)； string：需要处理的字符串； allow：需要保留的指定标签，可以写多个； ...

PHP抓取网页、解析HTML常用的方法总结_php实例

概述爬虫是我们在做程序时经常会遇到的一种功能。PHP有许多开源的爬虫工具，如snoopy，这些开源的爬虫工具，通常能帮我们完成大部分功能，但是在某种情况下，我们需要自己实现一个爬虫，本篇文章对PHP实现爬虫的方式做个总结。 PHP实现爬虫主要方法 1.file()函数 2.file_get_contents()函数 3.fopen()->fread()->fclose()方式 4.curl方式 5.fsockopen()函数，socket方式 6.使用开源工具，如:snoopy PHP解析XML或HTML主要方式 1.正...

php生成html文件方法总结_PHP

我经常会在网上看到有人问怎么将整个动态的网站静态化，其实实现的方法很简单。代码如下: <?php //在你的开始处加入 ob_start(); ob_start(); //以下是你的代码 //在结尾加入 ob_end_clean(),并把本页输出到一个变量中 $temp = ob_get_contents(); ob_end_clean(); //写入文件 $fp = fopen(‘文件名,w); fwrite($fp,$temp) or die(‘写文件错误); ?>这只是最基本的方法，还不是很实用，因为网站是要更新的，要定期重新生成...

PHP抓取网页、解析HTML常用的方法总结_PHP

PHP将整个网站生成HTML纯静态网页的方法总结_php技巧

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / Emmet插件使用方法总结

Emmet插件使用方法总结

内容导读

内容图文

内容总结

内容备注

内容手机端

【Emmet插件使用方法总结】教程文章相关的互联网学习教程文章

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程