———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{版权信息})
 
【展开后页面代码】
  1.  <html>
  2.  <head>
  3.      <title></title>
  4.      <style></style>
  5.      <script src="abc1.js"></script>
  6.      <script src="abc2.js"></script>
  7.      <script src="abc3.js"></script>
  8.      <body>
  9.          <div class="footer">版权信息
  10.              <div class="content">
  11.                  <div class="nav">
  12.                      <ul>
  13.                          <li><a href=""><span></span></a></li>
  14.                          <li><a href=""><span></span></a></li>
  15.                          <li><a href=""><span></span></a></li>
  16.                          <li><a href=""><span></span></a></li>
  17.                          <li><a href=""><span></span></a></li>
  18.                      </ul>
  19.                  </div>
  20.              </div>
  21.              <div class="sidebar">
  22.                  <div class="top"></div>
  23.                  <div class="middle"></div>
  24.                  <bottom></bottom>
  25.              </div>
  26.              <div class="main">
  27.                  <div class="acticle">
  28.                      <h1>文章标题1</h1>
  29.                      <p></p>
  30.                  </div>
  31.                  <div class="acticle">
  32.                      <h1>文章标题2</h1>
  33.                      <p></p>
  34.                  </div>
  35.                  <div class="acticle">
  36.                      <h1>文章标题3</h1>
  37.                      <p></p>
  38.                  </div>
  39.              </div>
  40.          </div>
  41.      </body>
  42.  </head>
  43.  </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. jdk编译安装及tomcat编译安装

    这里我安装的jdk版本为1.8版本,tomcat版本为8.5(请上官网下载) 运维开发技术交流群欢迎大家加入一起学习(QQ:722381733) jdk部署: 1.前往软件所在路径 [root@web ...

  2. axios的基本概念和安装以及配置方法

    ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 1.从浏览器制作XMLHttpReques ...

  3. python第十二周：MySql

    MySql数据库 MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司.MySQL 是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不 ...

  4. Navicat premium连接Oracle报ORA-12545错误

    1:ORA-12545 原因: 这里填localhost,127.0.0.1,或者远程ip.

  5. 洛谷 P1851 好朋友

    题目背景 小可可和所有其他同学的手腕上都戴有一个射频识别序列号码牌,这样老师就可以方便的计算出他们的人数.很多同学都有一个“好朋友” .如果 A 的序列号的约数之和恰好等于B 的序列号,那么 A的好朋 ...

  6. noip模拟赛 逃避

    题目描述 给定一篇只含有大小写字母,空格以及 ′.′(不含引号)的长度为 L 的文章.文章被若干个 ′.′ 划分 成若干个句子,句子被若干个空格划分成单词.你需要将文章中每个句子第一个单词的首字母改成 ...

  7. JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式

    代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024="&qu ...

  8. 浅析gcc、arm-linux-gcc和arm-elf-gcc关系

    浅析gcc.arm-linux-gcc和arm-elf-gcc关系 一.GCC简介 The GNU Compiler Collection,通常简称 GCC,是一套由 GNU 开发的编译器集,为什么是 ...

  9. route 详解

    语法: [root@test root]# route [-nee] [root@test root]# route add [-net|-host]目标主机或网域[netmask] [gw|dev] ...

  10. 了解一下JAVA中的NIO模块

    网上资料大把,但要写写代码,我这个年纪的人才有一点点记忆了.. 参考URL: http://blog.csdn.net/wuxianglong/article/details/6612282 pack ...