这次给大家带来node前端模板引擎Jade标签使用详解，node前端模板引擎Jade标签使用的注意事项有哪些，下面就是实战案例，一起来看一下。
1、文档声明
我们在开始写一个 html 页面的时候，首先要写上 DOCTYPE 文档声明的，现在通常情况下我们都是采用 HTML5 的文档声明方式，那么在 jade 里面我们应该怎么写呢？
在 jade 里面编写文档声明有2种方式：
我们可以直接在 jade 文件里面写 doctype html 即可
jade 为我们提供了一个简单的写法，(不过好像 jade 在升级之后的新版本中不推荐使用此方法了 -_-||| )
当然，jade 还默认支持其他类型的文档声明，只需要使用 doctype 跟上下面的选项即可。jade 默认支持的有:
var doctypes = exports.doctypes = { '5': '', 'xml': '', 'default': '', 'transitional': '', 'strict': '', 'frameset': '', '1.1': '', 'basic': '', 'mobile': ''};
登录后复制
doctype 对大小写是不敏感的, 所以下面两个是一样的效果:
doctype Defaultdoctype default
登录后复制
例如：如果我们要想写 XHTML 1.0 Strict 文档声明，则可以这样写：
doctype strict
登录后复制
编译结果如下：
复制代码 代码如下:
2、标签
jade 中的标签的写法非常的简单，就是一个单词。
doctype htmlhtml head title body
登录后复制
以上代码会被编译成:
登录后复制
jade 是以严格的缩进来区分标签的开始和结束的，默认为2个空格表示缩进。
如果我们要写一个标签并且带有内容，比如说要写一个标题，我们只需要在标签单词后面加一个空格，然后跟上内容即可。
h1 this is a title.p this is a paragraph.
登录后复制
编译结果为：
this is a title.
this is a paragraph.
有的时候，我们会需要输出一些特殊排版格式的文本或者是为了提高代码的阅读性，需要显示出如下的效果：
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 strong aaa | 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、标签的属性和属性值
h1 p 等等这些标签，我们通常都会给他们写上id & class属性的，那么这在 jade 中应该怎么写呢？和 zen coding 的语法一样，我们只需要这样写：
h1#id.class this is a title.p#j-text.text this is a paragraph.
登录后复制
编译结果为：
this is a title.
this is a paragraph.
等等，那我要是想添加多个 class 怎么办呢？这样办：
h1#id.class1.class2.class3 this is a title.p#j-text.text this is a paragraph.
登录后复制
编译结果为：
this is a title.
this is a paragraph.
什么？写 p 写烦了？那就不写咯。
#id.class#id.class1.class2 this is a p without tags.
登录后复制
编译结果为：
this is a p without tags.
这里要说明一下，在 jade 的语法里面，只有 p 标签能够省略不写.
说完了 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.
登录后复制
结果是一样的：
this is a title.
this is a paragraph.
说来说去还是这两个属性，烦了？那我们换一个吧：
a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html
登录后复制
编译结果为：
index.html
那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：
input(type="checkbox", name="all", checked, value="全选")
登录后复制
编译结果为：
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
立即学习“前端免费学习笔记（深入）”；
nodejs实现动态html步骤详解
node 命令方式启动修改端口步骤详解
以上就是node前端模板引擎Jade标签使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759884.html
