node前端模板引擎Jade之標(biāo)簽的寫法分析

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

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

1、文檔聲明

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

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

我們可以直接在 jade 文件里面寫 doctype html 即可
jade 為我們提供了一個簡單的寫法，(不過好像 jade 在升級之后的新版本中不推薦使用此方法了 -_-||| )

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

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

編譯結(jié)果如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2、標(biāo)簽

jade 中的標(biāo)簽的寫法非常的簡單，就是一個單詞。

doctype html
html
 head
 title
 body

以上代碼會被編譯成:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body></body>
</html>

jade 是以嚴(yán)格的縮進(jìn)來區(qū)分標(biāo)簽的開始和結(jié)束的，默認(rèn)為2個空格表示縮進(jìn)。

如果我們要寫一個標(biāo)簽并且?guī)в袃?nèi)容，比如說要寫一個標(biāo)題，我們只需要在標(biāo)簽單詞后面加一個空格，然后跟上內(nèi)容即可。

h2 this is a title.
p this is a paragraph.

編譯結(jié)果為：

<h2>this is a title.</h2>
<p>this is a paragraph.</p>

有的時候，我們會需要輸出一些特殊排版格式的文本或者是為了提高代碼的閱讀性，需要顯示出如下的效果：

<p>
1. 001
2. 002
3. 003
4. 004
</p>

那么我們在 jade 中應(yīng)該怎么寫呢，這里 jade 給我們提供了兩種方式，第一種是在每一行前面加上一個 | 和空格：

p
 | 1. 001
 | 2. 002
 | 3. 003
 | 4. 004

第二種方法是：在標(biāo)簽名后面緊跟一個 . 號。則此標(biāo)簽下面的內(nèi)容會被 jade 解析為一個代碼段：

這下有的同學(xué)就傻傻分不清了，這兩種方式到底有什么區(qū)別呢？這里我們就不得不說到標(biāo)簽混排，如果我們有這樣一個需求，在上面的代碼中 1 的后面需要加一個 strong 標(biāo)簽。

首先我們說第一種情況下，我們的寫法：

p
 | 1. 001
 strong aaa
 | 2. 002
 | 3. 003
 | 4. 004

如果是第二種寫法的話，我們就需要這樣寫：

p.
 1. 001
 <strong>aaa</strong>
 2. 002
 3. 003
 4. 004

編譯結(jié)果如下：

<p>
1. 001
<strong>aaa</strong>
2. 002
3. 003
4. 004
</p>

3、標(biāo)簽的屬性和屬性值

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

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

編譯結(jié)果為：

<h2 id="id" class="class">this is a title.</h2>
<p id="j-text" class="text">this is a paragraph.</p>

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

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

編譯結(jié)果為：

<h2 id="id" class="class1 class2 class3">this is a title.</h2>
<p id="j-text" class="text">this is a paragraph.</p>

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

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

編譯結(jié)果為：

<div id="id" class="class"></div>
<div id="id" class="class1 class2">this is a div without tags.</div>

這里要說明一下，在 jade 的語法里面，只有 div 標(biāo)簽?zāi)軌蚴÷圆粚?

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

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

h2(id="id", class="class") this is a title.
p(id="j-text", class="text") this is a paragraph.

結(jié)果是一樣的：

<h2 id="id" class="class">this is a title.</h2>
<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

編譯結(jié)果為：

<a herf="/index.html" title="this is a link." target="_blank" data-uid="1000">index.html</a>

那么問題就來了，如果我們要寫一個單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：

input(type="checkbox", name="all", checked, value="全選")

編譯結(jié)果為：

<input type="checkbox" name="all" checked="checked" value="全選"/>

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

分享標(biāo)題：node前端模板引擎Jade之標(biāo)簽的寫法分析
鏈接URL：http://chinadenli.net/article16/jgjcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站設(shè)計公司、關(guān)鍵詞優(yōu)化、網(wǎng)站排名、網(wǎng)站設(shè)計、App設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

node前端模板引擎Jade之標(biāo)簽的寫法分析