———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. iptables简单了解

    简介 Iptables是unix/linux自带的一款优秀且开源的基于包过滤的防火墙工具. 怎么用 可以用来做主机防火墙. 可以做局域网共享上网. 可以做ip及端口映射. Iptables工作流程 i ...

  2. elisp 编程 if 特殊表

    elisp中的 if 特殊表与其他语言中的 if 语句逻辑上并无二致,关键在于如何使用. (if (> 4 3) (message "4 is greater than 3" ...

  3. ES6-babel转码

    关于BaBel转码 有人问我babel的功能以及执行的过程和配置,在网上查阅了大量的资料~收集到这些~有错请指出,及时修改. ------------------------------------- ...

  4. 【codeforces 514C】Watto and Mechanism(字符串hash)

    [题目链接]:http://codeforces.com/contest/514/problem/C [题意] 给你n个字符串; 然后给你m个询问;->m个字符串 对于每一个询问字符串 你需要在 ...

  5. ZooKeeper学习总结（2）——ZooKeeper开源Java客户端ZkClient使用

    zkclient是zookeeper的Java客户端.它让Zookeeper API 使用起来更简单:它非常方便订阅各种事件并自动重新绑定事件(会话建立.节点修改.节点删除.子节点变更等):它提供了s ...

  6. nyoj_88_汉诺塔（一）_201308201730

    汉诺塔(一)时间限制:1000 ms | 内存限制:65535 KB难度:3描述在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度教的主神梵天在创 ...

  7. Linux vim 入门 配置 及 使用初步

    网上能够找到的,关于VI的教程,更是多为能吓死人的上百页说明.事实上, 从我个人的实践看,全然不须要如此夸张.要完毕最主要的编辑.仅仅要熟悉几个命令,就是把VIM用得非常好. 这里就列举一下: Esc ...

  8. poj 3468 A Simple Problem with Integers（线段树+区间更新+区间求和）

    题目链接:id=3468http://">http://poj.org/problem? id=3468 A Simple Problem with Integers Time Lim ...

  9. CentOS下安装使用phpMyAdmin. Set up phpMyAdmin on CentOS

    须要组件: Apache PHP Mysql phpMyAdmin Apache 0. yum install httpd 1. 确认版本号 $ httpd -v 2. 启动apache $ sudo ...

  10. iOS7系统iLEX RAT冬青鼠安装教程：无需刷机还原纯净越狱系统

    全网科技 温馨提醒:iLEX RAT和Semi-Restore的作用都是让你的已越狱的设备恢复至越狱的初始状态. 可是要注意无论你是用iLexRAT冬青鼠还是Semi-restore.对于还原来说都存 ...