<\/body>\r\n<\/html><\/pre>\n
        jade 是以嚴(yán)格的縮進(jìn)來(lái)區(qū)分標(biāo)簽的開始和結(jié)束的，默認(rèn)為2個(gè)空格表示縮進(jìn)。<\/p>\n
        如果我們要寫一個(gè)標(biāo)簽并且?guī)в袃?nèi)容，比如說要寫一個(gè)標(biāo)題，我們只需要在標(biāo)簽單詞后面加一個(gè)空格，然后跟上內(nèi)容即可。<\/p>\n
        h1?this?is?a?title.\r\np?this?is?a?paragraph.<\/pre>\n
        編譯結(jié)果為：<\/p>\n
        ?
        this is a title.<\/h1>
        ?
        this is a paragraph.<\/p><\/p><\/blockquote>\n
        有的時(shí)候，我們會(huì)需要輸出一些特殊排版格式的文本或者是為了提高代碼的閱讀性，需要顯示出如下的效果：<\/p>\n

        ? 1. 001
        ? 2. 002
        ? 3. 003
        ? 4. 004
        <\/p><\/p><\/blockquote>\n
        那么我們?cè)?jade 中應(yīng)該怎么寫呢，這里 jade 給我們提供了兩種方式，第一種是在每一行前面加上一個(gè) | 和空格：<\/p>\n
        p\r\n?|?1.?001\r\n?|?2.?002\r\n?|?3.?003\r\n?|?4.?004<\/pre>\n
        第二種方法是：在標(biāo)簽名后面緊跟一個(gè) . 號(hào)。則此標(biāo)簽下面的內(nèi)容會(huì)被 jade 解析為一個(gè)代碼段：<\/p>\n
        p.\r\n?1.?001\r\n?2.?002\r\n?3.?003\r\n?4.?004<\/pre>\n
        這下有的同學(xué)就傻傻分不清了，這兩種方式到底有什么區(qū)別呢？這里我們就不得不說到標(biāo)簽混排，如果我們有這樣一個(gè)需求，在上面的代碼中 1 的后面需要加一個(gè) strong 標(biāo)簽。<\/p>\n
        首先我們說第一種情況下，我們的寫法：<\/p>\n
        p\r\n?|?1.?001\r\n?strong?aaa\r\n?|?2.?002\r\n?|?3.?003\r\n?|?4.?004<\/pre>\n
        如果是第二種寫法的話，我們就需要這樣寫：<\/p>\n
        p.\r\n?1.?001\r\n?aaa<\/strong>\r\n?2.?002\r\n?3.?003\r\n?4.?004<\/pre>\n
        編譯結(jié)果如下：<\/p>\n

        ? 1. 001
        ? aaa<\/strong>
        ? 2. 002
        ? 3. 003
        ? 4. 004
        <\/p><\/p><\/blockquote>\n
        3、標(biāo)簽的屬性<\/a>和屬性值<\/strong><\/span><\/p>\n
        h1 p 等等這些標(biāo)簽，我們通常都會(huì)給他們寫上id & class屬性的，那么這在 jade 中應(yīng)該怎么寫呢？和 zen coding 的語(yǔ)法一樣，我們只需要這樣寫：<\/p>\n
        h1#id.class?this?is?a?title.\r\np#j-text.text?this?is?a?paragraph.<\/pre>\n
        編譯結(jié)果為：<\/p>\n
        this is a title.<\/h1>
        this is a paragraph.<\/p><\/p><\/blockquote>\n
        等等，那我要是想添加多個(gè) class 怎么辦呢？這樣辦：<\/p>\n
        h1#id.class1.class2.class3?this?is?a?title.\r\np#j-text.text?this?is?a?paragraph.<\/pre>\n
        編譯結(jié)果為：<\/p>\n
        this is a title.<\/h1>
        this is a paragraph.<\/p><\/p><\/blockquote>\n
        什么？寫 p 寫煩了？那就不寫咯。<\/p>\n
        #id.class\r\n#id.class1.class2?this?is?a?p?without?tags.<\/pre>\n
        編譯結(jié)果為：<\/p>\n
        <\/p>
        this is a p without tags.<\/p><\/p><\/blockquote>\n
        這里要說明一下，在 jade 的語(yǔ)法里面，只有 p 標(biāo)簽?zāi)軌蚴÷圆粚?<\/p>\n
        說完了 id 和 class，我們?cè)賮?lái)說一下標(biāo)簽其他的屬性應(yīng)該怎么添加。jade 里添加其他屬性和值的語(yǔ)法也和 zen coding 類似，我們需要在標(biāo)簽后面加上小括號(hào)()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個(gè)屬性，中間以逗號(hào)進(jìn)行分割。<\/p>\n
        比如上面的 id 和 class 的寫法我們就可以改寫成：<\/p>\n
        h1(id=\"id\",?class=\"class\")?this?is?a?title.\r\np(id=\"j-text\",?class=\"text\")?this?is?a?paragraph.<\/pre>\n
        結(jié)果是一樣的：<\/p>\n
        this is a title.<\/h1>
        this is a paragraph.<\/p><\/p><\/blockquote>\n
        說來(lái)說去還是這兩個(gè)屬性，煩了？那我們換一個(gè)吧：<\/p>\n
        a(herf=\"\/index.html\",?title=\"this?is?a?link.\",?target=\"_blank\",?data-uid=\"1000\")?index.html<\/pre>\n
        編譯結(jié)果為：<\/p>\n
        index.html<\/a><\/p><\/blockquote>\n
        那么問題就來(lái)了，如果我們要寫一個(gè)單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：<\/p>\n
        input(type=\"checkbox\",?name=\"all\",?checked,?value=\"全選\")<\/pre>\n
        編譯結(jié)果為：<\/p>\n
        <\/p><\/blockquote>\n
        相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！<\/p>\n
        推薦閱讀：<\/p>\n
        nodejs實(shí)現(xiàn)動(dòng)態(tài)html步驟詳解<\/a>
        <\/p>\n
        node 命令方式啟動(dòng)修改端口步驟詳解<\/a>
        <\/p>"}	
	







        国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
        
	

        
    

        

	
	
        
		
        
			
        
							
        
					
        
						Rumah
						
												hujung hadapan web
						
												tutorial js
						
						node前端模板引擎Jade標(biāo)簽使用詳解
					
        
					
					
        
						
        
							
        node前端模板引擎Jade標(biāo)簽使用詳解
        
							
							May 22, 2018 am	 10:27 AM
															
        
																			node
																			enjin
																	
        
														
						
        
					
        
					
        
					
        
						
        
						
						
						

					
        這次給大家?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種方式：
        

          

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

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

        

        當(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)容，比如說要寫一個(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ū)別呢？這里我們就不得不說到標(biāo)簽混排，如果我們有這樣一個(gè)需求，在上面的代碼中 1 的后面需要加一個(gè) 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é)果如下：
        


        ? 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.
        

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

        說完了 id 和 class，我們?cè)賮?lái)說一下標(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.
        

        說來(lái)說去還是這兩個(gè)屬性，煩了？那我們換一個(gè)吧：
        

        a(herf="/index.html",?title="this?is?a?link.",?target="_blank",?data-uid="1000")?index.html
        

        編譯結(jié)果為：
        

        index.html
        

        那么問題就來(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 命令方式啟動(dòng)修改端口步驟詳解
        Atas ialah kandungan terperinci node前端模板引擎Jade標(biāo)簽使用詳解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
        


						
        
					
        
					
        
						
        Kenyataan Laman Web ini
        
						
        Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
        
					
        
				
        

				



				
        


				
    


					


											
        
							
        
								
        
									
									
        Alat AI Hot
        
								
        
								
        
																		
        
											
												Undress AI Tool
											
											
        
												
													
        Undress AI Tool
        
												        
												
        Gambar buka pakaian secara percuma
        
											
        
										
        
																		
        
											
												Undresser.AI Undress
											
											
        
												
													
        Undresser.AI Undress
        
												        
												
        Apl berkuasa AI untuk mencipta foto bogel yang realistik
        
											
        
										
        
																		
        
											
												AI Clothes Remover
											
											
        
												
													
        AI Clothes Remover
        
												        
												
        Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
        
											
        
										
        
																		
        
											
												Clothoff.io
											
											
        
												
													
        Clothoff.io
        
												        
												
        Penyingkiran pakaian AI
        
											
        
										
        
																		
        
											
												Video Face Swap
											
											
        
												
													
        Video Face Swap
        
												        
												
        Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
        
											
        
										
        
																
        
								
							
        
						
        
					


					


											
        
							
        
								
        
									
									
        Alat panas
        
								
        
								
        
																		
        
											
												Notepad++7.3.1
											
											
        
												
													
        Notepad++7.3.1
        
												        
												
        Editor kod yang mudah digunakan dan percuma
        
											
        
										
        
																			
        
											
												SublimeText3 versi Cina
											
											
        
												
													
        SublimeText3 versi Cina
        
												        
												
        Versi Cina, sangat mudah digunakan
        
											
        
										
        
																			
        
											
												Hantar Studio 13.0.1
											
											
        
												
													
        Hantar Studio 13.0.1
        
												        
												
        Persekitaran pembangunan bersepadu PHP yang berkuasa
        
											
        
										
        
																			
        
											
												Dreamweaver CS6
											
											
        
												
													
        Dreamweaver CS6
        
												        
												
        Alat pembangunan web visual
        
											
        
										
        
																			
        
											
												SublimeText3 versi Mac
											
											
        
												
													
        SublimeText3 versi Mac
        
												        
												
        Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
        
											
        
										
        
																	
        
								
							
        
						
        
										

					
					
				
        
			
        
							
        
					
        
						
						
        

													
        
								
									Bagaimana untuk memadam nod dalam nvm
								
								Bagaimana untuk memadam nod dalam nvm
								Dec 29, 2022 am	 10:07 AM
								
        Cara memadam nod dengan nvm: 1. Muat turun "nvm-setup.zip" dan pasangkannya pada pemacu C 2. Konfigurasikan pembolehubah persekitaran dan semak nombor versi melalui arahan "nvm -v" 3. Gunakan "nvm arahan install" Pasang nod; 4. Padamkan nod yang dipasang melalui arahan "nvm uninstall".
        
							
        
														
        
								
									PI Node Teaching: Apakah nod pi? Bagaimana cara memasang dan menyediakan nod pi?
								
								PI Node Teaching: Apakah nod pi? Bagaimana cara memasang dan menyediakan nod pi?
								Mar 05, 2025 pm	 05:57 PM
								
        Penjelasan dan Panduan Pemasangan Terperinci untuk Pinetwork Nodes Artikel ini akan memperkenalkan ekosistem pinetwork secara terperinci - nod pi, peranan utama dalam ekosistem pinetwork, dan menyediakan langkah -langkah lengkap untuk pemasangan dan konfigurasi. Selepas pelancaran Rangkaian Ujian Blockchain Pinetwork, nod PI telah menjadi bahagian penting dari banyak perintis yang aktif mengambil bahagian dalam ujian, bersiap sedia untuk pelepasan rangkaian utama yang akan datang. Jika anda tidak tahu kerja pinet, sila rujuk apa itu picoin? Berapakah harga untuk penyenaraian? Penggunaan PI, perlombongan dan analisis keselamatan. Apa itu Pinetwork? Projek Pinetwork bermula pada tahun 2019 dan memiliki syiling pi cryptocurrency eksklusifnya. Projek ini bertujuan untuk mewujudkan satu yang semua orang boleh mengambil bahagian
        
							
        
														
        
								
									Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod
								
								Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod
								Mar 28, 2023 pm	 07:28 PM
								
        Bagaimana untuk mengendalikan muat naik fail? Artikel berikut akan memperkenalkan kepada anda cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod saya harap ia akan membantu anda!
        
							
        
														
        
								
									Mari kita bincangkan tentang cara menggunakan pkg untuk membungkus projek Node.js ke dalam fail boleh laku.
								
								Mari kita bincangkan tentang cara menggunakan pkg untuk membungkus projek Node.js ke dalam fail boleh laku.
								Dec 02, 2022 pm	 09:06 PM
								
        Bagaimana untuk membungkus fail boleh laku nodejs dengan pkg? Artikel berikut akan memperkenalkan kepada anda cara menggunakan pkg untuk membungkus projek Node ke dalam fail boleh laku. Saya harap ia akan membantu anda!
        
							
        
														
        
								
									Analisis mendalam tentang alat pengurusan proses Node 'pm2'
								
								Analisis mendalam tentang alat pengurusan proses Node 'pm2'
								Apr 03, 2023 pm	 06:02 PM
								
        Artikel ini akan berkongsi dengan anda alat pengurusan proses Node "pm2", dan bercakap tentang mengapa pm2 diperlukan, cara memasang dan menggunakan pm2, saya harap ia akan membantu semua orang!
        
							
        
														
        
								
									Apa yang perlu dilakukan jika npm nod gyp gagal
								
								Apa yang perlu dilakukan jika npm nod gyp gagal
								Dec 29, 2022 pm	 02:42 PM
								
        npm node gyp gagal kerana versi "node-gyp.js" dan "Node.js" tidak sepadan Penyelesaiannya: 1. Kosongkan cache nod melalui "npm cache clean -f" 2. Melalui "npm install -. g n" Pasang modul n; 3. Pasang versi "nod v12.21.0" melalui arahan "n v12.21.0".
        
							
        
														
        
								
									Pengesahan berasaskan token dengan Angular dan Node
								
								Pengesahan berasaskan token dengan Angular dan Node
								Sep 01, 2023 pm	 02:01 PM
								
        Pengesahan adalah salah satu bahagian terpenting dalam mana-mana aplikasi web. Tutorial ini membincangkan sistem pengesahan berasaskan token dan cara ia berbeza daripada sistem log masuk tradisional. Pada penghujung tutorial ini, anda akan melihat demo berfungsi sepenuhnya yang ditulis dalam Angular dan Node.js. Sistem Pengesahan Tradisional Sebelum beralih kepada sistem pengesahan berasaskan token, mari kita lihat sistem pengesahan tradisional. Pengguna memberikan nama pengguna dan kata laluan mereka dalam borang log masuk dan klik Log Masuk. Selepas membuat permintaan, sahkan pengguna di bahagian belakang dengan menanyakan pangkalan data. Jika permintaan itu sah, sesi dibuat menggunakan maklumat pengguna yang diperoleh daripada pangkalan data dan maklumat sesi dikembalikan dalam pengepala respons supaya ID sesi disimpan dalam penyemak imbas. Menyediakan akses kepada aplikasi tertakluk kepada
        
							
        
														
        
								
									Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs?
								
								Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs?
								Feb 24, 2023 pm	 07:33 PM
								
        Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs? Artikel berikut akan memperkenalkan kepada anda cara menggunakan nod untuk melaksanakan sistem log masuk tunggal. Saya harap ia akan membantu anda!
        
							
        
													
        

													
								See all articles