零基础应优先使用在线工具或VS Code快捷键格式化HTML。推荐codebeautify.org/html-beautify等网站一键美化，或VS Code中按Shift+Alt+F（Win/Linux）/Shift+Option+F（Mac）；失败主因是HTML非法：script内含JSX、属性缺引号、混入服务端模板语法。
DOMParser 不是你零基础该碰的起点。直接上在线工具或编辑器快捷键，才是真·零基础路径。
用在线工具一键“变整齐”最省事
别装插件、不配配置、不用记命令——复制粘贴就能出结果。
- 打开 codebeautify.org/html-beautify 或 freeformatter.com/html-formatter
- 把你的 HTML 粘进去（哪怕只有
<div><p>hello</p></div>这种片段也行） - 点 “Beautify” 或 “Format”，立刻看到缩进+换行+对齐的版本
- 检查一下
<script>和<pre>里的内容没被乱动——如果动了，说明你粘的是非法 HTML（比如缺引号、标签没闭合）
VS Code 里按个键就搞定（免费且常用）
如果你已经用 VS Code 写代码，根本不用额外装东西：它自带 HTML 格式化器，虽然弱一点，但够零基础用。
- 确保文件后缀是
.html（不是.txt或没后缀） - 光标放在代码里，按
Shift+Alt+F（Windows/Linux）或Shift+Option+F（Mac） - 如果没反应，右键 → “Format Document With…” → 选 “Default Formatter”
- 注意：它不会修复
<img src=logo.jpg>这种缺引号的写法，也不会处理 Vue 的<template>—— 它只认标准 HTML 片段
格式化失败？先看这三处硬伤
90% 的“点不动”“没变化”“输出错乱”，都卡在这三个地方，而不是工具问题。
-
<script>标签里混着 JSX 或模板语法（如{item.name}），DOMParser会把它当 HTML 解析，直接崩 - 属性值没加引号：
<div class=header>是非法 HTML，Prettier 和大多数在线工具会静默跳过或报错 - 用了服务端模板符号，比如
<% if (x) { %>或{{ name }}—— 这些不是 HTML，格式化器不认
