pug模板的使用及终端

今天学习到了pug的使用方法,下面我为大家介绍一个例子

doctype html

html

head

meta(charset="utf-8")

title 这是pug的练习

link(rel="",href="")

body

-h1 今天学了pug

div(class="box")

div#div1

p

h2 哈哈

strong 你好

//创建一个pug

//打开终端 进入当pug文件目录

//1.结构靠缩进

//2.属性用()

//3.文字内容用空格

//pug -P 文件名:在终端文件目录下,把pug格式改成HTML格式,不换行

//pug -P -w 文件名:自动生成文件,在终端文件目录下,把pug格式改成HTML格式,换行

转换后结果如下:



//include header.pug:包含header.pug内容

//block source :模块(可以重新写)

//extends index.pug:继承index.pug

//pug -P 文件名 -o 文件名 把pug格式转换成HTML格式,并把它放在指定目录下

,以上就是今天学习到的知识哦,希望能对你有所帮助,如果有错误的地方也请指出来。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Pug是一种模板引擎,可用于生成HTML。您可以使用Pug轻松地创建登录注册页面。以下是一个示例代码: ``` doctype html html(lang="en") head title Login/Register Page style. body { background-color: #f2f2f2; font-family: Arial, Helvetica, sans-serif; } .container { background-color: #fff; width: 500px; margin: 0 auto; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } h1 { text-align: center; margin-bottom: 30px; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } body .container h1 Login/Register form(action="/login" method="post") label(for="username") Username input(type="text" placeholder="Enter Username" name="username" required) label(for="password") Password input(type="password" placeholder="Enter Password" name="password" required) button(type="submit") Login form(action="/register" method="post") label(for="username") Username input(type="text" placeholder="Enter Username" name="username" required) label(for="password") Password input(type="password" placeholder="Enter Password" name="password" required) label(for="password") Confirm Password input(type="password" placeholder="Confirm Password" name="confirm_password" required) button(type="submit") Register ``` 这段代码使用Pug语法构建了一个登录注册页面。其中,使用了HTML元素和Pug独有的缩进语法。在这个示例中,我们使用了两个表单来实现登录和注册功能。在每个表单中,我们使用了`label`元素和`input`元素来实现表单输入。我们还使用了CSS样式来美化页面。 如果您有任何问题或需要更多帮助,请告诉我。我会尽力回答您的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值