应选择 ASP.NET Core Empty 模板创建项目,配置 wwwroot 和静态文件中间件,编写标准 HTML5 结构并正确引入 JS,添加 API 控制器提供接口,或使用 Live Server 插件运行纯静态页面。

如果您在 Visual Studio 中开发 HTML5 页面,但无法正确创建项目结构或集成 JavaScript 调用 API 实现页面功能,则可能是由于项目模板选择不当、文件组织不规范或脚本加载顺序错误。以下是解决此问题的步骤:
一、使用 ASP.NET Core Web App(空模板)创建 HTML5 项目
该方法适用于需要完全控制 HTML 结构与静态资源路径的纯前端开发场景,避免 MVC 或 Razor 的干扰,确保 HTML5 标签和原生 JS 行为按预期执行。
1、启动 Visual Studio,点击“创建新项目”。
2、在模板搜索框中输入 ASP.NET Core Web API,但实际应选择 ASP.NET Core Web App (Model-View-Controller) 或更推荐的 ASP.NET Core Empty 模板。
立即学习“前端免费学习笔记(深入)”;
3、项目创建后,右键“解决方案资源管理器”中的项目名,依次选择“添加”→“新建文件夹”,命名为 wwwroot。
4、在 wwwroot 文件夹内右键,选择“添加”→“新建项”,选择“HTML 页”,命名为 index.html。
5、打开 Startup.cs(.NET 5/6+ 为 Program.cs),确认已启用静态文件中间件:调用 app.UseStaticFiles() 且位于 app.UseRouting() 之后。
二、手动配置 HTML5 文档结构并引入外部 JS 文件
该方法确保 HTML5 语义化标签(如
1、在 wwwroot/index.html 中,删除默认内容,粘贴标准 HTML5 声明与结构:
欢迎
2、在 wwwroot 下新建文件夹 js,并在其中创建 main.js。
3、在 main.js 中编写基础 DOM 绑定与 fetch 调用:
document.getElementById('fetchBtn').addEventListener('click', async () => { const res = await fetch('/api/data'); const data = await res.json(); document.getElementById('result').textContent = JSON.stringify(data); });
4、确认 index.html 中的











