node前端模板引擎Jade之标签的基本写法

2023-09-12 23:53:04 50

1、文档声明

我们在开始写一个html页面的时候，首先要写上DOCTYPE文档声明的，现在通常情况下我们都是采用HTML5的文档声明方式，那么在jade里面我们应该怎么写呢？

在jade里面编写文档声明有2种方式：

我们可以直接在jade文件里面写doctypehtml即可
jade为我们提供了一个简单的写法，(不过好像jade在升级之后的新版本中不推荐使用此方法了-_-|||)

当然，jade还默认支持其他类型的文档声明，只需要使用doctype跟上下面的选项即可。jade默认支持的有:

vardoctypes=exports.doctypes={
'5':'',
'xml':'',
'default':'',
'transitional':'',
'strict':'',
'frameset':'',
'1.1':'',
'basic':'',
'mobile':''
};

doctype对大小写是不敏感的,所以下面两个是一样的效果:

doctypeDefault
doctypedefault

例如：如果我们要想写XHTML1.0Strict文档声明，则可以这样写：

doctypestrict

编译结果如下：

2、标签

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

doctypehtml
html
head
title
body

以上代码会被编译成:

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

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

h1thisisatitle.
pthisisaparagraph.

编译结果为：

thisisatitle.

thisisaparagraph.

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

1.001
2.002
3.003
4.004

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

p
|1.001
|2.002
|3.003
|4.004

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

p.
1.001
2.002
3.003
4.004

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

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

p
|1.001
strongaaa
|2.002
|3.003
|4.004

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

p.
1.001
aaa
2.002
3.003
4.004

编译结果如下：

1.001
aaa
2.002
3.003
4.004

3、标签的属性和属性值

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

h1#id.classthisisatitle.
p#j-text.textthisisaparagraph.

编译结果为：

thisisatitle.
thisisaparagraph.

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

h1#id.class1.class2.class3thisisatitle.
p#j-text.textthisisaparagraph.

编译结果为：

thisisatitle.
thisisaparagraph.

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

#id.class
#id.class1.class2thisisadivwithouttags.

编译结果为：

thisisadivwithouttags.

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

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

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

h1(id="id",class="class")thisisatitle.
p(id="j-text",class="text")thisisaparagraph.

结果是一样的：

thisisatitle.
thisisaparagraph.

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

a(herf="/index.html",title="thisisalink.",target="_blank",data-uid="1000")index.html

编译结果为：

index.html

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

input(type="checkbox",name="all",checked,value="全选")

编译结果为：

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

node前端模板引擎Jade之标签的基本写法

thisisatitle.

热门推荐

随机推荐