html本地file://协议被现代浏览器限制导致白屏或报错，应改用本地http服务（如python服务器或vs code live server）；html-validate可离线校验html结构，但需注意es6模块引用引发的误报，且应移除离线无效的preconnect等网络依赖标签。
HTML本地文件打不开或报错，先看浏览器地址栏是不是file://协议
Chrome、Edge等现代浏览器默认禁止file://协议下执行某些HTML特性（比如fetch、localStorage、import模块），不是代码写错了，是浏览器主动拦的。直接双击打开index.html看到白屏或控制台一堆Cross origin requests are not supported，大概率就是这个原因。
- 临时验证：用
python3 -m http.server 8000起个本地服务，然后访问http://localhost:8000/index.html - 长期开发：VS Code装
Live Server插件，右键“Open with Live Server”，它自动起服务且支持热更新 - 别用Firefox测试兼容性——它对
file://相对宽松，容易掩盖问题
用html-validate做离线静态校验，比W3C在线工具更可控
W3C校验器要上传代码，敏感项目不敢用；而且它只查语法合规性，不检查可访问性或现代语义错误。html-validate是Node.js工具，本地跑，规则可配，CI里也能塞进去。
- 安装：
npm install --save-dev html-validate - 基础校验命令：
npx html-validate index.html - 想查无障碍问题？加配置文件
.htmlvalidate.json，启用accessibility规则集 - 注意：它默认不校验内联
<script></script>里的JS语法，JS错误得另用eslint或prettier
校验时遇到Unexpected token ，其实是JS被当HTML解析了
常见于ES6模块写法：<script type="module" src="main.js"></script>，但main.js里用了import，而校验器没加载JS上下文，直接把import当HTML标签头处理了——报错位置往往在JS文件第一行，但根源在HTML引用方式。
- 解决办法一：把
type="module"改成type="text/javascript"（仅校验时临时改，不影响运行） - 解决办法二：用
html-validate的--ignore跳过含模块脚本的HTML文件 - 根本规避：校验只针对纯结构HTML，JS逻辑单独走
eslint流程，职责分离
离线环境没网络，preconnect、dns-prefetch这些标签会白校验但实际失效
这类资源提示标签本身合法，html-validate不会报错，但离线时它们不仅没用，还可能触发浏览器无意义的DNS查询（尤其在某些企业内网环境会卡住页面加载）。
- 检查点：
<link rel="preconnect" href="https://fonts.googleapis.com">这类外部域名链接 - 离线优先策略：删掉所有指向
https://或http://的preconnect、dns-prefetch、preload - 如果必须保留（比如后续要切回在线模式），用构建时条件注入，而不是硬编码在HTML里
离线HTML最麻烦的从来不是语法错误，而是那些“看起来能跑、其实依赖网络或特定协议”的隐性假设。多看一眼控制台报错的协议头和请求路径，比反复改标签名管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
