<tfoot id="yeqs2"></tfoot>
<ul id="yeqs2"><center id="yeqs2"></center></ul>
    • <strike id="yeqs2"></strike>
    <ul id="yeqs2"><sup id="yeqs2"></sup></ul>
    <\/body>\r\n<\/html><\/pre>jade uses strict indentation to distinguish the beginning and end of tags. The default is 2 spaces to indicate indentation. 
    <\/p>If we want to write a label with content, for example, if we want to write a title, we only need to add a space after the label word, and then follow the content. 
    <\/p>\n
    h1?this?is?a?title.\r\np?this?is?a?paragraph.<\/pre>The compilation result is: 
    <\/p>\n
     
    this is a title.<\/h1>
     
    this is a paragraph.<\/p> ;<\/p><\/blockquote> Sometimes, we will need to output some text in a special format or to improve the readability of the code, we need to display the following effect: 
    <\/p>
    < ;p><\/p>\n
     1. 001
     2. 002
     3. 003
     4. 004
    <\/p>
    <\/p>\n<\/blockquote>Then what we should do in jade How to write it? Here jade provides us with two methods. The first is to add a | and a space in front of each line: 
    <\/p>\n
    p\r\n?|?1.?001\r\n?|?2.?002\r\n?|?3.?003\r\n?|?4.?004<\/pre> The second method is: follow the label name with a . Number. Then the content under this tag will be parsed into a code segment by jade: 
    <\/p>\n
    p.\r\n?1.?001\r\n?2.?002\r\n?3.?003\r\n?4.?004<\/pre>Now some students are confused and confused. What is the difference between the two methods? Here we have to talk about tag mixing. If we have such a requirement, we need to add a strong tag after 1 in the above code. 
    <\/p>First of all, let’s talk about the first case, our writing method: 
    <\/p>\n
    p\r\n?|?1.?001\r\n?strong?aaa\r\n?|?2.?002\r\n?|?3.?003\r\n?|?4.?004<\/pre> If it is the second writing method, we need to write it like this: 
    <\/p>\n
    p.\r\n?1.?001\r\n?aaa<\/strong>\r\n?2.?002\r\n?3.?003\r\n?4.?004<\/pre>The compilation result is as follows ：
    <\/p>\n
     1. 001
     aaa<\/strong>
     2. 002
     3. 003
     4. 004 
    <\/p>
    <\/p>\n<\/blockquote>\n
    ##3. Tag’s attribute and attribute value<\/a><\/strong>##h1 p and other tags, we usually write id & class attributes for them, so how should this be written in jade? The same syntax as zen coding, we only need to write like this: <\/span><\/p>\n
    h1#id.class?this?is?a?title.\r\np#j-text.text?this?is?a?paragraph.<\/pre>The compilation result is: 
    <\/p>\n
    this is a title.<\/h1><\/p>
    this is a paragraph.<\/p>
    <\/blockquote>\n
    等等，那我要是想添加多個 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 的語法里面，只有 p 標簽?zāi)軌蚴÷圆粚?<\/p>\n
    說完了 id 和 class，我們再來說一下標簽其他的屬性應(yīng)該怎么添加。jade 里添加其他屬性和值的語法也和 zen coding 類似，我們需要在標簽后面加上小括號()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個屬性，中間以逗號進行分割。<\/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
    說來說去還是這兩個屬性，煩了？那我們換一個吧：<\/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
    那么問題就來了，如果我們要寫一個單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：<\/p>\n
    input(type=\"checkbox\",?name=\"all\",?checked,?value=\"全選\")<\/pre>\n
    編譯結(jié)果為：<\/p>\n
    <\/p><\/blockquote>\n
    相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！<\/p>\n
    推薦閱讀：<\/p>\n
    nodejs實現(xiàn)動態(tài)html步驟詳解<\/a>
    <\/p>\n
    node 命令方式啟動修改端口步驟詳解<\/a>
    <\/p>"}	
	







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

    
    

    

	
	
    
		
    
			
    
							
    
					
    
						Home
						
												Web Front-end
						
												JS  Tutorial
						
						Detailed explanation of the use of Jade tags in the node front-end template engine
					
    
					
					
    
						
    
							
    Detailed explanation of the use of Jade tags in the node front-end template engine
    
							
							May 22, 2018 am	 10:27 AM
															
    
																			node
																			engine
																	
    
														
						
    
					
    
					
    
					
    
						
    
						
						
						

					
    This time I will bring you node front-endtemplate engineDetailed explanation of the use of Jade tags, nodefront-end templateNotesWhat are the precautions for using Jade tags in the engine, as follows This is a practical case, let’s take a look at it. 
    

    1. Document declaration
    

    #When we start writing an html page, we must first write the DOCTYPE document declaration. Now it is usually the case Next we all use the HTML5 document declaration method, so how should we write it in jade? 
    

    There are two ways to write document declarations in jade: 
    

      

    1. We can write doctype html directly in the jade file
      2. 

    2.  
      jade provides us with a simple writing method, (but it seems that jade does not recommend this method in the new version after the upgrade -_-||| )
      

      3. 

    

    Of course , jade also supports other types of document declarations by default, just use doctype to follow the following options. By default, jade supports: 
    

    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 is not case-sensitive, so the following two have the same effect: 
    

    doctype?Default
doctype?default
    

    For example: if we want to write an XHTML 1.0 Strict document declaration , you can write like this: 
    

    doctype?strict
    

    The compilation result is as follows: 
    

    Copy code The code is as follows:
    

    

    ##2、 Tag
    The tag in jade is written very simply, it is just one word. 
    

    doctype?html
html
?head
?title
?body
    The above code will be compiled into:
    

    <!DOCTYPE html>
<html>
?<head>
?<title></title>
?</head>
?<body></body>
</html>
    jade uses strict indentation to distinguish the beginning and end of tags. The default is 2 spaces to indicate indentation. 
    If we want to write a label with content, for example, if we want to write a title, we only need to add a space after the label word, and then follow the content. 
    

    h1?this?is?a?title.
p?this?is?a?paragraph.
    The compilation result is: 
    

     
    this is a title.
     
    this is a paragraph.
     Sometimes, we will need to output some text in a special format or to improve the readability of the code, we need to display the following effect: 
    < ;p>
    

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

    

    Then what we should do in jade How to write it? Here jade provides us with two methods. The first is to add a | and a space in front of each line: 
    

    p
?|?1.?001
?|?2.?002
?|?3.?003
?|?4.?004
     The second method is: follow the label name with a . Number. Then the content under this tag will be parsed into a code segment by jade: 
    

    p.
?1.?001
?2.?002
?3.?003
?4.?004
    Now some students are confused and confused. What is the difference between the two methods? Here we have to talk about tag mixing. If we have such a requirement, we need to add a strong tag after 1 in the above code. 
    First of all, let’s talk about the first case, our writing method: 
    

    p
?|?1.?001
?strong?aaa
?|?2.?002
?|?3.?003
?|?4.?004
     If it is the second writing method, we need to write it like this: 
    

    p.
?1.?001
?<strong>aaa</strong>
?2.?002
?3.?003
?4.?004
    The compilation result is as follows ：
    

     1. 001
     aaa
     2. 002
     3. 003
     4. 004 

    

    

    ##3. Tag’s attribute and attribute value##h1 p and other tags, we usually write id & class attributes for them, so how should this be written in jade? The same syntax as zen coding, we only need to write like this: 
    

    h1#id.class?this?is?a?title.
p#j-text.text?this?is?a?paragraph.
    The compilation result is: 
    

    this is a title.
    this is a paragraph.
    

    等等，那我要是想添加多個 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 的語法里面，只有 p 標簽?zāi)軌蚴÷圆粚?
    

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

    比如上面的 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.
    

    說來說去還是這兩個屬性，煩了？那我們換一個吧：
    

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

    編譯結(jié)果為：
    

    index.html
    

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

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

    編譯結(jié)果為：
    

    

    相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！
    

    推薦閱讀：
    

    nodejs實現(xiàn)動態(tài)html步驟詳解
    

    node 命令方式啟動修改端口步驟詳解
    The above is the detailed content of Detailed explanation of the use of Jade tags in the node front-end template engine. For more information, please follow other related articles on the PHP Chinese website!
    


						
    
					
    
					
    
						
    Statement of this Website
    
						
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    
					
    
				
    

				



				
    


				
    


					


											
    
							
    
								
    
									
									
    Hot AI Tools
    
								
    
								
    
																		
    
											
												Undress AI Tool
											
											
    
												
													
    Undress AI Tool
    
												    
												
    Undress images for free
    
											
    
										
    
																		
    
											
												Undresser.AI Undress
											
											
    
												
													
    Undresser.AI Undress
    
												    
												
    AI-powered app for creating realistic nude photos
    
											
    
										
    
																		
    
											
												AI Clothes Remover
											
											
    
												
													
    AI Clothes Remover
    
												    
												
    Online AI tool for removing clothes from photos.
    
											
    
										
    
																		
    
											
												Clothoff.io
											
											
    
												
													
    Clothoff.io
    
												    
												
    AI clothes remover
    
											
    
										
    
																		
    
											
												Video Face Swap
											
											
    
												
													
    Video Face Swap
    
												    
												
    Swap faces in any video effortlessly with our completely free AI face swap tool!
    
											
    
										
    
																
    
								
							
    
						
    
					


					


											
    
							
    
								
    
									
									
    Hot Tools
    
								
    
								
    
																		
    
											
												Notepad++7.3.1
											
											
    
												
													
    Notepad++7.3.1
    
												    
												
    Easy-to-use and free code editor
    
											
    
										
    
																			
    
											
												SublimeText3 Chinese version
											
											
    
												
													
    SublimeText3 Chinese version
    
												    
												
    Chinese version, very easy to use
    
											
    
										
    
																			
    
											
												Zend Studio 13.0.1
											
											
    
												
													
    Zend Studio 13.0.1
    
												    
												
    Powerful PHP integrated development environment
    
											
    
										
    
																			
    
											
												Dreamweaver CS6
											
											
    
												
													
    Dreamweaver CS6
    
												    
												
    Visual web development tools
    
											
    
										
    
																			
    
											
												SublimeText3 Mac version
											
											
    
												
													
    SublimeText3 Mac version
    
												    
												
    God-level code editing software (SublimeText3)
    
											
    
										
    
																	
    
								
							
    
						
    
										

					
					
				
    
			
    
							
    
					
    
						
						
    

													
    
								
									How to delete node in nvm
								
								How to delete node in nvm
								Dec 29, 2022 am	 10:07 AM
								
    How to delete node with nvm: 1. Download "nvm-setup.zip" and install it on the C drive; 2. Configure environment variables and check the version number through the "nvm -v" command; 3. Use the "nvm install" command Install node; 4. Delete the installed node through the "nvm uninstall" command.
    
							
    
														
    
								
									Pi Node Teaching: What is a Pi Node? How to install and set up Pi Node?
								
								Pi Node Teaching: What is a Pi Node? How to install and set up Pi Node?
								Mar 05, 2025 pm	 05:57 PM
								
    Detailed explanation and installation guide for PiNetwork nodes This article will introduce the PiNetwork ecosystem in detail - Pi nodes, a key role in the PiNetwork ecosystem, and provide complete steps for installation and configuration. After the launch of the PiNetwork blockchain test network, Pi nodes have become an important part of many pioneers actively participating in the testing, preparing for the upcoming main network release. If you don’t know PiNetwork yet, please refer to what is Picoin? What is the price for listing? Pi usage, mining and security analysis. What is PiNetwork? The PiNetwork project started in 2019 and owns its exclusive cryptocurrency Pi Coin. The project aims to create a one that everyone can participate
    
							
    
														
    
								
									How to use express to handle file upload in node project
								
								How to use express to handle file upload in node project
								Mar 28, 2023 pm	 07:28 PM
								
    How to handle file upload? The following article will introduce to you how to use express to handle file uploads in the node project. I hope it will be helpful to you!
    
							
    
														
    
								
									Let's talk about how to use pkg to package Node.js projects into executable files.
								
								Let's talk about how to use pkg to package Node.js projects into executable files.
								Dec 02, 2022 pm	 09:06 PM
								
    How to package nodejs executable file with pkg? The following article will introduce to you how to use pkg to package a Node project into an executable file. I hope it will be helpful to you!
    
							
    
														
    
								
									An in-depth analysis of Node's process management tool 'pm2”
								
								An in-depth analysis of Node's process management tool 'pm2”
								Apr 03, 2023 pm	 06:02 PM
								
    This article will share with you Node's process management tool "pm2", and talk about why pm2 is needed, how to install and use pm2, I hope it will be helpful to everyone!
    
							
    
														
    
								
									Token-based authentication with Angular and Node
								
								Token-based authentication with Angular and Node
								Sep 01, 2023 pm	 02:01 PM
								
    Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to
    
							
    
														
    
								
									What to do if npm node gyp fails
								
								What to do if npm node gyp fails
								Dec 29, 2022 pm	 02:42 PM
								
    npm node gyp fails because "node-gyp.js" does not match the version of "Node.js". The solution is: 1. Clear the node cache through "npm cache clean -f"; 2. Through "npm install -g n" Install the n module; 3. Install the "node v12.21.0" version through the "n v12.21.0" command.
    
							
    
														
    
								
									What is a single sign-on system? How to implement it using nodejs?
								
								What is a single sign-on system? How to implement it using nodejs?
								Feb 24, 2023 pm	 07:33 PM
								
    What is a single sign-on system? How to implement it using nodejs? The following article will introduce to you how to use node to implement a single sign-on system. I hope it will be helpful to you!
    
							
    
													
    

													
								See all articles