应选择 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 语义化标签（如 <header>、<section>、<article>）被正确解析，并使外部 JavaScript 可访问 DOM 元素及浏览器 API。
1、在 wwwroot/index.html 中，删除默认内容，粘贴标准 HTML5 声明与结构：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML5 页面</title></head><body><header><h1>欢迎</h1></header><main id="app"><button id="fetchBtn">获取数据</button><div id="result"></div></main><script src="js/main.js"></script></body></html>
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 中的 <script> 标签位于 </body> 闭合前，以保证 DOM 已加载完成。
三、通过添加控制器提供本地 API 端点供 JS 调用
该方法用于在无外部服务依赖时，快速搭建可被 HTML 页面中 JavaScript 直接调用的后端接口，满足页面功能开发需求。
1、右键项目 → “添加” → “新建文件夹”，命名为 Controllers。
2、右键 Controllers 文件夹 → “添加” → “控制器”，选择 API 控制器 - 空，命名为 DataController.cs。
3、在 DataController.cs 中定义 GET 方法：
[Route("api/[controller]")] [ApiController] public class DataController : ControllerBase { [HttpGet("data")] public IActionResult GetData() => Ok(new { message = "HTML5 页面已成功调用 API", timestamp = DateTime.Now }); }
4、确保控制器类继承自 ControllerBase，且方法返回类型为 IActionResult，以支持 JSON 序列化响应。
四、使用 VS 内置 Live Server 插件替代 IIS Express 运行纯静态 HTML
该方法绕过 ASP.NET Core 后端管道，直接以静态服务器方式运行 HTML5 页面，适用于仅需调试 HTML/CSS/JS 交互与浏览器 API（如 Geolocation、Fetch、Canvas）的场景。
1、在 Visual Studio 中，打开“扩展”→“管理扩展”，搜索并安装 Live Server（注意：需确认为适用于 Visual Studio 的版本，非 VS Code 插件）。
2、安装完成后重启 VS，在 wwwroot/index.html 文件处于活动标签页时，右键编辑器空白处，选择 Open with Live Server。
3、VS 将自动启动本地 HTTP 服务（如 http://127.0.0.1:5500/index.html），此时所有相对路径引用（如 js/main.js）均按标准静态文件规则解析。
4、在 main.js 中若需调用浏览器 API（例如 navigator.geolocation.getCurrentPosition），该模式下权限上下文完整，不会因跨域或混合内容被浏览器拦截。
