📄 HTML格式化
HTML Beautify · Minify · 标签缩进
HTML格式化深度解读
HTML的标签结构
HTML文档由标签构成，标签分「双标签」和「单标签(void)」两种。双标签有开始和结束，如
；void元素没有内容，如、
| 类型 | 标签 | 说明 |
|---|---|---|
| 双标签 | div span p h1-h6 a ul li table form | 有开始和结束标签 |
| 双标签 | head body html script style | 页面结构标签 |
| void标签 | br img input hr meta link | 无内容，无结束标签 |
| void标签 | source track wbr col embed | 媒体/补充标签 |
为什么标签之间的空白不影响渲染
浏览器在解析HTML时会忽略标签之间多余的空白和换行，把它们当作一个或多个空格处理。所以格式化时加的空格缩进不会改变页面的最终显示。
- 标签间换行和缩进不影响布局。
- pre 和 textarea 内的空白会被保留。
- CSS的white-space属性可以控制空白如何处理。
- 内联元素间的空格会影响布局，需要注意。
HTML压缩的取舍
- 压缩移除HTML注释，减小体积。
- 去除标签间多余空白和换行。
- 保留所有属性、文本内容、内联样式。
- script/style标签内的内容不能压缩（那是JS/CSS）。
- 压缩后建议配合gzip，进一步减小传输体积。
格式化在开发中的作用
- 快速检查标签是否配对闭合。
- 看清嵌套层级，避免结构错误导致样式错乱。
- 整理从模板引擎或框架输出的HTML。
- 配合审查工具检查标签语义是否合理。
- 阅读第三方页面结构时降低理解成本。