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


Posted in Javascript onMay 11, 2018

1、文档声明

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

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

  1. 我们可以直接在 jade 文件里面写 doctype html 即可
  2. 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 解析为一个代码段:

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
 <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="全选"/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JS实现的简单下拉框联动功能示例
May 11 #Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 #Javascript
node前端开发模板引擎Jade的入门
May 11 #Javascript
Node.js 使用jade模板引擎的示例
May 11 #Javascript
Node.js Express安装与使用教程
May 11 #Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 #Javascript
Node.js引入UIBootstrap的方法示例
May 11 #Javascript
You might like
谈谈PHP的输入输出流
2007/02/14 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
钳工实习自我鉴定
2013/09/19 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
项目采购员岗位职责
2014/04/15 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
车辆委托书范本
2014/10/05 职场文书
2014年班干部工作总结
2014/11/25 职场文书
捐资助学感谢信
2015/01/21 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL