必须通过本地HTTP服务器运行，不能用file://协议直接打开；因浏览器安全限制，fetch、XMLHttpRequest、ES6模块等无法执行，且路径错误会导致404或空白页。
直接双击打开 index.html 看到空白页、乱码或 404 报错，不是模板坏了，是你跳过了最关键的加载前提：HTML 模板必须通过本地服务器运行，不能用 file:// 协议直接打开。
为什么改完文字还是不显示？先查这三处“隐藏数据源”
很多模板的标题、导航栏、甚至整块内容并不写死在 index.html 里，而是从外部加载：
-
index.html中有或src="js/data.js"—— 内容实际来自 JSON 或 JS 对象，改 HTML 文本没用 - 用了
html-webpack-plugin时，<title><%= htmlWebpackPlugin.options.title %></title>这类语法不会被浏览器解析，只会原样显示成文本，需构建工具编译才生效 - 某些模板在
<script>里动态写入 DOM，比如document.getElementById('hero').innerHTML = data.title，此时你得去改data的来源，而不是<h1>标签本身
图片/脚本路径报 404？别猜，用开发者工具定位真实路径
浏览器控制台里的 Failed to load resource: net::ERR_FILE_NOT_FOUND 是最准的线索，它会明确告诉你哪一行、哪个路径找不到：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 看到
GET file:///xxx/js/main.js net::ERR_FILE_NOT_FOUND→ 检查<script src="js/main.js"></script>是否真对应文件系统中的js/main.js，注意大小写和斜杠方向（Windows 下反斜杠\在 HTML 里无效） - 图片路径写成
src="images/logo.png"，但实际图放在assets/images/logo.png→ 要么移动文件，要么改路径，别留着 404 让页面看起来“残缺” - 用了 ES6
import的 JS 文件（如import { initSlider } from './modules/slider.js'），必须确保服务器支持application/javascript+moduleMIME 类型，npx http-server默认支持，Live Server插件也支持，但双击打开绝对不行
用 Bootstrap 5 模板却样式全丢？重点核对这三点
Bootstrap 5 和老版本不兼容，套用时最容易在表单和组件上翻车：
立即学习“前端免费学习笔记（深入）”；
-
<input class="form-control">必须配<label for="xxx">，且for值与input的id完全一致，否则 label 点击无效、样式错位 - 删掉所有
class="form-group"—— Bootstrap 5 已废弃它，保留反而破坏 flex 布局；用mb-3、row、col控制间距和栅格 - JS 组件（modal、tooltip）不再响应
data-toggle="modal"，必须显式初始化：new bootstrap.Modal(document.getElementById('myModal'))，漏掉这步，点击按钮就完全没反应
真正卡住人的从来不是“怎么改文字”，而是搞不清模板依赖的数据流走向和资源加载链路。动手前花两分钟看一眼网络面板（Network tab）里哪些请求失败了，比盲目替换占位符高效十倍。
