node前端模板引擎Jade之標(biāo)簽的基本寫法
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é)果如下：
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)格的縮進來區(qū)分標(biāo)簽的開始和結(jié)束的，默認(rèn)為2個空格表示縮進。
如果我們要寫一個標(biāo)簽并且?guī)в袃?nèi)容，比如說要寫一個標(biāo)題，我們只需要在標(biāo)簽單詞后面加一個空格，然后跟上內(nèi)容即可。
h1 this is a title. p this is a paragraph.
編譯結(jié)果為：
<h1>this is a title.</h1>
<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 解析為一個代碼段：
p. 1. 001 2. 002 3. 003 4. 004
這下有的同學(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)簽的屬性和屬性值
h1 p 等等這些標(biāo)簽，我們通常都會給他們寫上id & class屬性的，那么這在 jade 中應(yīng)該怎么寫呢？和 zen coding 的語法一樣，我們只需要這樣寫：
h1#id.class this is a title. p#j-text.text this is a paragraph.
編譯結(jié)果為：
<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.
編譯結(jié)果為：
<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.
編譯結(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)簽后面加上小括號()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個屬性，中間以逗號進行分割。
比如上面的 id 和 class 的寫法我們就可以改寫成：
h1(id="id", class="class") this is a title. p(id="j-text", class="text") this is a paragraph.
結(jié)果是一樣的：
<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
編譯結(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="全選"/>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- node前端開發(fā)模板引擎Jade的入門
- Node.js 使用jade模板引擎的示例
- vue 使用Jade模板寫html,stylus寫css的方法
- 詳解Node.js模板引擎Jade入門
- 基于模板引擎Jade的應(yīng)用(詳解)
- Node.js+jade+mongodb+mongoose實現(xiàn)爬蟲分離入庫與生成靜態(tài)文件的方法
- Node.js+jade抓取博客所有文章生成靜態(tài)html文件的實例
- 基于Node.js模板引擎教程-jade速學(xué)與實戰(zhàn)1
- Nodejs express框架一個工程中同時使用ejs模版和jade模版
- node+express+jade制作簡單網(wǎng)站指南
相關(guān)文章
這篇文章主要為大家介紹了koa2上傳文件及https配置實現(xiàn)教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
nodejs利用http模塊實現(xiàn)銀行卡所屬銀行查詢和騷擾電話驗證示例
本篇文章主要介紹了nodejs利用http模塊實現(xiàn)銀行卡所屬銀行查詢和騷擾電話驗證示例，有興趣的可以了解一下。2016-12-12
nodejs實現(xiàn)獲取本地文件夾下圖片信息功能示例
這篇文章主要介紹了nodejs實現(xiàn)獲取本地文件夾下圖片信息功能,涉及node.js針對文件、目錄的遍歷、讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
在Node.js中使用定時器是一項常見且重要的任務(wù),本文主要介紹了Node.js使用定時器的三種方法,包括setTimeout、setInterval和setImmediate等方法,感興趣的可以了解一下2024-02-02
這篇文章主要給大家介紹了關(guān)于NodeJS中的循環(huán)引用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用NodeJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了node.js中的fs.fstatSync方法使用說明,本文介紹了fs.fstatSync的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
node微信開發(fā)之獲取access_token+自定義菜單
這篇文章主要介紹了node微信開發(fā)之獲取access_token+自定義菜單，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
node.js使用express-fileupload中間件實現(xiàn)文件上傳
本文使用express作為服務(wù)端，使用express-fileupload庫提供的中間件函數(shù)來接受從客戶端傳來的圖片，并將圖片作為文件存儲在服務(wù)端，感興趣的可以了解一下2021-07-07
當(dāng)公司要求使用固定nodejs的版本時,自己不小心更新了npm，就會導(dǎo)致npm和nodejs不匹配,下面這篇文章主要給大家介紹了關(guān)于nodejs和npm版本不匹配報錯的解決方法,需要的朋友可以參考下2023-04-04
本篇文章主要介紹了nodejs 終端打印進度條實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04