Pug 中的元标记 - HTML

在使用 Pug 时，我们可以使用元标记来方便地定义 HTML 元素。元标记是一种快速编写 HTML 的方式，通过与 Pug 的缩进规则结合使用，可以大大减少 HTML 代码的重复输入。

基本语法

元标记的基本语法如下：

tagname(attribute1=value1, attribute2=value2, ...)
  | tag content

其中，tagname 表示 HTML 元素的标签名，attribute1、attribute2 等表示元素的属性。标签名和属性之间的逗号不能省略，属性的值用等号和双引号括起来。另外，用管道符（|）可以表示标签的内容。

下面是一个例子，用元标记创建一个带有 id 和 class 属性的 div 标签：

div#myDiv.my-class
  | This is my Div.

这个元素将被编译为以下 HTML 代码：

<div id="myDiv" class="my-class">This is my Div.</div>

嵌套语法

使用元标记时，可以通过缩进来表示 HTML 元素的父子关系：

ul
  li Item 1
  li Item 2
  li Item 3

这个元素将被编译为以下 HTML 代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

代码片段

下面是一个包含元标记的代码片段：

div.container
  h1 Welcome to our website
  p Please feel free to browse our products.
  button.btn-primary(type='button') Shop now

这个代码片段将被编译为以下 HTML 代码：

<div class="container">
  <h1>Welcome to our website</h1>
  <p>Please feel free to browse our products.</p>
  <button class="btn-primary" type="button">Shop now</button>
</div>

总结

通过使用 Pug 的元标记，可以快速编写 HTML 代码，减少代码输入量，提高开发效率。同时，使用 Pug 的嵌套语法可以更加清晰地表达 HTML 元素的结构，便于维护和修改。