学习 Jade_html/css_WEB-ITnose-HTML Tutorial-php.cn

学习 Jade_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:52:41

Original

1722 people have browsed it

优秀的模板引擎 Jade ，超强可读性，提升开发效率。

为什么需要 Jade ？

减少写代码，提高可读性，提高生活质量。。。

这一层一层的。。。

看 jade 的这个拼接。

Jade 优点：

超强的可读性
灵活的缩进
块扩展
代码默认经过编码处理以增强安全性
编译及运行时的上下文错误报告
命令行的编译支持
HTML5 模式
可选的内存缓存
利用过滤器解析树的处理

后面说的什么鬼其实我也不懂，但是最大优点: 超强的可读性 ， 提升开发效率 。

需要 Node.js 环境，没有装的可以参考 Mac 上配置 Node.js 环境

安装 Jade

# 通过 npm 安装 jade$ npm install jade -g

Copy after login

开始使用

创建 index.jade 文件

index.jade

doctype htmlhtml  head    title hanks.xyz  body    p welcome to hanks.xyz

Copy after login

就是这么简单，下面开始将 jade 文件渲染为 html 文件

$ jade index.jade  rendered index.html$ cat index.html<!DOCTYPE html><html><head><title>hanks.xyz</title></head><body><p>welcome to hanks.xyz</p></body></html>%

Copy after login

可以看到渲染出来的 index.html 文件是经过压缩过的。我们可以加速 -P 参数格式化渲染的 index.html

$ jade -P index.jade

Copy after login

html:

<!DOCTYPE html><html>  <head>    <title>hanks.xyz</title>  </head>  <body>    <p>welcome to hanks.xyz</p>  </body></html>

Copy after login

还可以加上 -w 参数监听 jade 文件的变化，自动渲染刷新 html 文件

$ jade -P -w index.jade

Copy after login

基本语法

class 和 id

jade:

h1.titleh2#title#t_id#t_id.title

Copy after login

html:

<h1 class="title"></h1><h2 id="title"></h2><div id="t_id"></div><div id="t_id" class="title"></div>

Copy after login

### 属性

jade:

a(herf="http://hanks.xyz") hanks.xyzinput#username(name="username",type="text",vaule="jade")

Copy after login

html:

<a herf="http://hanks.xyz">hanks.xyz</a><input id="username" name="username" type="text" vaule="jade">

Copy after login

Plain Text

jade:

p.  1.aa  2.vv  3.cc

Copy after login

html:

<p>  1.aa  2.vv  3.cc</p>

Copy after login

注意 p 标签后面紧跟着一个 .

jade:

p.  1.aa<strong>AA</strong>  2.vv  3.ccp  | 1.aa strong AA | 2.vv | 3.cc

Copy after login

html:

<p>  1.aa<strong>AA</strong>  2.vv  3.cc</p><p>1.aa<strong>AA</strong>2.vv  3.cc</p>

Copy after login

注释

jade:

div  // h1 单行注释，输出到源文件  //- h3 非缓冲注释  //    这是一个    多行注释

Copy after login

html:

<div>  <!-- h1 单行注释，输出到源文件-->  <!-- 这是一个 多行注释 --></div>

Copy after login

jade 使用双斜线 // 进行单行注释；

如果不想让注释的内容显示到生成的 html 代码中，可以在双斜线 // 后跟一个单横线 - ；

双斜线 // 后面的注释内容换行并缩进可进行块级注释

参考文章：

Jade中文教程

慕课网视频-带你学习Jade模板引擎

文章来自：http://hanks.xyz

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

学习 Jade_html/css_WEB-ITnose

为什么需要 Jade ？

安装 Jade

开始使用

基本语法

标签

class 和 id

Plain Text

注释