———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. vue项目中的常见问题（vue-cli版本3.0.0）

    一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...

  2. 基本数据类型：布尔型(bool)和空值None

    一.布尔型(bool) 布尔类型很简单,就两个值 ,一个True(真),一个False(假), 主要用记逻辑判断: 一件事情成立就是True,不成立就是False,也可以将bool值归类为数字, 是因 ...

  3. Git下的标签

    发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...

  4. 洛谷 2387 NOI2014魔法森林 LCT

    [题解] 我们先把边按照$a$值从小到大排序,并按照这个顺序加边. 如果当前要加入的边连接的两点$u$与$v$已经是连通的,那么直接加入这条边就会出现环.这时我们需要删除这个环中$b$值最大的边.因此 ...

  5. 清北学堂模拟赛d5t6 cube

    题面有误!10,11,12操作类别为A,13,14,15类别为B,16,17,18类别为C. 分析:一道大暴力,每次记录一下走了多少步,上一步操作类别是啥就可以了.最后只需要写6种操作,每一次操作进行 ...

  6. 激活Windows

    额外的启动参数(键):/win=act – 在隐藏模式下运行程序,激活 Windows 并退出程序./ofs=act – 在隐藏模式下运行程序,激活 Office 并退出程序./wingvlk – 在 ...

  7. N天学习一个linux命令之netstat

    用途 打印网络连接,路由表,网卡信息,假连接,组播成员信息 用法 1 显示网络连接信息 netstat [address_family_options] [--tcp|-t] [--udp|-u] [ ...

  8. poj 1635

    有根树同构.参考论文<hash在....> #include <iostream> #include <fstream> #include <algorith ...

  9. 熊猫猪新系统測试之中的一个:Windows 10 技术预览版

    话说本猫不用windows非常多年了呀! 只是看到微软最新的Windows10还是手痒了.想安装体验一把. 于是第一时间下载,并做成usb引导安装镜像,在08年的老台式机上安装尝鲜鸟.下载ISO和安装 ...

  10. 学习笔记——WCF

    学了一下WCF,发现怎么跟Web Service这么像! 这个WCF究竟干嘛的? 一查,原来: "Windows Communication Foundation (WCF) 是由微软发展的 ...