Emmet插件比较实用常用的写法
看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊
杂话
我前面有一篇【今天发现新大陆:haml和Emmet 】,其实一开始的想法是写给自己看的。
有人去阅读我的博客和评论,虽然不算多,但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)
嗯,跑偏了。总之,以后写东西不管是给自己看也好,给别人看都好。秉持着分享的精神一定认真好好的写(~Q~)
关于Emmet
Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用)。再官方一些的官方语言的叽叽喳喳我就不详写了,直接百度可以找到。
Emmet支持的编辑器:
- Sublime Text 2
- TextMate 1.x
- Eclipse/Aptana
- Coda 1.6 and 2.x
- Espresso
- Chocolat (通过“Install Mixin”对话框添加)
- Komodo Edit/IDE (通过Tools → Add-ons菜单添加)
- Notepad++
- PSPad
- <textarea>
- CodeMirror2/3
- Brackets
第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的,所以可能并不支持所有Emmet的功能和特性。
- SynWrite
- WebStorm
- PhpStorm
- Vim
- HTML-Kit
- HippoEDIT
- CodeLobster PHP Edition
- TinyMCE
Emmet安装方法(Sublime text 3安装emmet插件的方法:http://blog.csdn.net/mengke1124/article/details/41696779)
因为我用的是Sublime text 3,其他编辑器安装的方法可能要根据自己的需要在网上搜刮了
Emmet插件实用常用方法
(http://www.w3cplus.com/tools/emmet-cheat-sheet.html)
这篇文档写的很清晰,也有安装插件的方法。但是介绍的方法太多,感觉有点冗长,我汇总了一些我个人觉得比较实用常用的方法。
略写版:
div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
h.item${hhh $}*5({}括号内为显示文本)
ul>li.item$$$*5($为自增,三个$为三位数字)
ul>li.item$@3*5(@从3开始自增+1)
ul>li.item$@-*5(@-,自减)
ul>li.item$@-3*5(@-3,自减最小数字为3)
form#search.wide(#为id,.为类)
p[title='hello word'](自定义属性)
(隐式标签)
.class
em>.class
ul>.class
table>.row>.col
!(页面html开始代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img
详写版:
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>
ul>li*5(>为后代缩写,*表示有几个)
<ul><li></li><li></li><li></li><li></li><li></li> </ul>
div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
<div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer> </div>
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
<div><dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl> </div> <footer><p></p> </footer>
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
<ul><li1 title="item1">hhh 1</li1><li2 title="item2">hhh 2</li2><li3 title="item3">hhh 3</li3><li4 title="item4">hhh 4</li4><li5 title="item5">hhh 5</li5> </ul>
h.item${hhh $}*5({}括号内为显示文本)
<h class="item1">hhh 1</h> <h class="item2">hhh 2</h> <h class="item3">hhh 3</h> <h class="item4">hhh 4</h> <h class="item5">hhh 5</h>
ul>li.item$$$*5($为自增,三个$为三位数字)
<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li> </ul>
ul>li.item$@3*5(@从3开始自增+1)
<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$@-*5(@-,自减)
<ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li> </ul>
ul>li.item$@-3*5(@-3,自减最小数字为3)
<ul><li class="item7"></li><li class="item6"></li><li class="item5"></li><li class="item4"></li><li class="item3"></li> </ul>
form#search.wide(#为id,.为类)
<form action="" id="search" class="wide"></form>
p[title='hello word'](自定义属性)
<p title="hello word"></p>
(隐式标签)
.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul><li class="class"></li> </ul>
table>.row>.col
<table><tr class="row"><td class="col"></td></tr> </table>
!(页面html开始代码缩写)
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> </html>
(缩写)
a
<a href=""></a>
a:link
<a href="http://"></a>
hr
<hr>
link
<link rel="stylesheet" href="">
link.css
<link rel="stylesheet" href="" class="css">
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
script:src
<script src=""></script>
img
<img src="" alt="">
官方api:http://docs.emmet.io/cheat-sheet/
api表:http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg
(●-●) 真心讨厌弄文本格式,感觉好浪费时间……
转载于:https://www.cnblogs.com/web1/p/5825920.html
Emmet插件比较实用常用的写法相关推荐
- sublime安装emmet插件和一些常用插件和常用快捷键
Preferences >Package Settings > Package Control > Settings - User 添加代码 "debug": t ...
- Emmet插件的常用语法
本人使用的代码编辑工具是SublimeText,Emmet是一个代码的缩写插件,使用代码缩写快速完成代码编写,前提条件需要安装emmet插件,如下图,打开SublimeText 使用快捷键 Ctrl ...
- Emmet插件使用方法总结
Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...
- sublime Emmet插件使用方法总结
Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发, ...
- Emmet插件:HTML/CSS代码快速编写神器
Emmet插件的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示 ...
- [html] 编写html时,你有没有用过Emmet插件呢?说说它的优点及规则有哪些?
[html] 编写html时,你有没有用过Emmet插件呢?说说它的优点及规则有哪些? 用过,vscode编辑器自带支持Emmet语法: 它可以帮助快速编写HTML代码,减少复制粘贴的操作: 常见规则 ...
- CAD插件-幕墙设计常用插件sama整理
CAD插件-幕墙设计常用插件sama整理 SWF画弧形焊缝.LSP 标注多段线-(边长A1.对角线A2.角度A3)LSP 尺寸整理(修正)LSP 对齐afLSP 多段线顶点布块-(xxp)LSP 计算 ...
- html标签和style的使用及Emmet插件0719
标签和style的使用及Emmet插件 标签案例 列表标签 1有序列表ol 2无序列表ul 3自定义列表 style属性 Emmet插件 标签案例 六个标签 div 块 span 行内元素 ...
- 提高新手写代码效率的Emmet插件怎么使用
平常写代码的时候通常会要写很多结构重复甚至相同的html,如果每一个重复的代码都去c+v,就会非常浪费时间. 所有就有了今天要推荐给各位小白新手的插件:Emmet,现在大部分编辑器都内置了emmet插 ...
最新文章
- 树莓派 4B安装ubuntu18.04与melodic版ROS
- ZOJ1027 Travelling Fee(DP+SPFA)
- .NET WebSocket 核心原理初体验
- qt求一个区间的随机数
- 判断浏览器是否为IE和版本
- vue服务端转html,普通vue-cli初始项目转为服务端渲染SSR
- Java属性文件– java.util.Properties
- Linux终端下输出二维码
- java调用python脚本文件_Java实现调用jython执行python文件的方法
- 如何应对互联网和物联网化带来的工业安全新风险?
- kb2919355无法安装
- 【JSP教程】JSP期末考试复习要点大纲
- coreldraw x5 选择工具快捷键_coreldraw x5快捷键大全 coreldraw快捷键分享
- cam350 不能打开光绘文件_怎么使用CAM350打开gerber文件
- CSS3 制作 3D 水晶糖果按钮
- 01表盘控件-08时钟仪表盘-gaugeclock
- 每天15min-HTML5(10)-表单(上)
- 在浏览器查看base64格式的图片
- 【Linux修炼】6.gcc/g++及Makefile【工具篇】
- 【抽奖】RT-Thread Logo升级 | 新起点,“青”装上阵
热门文章
- Socket通信之TCP拆包和封包
- python筛选csv数据_pandas数据筛选和csv操作的实现方法
- stb_image 读写
- python golang 小工具_使用Go语言简单模拟Python的生成器
- jar导出与制作成exe在没jdk电脑下运行(图文教程+工具)
- 【java】java 线程组 ThreadGroup
- 【算法】剑指 Offer 12. 矩阵中的路径
- 【ElasticSearch】Es 源码之 RestController 源码解读
- 【kafka】kafka 如何开启 kafka.consumer的监控指标项
- 95-136-041-源码-Operator-OneInputStreamOperator