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

Jade是一种node.js前端模板引擎，其核心特点是通过缩进来代替标记，减少了多余标记的输入，使模板文件更加简洁易读。下面将详细讲解Jade标签的基本写法。

在Jade模板中，元素的标签名不需要使用尖角号和结束标记，而是使用缩进的方式来表示嵌套。例如，以下代码用Jade来表示一个div元素:

div

这里的div就代表了一个<div>标签。

在实际开发中，我们还需要给标签加上属性。下面以div元素为例，介绍Jade中如何给标签添加属性：

div(className="wrapper")

上述代码表示创建了一个class名为wrapper的<div>元素。这里的className就代表了class属性，类似地，还有id和其他常见的属性。

除了给标签添加属性外，我们还可以使用文本内容。在Jade模板中，文本内容也可以使用缩进的方式来表示。例如，以下代码表示一个含有文本的div元素：

div
  | 这里是div元素的文本内容

在上述代码中，|符号用于表示下一行是文本内容。

Jade还支持插值表达式，可以将Javascript代码嵌入到模板中。例如，以下代码演示如何在Jade模板中使用插值表达式输出Javascript变量：

div
  p= "这是一个Jade模板"

在上述代码中，p=表示输出变量。在这个例子中，输出的变量是一个字符串。

接下来，我们用两个具体的实例继续说明Jade的标签写法。

第一个例子：创建一个表格

以下是一个使用Jade创建表格的例子：

table
  thead
    tr
      th ID
      th Name
      th Age
  tbody
    each val, index in userList
      tr
        td= val.id
        td= val.name
        td= val.age

在上述代码中，我们使用table来创建表格元素，它包含thead和tbody两个子元素。表格的列使用th标签实现。

在thead中，我们使用tr标签来创建表格的第一行，其中包含三列标题。

在tbody中部分，则使用了each语句来循环生成用户列表的行，其中each val, index in userList表示在userList数组中循环遍历取出每个元素的值和索引。

在循环结构中，我们可以使用val.id、val.name、val.age等三个属性，用于填充表格的内容。

第二个例子：创建一个简单的表单

以下是使用Jade创建表单的示例：

form(action="/signup", method="post")
  label(for="username") 用户名
  input(type="text" id="username" name="username")
  label(for="password") 密码
  input(type="password" id="password" name="password")
  input(type="submit" value="登录")

在上述代码中，我们使用 input 和 label 标签来创建表单。其中 input 标签被用来创建表单的各种输入控件，比如文本框、单选框等。而label则用来创建标签，用于描述表单元素。在标签中，使用 for 属性来指定相应的元素。

在以上示例中，我们还演示了如何添加表单的提交地址和请求方式：

• form(action="/signup", method="post") 表示表单的提交地址为 /signup，提交方式为 POST。
• input(type="submit" value="登录") 表示提交按钮，按钮的文字为 “登录”。