无需登录 数据私有 本地保存

HTML转Pug工具 - 在线HTML代码转简洁模板

开发工具 转换工具 HTML Pug 转换
97
0
0
0
「Pug」：原名Jade，是一个高性能的HTML模板引擎，使用缩进替代尖括号来定义HTML结构，代码量可减少约40%。缩进（Indentation）：Pug使用空格或制表符来表示嵌套层级，替代HTML中的开闭标签对，每级缩进两个空格。自闭合标签（Self-closing Tag）：不需要结束标签的HTML元素，如「br」「hr」「img」「input」「meta」「link」等，在Pug中直接写标签名即可。布尔属性（Boolean Attribute）：值为true或false的属性，如「disabled」「checked」「readonly」，在Pug中直接写属性名，无需赋值。类选择器（Class Selector）：通过「.className」语法快速为元素添加CSS类名，替代class属性的冗长写法。ID选择器（ID Selector）：通过「#idName」语法快速为元素设置唯一标识符，替代id属性的写法。管道符号（Pipe）：Pug中使用「|」字符来引导纯文本内容输出，确保文本不被解析为标签。属性（Attribute）：元素的键值对配置信息，在Pug中用圆括号包裹，多个属性用逗号分隔。混合（Mixin）：Pug中的可复用代码块，使用mixin关键字定义，通过加号加混合名调用，类似函数概念。模板继承（Template Inheritance）：Pug支持通过extends关键字和block块实现模板的继承与覆盖，方便构建页面布局体系。块注释（Block Comment）：Pug中使用「//-」来添加不会输出到HTML中的注释，仅保留在源码中供开发者阅读参考。
🔧 相关工具