拖拽html文件到编辑器（如vs code）仅加载源码供编辑，不会自动预览；要实时预览需右键文件选择“open with live server”启动本地http服务，避免file://协议的同源限制。
拖拽HTML文件到编辑器窗口打不开？检查是否支持该功能
多数现代代码编辑器（如 VS Code、Sublime Text、WebStorm）本身不直接“解析并渲染”HTML——它们是编辑器，不是浏览器。所谓“拖拽打开”，实际只是把文件载入编辑器进行编辑，而非预览。如果你拖进一个 .html 文件后只看到源码、没弹出预览页，这完全正常，不是 bug。
容易踩的坑：
• 误以为拖拽会自动在浏览器中打开（其实不会，除非你装了特定插件或配置了自定义任务）
• 在编辑器中拖拽了文件，但没保存，后续用 Live Server 启动时加载的是旧缓存版本
• 拖拽路径含中文或空格，导致某些插件读取失败（尤其 Windows 下 PowerShell 或旧版插件）
VS Code 中拖拽 + 实时预览要分两步走
VS Code 默认拖拽仅触发文件打开。想实现“拖进去就预览”，得靠插件协同：
- 先拖拽
index.html到编辑器窗口 → 编辑器加载源码 - 右键编辑器标签页或文件资源管理器中的该文件 → 选择
Open with Live Server - 此时会启动本地服务（如
http://localhost:5500），并自动在浏览器中打开
注意：Live Server 插件不响应拖拽事件本身，它只响应右键菜单或快捷键（默认 Alt+L Alt+O）。别指望松开鼠标那一刻就跳转页面。
为什么拖拽后浏览器地址栏显示 file:/// 而不是 localhost？
这是关键区别：直接拖拽 HTML 文件到 Chrome/Firefox 窗口，走的是 file:// 协议；而通过 Live Server 或 python -m http.server 启动的，走的是 http:// 协议。
后果很实际：
-
file://下，fetch()、import模块、XMLHttpRequest等会被同源策略拦截（报错：Blocked by CORS policy） -
http://localhost下，这些功能才真正可用 - 拖拽进浏览器 ≠ 拖拽进编辑器 —— 前者是运行，后者是编辑；混用场景时容易忽略协议差异
Sublime Text / WebStorm 等编辑器没有 Live Server 怎么办？
它们不内置服务器，但可复用命令行工具，且兼容拖拽后的快速调用：
- 确保 HTML 文件已保存（拖拽后务必
Ctrl+S） - 终端进入该文件所在目录（可直接在编辑器中右键 → “Open in Terminal”）
- 运行：
python3 -m http.server 8000（macOS/Linux）或py -m http.server 8000（Windows） - 手动访问
http://localhost:8000/your-file.html
复杂点在于：没有自动刷新。改完 HTML 后要手动刷新浏览器——这点 VS Code + Live Server 的优势就凸显了。别省掉这一步，否则你会反复怀疑“我明明改了，怎么没变？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
