For example we want to generate the code like this:

    <a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a>
<div id="tab1" class="tab">
<h1>Tab 1 Content</h1>
</div>
<div id="tab2" class="tab">
<h1>Tab 2 Content</h1>
</div>
<div id="tab3" class="tab">
<h1>Tab 3 Content</h1>
</div>

So it is three div, has a id called tab1,2,3 and a class tab. inside the div, has h1 with the content.

We can do:

a[href=#tab$]{Tab $}*3

(#tab$.tab>h1{Tab $ Content})*3

[]: attr

#tab: id--> tab

#tab$: id--> tab with increase interger

.tab: class tab

>: child node

{}: content

[HTML5] Emmet的更多相关文章

  1. Html5 学习笔记 Sublime text3 和 Emmet 插件

    下载地址 :https://pan.baidu.com/s/1MpkaYdAcZd6RmPpmvOdK7w Emmet 压缩包 并且解压: 安装 Sublime Text 3, 选择首选项 浏览插件 ...

  2. emmet的使用

    http://blog.wpjam.com/m/emmet-grammar/ 使用 Emmet 生成 HTML 的语法详解 开源程序 浏览:21537 2013年05月09日 文章目录[隐藏] 生成 ...

  3. Emmet使用

    emmet官方文档 [翻译]Emmet (ZenCoding) 缩写语法 <!-- ul>li.item$*5 --> <ul> <li class="i ...

  4. 第 30 章 使用 Emmet 插件

    学习要点: 1.安装方式 2.自定义!生成 3.快速生成   主讲教师:李炎恢 本章主要探讨了解一下 Sublime Text3 的一个 HTML5 代码提示插件:Emmet,这个插件比自带原生的要强 ...

  5. [转载]Emmet使用

    转载地址:http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语 ...

  6. editplus中使用emmet?

    要用emmet生成html类型, 格式是: html:???, 意思是 都是html大类型, 小类型用冒号. 如:html:5, 或者全部都是! 则生成html5的类型文档. emmet是zen co ...

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

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

  8. Emmet:HTML/CSS代码快速编写神器

    本文来源:http://www.iteye.com/news/27580    ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...

  9. Emmet基本使用方法

      Emmet基本使用方法 分类: 其他文章2013-10-29 14:53 4048人阅读 评论(0) 收藏 举报 转载来自:http://www.iteye.com/news/27580 Emme ...

随机推荐

  1. javascript——基本包装类型

    <script type="text/javascript"> //1.Boolean 类型 //2.Number 类型 //3.String 类型 //Boolean ...

  2. 2 - Annotations标注

    下面是TestNG标注和参数的一个快速预览 @BeforeSuite 被标注的方法会在这个套件的所有测试执行之前执行  @AfterSuite 被标注的方法会在这个套件的所有测试执行之后执行 @Bef ...

  3. Bootstrap_Javascript_按钮插件

    一 . 加载状态按钮 HTML: <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等...&qu ...

  4. POJ1007-DNA Sorting-ACM

    DNA Sorting Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 83442   Accepted: 33584 Des ...

  5. php生成缩略图

    <?php /** * 生成缩略图函数(支持图片格式:gif.jpeg.png和bmp) * @author ruxing.li * @param string $src 源图片路径 * @pa ...

  6. Linux on ASUS N550JK4700

    实际上,ASUS N550JK对Ubuntu 14.04的兼容性是相当好的,包括无线网卡.蓝牙.键盘背光的调节.触摸板的开关.音量的键盘调节都是安装后无需配置直接可以使用的,这是出乎意料的,因为这些功 ...

  7. EasyUI篇のico

    所有图标位置: /themes/icons css引用位置: /themes/icon.css 可自行添加16*16的小图片放在icons中,icon.css代码添加即可 例如: .icon-logo ...

  8. Numpy基础笔记

    Numpy简介 Numpy(Numerical Python的简称)是高性能科学计算和数据分析的基础包.其部分功能如下: ①ndarray,一个具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组 ...

  9. 只要是从事IT,会些CSS,XHTML总归是有好处的

    上次是十多年前看了的,这次又系统看了下.. 这系统的HEAD FIRST,我很喜欢...收藏过三四本啦...

  10. Maven实战五

    转载:http://www.iteye.com/topic/1123232 我们项目中用到的jar包可以通过依赖的方式引入,构建项目的时候从Maven仓库下载即可. 1. 依赖配置    依赖可以声明 ...