這篇文章主要為大家展示了“node前端模板引擎Jade之標簽的寫法分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“node前端模板引擎Jade之標簽的寫法分析”這篇文章吧。

成都創(chuàng)新互聯(lián)服務項目包括昌吉網(wǎng)站建設、昌吉網(wǎng)站制作、昌吉網(wǎng)頁制作以及昌吉網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，昌吉網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到昌吉省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

1、文檔聲明

我們在開始寫一個 html 頁面的時候，首先要寫上 DOCTYPE 文檔聲明的，現(xiàn)在通常情況下我們都是采用 HTML5 的文檔聲明方式，那么在 jade 里面我們應該怎么寫呢？

在 jade 里面編寫文檔聲明有2種方式：

1. 我們可以直接在 jade 文件里面寫 doctype html 即可

2. jade 為我們提供了一個簡單的寫法，(不過好像 jade 在升級之后的新版本中不推薦使用此方法了 -_-||| )

當然，jade 還默認支持其他類型的文檔聲明，只需要使用 doctype 跟上下面的選項即可。jade 默認支持的有:

var doctypes = exports.doctypes = {
 '5': '',
 'xml': '',
 'default': '',
 'transitional': '',
 'strict': '',
 'frameset': '',
 '1.1': '',
 'basic': '',
 'mobile': ''
};

doctype 對大小寫是不敏感的, 所以下面兩個是一樣的效果:

doctype Default
doctype default

例如：如果我們要想寫 XHTML 1.0 Strict 文檔聲明，則可以這樣寫：

doctype strict

編譯結果如下：

復制代碼 代碼如下:

2、標簽

jade 中的標簽的寫法非常的簡單，就是一個單詞。

doctype html
html
 head
 title
 body

以上代碼會被編譯成:

jade 是以嚴格的縮進來區(qū)分標簽的開始和結束的，默認為2個空格表示縮進。

如果我們要寫一個標簽并且?guī)в袃热荩热缯f要寫一個標題，我們只需要在標簽單詞后面加一個空格，然后跟上內容即可。

h2 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

這下有的同學就傻傻分不清了，這兩種方式到底有什么區(qū)別呢？這里我們就不得不說到標簽混排，如果我們有這樣一個需求，在上面的代碼中 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、標簽的屬性和屬性值

h2 p 等等這些標簽，我們通常都會給他們寫上id & class屬性的，那么這在 jade 中應該怎么寫呢？和 zen coding 的語法一樣，我們只需要這樣寫：

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

編譯結果為：

this is a title.

this is a paragraph.

等等，那我要是想添加多個 class 怎么辦呢？這樣辦：

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

編譯結果為：

this is a title.

this is a paragraph.

什么？寫 div 寫煩了？那就不寫咯。

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

編譯結果為：

this is a div without tags.

這里要說明一下，在 jade 的語法里面，只有 div 標簽能夠省略不寫.

說完了 id 和 class，我們再來說一下標簽其他的屬性應該怎么添加。jade 里添加其他屬性和值的語法也和 zen coding 類似，我們需要在標簽后面加上小括號()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個屬性，中間以逗號進行分割。

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

h2(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="全選")

編譯結果為：

以上是“node前端模板引擎Jade之標簽的寫法分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！