HTML5无需安装，其开发关键在于正确配置VS Code环境与浏览器调试选项。需用Live Server解决跨域，禁用实验性设置，通过DevTools确认协议及存储行为，并在必要时安装Node.js支持构建与本地服务。
HTML5 本身不需要“安装”，它只是浏览器支持的一套标准；所谓“HTML5开发工具”，实际是指能高效编写、调试、预览 HTML/CSS/JS 的编辑器或 IDE，以及配套的本地运行环境。选错工具或跳过关键配置，会导致 localStorage 不生效、fetch 报 CORS、canvas 渲染异常等看似“HTML5不支持”的假问题。
用 VS Code 搭建轻量但完整的 HTML5 开发环境
VS Code 是当前最主流的选择：免费、插件丰富、启动快、对现代 Web API（如 IntersectionObserver、ResizeObserver）调试支持好。重点不是装软件，而是配对核心插件和基础设置：
- 下载安装官方版（code.visualstudio.com），避免第三方打包版——有些会默认禁用
file://协议下的fetch - 必装插件：
Live Server（右键 HTML 文件 → “Open with Live Server”，自动起本地 HTTP 服务，解决跨域限制） - 必关设置：在
settings.json中确认没有启用"security.webview.experimentalFeatures": true这类实验性开关，它可能干扰Web Components的 Shadow DOM 行为 - 新建一个
index.html，写上并保存，VS Code 会自动识别为 HTML5 文档模式（无需额外声明 <code>xmlns或version）
Chrome DevTools 必须开启的 HTML5 调试选项
很多 HTML5 特性（比如 Service Worker、Web Storage、Geolocation）依赖浏览器上下文。直接双击打开 HTML 文件（file:// 协议）会禁用其中大部分功能。必须通过 DevTools 确认运行环境是否合规：
- F12 打开 DevTools → 右上角三个点 →
More tools→Sensors，勾选Override geolocation才能测试navigator.geolocation - Application 标签页下，
Clear storage按钮旁有个小齿轮图标，点开后确保Clear site data on reload未勾选，否则每次刷新都会清空localStorage - Network 标签页 → 右键表头 → 勾选
Protocol，确认请求走的是http/1.1或h2（Live Server 默认 http/1.1），而不是file协议
Node.js + npm 不是必须，但某些 HTML5 场景绕不开
纯静态页面开发可以不用 Node.js；但一旦涉及以下任一场景，就必须安装并正确配置 npm：
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
- 使用
ES6+ modules（import/export）且需兼容旧浏览器 → 需esbuild或vite构建 - 调用本地 API 接口（比如读取 JSON 文件）→
fetch('/api/data.json')在file://下 404，需json-server启动 mock 服务 - 集成 Web Components 工具链（如
lit、stencil）→ 它们的 CLI 依赖node运行时
安装建议：去 nodejs.org 下载 LTS 版本（非 Current），安装时勾选 “Add to PATH”。装完执行
npm config get prefix，输出路径不应含空格或中文——否则
npm install -g serve 可能失败。
真正卡住开发进度的，往往不是“没装对工具”，而是没意识到 file:// 和 http://localhost 是两个世界。哪怕只改一行代码，也要先确认它跑在哪个协议下。
