jade模板之二，标签和属性

最新推荐文章于 2021-05-30 19:04:11 发布
最新推荐文章于 2021-05-30 19:04:11 发布
阅读量1.4k 收藏
点赞数
分类专栏： Node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rcjjian/article/details/72810981
版权 
doctype html
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
head
   title I'm a Jade
meta(charset="UTF-8")
body
   style.
      body {color:#ff6600}
   script.
      console.log('这是一个很粗暴的js代码');
   h1 HelloWorld Jade!!
      div#id.classname  属性设置
   #id3.class3(name="name")
   div(id='id2' class='classname2')
      select  请选择
         option 男
         option(checked) 女
   p 我是段落
   p.
      在p标签紧跟 . 换行后可看作段落
   p.
      jade也是可以直接使用 html标签的
      <a href="#">超链接</a>
   p
      |若不嵌套html标签则使用
      a(href="#")
         |超链接

</html>




上面这段jade
 

普通写法：每个标签的属性使用 () 包起来，属性键值对，写法与html一样
 

特殊写法：如 # 和 . 这类特殊符号 分别表示 id 和 class
 

段落嵌套一些html标签 特殊符号 |
 


                

        

        

    




    

      

        

            

              
                
                  JadonYuen
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jade入门系列之标签和注释

				
			

			

				

					Focus-Fe
				

				

					06-14
					
					754
					
				

			

		

		

			
				

 
     1、jade中标签如何解析：
 

html

     解析后：
 
&lt;html&gt;&lt;/html&gt;
 

div#wrap  或者 #wrap

     解析后：
 
&lt;div id="wrap"&gt;&lt;/div&gt;
 
 

div.wrap  或者.wrap

      解析后：
 
&lt;di...

			
		

	



                

              
                



	

		

			

				
					
Jade之标签

				
			

			

				

					weixin_30338481的博客
				

				

					11-22
					
					67
					
				

			

		

		

			
				
一种简洁的便于书写html的模板语言。
支持所有的html(5)标签和正常的javascript表达式
标签
相比于html，jade的标签只需一个标签名即可，不需要关闭标签，也不需要尖括号。
对于需要嵌套的标签，利用缩进来控制，所以jade对缩进的要求十分的严格。
jade：
ul
  li Item A
  li Item B
  li Item C
html：
<ul>...

			
		

	



                


  
              

                


	

		

			

				
					
jade成段的文本和标签

				
			

			

				

					weixin_30901729的博客
				

				

					07-03
					
					178
					
				

			

		

		

			
				
如果文本是大段的文本怎么写呢？因为文本会换行，比如有多行的文本，标签，文本傻傻分不清楚


p 1234567890
=>
<p>1234567890</p>


如果需要换行，可以这么写，在p后面加个.紧紧贴着p标签,然后另起一行


p.
    12
    34
    56
    78
    90
=>
...

			
		

	





	

		

			

				
					
jade模板-常用标签内容

				
			

			

				

					微度
				

				

					09-30
					
					1063
					
				

			

		

		

			
				
Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。doctype html
html(lang="zh-cn")
    head
        meta(http-equiv="Content-Type",content="text/html",charset='UTF-8')
        meta(http-eq

			
		

	



		

			
		



	

		

			

				
					
Jade模板引擎教程

					
热门推荐

				
			

			

				

					fendo
				

				

					12-11
					
					1万+
					
				

			

		

		

			
				
一、简介


jade是超高性能的node JavaScript模板引擎，有着非常强大的API和大量杰出的特性。它主要针对node的服务端。


下面是它的一些特性

● 客户端支持
● 代码高可读
● 灵活的缩进
● 块展开
● 混合
● 静态包含
● 属性改写
● 安全，默认代码是转义的
● 运行时和编译时上下文错误报告
● 命令行下编译jade模板
● h

			
		

	





	

		

			

				
					
node前端模板引擎Jade之标签的基本写法

				
			

			

				

					08-27
				

			

		

		

			
				
 Jade中的标签属性也很直观，直接以键值对的形式表示：   ```jade  div(id="container", class="box")  input(type="text", name="username", placeholder="Enter your username")  ```   这将生成：   ```html  ...

			
		

	





	

		

			

				
					
jade模板引擎demo

				
			

			

				

					12-11
				

			

		

		

			
				
在本示例"jade模板引擎demo"中，我们将会探讨Jade如何通过其特有的语法来简化网页开发，以及如何在实际项目中使用它。...通过"jade模板引擎demo"，我们可以学习并掌握这一技术，从而在Web开发中提升效率和代码质量。

			
		

	





	

		

			

				
					
node前端开发模板引擎Jade的入门

				
			

			

				

					08-27
				

			

		

		

			
				
其中，Jade（现更名为Pug）是一款非常流行的模板引擎，以其简洁的语法和高效的编译速度受到青睐。本文将带你入门Jade，了解其基本概念、安装与使用方法。  Jade是一种强大的模板语言，它简化了HTML的编写，让代码...

			
		

	





	

		

			

				
					
vue 使用Jade模板写html,stylus写css的方法

				
			

			

				

					11-30
				

			

		

		

			
				
在HTML中，你需要使用大量的标签闭合和属性赋值，而在Jade中，这些可以更加简洁地表示。例如，一个简单的HTML模板可能如下所示：  ```html     测试标题  <p><span class='text'>这是一条测试的demo文本</span><i ...

			
		

	





	

		

			

				
					
基于Node.js模板引擎教程-jade速学与实战1

				
			

			

				

					01-02
				

			

		

		

			
				
环境准备： 全局安装jade: npm install jade -g 初始化项目package.json: npm init –yes ...2，标签的属性可以采用圆括号 3，如果标签有内容，可以直接写在标签的后面 然后在命令行用 jade -P inde

			
		

	





	

		

			

				
					
处理 JADE Script 内嵌问题

				
			

			

				

					斗战圣Q
				

				

					03-26
					
					3408
					
				

			

		

		

			
				
Express中使用了JADE模板引擎 
在jade模板中内嵌script语句，使用如下方法script.
  var a;
  if (condition) {
    a = #{data_1}
  } else {
    a = #{data_2}
  }

			
		

	





	

		

			

				
					
jade入门

				
			

			

				

					xuxu_qkz的博客
				

				

					05-03
					
					2448
					
				

			

		

		

			
				
jade是html的一种变体写法
doctype html
    html(lang="en")
        head
            title= pageTitle
            script(type='text/javascript').
                if (foo) {
                bar(1 + 5)

			
		

	





	

		

			

				
					
前端学习——Pug模板

				
			

			

				

					m0_37829710的博客
				

				

					05-18
					
					2238
					
				

			

		

		

			
				
1.类名和ID名  a.button   a(class="button")  a#button  a(id = "button")  编译后：&lt;a class="button"&gt;&lt;/a&gt;               &lt;a id="button"&gt;&lt;/a&gt;  如果前面没指定标签名，则默认div2.属性  用（）包裹，属

			
		

	





	

		

			

				
					
jade安装及基本语法使用

				
			

			

				

					weixin_30675247的博客
				

				

					09-06
					
					640
					
				

			

		

		

			
				
一、cmd安装jade：
cnpm install -g jade
//cnom install jade -g与上面使用效果一致。
二、jade命令行中使用：
使用cmd：

jade index.jade  //编译成--无格式html文件
jade -P index.jade //编译成--有格式的html文件
jade -P -w inde.jade //编译成-...

			
		

	





	

		

			

				
					
jade 学习笔记

				
			

			

				

					Johnson的专栏
				

				

					08-12
					
					3115
					
				

			

		

		

			
				
特别注意: 
缩进要么用空格,要么用tab,不能同时用两种 
子元素和父元素要有缩进 
标签和文本之间要有空格doctype html 
html 
    head 
      title this is title 
    bodysection
div
p
ul
strong
hr
    br加classh1.className1.className2h1#idNameh1.classN

			
		

	





	

		

			

				
					
jade的基本使用方法

				
			

			

				

					灵魂画师牧码
				

				

					06-08
					
					8295
					
				

			

		

		

			
				
jade的基本使用方法css如何添加如图所示 
标签换行的处理如图所示 
注释如图所示 
jade转义jade循环语句jade条件语句mixin 
欢迎加入中科院开源软件自习室：631696396

			
		

	





	

		

			

				
					
jade的使用

				
			

			

				

					黎先生的博客
				

				

					01-28
					
					1688
					
				

			

		

		

			
				
在 Express 中调用 jade 模板引擎jade 变量调用if 判断循环Case 选择在模板中调用其他语言可重用的 jade 块 (Mixins)模板包含 (Includes)模板引用 (Extends)
在 Express 中调用 jade 模板引擎
var express = require('express');
var http = require('http');
var ap

			
		

	





	

		

			

				
					
html抓取文章,Node.js+jade抓取博客所有文章生成静态html文件的实例

				
			

			

				

					weixin_29563497的博客
				

				

					05-30
					
					143
					
				

			

		

		

			
				
这篇文章，我们就把上文中采集到的所有文章列表的信息整理一下，开始采集文章并且生成静态html文件了.先看下我的采集效果，我的博客目前77篇文章，1分钟不到就全部采集生成完毕了，这里我截了部分的图片，文件名用文章的id生成的，生成的文章，我写了一个简单的静态模板，所有的文章都是根据这个模板生成的.项目结构:好了，接下来，我们就来讲解下，这篇文章主要实现的功能：1，抓取文章，主要抓取文章的标题，内容，...

			
		

	





	

		

			

				
					
Jade：Node.js HTML模板引擎的高性能选择

				
			

			

				

					
				

			

		

		

			
				
 - **动态与静态标签**：Jade允许混合使用动态内容和静态标签，增强模板灵活性。  3. **扩展性**:  - **过滤器**：Jade支持自定义过滤器（ASTFilters），可以对模板树进行深度定制。  - **语言集成**：除了Node.js，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值