讲师中心 微信公众号
AI工具推荐 视频效率加速

html 如何运行_html文件本地与在线运行方法【教程】

雨雪吖_2772

雨雪吖_2772

发布时间:2026-01-03 19:29:33

|

1330人浏览过

|

来源于php中文网

原创

双击打开HTML文件可快速预览纯静态页面,但受限于file://协议,无法使用fetch、模块导入、localStorage等;推荐用Python/Node.js或Live Server起本地HTTP服务,或通过GitHub Pages、raw.githack在线部署。

html 如何运行_html文件本地与在线运行方法【教程】

直接双击打开 .html 文件就能运行,不需要服务器——但前提是代码不涉及跨域请求、fetch 本地文件、或某些现代 API(如 localStorage 在部分浏览器沙箱下受限)。在线运行则必须托管到 HTTP 服务上。

双击本地打开:适用场景与限制

这是最快捷的预览方式,适合纯静态页面(无 JS 请求、无模块导入、无 Service Worker)。

  • Chrome / Edge 默认禁止从 file:// 协议发起 fetch('./data.json') 或加载 import 模块,会报错 net::ERR_FAILED 或 Failed to resolve module specifier
  • Firefox 略宽松,但同样禁用 fetch 读取同目录下的本地 JSON 文件
  • localStorage、indexedDB 在 file:// 下多数浏览器会降级为只读或完全不可用
  • 图片、CSS、内联 JS 可正常加载;所有资源路径需用相对路径(如 ./style.css),不能写 file:///xxx

本地起一个最小 HTTP 服务(推荐)

绕过 file:// 限制,只需一条命令,让浏览器以 http://localhost:xxxx 访问。

从 Git 仓库历史中彻底删除文件
从 Git 仓库历史中彻底删除文件

|Git删除了文件,但还会在Git 仓库历史中遗留。 - 想要从 Git 历史移除敏感信息(密码、密钥、token、私钥) - 想要删除意外提交的大文件 - 想要重写 Git 历史、移除特定文件的所有痕迹 - 提到 "force push"、"重写 commit 历史" - 需要从所有分支、所有 tag 中删除某个文件

下载
  • Python 3:终端进入 HTML 所在目录,运行
    python3 -m http.server 8000
    ,然后访问 http://localhost:8000/your-page.html
  • Node.js(需安装):运行
    npx http-server -c-1
    (-c-1 禁用缓存,便于开发)
  • VS Code 用户:装插件 Live Server,右键 HTML 文件 → “Open with Live Server”,自动启动并监听变化
  • 注意:端口别选 80/443(需管理员权限),也避开被占用的端口(如 3000、8080 常被其他工具占)

在线运行:GitHub Pages + raw.githack(免备案免域名)

想让别人也能点链接就看,又不想买服务器?这两个方式零成本、秒上线。

立即学习“前端免费学习笔记(深入)”;

  • GitHub Pages:把 HTML 放进仓库根目录或 /docs 文件夹 → Settings → Pages → Source 选 main /docs folder → 几分钟后生效,地址形如 https://<username>.github.io/<repo>/page.html</repo></username>
  • RawGit 已停运,替代方案是 raw.githack.com:上传 HTML 到 GitHub,复制其 raw 链接(如 https://raw.githubusercontent.com/user/repo/main/index.html),把域名换成 https://raw.githack.com/user/repo/main/index.html 即可在线执行(支持 JS/CSS/图片)
  • 注意:raw.githack.com 不支持 fetch 加载同仓库其他 raw 链接(CORS 策略),要用相对路径或改用 GitHub Pages

真正容易被忽略的是:本地双击能跑 ≠ 代码符合 Web 标准。比如用 fetch('data.json') 时,本地双击失败,但开发者常误以为是路径写错,其实只是协议限制。换 HTTP 服务一试便知。

热门AI工具

更多
创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2215

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3522

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1176

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4079

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2846

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5739

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4087

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

3042

2023.08.21

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6.1万人学习

CSS教程
CSS教程

共754课时 | 99.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn