———Emmet(Zen Coding)语法规则简介———

【Zen Coding可谓快速开发HTML和CSS的利器，主要采用仿css类选择器方式编写代码，以下是该利器的基本语法规则和代码示例】

基础符号简介：

1."#"表示id,"."表示类,"+"表示并列
2.">"指子内容
3."()"指同级范围
4."[]"表示属性
5.#和.的简写：div.ok等于.ok;div#no等于#no
6."*"表示标签克隆
7."{}"表示标签内容
8."$"表示连续数

代码示例：

【Zencoding代码】

html>head>(title+style+script[src=abc$.js]*3+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+bottom)+.main>.acticle*3>h1{文章标题$}+p).footer{版权信息})
 
【展开后页面代码】
 <html>

 <head>

     <title></title>

     <style></style>

     <script src="abc1.js"></script>

     <script src="abc2.js"></script>

     <script src="abc3.js"></script>

     <body>

         <div class="footer">版权信息

             <div class="content">

                 <div class="nav">

                     <ul>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                     </ul>

                 </div>

             </div>

             <div class="sidebar">

                 <div class="top"></div>

                 <div class="middle"></div>

                 <bottom></bottom>

             </div>

             <div class="main">

                 <div class="acticle">

                     <h1>文章标题1</h1>

                     <p></p>

                 </div>

                 <div class="acticle">

                     <h1>文章标题2</h1>

                     <p></p>

                 </div>

                 <div class="acticle">

                     <h1>文章标题3</h1>

                     <p></p>

                 </div>

             </div>

         </div>

     </body>

 </head>

 </html>

Emmet(Zen Coding)语法规则简介的更多相关文章

  1. Java基础-正则表达式(Regular Expression)语法规则简介

    Java基础-正则表达式(Regular Expression)语法规则简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.正则表达式的概念 正则表达式(Regular Exp ...

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

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

  3. sublime + emmet(Zen Coding)

    今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵 编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...

  4. Emmet (Zen Coding) HTML基本语法

    1. 嵌套操作---------- 子操作: > div>ul>li   并列:+ div+ul>li   上级:^ ul>li^div   ul>li>a^ ...

  5. Emmet (Zen Coding) 官方文档中HTML语法的总结

    1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul> ...

  6. 【翻译】Emmet(Zen Coding)官方文档 之六 自定义 Emmet

    [说明]本系列博文是依据 Emmet 官方文档翻译的,原文地址为:http://docs.emmet.io/,部分内容已经在博主之前的博文中节选过,为方便已经收藏过之前博文的朋友,没有删除这些博文,仅 ...

  7. 前端必备工具-Emmet (Zen Coding)

    Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...

  8. emmet(Zen coding)帮助文档

    葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/ ...

  9. zend studio 安装emmet(zen coding)

    help->Install New Software 在work with后面点击Add,弹出的对话框中填写信息: Name:随意 Location:http://emmet.io/eclips ...

随机推荐

  1. Tensorflow人工智能入门（一）

    前言: 作为一个程序员,已经离开开发岗好多年,最近突然迷茫了,不知道自己何去何从.互联网技术发展的速度已快得难以想象,许久不码代码的手也越来越僵直,需求沟通中的套话和空话却越发的熟练,这和当年入行时的 ...

  2. 清北学堂模拟赛d2t1 一道图论神题(god)

    题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,只有点权. LYK想把这个图删干净,它的方法是这样的.每次选择一个点,将它删掉,但删这个点是需要代价的.假 ...

  3. LightOJ - 1148 - Mad Counting

    先上题目: 1148 - Mad Counting   PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 3 ...

  4. N天学习一个Linux命令之dmesg

    用途 显示系统自检信息和设备信息 用法 dmesg [-c] [-r] [-n level] [-s bufsize] 常用选项 选项 含义 说明 -c 输出ring buffer内容并且清空ring ...

  5. [转]SQLSERVER一些公用DLL的作用解释

    转自:Leo_wlCnBlogs SQLSERVER一些公用DLL的作用解释 如果你的SQLSERVER安装在C盘的话,下面的路径就是相应SQLSERVER版本的公用DLL的存放路径 SQL2005 ...

  6. open cursor too much error

    今天遇到一个错误ORA-01000: maximum open cursors exceeded. 客户想增加 DB 的open_cursor这个参数. 但是我看了下,她的程序要打开几千个cursor ...

  7. LA 4850 贪心

    感谢SF巨和WH巨的指导.. 首先,YY得到一个结论,罚值最大的最小值必定是按照截止时间排序得到的.然后,选一个任务插到其他位置,必定产生罚值最大值更大的情况,但有可能产生两个罚值最大情况和更小的情况 ...

  8. js面向对象初步探究（上） js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  9. 在Cocos2d-X中玩转精灵

    创建一个Cocos2d-Xproject,project的文件夹例如以下图所看到的: 在Resourcees目录中加入一张png格式的图片 在HelloWorldScene.cpp文件里的bool H ...

  10. web 前端学习笔记

    <!DOCTYPE HTML> <head> <style type="text/css"> body {  background: #ff00 ...