嵌套运算符

嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置:将其放在内部或成为相邻的元素。

子: >

可以使用 > 运算符指定嵌套元素在另一个元素内部:

div>ul>li

生成的结果为:

<div>
<ul>
<li></li>
</ul>
</div>

兄弟: +

使用 + 运算符将相邻的其它元素处理为同级:

div+p+bq

生成的结果为:

<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>

可以连续使用多个 ^ 运算符,每次提高一个级别:

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>

分组: ()

括号用于在复杂的 Emmet 缩写中处理一组子树:

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>

如果想与浏览器 DOM 协同工作,可能想要对文档片段分组:每个组包含一个子树,所有的后续元素都插入到与组中第一个元素相同的级别中。

能够在组中嵌套组并且使用 * 运算符绑定它们:

(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>

使用分组,可以使用单个缩写逐个写出整页的标签,不过尽量不要这么做。

属性运算符

属性运算符用于编辑所生成的元素的属性,在 HTML 和 XML 中可以快速地为生成元素添加 class 属性。

ID 和 CLASS

在 CSS 中,可以使用 elem#id 和 elem.class 注解来达到为元素指定 id 或 class 属性的目的。在 Emmet 中,可以使用几乎相同的语法来为指定的元素添加这些属性:element:

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>

自定义属性

可以使用 [attr] 注解(就像在 CSS 中一样)来为元素添加自定义属性:

td[title="Hello world!" colspan=3]

将生成:

<td title="Hello world!" colspan="3"></td>
  • 能够在方括号中放置许多属性,
  • 可以不为属性指定值: td[colspan title] 将生成 <td colspan="" title=""> ,如果你的编辑器支持,可以使用 tab 来跳到每个空属性中填写。
  • 属性可以用单引号或双引号作为定界符。
  • 如果属性不包含空格,不需要用定界符括住它:td[title=hello colspan=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>

改变编号的基数和方向

使用 @ ,可以改变数字的走向(升序或降序)和基数(例如起始值)。

在 $ 后添加 @- 来改变数字走向:

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} 是被当成独立元素解析的(类似于 divp ),但当其跟在其它元素后面时则有所不同。例如, 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>

在第二示例中, <b> 元素放在了 <a> 元素的里面。差别如下:当 {text} 写在元素的后面,它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子:

p>{Click }+a{here}+{ to continue}

生成:

<p>Click <a href="">here</a> to continue</p>

在这个例子里, 我们用 > 运算符明确的将 Click here to continue 下移一级,放在 <p> 元素内,但对于 a 元素的内容就不需要了,因为 <a> 仅有 here 这一部分内容,它不改变父元素的上下文。

作为比较,下面是不带有 > 运算符的相同缩写:

p{Click }+a{here}+{ to continue}

生成:

<p>Click </p>
<a href="">here</a> to continue

标签属性

link[rel=prefetch title="Hello world"]

生成:

<link rel="prefetch" href="" title="Hello world">

缩写格式的注意事项

当熟悉了 Emmet 的缩写语法后,可能会想要使用一些格式来生成更可读的缩写。例如,在元素和运算符之间使用空格间隔:

(header > ul.nav > li*5) + footer

但是这种写法是错误的,因为空格是 Emmet 停止缩写解析的标识符

请多用户误以为每个缩写都应写在新行上,但是他们错了:可以在文本的任意位置键入和扩展缩写。

(此处原文使用脚本做了一段示例,限于博客的体例,我没有办法将原文的示例脚本放在本文中,因此用截屏工具录下了一段屏幕,放在此处,有兴趣的朋友,可以去原文地址去看原文中的示例)

这也就是为什么当想要停止解析和扩展时,Emmet 需要一些标志的原因。如果你仍然认为复杂的缩写需要一些格式使其更易读:

  • 缩写不是模板语言,它们不需要”易读“,它们必须”可快速扩展和移动“。
  • 不需要写复杂的缩写。不要认为在 web 编程中”键入“是最慢的运算。想快速找出构建单个的复杂缩写比构造和键入一些较短较简单的缩写更慢。

HTML中Zen Coding的更多相关文章

  1. CSS中Zen Coding

    值别名 有几个常用的别名: p → % e → em x → ex 可以用这些别名来代替完整的单位: w100p → width: 100% m10p30e5x → margin: 10% 30em ...

  2. vim 中 也可以 直接安装 emmet 直接使用zen coding 生成 l指定个数的 lorem ipsum文字.

    超链接的写法: 当作为链接的文字, 比较长时, 整个作为链接 就显得不是 很适合. 可以取其中的某一个单词 作为 超链接的 关键字:如: click here to continue emmet中如何 ...

  3. Visual Studio 2012中使用Zen Coding,写html的神器!

    点工具 -扩展和更新的联机库中 找到以下俩插件 安装后重新启动 新建一个html文件.将下行代码拷贝到页面里. div>(header>div)+(section>ul>li. ...

  4. 如何在Dreamweaver中使用zen coding

    在我发表上一篇<Zen Coding: 一种快速编写HTML/CSS代码的方法>之后,有网友表示不知道怎么在Dreamweaver上使用zen coding插件.OK,今天我就写一篇详细的 ...

  5. 再说vundle: 完全vim字符编程的四个必须插件 - zen coding 和emmet插件的使用

    一个常识: 基本上vim插件的配置文集都是放在对应插件目录 的/autoload/ plugin_name.vim 文件中的 有四个必要/必须的插件,实现vim完全的字符界面的编程: NERDTree ...

  6. sublime 插件zen coding

    sublime的插件Zen Coding是一个编写html的神器,现在已经更名为Emmet了. 在sublime中的package需要搜索的是Emmet 相关网站: 官网 Zen Coding: 一种 ...

  7. 使用Zen coding高效编写html代码

    zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...

  8. Web开发人员必备工具-Emmet (Zen Coding)

    如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...

  9. 使用Emmet(前身Zen Coding)加速Web前端开发

    Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...

随机推荐

  1. C++中的class (1)

    1.public:public表明该数据成员.成员函数是对全部用户开放的,全部用户都能够直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,不论什么人都不能 ...

  2. ASP.NET WebForm Form表单如何实现MVC那种“自动装配”效果呢?

    我们知道ASP.NET MVC有个强大的地方就是Form表单提交到action的时候,可以直接将Form的参数直接装配到action的参数实体对象中 比如 action方法 Register(User ...

  3. 使用Dockerfile文件构建基于centOS系统的nodejs镜像

    实际示例: [root@node01 node]# ls dev-web dev-web.tar.gz Dockerfile node-v8.14.0-linux-x64.tar.gz package ...

  4. 怎样看待IT界业务,技术,管理的各自比重

    怎样看待IT界业务,技术,管理的各自比重   技术是根本,业务是个人能力的体现,管理一般随意,追求简单,眼光向IBM等有优秀管理经验的大公司看齐   重点从个人的喜好.性格方面来考虑分配比重,可以加上 ...

  5. sqlyog v12.09 注册码

    1.小巧的自动完成.2.HTTP/HTTPS和SSH通道.3.向导化的汇入工具包.4.结构化的同步,可以设定任务计划,按照特定的时间进行同步作业,并对同步数据进行校验.5.工作管理器.计划备份.以及通 ...

  6. 两段检验系统生成的identityHashCode是否重复的代码

    前言:承接上一篇hashCode和identityHashCode 的关系,下面的两段简单的程序主要是检验一下系统生成的identityHashCode是否存在重复的情况. 1:可以自由控制生成对象的 ...

  7. 面试求职中你需要了解的Java面向对象

    从毕业到现在,笔试过好多场 也面了好多场, 一直想写一些东西给找工作的朋友,这篇文章结合个人经历讲解面试中的面向对象.里边有些实例个人以面试题的形式写出来,从程序角度去b帮助大家了解学习,最后希望大家 ...

  8. 【Algorithm】自顶向下的归并排序

    一. 算法描述 自顶向下的归并排序:采用分治法进行自顶向下的程序设计方式,分治法的核心思想就是分解.求解.合并. 先将长度为N的无序序列分割平均分割为两段 然后分别对前半段进行归并排序.后半段进行归并 ...

  9. shell value too great for base

    今天同步文件的时候发现了这个问题: 原因是: tar_file_month=`date +%m` rsync -auzq --exclude=))"]" 当月是8月,tar_fil ...

  10. 更改Eclipse下Tomcat的部署目录 ,防止上传的文件是到eclipse的克隆的tomcat上的webapp,而不是tomcat本身的webapp

    使用eclipse开发是因为机器不够用myeclipse,eclipse也比myeclipse清爽很多,启动速度也快.这里的搭建开发环境使用: Jdk1.6+Tomcat6+Eclipse JEE, ...