emmet 工具的基本使用,总结
一.先配置一下idea,在Settings中设置一下就可以了。
二、正式开始,常用命令
新建一个HTML文档
html:5 或者 ! 生成 HTML5 结构 html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格型 生成带有 id 、class 的 HTML 标签
1、生成后代元素:> 大于号表示后面要生成的内容是当前标签的后代
命令:nav>ul>li
每个命令输完后按下Tab键即可快速得到代码
<nav><ul><li></li></ul> </nav>
2、生成兄弟元素:+ 加号表示后面的元素和前面的元素是兄弟元素
命令:div+p+bq 得到代码如下:
1 <div></div> 2 <p></p> 3 <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 得到代码如下:
1 div.container
1 <div class="container"></div>
如果想生成多个类名可连续写
命令: .container.wrapper.more 得到代码如下:
1 div.container.wrapper.more
1 <div class="container wrapper more"></div>
5、生成ID:#
命令:#container 得到代码如下:
1 div#container
1 <div id="container"></div>
6、生成分组:() 用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系
命令:(.foo>h1)+(.bar>h2) 得到代码如下:
1 (div.foo>h1)+(div.bar>h2)
1 <div class="foo"> 2 <h1></h1> 3 </div> 4 <div class="bar"> 5 <h2></h2> 6 </div>
7、重复生成多份:* *号后面是想重复生成的份数
命令:ul>li*5 得到代码如下:
1 ul>li*5 2 3 4 <ul> 5 <li></li> 6 <li></li> 7 <li></li> 8 <li></li> 9 <li></li> 10 </ul>
8、对生成内容依次编号:$ $就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个$
命令:ul>li.item$*5 得到代码如下:
1 ul>li.item$*5 2 3 4 <ul> 5 <li class="item1"></li> 6 <li class="item2"></li> 7 <li class="item3"></li> 8 <li class="item4"></li> 9 <li class="item5"></li> 10 </ul>
只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:命令:ul>li.item$@-*5 得到代码如下:
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.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>
9、生成自定义属性:[attr] 中括号里面的内容是你想添加的属性
命令:td[rowspan=2 colspan=3 title] 得到代码如下:
1 td[rowspan=2 colspan=3 title] 2 3 4 <td rowspan="2" colspan="3" title=""></td>
10、生成文本内容:{} 大括号里面是你想添加的文本内容
命令:a{Click me} 得到代码如下:
1 a{Click me} 2 3 4 <a href="">Click me</a>
命令:p>{Click }+a{here}+{ to continue} 得到代码如下:
1 p>{Click }+a{here}+{ to continue} 2 3 4 <p>Click <a href="">here</a> to continue</p>
到此为止基本语法内容也就这么多,剩下的就是加强理解与练习了。
注意: 在写命令的时候,你可能为了代码的可读性,使用一些空格什么的排版一下,这将会导致代码无法使用。但是{}[]中可存在空格
ul>li.item${item$}*3
1 ul>li.item${item$}*3 2 3 4 <ul> 5 <li class="item1">item1</li> 6 <li class="item2">item2</li> 7 <li class="item3">item3</li> 8 </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/wfhking/p/9445278.html
emmet 工具的基本使用,总结相关推荐
- Emmet快速编写HTML代码
缩写是Emmet工具的核心,这些特殊的表达式通过Emmet解析并转化为结构化的代码块,而语法用CSS选择器,HTML标签和一些Emmet特定的代码生成,所以对于任何一个前端开发人员都可以很容易地掌握和 ...
- web前端要学哪些东西,前端大牛分享的技能整理
前端工程师技能整理 一.框架与组件 bootstrap等UI框架设计与实现 [ ] 伸缩布局:grid网格布局[ ] 基础UI样式:元素reset.按钮.图片.菜单.表单[ ] 组件UI样式:按钮组. ...
- 医院项目-预约挂号-第二部分-前端
目录 一.前端开发与开发工具介绍 1. 前端开发介绍: 2. vscode安装和使用: 二.ECMAScript 6 1.ECMAScript 6 2 基本语法: 三.vue入门(重要) 1.Vue介 ...
- 通宵整理的前端开发技能树
前端工程师技能整理 一.框架与组件 bootstrap等UI框架设计与实现 [ ] 伸缩布局:grid网格布局 [ ] 基础UI样式:元素reset.按钮.图片.菜单.表单 [ ] 组件UI样式:按钮 ...
- Web前端最常用的技能整理,附最新前端学习资料和视频教程
一.框架与组件 bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset.按钮.图片.菜单.表单 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面 ...
- html用emmt写菜单,前端开发工具Emmet的介绍
曾经也为写HTML/CSS代码而烦恼过,不愿再写下去,感觉很烦琐,写那么多的尖括号,用的标签都是在重复写,而且绝大多数标题都需要闭合标签,再多几个无序列表就更头疼. Emmet,一个强大的插件,可以为 ...
- web开发中的 emmet 效率提升工具
web开发中的 emmet 效率提升工具 可以用来快速生成html 代码. 并且给各种IDE.编辑器提供了插件支持,sublime ,webstorm等. 如在webstorm中安装好emmet之后, ...
- Web开发人员的必备工具 - Emmet (Zen Coding)
日期:2012-11-6 来源:GBin1.com 如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速 ...
- 一节课精通Emmet编写开发工具-姜威-专题视频课程
一节课精通Emmet编写开发工具-2571人已学习 课程介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.一句命令,一大片代码.让我们一起领 ...
最新文章
- IDEA实际开发中的常用优化设置
- 高压桥电路-驱动旧式电话机振铃
- hex editor怎么搜索代码_代码审计从入门到放弃(三) phplimit
- c 输出空格_Python编程第2课,认识打印输出函数print,17个案例详解5个参数
- s:action,s:param的用法
- libevent 源码阅读 Ubuntu下muduo库的安装与使用
- mysqldump死住(实际是导致mysqld crash)
- 微信接口请求次数_接口签名验证常用方案
- Zookeeper 夺命连环 9 问
- 李飞飞新动向:创建斯坦福“以人为本AI研究院”,担任共同院长
- 使用C#读写ini配置文件
- 第12期《啊哈算法 PDF版本》
- cacti mysql 压缩 备份_CactiEZ备份和恢复
- 使用phantomjs将网页转换成pdf或者长图片
- xpose使用教程 hook java层的代码 (一 公司取名.apk)
- python保存超大数据excel表格——大于65532
- 爱企查与天眼查也来啦~
- 汽车控制器自研AUTOSAR开发工具链需要哪些?
- 特种浓缩分离:生物农药超滤分离提纯过滤技术
- Android有道词典开发
热门文章
- 【Golang 快速入门】项目实战:即时通信系统
- 【Java从0到架构师】SpringMVC - 返回值
- 从零开始带你部署springboot项目到ubuntu服务器05
- SqlServer数据库 性能监视器 打开路径、添加监控参数 等详解
- LAMP/LNMP环境下:phpinfo php连接mysql php执行mysql查询 测试代码及响应
- python中int的“四舍五入”
- 学数据分析究竟要懂哪些统计学?全都给你梳理好了,拿走不谢
- 阿里年薪80w数据总监分享:一张图了解数据分析完整流程
- 摩擦力特点用计算机绘制出,AGC液压缸模拟工况摩擦力特性测试方法研究
- linux 脚本中的push,在Linux系统下实现ServerPush(转)