index.html可正常打开但标题和正文不显示，页面空白如何排查？

• HTML基础结构语法错误：缺失<!DOCTYPE html>声明，<html>/<head>/<body>核心标签未闭合、拼写错误、嵌套顺序错误，或者正文内容被误写进<head>标签内，浏览器无法正常解析DOM结构。
• 全局样式异常：CSS中设置了* { display: none !important; }、body { opacity: 0; visibility: hidden; }这类全局隐藏规则，或者文字颜色与背景色完全一致、页面根节点高度被设为0导致内容溢出被裁剪，视觉上呈现空白效果。
• JavaScript执行异常：JS代码主动清空了document.body内容、运行死循环阻塞了浏览器渲染线程、存在报错终止了页面渲染流程，都会导致内容无法正常渲染。
• 响应头配置错误：服务器返回的Content-Type响应头不是text/html类型，被错误设置为text/plain等其他类型，浏览器不会解析HTML结构直接当成纯文本/二进制资源处理。
• 缓存问题：浏览器缓存了旧的空白版本index.html，修改后的新代码没有被实际加载。
• 字符编码异常：未声明字符编码、文件实际编码和<meta>标签声明的编码不匹配，浏览器解析内容乱码导致结构失效。
• 单页应用框架挂载失败：使用Vue/React等框架时，根挂载节点不存在、ID不匹配，框架初始化失败无法渲染动态内容。

• 验证基础HTML结构：先用最小可运行HTML模板替换当前文件内容，验证是否能正常渲染：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>测试页面</title>
</head>
<body>
  <p>测试渲染内容</p>
</body>
</html>

如果该模板可以正常显示，说明原文件存在结构语法错误，逐一排查标签拼写、闭合、嵌套问题即可。

• 排查样式问题：按F12打开浏览器开发者工具，切换到元素面板，检查<html>、<body>以及内容节点的计算样式，确认没有隐藏、透明、同色配置，临时注释所有自定义CSS样式后刷新页面验证。
• 排查脚本问题：先注释所有自定义<script>标签后刷新页面，如果内容恢复显示，说明是JS导致的问题，再通过控制台的报错信息逐一排查脚本逻辑，重点检查是否有清空DOM、死循环的代码。
• 验证响应头配置：打开开发者工具的网络面板，找到index.html的请求记录，检查响应头中的Content-Type值是否为text/html; charset=utf-8，如果配置错误修改服务器的MIME类型规则即可。
• 清除缓存验证：按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）强制跳过缓存刷新，或者使用无痕模式访问页面，排除缓存干扰。
• 框架项目排查：确认根挂载节点存在且ID和框架初始化配置一致，比如Vue项目需要存在<div id="app"></div>节点，再根据控制台的框架报错信息定位问题。

内容的提问来源于stack exchange，提问作者Nafisa Zaman