让html前端的数字每天自己增加,前端开发神器Emmet,让你的代码输入效率瞬间翻倍...
你还在一个字符一个字符的敲代码吗?如果是那你就太OUT了,现在什么都流行自动化,当然敲代码也不能落后啊。这款emmet神器,让你的代码输入效率瞬间翻倍!我们还是先看效果图:
怎么样,是不是很酷,快来学习一下吧。
Emmet,前身是大名鼎鼎的Zen Coding,借助css语法来提高输入html/css代码效率。Emmet作为一款插件被广泛运用在代码编辑器中,如sublime,webstrom,notepad++等都默认安装的有,如果没有可自行百度安装。
基本使用:输入Emmet命令,按Tab键即可。
一、快速生成html代码
1.生成html文档
html文档一般包括标签等,这些固定标签可以通过Emmet一键生成。
html:5或! 快速生成html5文档
html:xt 快速生成XHTML过渡文档
html:4s 快速生成HTML4严格文档
2.生成html标签
Emmet可以自动补全标签,只需输入尖括号内的标签名然后按下Tab键,一个完整闭合的标签就生成了。另外我们可以使用'>'生成子元素,使用'+'生成同级元素,使用'^'返回上一层父级元素,使用'*'生成重复元素,使用'()'进行组合操作。
3.标签中添加类、id、文本和属性
Emmet使用'#'和'.'来生成id和class属性,使用'[]'进行自定义属性,使用'{}'来定义标签内包含的内容。如果标签是div的话可以直接省略div。
4.自动生成编号
Emmet支持自动生成连续的编号,使用'$'符号快速生成相关属性的编号。如果需要生成多位的数字编号,可以组合使用多个'$'符号。如果需要指定反向编号,可以使用'$@-'符号。当然如果输出从某个编号到某个编号也是可以的,自己去探索吧。
二、快速生成css代码
1.快速生成css属性和值
书写css是枯燥无味的事情,Emmet可以帮你简化这个过程。生成的属性值默认是px,当然也可以生成其他单位,那就请记住下面几个符号:
'p'表示'%','e'表示'em','x'表示'ex'。
2.自动添加前缀
css一些属性经常要兼容各个浏览器而添加一大堆后缀,有了Emmet,一切烦恼轻松解决。例如下面生成圆角和渐变,太给力了。
三、其他功能
在Emmet中可以快速生成占位文字:
lorem或者 lipsum如果需要生成重复的Dummy文字,可以使用如下命令:
p*4>lorem
并且支持模糊输入,如下:
ul>lorem25.item*3这里就不贴效果了,自己去体验吧。
四、总结
大概介绍了Emmet的功能,是不能很强大很酷炫!学会之后只需敲入命令就可以瞬间生成一个网页,当然我不建议使用太复杂太长的命令。平常敲代码再也不用输入尖括号了,爽歪歪!赶紧动起手,体验开发的乐趣!
如果喜欢,欢迎订阅收藏,我是竹风,每天都有前端干货,带你玩转前端!
让html前端的数字每天自己增加,前端开发神器Emmet,让你的代码输入效率瞬间翻倍...相关推荐
- 前端开发神器 Emmet
好的开发工具是一定要学习和使用的,好工具让你事半功倍. Sublime,webStorm,HBuilder都内置了Emmet,熟练使用可以有效的提升编码效率. Emmet生成HTML的语法 •你只需 ...
- linux vim emmet,前端开发神器Emmet.vim使用笔记
Emmet.vim的安装 请看:http://www.cnblogs.com/yunie-akira/p/3554065.htmlEmmet.vim简介 Emmet,原来叫Zen Coding,由Se ...
- 【前端】数字媒体技术专业主要课程及就业方向
一.什么是数字媒体技术 数媒专业是一个融计算机技术和媒体艺术为一体的交叉学科,属计算机大类专业,授予工学学士学位. 数媒专业的发展方向主要有大Web前端,数字游戏和影视后期这3个方向. 二.技术方向& ...
- 数字孪生技术(前端实现)
数字孪生Digital twin(DT) 在2002年,密歇根大学的Dr. Michael Grieves教授首次提出Digital Twin(数字孪生)技术概念,就是通过一个数字模型来监控物体的实时 ...
- 数字IC设计的前端设计和后端设计流程
数字IC设计的前端设计和后端设计流程 数字IC前端设计流程 数字IC后端设计流程 数字IC前端设计流程 数字IC就是传递.加工.处理数字信号的集成电路(Integrated Circuit, IC), ...
- 落魄前端,整理给自己的前端知识体系复习大纲(上篇,2w字)
作者:逐步前行 https://juejin.im/post/6867715946941775885 阅读前言 转眼间9月的到来,十分感慨这时光的飞逝.9月对程序员有着十分重要的意义,想在这个优胜劣汰 ...
- GitChat·前端 | 从软件工程角度看大前端技术栈
GitChat 作者:韩亦乐 前言 我们都知道,大学几乎是没有 Web 前端课的.以我所在的大学为例,唯一引导我们了解 JavaScript 的也只是'人机界面'和'Web应用开发'选修课.再者,由于 ...
- 前端点滴(网络协议/HTML/前端优化/浏览器)
前端点滴(网络协议/HTML/前端优化/浏览器)---倾尽所有 网络协议/HTML/前端优化/浏览器 IOS七层模型 网络协议 一. HTTP与HTTPS协议 (1)http与https概述 (2)h ...
- 3万6千字爆肝,前端进阶不得不了解的函数式编程开发,含大量实例,手写案例,所有案例均可运行
3w6爆肝,前端进阶不得不了解的函数式编程开发,含大量实例,手写案例,所有案例均可运行 认识函数式编程 函数相关复习 函数是一等公民 高级函数 函数作为参数 案例 1,模拟 forEach 案例 2, ...
最新文章
- vim中删除dos格式文件中的^M号的方法以及深度规整文件格式
- Source Insight技巧收集
- 相机设置感兴趣区域(自带API)
- 网易云信新增用户、IM、实时音视频多维度统计功能
- 关于python的保留字_Python中的保留字
- 所代币代币_代币网络效应
- debian中修改freeswitch的 sip默认端口,防盗打
- 如何解决win8.1系统开机提示sgtool.exe损坏
- 如何能够快速提升自己的工作能力?
- 【C语言】字符串、字符数组
- 关于IT公司技术委员会职责
- c++二维数组定义与初始化
- RedisTemplate multiGet
- php 标准规范,PHP PSR标准规范
- 计算机网络—数据链路层
- DXXcodeConsoleUnicodePlugin debug栏打印时自动把/ueo6转化成汉字
- 游戏系列之无限弹窗游戏
- Android手机文件远程管理
- php 微信红包支付开发文档,【微信支付】现金红包开发者文档
- 怎样快速进入深度睡眠?