Emmet(ZenCoding)语法(一)
来源:互联网 发布:美国人口普查历年数据 编辑:程序博客网 时间:2024/05/18 19:47
Emmet(ZenCoding)——web开发人员的基本工具
缩写
缩写是Emmet工具包的核心,这些特殊表达式在运行时解析,并转换为结构化代码块。
缩写语法
嵌套操作:用于在生成的树中放置缩写元素
1. 儿童:>
使用>该操作符将元素嵌套在彼此中
div>ul>li
生成结果:
<div> <ul> <li></li> </ul></div>
2.兄弟:+
使用+操作符将元素靠近对方放在同一层面上
div+p+blockquote
生成结果:
3.爬上:^
<div></div><p></p><blockquote></blockquote>
使用^操作符,讲元素成为相邻元素的父元素的兄弟元素
div+div>p>span+em输出:
<div></div><div> <p><span></span><em></em></p></div>
使用^操作符后,
div+div>p>span+em^bq输出:
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
4.乘法:*
使用*操作符可以定义要输出的元素的次数
ul>li*5输出:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
5.分组:()
使用()操作符用于将复数缩写中的子树进行分组
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>
每个组包含缩写子树,并且所有以下元素都插入与组的第一个元素相同的级别。
3.编号:$
(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>
属性运算符:用于修改输出元素的属性
1.ID和Class
在Emmet中可以使用elem#id和elem.class的语法将属性添加到指定元素中
div#header+div.page+div#footer.class1.class2.class3输出:
<div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div>
2.自定义属性
使用[attr]符号在元素中添加自定义属性
td[title="Hello world!" colspan=3]输出:
<td title="Hello world!" colspan="3"></td>
- 方括号中没有属性数量限制
- 如果你使用的编辑器允许,可以直接写空属性。例如td[colspan title],输出<td colspan="" title="">
- 使用单双引号引用属性值
- 如果引用值没有空格,可以不使用引号。例如td[title=hello colspan=3]
3.编号:$
使用$操作符用于编号,重复相应的元素
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>
可以使用多个
使用
$
数字来填零号码: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>
改变编号基数和方向
使用
@
修饰符,可以更改编号方向(升序或降序)和基数(例如起始值)改变方向,在$操作符后面添加@-
改变计数器基数值,在$操作符后面添加@N
将以上修饰符一起使用
注意:{text}写在一个单独的元素之后,与写在一个元素之后有特殊的含义。例如:a{click}与a>{click},输出一样;但a{click}+b{here}与a>{click}+b{here}不一样。
复杂例子
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输出:
<ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li></ul>
文本:{}
使用{}将内容添加到元素中
a{Click me}输出:
<a href="">Click me</a>
注意:{text}写在一个单独的元素之后,与写在一个元素之后有特殊的含义。例如:a{click}与a>{click},输出一样;但a{click}+b{here}与a>{click}+b{here}不一样。
<!-- a{click}+b{here} --><a href="">click</a><b>here</b><!-- a>{click}+b{here} --><a href="">click<b>here</b></a>
p>{Click }+a{here}+{ to continue}输出:
<p>Click <a href="">here</a> to continue</p>
p{Click }+a{here}+{ to continue}输出:
<p>Click </p><a href="">here</a> to continue
注意缩写格式规范
在操作符与元素之间随意写空格,
空格在Emmet中代表缩写停止。注意规范
(header > ul.nav > li*5) + footer不会被编译。
空格在Emmet中代表缩写停止。注意规范
1 0
- Emmet(ZenCoding) 语法
- Emmet(ZenCoding)语法(一)
- Emmet(zencoding)插件语法及常用简写
- 【翻译】Emmet (ZenCoding) 缩写语法
- 【翻译】Emmet (ZenCoding) 缩写语法
- 让 Dreamweaver 支持 Emmet(原ZenCoding)
- 让 Dreamweaver 支持 Emmet(原ZenCoding)
- Eclipse在线安装Emmet(原ZenCoding)
- sublime text 3 插件:Emmet(原ZenCoding)
- Sublime2插件emmet(原名zencoding)使用方法,强大的html/css编辑功能
- Emmet语法(一)
- sublimetext2-插件emmet&zencoding…
- sublimetext2-emmet ; zencoding进阶…
- ZenCoding Package Install--查找Emmet
- 如何在Dreamweaver中使用emmet(ZenCoding)
- sublime text3插件zencoding(Emmet)的使用方法
- 前端开发神器emmet(zen coding) 语法
- Emmet的HTML语法(敲代码的快捷方式)
- POJ 1679:The Unique MST(次小生成树)
- 剑指offer-面试题 20:顺时针打印矩阵
- C++作业5
- Java将远程服务器上的文件经过本地服务器中转后输出至前端
- poj 1236 Network of Schools
- Emmet(ZenCoding)语法(一)
- git的基础使用
- es6中"类"--class的方式创建对象和es5中正常用法比较
- [硬件]树莓派2代无显示器安装系统(固定IP+VNC开机自启动)
- 纯原生js 贪吃蛇(锻炼你逻辑思维)
- 问号
- 微信公众号开发---群发消息
- 如何编写linux下nand flash驱动
- iOS 弹性动画之弹出分享菜单的实现