伏龙阁资源网

node前端模板引擎Jade之标签的基本写法
站长资源 2024/11/27 佚名
2 0

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': '<"1.0" encoding="utf-8" "-//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="全选"/>

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接