HTML5应用需通过五种方式运行：一、桌面浏览器直接打开本地文件；二、移动设备通过局域网HTTP服务访问；三、Android WebView加载assets中文件；四、iOS WKWebView加载Bundle内资源；五、用Capacitor等框架封装为混合应用。
如果您开发了一个HTML5应用，但无法在设备上正常运行，则可能是由于未通过浏览器或WebView正确加载。以下是让HTML5应用运行的具体方法：
一、通过桌面浏览器直接打开HTML5应用
HTML5应用本质是静态网页文件集合，可直接由现代浏览器解析执行，无需编译或安装。前提是确保入口文件（如index.html）路径正确且资源引用无误。
1、将HTML5应用所有文件（含HTML、CSS、JS、图片等）存放在同一本地文件夹中。
2、在该文件夹中找到主页面文件，通常命名为index.html或main.html。
立即学习“前端免费学习笔记（深入）”；
3、右键点击该HTML文件，选择“使用Chrome打开”或“在Edge中打开”等支持HTML5的浏览器。
4、浏览器地址栏显示为file:///开头的本地路径，页面应正常渲染并响应交互。
二、通过移动设备浏览器访问本地HTML5应用
移动端浏览器对本地文件系统访问受限，不能直接双击打开本地HTML文件，需借助HTTP服务提供访问入口，避免因file://协议导致的跨域或资源加载失败。
1、在HTML5应用根目录下启动一个轻量HTTP服务器，例如使用Python命令：python3 -m http.server 8000（需已安装Python）。
2、在电脑端获取本机局域网IP地址，如192.168.1.105。
3、在手机浏览器地址栏输入http://192.168.1.105:8000，回车访问。
4、确认页面完全加载，检查控制台无404或CORS错误。
三、在Android WebView中嵌入并运行HTML5应用
WebView是Android原生组件，可将HTML5应用集成进APK，实现类原生体验。需配置权限、启用JavaScript及允许文件访问，否则页面将白屏或功能失效。
1、在AndroidManifest.xml中添加网络权限：
2、在布局XML中定义WebView控件，并设置id，例如：android:id="@+id/webview"。
3、在Activity中初始化WebView，调用setJavaScriptEnabled(true)并设置WebChromeClient和WebViewClient。
4、使用loadUrl()加载本地资产：调用webView.loadUrl("file:///android_asset/index.html")，确保HTML文件已放入app/src/main/assets/目录。
四、在iOS WKWebView中加载HTML5应用
WKWebView是iOS推荐的网页渲染组件，性能优于旧版UIWebView。HTML5资源需打包进应用Bundle，且必须启用JavaScript与文件读取能力，否则无法执行脚本或加载本地CSS/JS。
1、将HTML5应用整个文件夹拖入Xcode项目，勾选Copy items if needed和Create folder references。
2、在ViewController中声明WKWebView实例，并在viewDidLoad中初始化。
3、配置WKWebViewConfiguration，设置configuration.preferences.javaScriptEnabled = true。
4、获取本地HTML文件URL：Bundle.main.url(forResource: "index", withExtension: "html")，然后调用loadFileURL方法加载。
五、使用Cordova或Capacitor封装为混合应用后运行
当HTML5应用需调用摄像头、定位、通知等原生能力时，需借助混合框架封装。Cordova与Capacitor均提供统一接口桥接，生成可安装的APK或IPA包。
1、全局安装Capacitor CLI：npm install -g @capacitor/cli。
2、在HTML5项目根目录运行npx cap init，填写应用名称、ID等元信息。
3、添加目标平台：npx cap add android 或 npx cap add ios。
4、将HTML5资源复制至Capacitor默认web目录（如android/app/src/main/assets/public），再执行npx cap copy && npx cap open android启动Android Studio进行构建运行。
