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

更新时间：2018年05月11日 13:39:01 作者：前端乱炖根号三

这篇文章主要介绍了node前端模板引擎Jade之标签的基本写法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1、文档声明

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

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

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

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

var doctypes = exports.doctypes = {
 '5': '<!DOCTYPE html>',
 'xml': '<?xml version="1.0" encoding="utf-8" ?>',
 'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
 'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
 '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
 'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
 'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

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

doctype Default
doctype default

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

doctype strict

编译结果如下：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2、标签

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

doctype html
html
 head
 title
 body

以上代码会被编译成:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body></body>
</html>

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

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

h1 this is a title.
p this is a paragraph.

编译结果为：

<h1>this is a title.</h1>
<p>this is a paragraph.</p>

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

<p>
1. 001
2. 002
3. 003
4. 004
</p>

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

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

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

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

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

p
 | 1. 001
 strong aaa
 | 2. 002
 | 3. 003
 | 4. 004

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

p.
 1. 001
 <strong>aaa</strong>
 2. 002
 3. 003
 4. 004

编译结果如下：

<p>
1. 001
<strong>aaa</strong>
2. 002
3. 003
4. 004
</p>

3、标签的属性和属性值

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

h1#id.class this is a title.
p#j-text.text this is a paragraph.

编译结果为：

<h1 id="id" class="class">this is a title.</h1>
<p id="j-text" class="text">this is a paragraph.</p>

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

h1#id.class1.class2.class3 this is a title.
p#j-text.text this is a paragraph.

编译结果为：

<h1 id="id" class="class1 class2 class3">this is a title.</h1>
<p id="j-text" class="text">this is a paragraph.</p>

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

#id.class
#id.class1.class2 this is a div without tags.

编译结果为：

<div id="id" class="class"></div>
<div id="id" class="class1 class2">this is a div without tags.</div>

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

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

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

h1(id="id", class="class") this is a title.
p(id="j-text", class="text") this is a paragraph.

结果是一样的：

<h1 id="id" class="class">this is a title.</h1>
<p id="j-text" class="text">this is a paragraph.</p>

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

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

编译结果为：

<a herf="/index.html" title="this is a link." target="_blank" data-uid="1000">index.html</a>

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

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

编译结果为：

<input type="checkbox" name="all" checked="checked" value="全选"/>

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

您可能感兴趣的文章:

Jade
标签

nodejs根据ip数组在百度地图中进行定位
本文主要介绍了nodejs根据ip数组在百度地图中进行定位的方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
解决linux下node.js全局模块找不到的问题
今天小编就为大家分享一篇解决linux下node.js全局模块找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-05-05
利用n工具轻松管理Node.js的版本
我们在测试写的Nodejs的程序在不同Nodejs版本下是否能正常运行，或是我们想要尝试下最新版 Nodejs 的新特性，但常用的代码需要旧版本的 Nodejs的时候就需要用 Node 版本管理工具，本文介绍的是利用n工具如何轻松管理Node.js的版本,需要的朋友可以参考下。
2017-04-04
nodejs基础之buffer缓冲区用法分析
这篇文章主要介绍了nodejs基础之buffer缓冲区用法,结合实例形式分析了buffer缓冲区的概念、功能、创建、读写等相关操作技巧,需要的朋友可以参考下
2018-12-12
Node.js+ES6+dropload.js实现移动端下拉加载实例
这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字符串。有兴趣的小伙伴可以自己尝试下
2017-06-06
nodejs连接mysql数据库简单封装示例-mysql模块
本篇文章主要介绍了nodejs连接mysql数据库简单封装（mysql模块），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-04-04
使用NestJS开发Node.js应用的方法
这篇文章主要介绍了使用NestJS开发Node.js应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
nodejs 使用nodejs-websocket模块实现点对点实时通讯
这篇文章主要介绍了nodejs 使用nodejs-websocket模块实现点对点实时通讯的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
微信小程序在线客服自动回复功能(基于node)
这篇文章主要介绍了微信小程序在线客服自动回复功能(基于node)，由于小程序嵌套webview时需要校验域名，因此跳转到第三方应用市场和Appstroe无法实现导流。那怎么办呢,需要的朋友可以参考下
2019-07-07
整理几个关键节点深入理解nodejs
这篇文章主要介绍了整理几个关键节点深入理解nodejs，文章围绕主题展开详细的内容介绍，需要的小伙伴可以参考一下，需要的小伙伴可以参考一下
2022-07-07