Emmet插件使用方法总结
Emmet插件使用方法总结
在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。
一、安装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 并安装。
二、快速编写HTML代码
先来看一下这个插件的效果,
新建一个HTML文档,输入“!”或“html:5”,然后按Tab键:
基本语法:
1、生成后代元素:> 大于号表示后面要生成的内容是当前标签的后代
命令:nav>ul>li
每个命令输完后按下Tab键即可快速得到代码
<nav><ul><li></li></ul>
</nav>
2、生成兄弟元素:+ 加号表示后面的元素和前面的元素是兄弟元素
命令:div+p+bq 得到代码如下:
<div></div>
<p></p>
<blockquote></blockquote>
3、生成上级元素:^ 表示^后面的元素与^前面的元素的父元素是平级,即兄弟元素。一个^表示提升一个层级,两个提升两级
命令:div+div>p>span+em^bq 得到代码如下:
<div></div>
<div><p><span></span><em></em></p><blockquote></blockquote>
</div>
命令:div+div>p>span+em^^bq 得到代码如下:
<div></div>
<div><p><span></span><em></em></p>
</div>
<blockquote></blockquote>
4、生成类名: . Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。
命令:.container 得到代码如下:
<div class="container"></div>
如果想生成多个类名可连续写
命令: .container.wrapper.more 得到代码如下:
<div class="container wrapper more"></div>
5、生成ID:#
命令:#container 得到代码如下:
<div id="container"></div>
6、生成分组:() 用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系
命令:(.foo>h1)+(.bar>h2) 得到代码如下:
<div class="foo"><h1></h1>
</div>
<div class="bar"><h2></h2>
</div>
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
<div id="content"><div class="article"><h1 class="ok" title="papername" style="color:#000;"></h1><h3 class="no" title="subname" style="color:#fff;"></h3><p class="words"></p></div></div>
练习的过程中我们可以试着反推出命令行
<div 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></div>
<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><div class="content"><div class="nav"><ul><li><a href=""><span></span></a></li></ul></div></div><div class="sidebar"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div><div class="mian"><div class="article"><h1>article1</h1></div><div class="article"><h1>article2</h1></div><div class="article"><h1>article3</h1></div></div></body><div class="footer">copyright</div></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文件
这里都是英文文档,没有英语基础的同学可就有点抓瞎了。
好了今天就到这里吧!一下子说太多怕接受不了。
转载于:https://www.cnblogs.com/jesse131/p/4978966.html
Emmet插件使用方法总结相关推荐
- sublime Emmet插件使用方法总结
Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发, ...
- php emmet,Emmet插件使用方法总结
Emmet插件是一种简化开发的工具,不难发现在前端开发的过程中,很大一部分的工作内容是 HTML.CSS 代码的编写.尤其是没有编辑器的帮助或者工具的使用时效率会特别低下.所以根据HTML和CSS语言 ...
- Emmet插件比较实用常用的写法
看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...
- sublime如何添加安装Emmet插件方法
描述:sublime如何添加安装Emmet插件方法 步骤: 菜单栏设置->package control 输入Install Package并点击 等待片刻,在弹出的窗口输入Emmet,点击搜索 ...
- Emmet插件用法指南
安装Emmet插件 Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中.到目前为止,很多流行的文本编辑器都支持Emmet插件,也就是说很多流行的文本编辑器都可 ...
- Sublime Text 3安装常用插件的方法及使用报错方法总结
常用安装方法 Sublime必备插件 必备的:Alignment,JsFormat,CSSComb,CTags,DocBlockr,Emmet,FileDiffs,SASS,LESS,SASS Bui ...
- Sublime如何解决安装Emmet插件后提示 Error while loading PyV8 binary
Sublime如何解决安装Emmet插件后提示 Error while loading PyV8 binary 解决方法 解决方法 Emmet插件对于喜欢用Sublime进行前端开发的人来说是必不可少 ...
- 提高新手写代码效率的Emmet插件怎么使用
平常写代码的时候通常会要写很多结构重复甚至相同的html,如果每一个重复的代码都去c+v,就会非常浪费时间. 所有就有了今天要推荐给各位小白新手的插件:Emmet,现在大部分编辑器都内置了emmet插 ...
- sublime text3安装emmet插件
sublime text3安装emmet插件 很多人输入html:5然后按住Tab键并没有生成完整结构,这是因为没有安装emmet插件 sublime text3安装包(来自官网) 链接:https: ...
最新文章
- OpenCV 笔记(04)— OpenCV2 升级到 OpenCV3/CV4 的改动(去掉 CV_前缀、使用新的前缀替换、使用新的命名空间宏)
- pandas读取字典(dict)数据
- 2021年春季学期-信号与系统-第五次作业参考答案-第五小题
- 2002无法连接mysql阿里云_2002无法登录MySQL服务器
- 老男孩教育每日一题-第108天-php-fpm优化关闭危险参数有哪些?
- python turtle画圆、循环法_实验与作业(Python)-03 Python程序实例解析(函数、循环、range、turtle)...
- directx 9.27.1734 多语言完整版 下载
- Timer和TimerTask类 例子 .
- GitHub开源项目:用于构建接入网络和模块化网络服务的平台
- php 组,PHP: 子组(子模式) - Manual
- 基于Seay的PHP源代码审计
- AGND DGND PGND GND
- getbook netty实战_Netty 实战(精髓)简介(Netty in Action)
- N720 拨号上网遇到的问题 /var/lock/LCK
- eslint 如何关闭检查变量名规范或者大小写检查
- Picgo 水印制作教程
- 明星IP资本局:风华秋实、巨星传奇再闯IPO
- 【Scrum模式语言5】Scrum of Scrums
- 前端(五)DOM 文档对象模型
- 用HTML编写的一个小调查表
热门文章
- 从零开始学习python-如何从零开始学python?
- python运行慢-Python运行效率慢?因为你不知道这六大窍门!
- 前端学python有什么用-学习和使用python的13个理由
- python 爬虫实例 电影-Python爬虫教程-17-ajax爬取实例(豆瓣电影)
- python画直方图代码-Python使用Plotly绘图工具,绘制直方图
- python自学需要多久-怎么自学python,大概要多久?
- 20行python代码的入门级小游戏-200行Python代码实现的2048小游戏
- python教程txt免费下载-python编程从入门到实践PDF电子书教程免费下载
- php和python性能-Node.js与PHP、Python的字符处理性能对比
- python好学吗 老程序员-想自学程序员,朋友推荐了python,靠谱吗?