一种简洁的便于书写html的模板语言。

支持所有的html(5)标签和正常的javascript表达式

标签

相比于html,jade的标签只需一个标签名即可,不需要关闭标签,也不需要尖括号。

对于需要嵌套的标签,利用缩进来控制,所以jade对缩进的要求十分的严格。

jade:

  1. ul
  2. li Item A
  3. li Item B
  4. li Item C

html:

  1. <ul>
  2. <li>Item A</li>
  3. <li>Item B</li>
  4. <li>Item C</li>
  5. </ul>

块扩展

为了省空间,jade支持将多重嵌套合为一行(好像只能2个标签,见代码)。

jade:

  1. a
  2. img
  3. //- 也可以这样
  4. a: img
  5. //- a: img p 这样好像就会报错
  6. a: a: p

html:

  1. <a><img/></a>
  2. <a><img/></a>
  3. <a><a><p></p></a></a>

自闭标签

对于html中像img这样的自闭标签,jade可以支持如下书写。

jade:

  1. foo/
  2. foo(bar='baz')/

html:

  1. <foo/>
  2. <foo bar="baz"/>

Jade之标签的更多相关文章

  1. vue 使用Jade模板写html,stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

  2. jade文档声明和头尾标签

    作为一个页面,首先需要一个doctype的声明,它位于文档最上面的位置,放置html标签以前,用来告知浏览器当前这个页面用哪种html,或者xml的规范并解析页面   doctype html htm ...

  3. jade成段的文本和标签

    如果文本是大段的文本怎么写呢?因为文本会换行,比如有多行的文本,标签,文本傻傻分不清楚 p 1234567890 => <p>1234567890</p> 如果需要换行, ...

  4. 如何解决jade标签没有闭合,如input

    最近用jade模板引擎编写html时发现input编译输出为<input>,而我想要的效果为<input/>, 如何解决呢,这时我们可以这样写: input/     ---& ...

  5. Jade模板引擎让你飞

    写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...

  6. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  7. Jade之Plain Text

    Plain Text jade提供了3种得到纯文本的方法. Piped Text 添加纯文本的一个最简单的方法就是在文本最前面加|符号即可. jade: p | It must always be o ...

  8. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

  9. [译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站

    原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, ...

随机推荐

  1. 用ping命令来模拟traceroute的功能

    ping -n 1 -r 9 qq.com 正在 Ping qq.com [163.177.65.160] 具有 32 字节的数据:来自 163.177.65.160 的回复: 字节=32 时间=11 ...

  2. 堆block和栈block的区分

    0. 问题所在 下面给出一段代码: - (NSArray*) getBlockArray { int num = 916; return [[NSArray alloc] initWithObject ...

  3. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

  4. 深入解析js中基本数据类型与引用类型,函数参数传递的区别

    ECMAScript的数据有两种类型:基本类型值和引用类型值,基本类型指的是简单的数据段,引用类型指的是可能由多个值构成的对象. Undefined.Null.Boolean.Number和Strin ...

  5. spark Mllib基本功系列编程入门之 SVM实现分类

    话不多说.直接上代码咯.欢迎交流. /** * Created by whuscalaman on 1/7/16. */import org.apache.spark.{SparkConf, Spar ...

  6. 3.openssl speed和openssl rand

    (1).openssl speed 测试加密算法的性能. 支持的算法有: openssl speed [md2] [mdc2] [md5] [hmac] [sha1] [rmd160] [idea-c ...

  7. C++中使用初始化列表比在构造函数中对成员变量赋值更高效

    这是在面试中遇到的一个问题,没有答出来,后来上网上查了一些资料,终于弄明白了: 一.首先c++标准规定成员变量必须在调用构造函数前进行初始化(这一点很重要) 二.如果我们在构造函数中对成员变量进行初始 ...

  8. table奇偶行设置颜色代码

  9. NetBios 的结构体详解(网络控制块NCB)

    对之前网络基础编程用到控制块NCB进行介绍(补充): 在Win32环境下,使用VC++6.0进行NetBIOS程序开发时, 需要用到nb30.h文件和netapi32.lib静态链接库.前者定义了Ne ...

  10. machine learning----->什么是机器学习

    1.概述: 学习一门学问的第一步就是要了解这门学问到底是什么,它可以被用来干什么. 本文罗列了学习machine learning的过程中看到的一些写得比较好的文章以及读完这些文章之后对机器学习的初步 ...