這次給大家?guī)?lái)node前端模板引擎Jade標(biāo)簽使用詳解，node前端模板引擎Jade標(biāo)簽使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
1、文檔聲明
我們?cè)陂_始寫一個(gè) html 頁(yè)面的時(shí)候，首先要寫上 DOCTYPE 文檔聲明的，現(xiàn)在通常情況下我們都是采用 HTML5 的文檔聲明方式，那么在 jade 里面我們應(yīng)該怎么寫呢？
在 jade 里面編寫文檔聲明有2種方式：
我們可以直接在 jade 文件里面寫 doctype html 即可
jade 為我們提供了一個(gè)簡(jiǎn)單的寫法，(不過(guò)好像 jade 在升級(jí)之后的新版本中不推薦使用此方法了 -_-||| )
當(dāng)然，jade 還默認(rèn)支持其他類型的文檔聲明，只需要使用 doctype 跟上下面的選項(xiàng)即可。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 對(duì)大小寫是不敏感的, 所以下面兩個(gè)是一樣的效果:
doctype?Default doctype?default
例如：如果我們要想寫 XHTML 1.0 Strict 文檔聲明，則可以這樣寫：
doctype?strict
編譯結(jié)果如下：
復(fù)制代碼 代碼如下:
2、標(biāo)簽
jade 中的標(biāo)簽的寫法非常的簡(jiǎn)單，就是一個(gè)單詞。
doctype?html html ?head ?title ?body
以上代碼會(huì)被編譯成:
<!DOCTYPE html> <html> ?<head> ?<title></title> ?</head> ?<body></body> </html>
jade 是以嚴(yán)格的縮進(jìn)來(lái)區(qū)分標(biāo)簽的開始和結(jié)束的，默認(rèn)為2個(gè)空格表示縮進(jìn)。
如果我們要寫一個(gè)標(biāo)簽并且?guī)в袃?nèi)容，比如說(shuō)要寫一個(gè)標(biāo)題，我們只需要在標(biāo)簽單詞后面加一個(gè)空格，然后跟上內(nèi)容即可。
h1?this?is?a?title. p?this?is?a?paragraph.
編譯結(jié)果為：
?
this is a title.
?this is a paragraph.
有的時(shí)候，我們會(huì)需要輸出一些特殊排版格式的文本或者是為了提高代碼的閱讀性，需要顯示出如下的效果：
? 1. 001
? 2. 002
? 3. 003
? 4. 004
那么我們?cè)?jade 中應(yīng)該怎么寫呢，這里 jade 給我們提供了兩種方式，第一種是在每一行前面加上一個(gè) | 和空格：
p ?|?1.?001 ?|?2.?002 ?|?3.?003 ?|?4.?004
第二種方法是：在標(biāo)簽名后面緊跟一個(gè) . 號(hào)。則此標(biāo)簽下面的內(nèi)容會(huì)被 jade 解析為一個(gè)代碼段：
p. ?1.?001 ?2.?002 ?3.?003 ?4.?004
這下有的同學(xué)就傻傻分不清了，這兩種方式到底有什么區(qū)別呢？這里我們就不得不說(shuō)到標(biāo)簽混排，如果我們有這樣一個(gè)需求，在上面的代碼中 1 的后面需要加一個(gè) strong 標(biāo)簽。
首先我們說(shuō)第一種情況下，我們的寫法：
p ?|?1.?001 ?strong?aaa ?|?2.?002 ?|?3.?003 ?|?4.?004
如果是第二種寫法的話，我們就需要這樣寫：
p. ?1.?001 ?<strong>aaa</strong> ?2.?002 ?3.?003 ?4.?004
編譯結(jié)果如下：
? 1. 001
? aaa
? 2. 002
? 3. 003
? 4. 004
3、標(biāo)簽的屬性和屬性值
h1 p 等等這些標(biāo)簽，我們通常都會(huì)給他們寫上id & class屬性的，那么這在 jade 中應(yīng)該怎么寫呢？和 zen coding 的語(yǔ)法一樣，我們只需要這樣寫：
h1#id.class?this?is?a?title. p#j-text.text?this?is?a?paragraph.
編譯結(jié)果為：
this is a title.
this is a paragraph.
等等，那我要是想添加多個(gè) class 怎么辦呢？這樣辦：
h1#id.class1.class2.class3?this?is?a?title. p#j-text.text?this?is?a?paragraph.
編譯結(jié)果為：
this is a title.
this is a paragraph.
什么？寫 p 寫煩了？那就不寫咯。
#id.class #id.class1.class2?this?is?a?p?without?tags.
編譯結(jié)果為：
this is a p without tags.
這里要說(shuō)明一下，在 jade 的語(yǔ)法里面，只有 p 標(biāo)簽?zāi)軌蚴÷圆粚?
說(shuō)完了 id 和 class，我們?cè)賮?lái)說(shuō)一下標(biāo)簽其他的屬性應(yīng)該怎么添加。jade 里添加其他屬性和值的語(yǔ)法也和 zen coding 類似，我們需要在標(biāo)簽后面加上小括號(hào)()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個(gè)屬性，中間以逗號(hào)進(jìn)行分割。
比如上面的 id 和 class 的寫法我們就可以改寫成：
h1(id="id",?class="class")?this?is?a?title. p(id="j-text",?class="text")?this?is?a?paragraph.
結(jié)果是一樣的：
this is a title.
this is a paragraph.
說(shuō)來(lái)說(shuō)去還是這兩個(gè)屬性，煩了？那我們換一個(gè)吧：
a(herf="/index.html",?title="this?is?a?link.",?target="_blank",?data-uid="1000")?index.html
編譯結(jié)果為：
那么問(wèn)題就來(lái)了，如果我們要寫一個(gè)單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：
input(type="checkbox",?name="all",?checked,?value="全選")
編譯結(jié)果為：
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
nodejs實(shí)現(xiàn)動(dòng)態(tài)html步驟詳解
以上是node前端模板引擎Jade標(biāo)簽使用詳解的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
nvm 怎么刪除node
Dec 29, 2022 am 10:07 AM
nvm刪除node的方法：1、下載“nvm-setup.zip”并將其安裝在C盤；2、配置環(huán)境變量，并通過(guò)“nvm -v”命令查看版本號(hào)；3、使用“nvm install”命令安裝node；4、通過(guò)“nvm uninstall”命令刪除已安裝的node即可。
Pi Node教學(xué)：什么是Pi節(jié)點(diǎn)？如何安裝和設(shè)定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork節(jié)點(diǎn)詳解及安裝指南本文將詳細(xì)介紹PiNetwork生態(tài)系統(tǒng)中的關(guān)鍵角色——Pi節(jié)點(diǎn)，并提供安裝和配置的完整步驟。Pi節(jié)點(diǎn)在PiNetwork區(qū)塊鏈測(cè)試網(wǎng)推出后，成為眾多先鋒積極參與測(cè)試的重要環(huán)節(jié)，為即將到來(lái)的主網(wǎng)發(fā)布做準(zhǔn)備。如果您還不了解PiNetwork，請(qǐng)參考Pi幣是什么？上市價(jià)格多少？Pi用途、挖礦及安全性分析。什么是PiNetwork？PiNetwork項(xiàng)目始于2019年，擁有其專屬加密貨幣Pi幣。該項(xiàng)目旨在創(chuàng)建一個(gè)人人可參與
node項(xiàng)目中如何使用express來(lái)處理文件的上傳
Mar 28, 2023 pm 07:28 PM
怎么處理文件上傳？下面本篇文章給大家介紹一下node項(xiàng)目中如何使用express來(lái)處理文件的上傳，希望對(duì)大家有所幫助！
聊聊用pkg將Node.js項(xiàng)目打包為可執(zhí)行文件的方法
Dec 02, 2022 pm 09:06 PM
?如何用pkg打包nodejs可執(zhí)行文件？下面本篇文章給大家介紹一下使用pkg將Node項(xiàng)目打包為可執(zhí)行文件的方法，希望對(duì)大家有所幫助！
深入淺析Node的進(jìn)程管理工具“pm2”
Apr 03, 2023 pm 06:02 PM
本篇文章給大家分享Node的進(jìn)程管理工具“pm2”，聊聊為什么需要pm2、安裝和使用pm2的方法，希望對(duì)大家有所幫助！
使用Angular和Node進(jìn)行基于令牌的身份驗(yàn)證
Sep 01, 2023 pm 02:01 PM
身份驗(yàn)證是任何Web應(yīng)用程序中最重要的部分之一。本教程討論基于令牌的身份驗(yàn)證系統(tǒng)以及它們與傳統(tǒng)登錄系統(tǒng)的區(qū)別。在本教程結(jié)束時(shí)，您將看到一個(gè)用Angular和Node.js編寫的完整工作演示。傳統(tǒng)身份驗(yàn)證系統(tǒng)在繼續(xù)基于令牌的身份驗(yàn)證系統(tǒng)之前，讓我們先看一下傳統(tǒng)的身份驗(yàn)證系統(tǒng)。用戶在登錄表單中提供用戶名和密碼，然后點(diǎn)擊登錄。發(fā)出請(qǐng)求后，通過(guò)查詢數(shù)據(jù)庫(kù)在后端驗(yàn)證用戶。如果請(qǐng)求有效，則使用從數(shù)據(jù)庫(kù)中獲取的用戶信息創(chuàng)建會(huì)話，然后在響應(yīng)頭中返回會(huì)話信息，以便將會(huì)話ID存儲(chǔ)在瀏覽器中。提供用于訪問(wèn)應(yīng)用程序中受
npm node gyp失敗怎么辦
Dec 29, 2022 pm 02:42 PM
npm node gyp失敗是因?yàn)椤皀ode-gyp.js”跟“Node.js”版本不匹配，其解決辦法：1、通過(guò)“npm cache clean -f”清除node緩存；2、通過(guò)“npm install -g n”安裝n模塊；3、通過(guò)“n v12.21.0”命令安裝“node v12.21.0”版本即可。
什么是單點(diǎn)登錄系統(tǒng)？用nodejs怎么實(shí)現(xiàn)？
Feb 24, 2023 pm 07:33 PM
什么是單點(diǎn)登錄系統(tǒng)？用nodejs怎么實(shí)現(xiàn)？下面本篇文章給大家介紹一下使用node實(shí)現(xiàn)單點(diǎn)登錄系統(tǒng)的方法，希望對(duì)大家有所幫助！
