———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. java折半插入排序

    代码如下: public class BinaryInsertSort { public static void binaryInsertSort(DataWrap [] data) { System ...

  2. 50.percentiles百分比算法以及网站延时统计

    主要知识点 percentiles的用法     现有一个需求:比如有一个网站,记录下了每次请求的访问的耗时,需要统计tp50,tp90,tp99 tp50:50%的请求的耗时最长在多长时间 tp90 ...

  3. Django的基础教程

    学Django需要什么基础? 1. Django是 python 语言写的一个Web框架包,所以你得知道一些 Python 基础知识. 2. 其次你最好有一些做网站的经验,懂一些网页 HTML, CS ...

  4. 第三节：Web爬虫之BeautifulSoup解析库

    Beautiful Soup官方说明: Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能.它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为 ...

  5. 【Codeforces 446A】DZY Loves Sequences

    [链接] 我是链接,点我呀:) [题意] 让你找一段连续的区间 使得这一段区间最多修改一个数字就能变成严格上升的区间. 问你这个区间的最长长度 [题解] dp[0][i]表示以i为结尾的最长严格上升长 ...

  6. detecting locked tables mysql (locked by LOCK TABLE)

    detecting locked tables mysql (locked by LOCK TABLE) up vote15down votefavorite 7 I would like to kn ...

  7. .Net程序猿玩转Android开发---(6)线性布局LinearLayout

                                LinearLayout控件是Android中重要的布局控件,是一个线性控件,所谓线性控件的意思是指该控件里面的内容仅仅能水平或垂直排列.也就 ...

  8. Android 高亮指示层提示

    此库出自翔神之手   用起来绝对方便 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0J ...

  9. 一条SQL语句求前面记录的平均值

    有算法要求如下: For (i=1,i<=10,i++) { ta[i] = (t[1] + t[2] + ... + t[i]) / i; } 用一条SQL语句实现它: 分别用表变量 @ta ...

  10. QT 相关资源（书籍、论坛、博客等。。。）整理

     QT 相关资源(书籍.论坛.博客等...)整理... 中文名:<提问的智慧> 英文名:How To Ask Questions The Smart Way 中文链接1:http://ww ...