Zen Coding – 超快地写网页代码(注:已更名为Emmet)
这篇博客能帮助快速上手这款插件,极大地提高开发效率废话不多说直接上例子
zen codeing的缩写规则 E
元素名 (div, p); 实例:(输入完<按快捷键ctrl+E>就会显示)
输入:div
显示:<div></div> E#id
带id的元素 (div#content, p#intro, span#error);
输入:div#wrap
显示:<div id="wrap"></div> E.class
带class的元素 (div.header, p.error.critial). id 和 class 可以连写,如: div#content.column.width;
输入:div#content.column.width
显示:<div id="content" class="column width"></div> E>N
子元素 (div>p, div#footer>p>span);
输入:ul>li>a>img
显示:
<ul>
<li><a href=""><img src="" alt="" /></a></li>
</ul> E+N
兄弟元素 (h1+p, div#header+div#content+div#footer);
输入:div#wrap>div.header+div.main+div.footer
显示:
<div id="wrap">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div> E*N
多项元素 (ul#nav>li*5>a);
输入:ul>li*4>a>img
显示:
<ul>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
</ul> E$*N
带序号的元素 (ul#nav>li.item-$*5);
输入:ul>li.item-$*4>a>img
显示:
<ul>
<li class="item-1"><a href=""><img src="" alt="" /></a></li>
<li class="item-2"><a href=""><img src="" alt="" /></a></li>
<li class="item-3"><a href=""><img src="" alt="" /></a></li>
<li class="item-4"><a href=""><img src="" alt="" /></a></li>
</ul> {}标签内容
输入:div#wrap>div.header{我是头部}+div.main{我是主体}+div.footer{我是尾部}
显示:
<div id="wrap">
<div class="header">我是头部</div>
<div class="main">我是主体</div>
<div class="footer">我是尾部</div>
</div> [] 属性
输入:ul>li>a[href="#"][title="logo"]>img[src="imgs/logo.jpg"][alt="logo"]
显示如下:
<ul>
<li><a href="#" title="logo"><img src="imgs/logo.jpg" alt="logo" /> </a></li>
</ul> ()同级范围
输入:div>(div.header>ul>li+p)+(div.main>ul>li+p)+(div.footer>ul>li+p)
显示:
<div>
<div class="header">
<ul>
<li></li>
<p></p>
</ul>
</div>
<div class="main">
<ul>
<li></li>
<p></p>
</ul>
</div>
<div class="footer">
<ul>
<li></li>
<p></p>
</ul>
</div>
</div>
Zen Coding – 超快地写网页代码(注:已更名为Emmet)的更多相关文章
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- Sublime Text 2+Zen Coding
自己长期使用editplus做代码编辑,使用过DW,还是习惯前者的使用环境.好友推荐,试试新的编码工具——Sublime Text 2.在代码制作过程中,最主要的是1)快速复制的模式化工作 2)零碎 ...
- zen coding一个牛的不行的html和css开发工具
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- 我也来谈谈使用Zen Coding快速开发html和css原理
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- 前端代码新写法——Zen Coding
是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...
- 使用Zen coding高效编写html代码
zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...
- Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...
- 结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- Visual Studio 2012中使用Zen Coding,写html的神器!
点工具 -扩展和更新的联机库中 找到以下俩插件 安装后重新启动 新建一个html文件.将下行代码拷贝到页面里. div>(header>div)+(section>ul>li. ...
随机推荐
- 【leetcode】1031. Maximum Sum of Two Non-Overlapping Subarrays
题目如下: Given an array A of non-negative integers, return the maximum sum of elements in two non-overl ...
- /usr,/usr/local/ 还是 /opt 目录区别
Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /us(Unix Software Resource)r:系统级的目录,可以理解为C:/Windows/, /usr/lib ...
- URL跳转漏洞
URL跳转原理: 由于越来越多的需要和其他第三方应用交互,以及在自身应用内部根据不同的逻辑将用户引向到不同的页面,譬如一个典型的登录接口就经常需要在认证成功之后将用户引导到登录之前的页面,整个过程中如 ...
- POJ 1797 Heavy Transprotation ( 最短路变形 || 最小生成树 )
题意 : 找出 1 到 N 点的所有路径当中拥有最大承载量的一条路,输出这个最大承载量!而每一条路的最大承载量由拥有最大承载量的那一条边决定 分析 : 与 POJ 2253 相似且求的东西正好相反,属 ...
- UE4开发PSVR游戏流程
先与sony的开发者关系部建立联系,展示工作室/公司制作PSVR游戏的构想和计划以及制作实力,如果对方觉得你提供的信息具有说服力,则会提供开发者资格,和你签署NDA,给你租借开发机和测试机(免费). ...
- 《数据结构与算法(C语言版)》严蔚敏 | 第五章 建立二叉树,并完成三/四种遍历算法
PS:所有的代码示例使用的都是这个图 2019-10-29 利用p126的算法5.3建立二叉树,并完成三种遍历算法 中序 后序 先序 #include<iostream> #include ...
- 笨办法学Python(learn python the hard way)--练习程序31-35
下面是练习31-练习35,基于python3 #ex31.py 1 print("You enter a dark room witn two doors. Do you go throug ...
- POJ 2653 Pick-up sticks(几何)
Pick-up sticks Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 13377 Accepted: 5039 D ...
- content is not supported outside 'script" or asp content' region
https://stackoverflow.com/questions/48915080/asp-net-content-is-not-supported-outside-the-script-or- ...
- python读写excle
我们可以通过python的一些模块进行excle中用例的读取,或者导出数据到excle 目录 1.安装模块 2.读excle 3.写excle 1.安装模块 python中有第三方模块可以进行excl ...