PugJS 基本标签
在本文中，我们将了解 pug 基本标签，并了解它们是如何编译成 HTML 代码的。
项目设置：
第 1 步：通过运行以下命令安装 pug。 -g 用于全局安装，它是可选的。
npm install pug-cli -g
第 2 步：打开项目文件夹代码编辑器。在项目根目录下创建一个 index.pug 文件和一个 index.html 文件。在 html 中，创建一个 index.html 文件。我们的目录结构现在看起来像这样：
项目结构
第 3 步：现在我们将在 index.pug 文件中编写 pug 模板代码，并在 index.html 文件中查看它的 HTML 输出。要在文件保存时将 pug 模板代码自动重新编译为 HTML，请在终端中运行以下命令：
pug -w ./ -o ./html -P“-w ./”表示观察当前目录中pug文件的任何变化，“-o ./html -P”表示将输出保存在当前目录的html文件中并漂亮地打印出来（正确格式化）。运行命令后，您应该得到以下信息：
现在让我们了解一下 PugJS 中的标签，看看对应的编译后的 HTML。
- Pug 使用相同的 HTML 标记名称集，但它没有开始和结束标记。它使用缩进来嵌套 HTML 标签。一个样板的哈巴狗骨架结构和它编译的 HTML 看起来像：
doctype html html head title body h1 br/ p
- 为了在 HTML 标签内呈现内容，我们给出一个空格字符并写入该标签的内容。例子：
doctype html html head title GeeksForGeeks body h1 Welcome to GeeksForGeeksGeeksForGeeks Welcome to GeeksForGeeks
- 对于多行内容，在段落标签之后添加一个“.” （点），然后在下一行，用制表符空格缩进。它被称为标签插值。例子：
doctype html html head title GeeksForGeeks body p This is a paragraph which is spread across multiple linesGeeksForGeeks This is a paragraph which is spread across multiple lines
- 为了节省空间，pug 为嵌套标签提供了内联语法。它被称为块扩展。例子：
doctype html html head title GeeksForGeeks body a: imgGeeksForGeeks