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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python实现动态数组的示例代码
2019/07/15 Python
python使用requests.session模拟登录
2019/08/09 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
网络技术支持面试题
2013/04/22 面试题
通信生自我鉴定
2014/01/18 职场文书
2014年元旦活动方案
2014/02/15 职场文书
小学教师自我评价
2015/03/04 职场文书
中小企业员工手册范本
2015/05/14 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
HttpClient实现文件上传功能
2022/08/14 Java/Android