HTML 转 PUG 是将传统的 HTML 代码转换为 PUG 模板语言的过程。PUG 是一种简洁的 HTML 模板引擎，它通过缩进来表示嵌套关系，省去了许多冗余的 HTML 标签。
1. HTML 转 PUG 示例
假设你有以下的 HTML 内容：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to PUG Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of converting HTML to PUG.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
转换成 PUG 后，它将变成：
pug
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title HTML to PUG Example
body
h1 Welcome to My Website
p This is an example of converting HTML to PUG.
ul
li Item 1
li Item 2
li Item 3
2. 如何手动将 HTML 转换为 PUG
PUG 的语法非常简洁，你可以遵循以下规则将 HTML 转换为 PUG：
1. 省略标签的闭合部分
PUG 使用缩进来表示嵌套，而不需要显式的关闭标签。HTML 中的 <ul>, <li>, <h1>, <p> 等标签，在 PUG 中不需要显式闭合。
2. 使用缩进表示层级关系
在 PUG 中，所有嵌套的元素都通过缩进来表示层级结构，通常每层缩进使用 2 个空格或 1 个制表符。
3. HTML 属性语法
PUG 中的 HTML 属性用括号表示，属性之间用逗号分隔。例如，<meta charset="UTF-8"> 转换为 meta(charset="UTF-8")。
3. PUG 转换规则
HTML 元素：PUG 中直接省略 <html>, <head>, <body> 等标签，使用缩进和简洁的语法来表示层次。
属性：HTML 属性转为 key="value" 格式，放在括号内。
文本内容：直接写在标签下方。