2、标签

jade 中的标签的写法非常的简单，就是一个单词。

以上代码会被编译成:

jade 是以严格的缩进来区分标签的开始和结束的，默认为2个空格表示缩进。

如果我们要写一个标签并且带有内容，比如说要写一个标题，我们只需要在标签单词后面加一个空格，然后跟上内容即可。

编译结果为：

this is a title.

this is a paragraph.

有的时候，我们会需要输出一些特殊排版格式的文本或者是为了提高代码的阅读性，需要显示出如下的效果：

1. 001 2. 002 3. 003 4. 004

那么我们在 jade 中应该怎么写呢，这里 jade 给我们提供了两种方式，第一种是在每一行前面加上一个 | 和空格：

第二种方法是：在标签名后面紧跟一个 . 号。则此标签下面的内容会被 jade 解析为一个代码段：

这下有的同学就傻傻分不清了，这两种方式到底有什么区别呢？这里我们就不得不说到标签混排，如果我们有这样一个需求，在上面的代码中 1 的后面需要加一个 h3 标签。

首先我们说第一种情况下，我们的写法：

如果是第二种写法的话，我们就需要这样写：

编译结果如下：

1. 001

aaa

2. 002 3. 003 4. 004

3、标签的属性和属性值

h1 p 等等这些标签，我们通常都会给他们写上id & class属性的，那么这在 jade 中应该怎么写呢？和 zen coding 的语法一样，我们只需要这样写：

编译结果为：

等等，那我要是想添加多个 class 怎么办呢？这样办：

编译结果为：

什么？写 div 写烦了？那就不写咯。

编译结果为：

这里要说明一下，在 jade 的语法里面，只有 div 标签能够省略不写.

说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。

比如上面的 id 和 class 的写法我们就可以改写成：

结果是一样的：

说来说去还是这两个属性，烦了？那我们换一个吧：

编译结果为：

那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：

编译结果为：

Box" name="all" checked="checked" value="全选"/>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。