HTML文档中非法URI字符导致的静态资源加载失败排查-html教程-PHP中文网

uri查询参数含空格或中文时资源404，因浏览器将未编码字符当作url分隔符截断路径；设置错误导致相对路径解析错乱；服务端返回html冒充js/css引发语法错误；file://协议下特殊字符被浏览器直接拦截。

html文档中非法uri字符导致的静态资源加载失败排查

URI查询参数含空格或中文时资源404

浏览器把未编码的空格、中文、&、= 当作 URL 分隔符，直接截断请求路径——比如 src="js/app.js?q=你好 world" 会被解析成 js/app.js?q=你好，后半截丢弃，服务器自然返回 404。

常见场景：动态拼接 <script></script> 或 <link> 的 src/href 属性时，直接用字符串拼接用户输入或变量，没做 encodeURIComponent()。

检查 Network 面板里失败请求的 Request URL，看是否有空格、中文或 % 编码不完整（如只出现 %E4 却没后续字节）
服务端日志若显示路径被截断（如只收到 /static/css/main.css?theme=dark，但实际传了 ?theme=dark&v=2），基本就是 & 未编码
前端拼接时，对每个查询参数值单独编码：src="data.js?name=" + encodeURIComponent(name) + "&id=" + encodeURIComponent(id)
避免对整个 URL 字符串重复编码：encodeURIComponent("data.js?name=张三") 会把 ? 和 = 也编码，导致无效 URL

HTML中`<base>`与相对路径共同引发的URI解析错乱

<base href="/app/"> 会影响所有相对路径的解析起点，但如果页面本身通过嵌套路由访问（如 http://localhost:3000/admin/users/edit），而 <base> 指向错误根路径，浏览器就会把 css/style.css 解析成 /app/css/style.css，而非你部署时的实际位置。

典型表现：首页能加载资源，二级页面全 404；或者本地开发正常，部署到子目录后资源全部失效。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

确认 <base> 的 href 值是否与实际部署路径一致（结尾必须带 /，如 /my-project/）
如果不用 <base>，统一改用以 / 开头的绝对路径：src="/js/main.js"，而不是 src="js/main.js"
Vue CLI / Vite 构建项目需同步配置 publicPath 或 base，否则 <base> 和构建工具生成的路径会冲突
在 Elements 面板里右键点击 <link> 或 <script></script> 标签，选 “Copy link address”，粘贴出来看浏览器最终解析出的完整 URL 是否合理

Tomcat 或 Nginx 返回的 HTML 页面被当作 JS/CSS 加载

当 src="/js/app.js" 实际返回的是 404 HTML 页面（比如 Tomcat 默认的 error page），浏览器控制台会报 Uncaught SyntaxError: Unexpected token '——因为 JS 引擎试图解析 HTML 的 <code> 开头。

这根本不是语法错，而是资源路径错 + 服务端兜底机制共同导致的“假错误”。

打开 Network 面板，筛选 JS 或 CSS 类型，点开红色请求，看 Response 内容是不是 HTML 源码（搜索 或 <code><title></title>）
Tomcat 下检查 webapps/ 目录结构是否与路径匹配，例如请求 /static/js/app.js，文件必须放在 webapps/ROOT/static/js/app.js（或对应 context path 下）
Nginx 配置中确保 location /static/ 正确映射到磁盘路径，且没被其他 location 规则覆盖
Spring Boot 等框架若启用了白页错误处理器（Whitelabel Error Page），也会返回 HTML，此时需确认静态资源路径是否被 MVC 路由拦截

file:// 协议下 URI 特殊字符触发的安全拦截

双击打开 HTML 文件时，Chrome/Edge 对 file:// 协议做了严格限制：含空格、中文、# 的路径会被直接拒绝，控制台显示 net::ERR_FILE_NOT_FOUND，但文件其实存在。

这不是编码问题，是浏览器主动屏蔽——它甚至不发请求，直接伪造 404。

不要依赖双击打开调试含动态路径的页面，一律用 http://localhost（Live Server、Python -m http.server、Vite preview）
如果必须用 file://，路径中禁用空格、中文、&、=、#；文件名用英文+下划线，目录扁平化
VS Code 的 Live Server 插件要求文件已保存且扩展名为小写 .html，否则不会响应右键菜单
记事本另存为时选 UTF-8 编码，否则中文路径在部分系统下会变成乱码路径，进一步加剧解析失败

实际排查时，最易被忽略的是：**错误信息本身可能是假象**——404 Not Found 可能来自服务端兜底页，Unexpected token ' 其实是 HTML 冒充 JS，<code>net::ERR_FILE_NOT_FOUND 往往根本没发请求。盯住 Network 面板里的真实响应内容，比看 Console 更可靠。