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--烟火效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta nam ...

  2. js实现滑动解锁功能(PC+Moblie)

    http://dummyimage.com/600x400/ http://placehold.it/140x70 实现效果: css样式代码略. html代码: 页面上导入了jquery.mobil ...

  3. CentOS 6.5 IP 设置

    DEVICE=eth0TYPE=EthernetUUID=7d6d54e0-054d-472b-8cc1-080f16ef36c1ONBOOT=yesNM_CONTROLLED=yesBOOTPROT ...

  4. Mysql 目录恢复注意事项

    SET @mycnt=0; SELECT @mycnt := @mycnt +1 as mycnt, a.*, b.* FROM a, b; 表中第一列即为mycnt,从1开始计数. set @num ...

  5. prototype/constructor/__proto__之prototype

    1任何对象都有__proto__属性 属性值Object2并不是所有对象都有prototype属性.只有方法对象(构造函数)以及基本数据类型还有Array,有prototype属性;并且所有方法(对象 ...

  6. laravel5.2学习资源

    研究laravel的过程中基本把国内关于laravel的资料给翻了一遍了: 整理了一些中文的资源如下: 一:教程系列 1:https://laravist.com/series/laravel-5-b ...

  7. KVO/KVC总结

    KVO/KVC总结       下面是根据网上文章的总结,方便查看. 在网上看别人的文章,了解KVC.KVO,有个kvo-kvc的例子,就是改变数组的内容(插入和删除),同步改变tableview中的 ...

  8. [BZOJ 1874] [BeiJing2009 WinterCamp] 取石子游戏 【博弈论 | SG函数】

    题目链接:BZOJ - 1874 题目分析 这个是一种组合游戏,是许多单个SG游戏的和. 就是指,总的游戏由许多单个SG游戏组合而成,每个SG游戏(也就是每一堆石子)之间互不干扰,每次从所有的单个游戏 ...

  9. Knight Tournament

    Codeforces Round #207 (Div. 1) A:http://codeforces.com/problemset/problem/356/A 题意:给你n匹马,然后有m场比赛.每场比 ...

  10. Watch OS2.0开发概述

    (注:尊重劳动成果,转载请注明出处 http://www.cnblogs.com/xiaochunle/p/4620230.html ) Watch OS 2.0时代 北京时间2015年6月9日,WW ...