需在VS Code中创建标准HTML5文件、启用语义标签提示、正确嵌入JavaScript调用浏览器API、通过Live Server启动页面、结合开发者工具调试。
如果您在 VS Code 中新建 HTML5 文件并希望正确编写 HTML 标签、嵌入 JavaScript 代码并调用浏览器 API 开发交互式页面，则需确保文件结构规范、语法支持完整、运行环境可验证。以下是具体操作步骤：
一、创建标准 HTML5 文件
VS Code 默认不强制 HTML5 文档类型，需手动声明 <!DOCTYPE html> 并设置根元素结构，以启用 HTML5 语义标签与现代 API 支持。
1、在 VS Code 左侧资源管理器中右键空白处，选择“新建文件”。
2、将文件命名为 index.html（扩展名必须为 .html）。
立即学习“前端免费学习笔记（深入）”；
3、在文件首行输入 <!DOCTYPE html>，然后按下 Enter 键。
4、输入 html:5，此时 VS Code 的 Emmet 插件会自动展开为完整 HTML5 骨架结构（含 <html lang="zh-CN">、<head>、<body> 等）。
二、启用 HTML5 语义标签与属性提示
VS Code 内置 HTML 语言支持，但需确保文件被识别为 HTML 类型，并开启智能感知功能，以便获得 <article>、<section>、<data> 等 HTML5 标签及 contenteditable、draggable 等全局属性的补全提示。
1、确认右下角状态栏显示语言模式为 HTML；若显示为 Plain Text，点击该区域，选择“Configure File Association for '.html'” → 选择 “HTML”。
2、打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入并执行 Preferences: Open Settings (JSON)。
3、在 settings.json 中添加以下配置项（如不存在）：
"html.suggest.html5": true。
三、在 HTML 中嵌入并执行 JavaScript 调用浏览器 API
HTML5 页面中调用 Web API（如 navigator.geolocation、fetch()、localStorage）需确保脚本在 DOM 加载就绪后执行，且权限上下文合规（例如 HTTPS 或 localhost）。
1、在 <body> 底部添加 <script> 标签块，或引入外部 JS 文件（<script src="main.js"></script>）。
2、在 <script> 内编写调用示例，如获取用户地理位置：
navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords.latitude));
3、若调用失败，检查控制台报错：打开开发者工具（F12），切换至 Console 面板，确认是否出现 Geolocation not supported or permission denied 提示。
四、使用 Live Server 实时预览 HTML5 页面
直接双击 HTML 文件在浏览器中打开会导致部分 API（如 fetch 读取本地 JSON）因 CORS 被阻止；需通过本地 HTTP 服务启动页面以满足同源策略要求。
1、在 VS Code 扩展市场安装官方扩展 Live Server（作者：Ritwick Dey）。
2、右键 index.html 文件，在右键菜单中选择 Open with Live Server。
3、VS Code 自动在默认浏览器中打开 http://127.0.0.1:5500/index.html，此时所有 HTML5 API 均可正常调用。
五、调试 JavaScript 与 HTML5 API 行为
在 VS Code 中调试前端代码需结合浏览器开发者工具与 VS Code 的 Debugger for Chrome/Firefox 扩展，实现断点、变量监视与 API 调用链追踪。
1、在 index.html 的 <script> 中任意行左侧灰色区域单击，设置断点（红点）。
2、安装 Debugger for Chrome 扩展（如使用 Chrome 浏览器）。
3、按 Ctrl+Shift+P，执行 Debug: Open Configuration，选择 Chrome，生成 launch.json。
4、修改 launch.json 中的 "url": "http://127.0.0.1:5500/index.html"，确保与 Live Server 地址一致。
5、按 F5 启动调试，浏览器自动打开并停在断点处，可查看 navigator、document 等 HTML5 全局对象状态。
