HTML格式修改有五种方法：一、手动重写与结构规范化；二、使用在线HTML美化工具；三、通过Node.js脚本批量转换；四、浏览器开发者工具实时修改；五、正则表达式辅助替换（需谨慎）。
如果您拥有一段原始HTML代码，但需要将其转换为符合特定要求的HTML格式（例如适配不同渲染环境、移除冗余标签、标准化缩进或转换为XHTML风格），则需采用针对性的结构调整手段。以下是实现HTML代码格式修改的多种方法：
一、手动重写与结构规范化
该方法适用于代码量较小、需精确控制语义与嵌套层级的场景。通过人工识别原始HTML中的非标准写法（如自闭合标签缺失斜杠、属性未加引号、大小写混用等），按目标格式规范逐项修正。
1、复制原始HTML代码至纯文本编辑器（如VS Code、Notepad++）。
2、将所有属性值统一用双引号包裹，例如将 class=header 改为 class="header"。
立即学习“前端免费学习笔记（深入）”；
3、为 img、br、hr 等空元素添加XML风格闭合斜杠，例如 <img src="a.jpg"> 改为 <img src="a.jpg" />。
4、将所有标签名和属性名转为小写，例如 <DIV ID="box"> 改为 <div id="box">。
5、使用编辑器的“格式化文档”功能（如VS Code中按Shift+Alt+F）统一缩进与换行。
二、使用在线HTML美化/格式化工具
该方法适合快速处理中等长度HTML代码，无需安装软件，依赖外部服务完成语法解析与格式重排。工具内部通常基于开源解析器（如htmlparser2或Cheerio）进行DOM重建与序列化输出。
1、访问可信的HTML格式化网站，例如 https://htmlformatter.com 或 https://www.freeformatter.com/html-formatter.html。
2、在输入框中粘贴原始HTML代码。
3、勾选目标选项：如 “Convert to XHTML”、“Lowercase tags and attributes”、“Add quotes to attributes”。
4、点击“Format HTML”按钮，等待页面返回格式化后代码。
5、全选并复制输出区域中的新HTML代码，替换原始内容。
三、通过Node.js脚本批量转换
该方法适用于需对多个HTML文件执行统一格式改造的工程化场景。借助cheerio库可模拟服务器端DOM操作，在不触发浏览器渲染的前提下完成结构清洗与序列化输出。
1、在项目目录中运行 npm init -y && npm install cheerio 安装依赖。
2、创建 format-html.js 文件，写入以下核心逻辑：
3、读取原始HTML文件内容，使用 cheerio.load(html, { xmlMode: false }) 加载为可操作对象。
4、调用 $.root().html() 获取标准化后的HTML字符串，自动修复标签闭合、引号缺失等问题。
5、将结果写入新文件，例如 fs.writeFileSync('output.html', formattedHtml)。
四、使用浏览器开发者工具实时修改
该方法适用于仅需临时验证格式变更效果、无需保存为文件的调试场景。利用浏览器内置的DOM编辑能力，可即时观察结构变化对渲染的影响。
1、新建空白HTML文件，用浏览器打开。
2、右键页面 → “检查”，切换至“Elements”面板。
3、在右侧HTML树中右键任意节点 → “Edit as HTML”。
4、粘贴待修改的原始HTML代码，编辑器会自动高亮语法错误并提示闭合缺失。
5、按Enter确认后，浏览器即刻应用修改并重新渲染，此时可右键 → “Copy” → “Copy outerHTML” 获取修正后代码。
五、正则表达式辅助替换（谨慎使用）
该方法仅适用于简单、规则明确的替换任务（如统一属性引号、补全自闭合标签），不推荐用于嵌套复杂或含内联脚本/样式的HTML，因正则无法正确解析HTML语法树，易引发误匹配。
1、在支持PCRE的编辑器（如Sublime Text、VS Code）中启用正则搜索模式（.* 按钮）。
2、查找未加引号的属性值：(\s+\w+=)[^"\'>]+，替换为 $1"$&"。
3、查找无斜杠的空标签：<(img|br|hr|input|meta|link)([^>]*)>，替换为 <$1$2 />。
4、执行全部替换前，务必先备份原始文件，并逐条验证替换结果是否符合预期。
