本文介绍如何将 notepad 编写的 html 文件直接、规范地导入 visual studio code，涵盖新建文件与打开现有文件两种标准方式，并说明项目组织建议和基础运行配置。
本文介绍如何将 notepad 编写的 html 文件直接、规范地导入 visual studio code，涵盖新建文件与打开现有文件两种标准方式，并说明项目组织建议和基础运行配置。
在 VS Code 中管理 HTML 项目，核心原则是操作文件本身，而非代码文本。这意味着你无需在 Notepad 中全选 → 复制 → 切换到 VS Code → 粘贴——这不仅低效，还容易遗漏文件关联、编码格式或项目结构信息。正确做法是让 VS Code 直接加载或创建对应文件。
✅ 推荐方式一：打开已保存的 HTML 文件（最常用）
如果你已在 Notepad 中编写并已保存为 .html 文件（例如 index.html），请按以下步骤操作：
- 启动 VS Code；
- 点击顶部菜单栏 File → Open File…
（或使用快捷键：Windows/Linux 按Ctrl + O，macOS 按Cmd + O）； - 在弹出的文件选择器中，定位到你的 HTML 文件（如
C:\my-projects\index.html），选中后点击「打开」； - 文件即在编辑器中打开，语法高亮、智能提示、 Emmet 支持等功能自动启用。
? 小技巧：若希望以文件夹为单位管理整个网站项目（含 CSS、JS、图片等），可改用 File → Open Folder…（
Ctrl/Cmd + K→Ctrl/Cmd + O），选择包含 HTML 的根目录。VS Code 将以工作区形式加载，便于后续调试与扩展使用。
✅ 推荐方式二：新建 HTML 文件并保存（适合从零开始）
若尚未保存文件，或想在 VS Code 中全新创建：
立即学习“前端免费学习笔记（深入）”；
- 点击 File → New File（或快捷键
Ctrl + N/Cmd + N）； - 输入 HTML 骨架代码（VS Code 会自动识别为 HTML 类型，支持 Emmet）：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>欢迎来到 VS Code！</h1> </body> </html>
- 点击 File → Save As…（
Ctrl + Shift + S/Cmd + Shift + S），选择保存路径（如D:\web-dev\index.html），确保文件名以.html结尾； - 保存后，VS Code 会自动应用 HTML 语言模式，提供完整开发体验。
⚠️ 注意事项与最佳实践
-
编码统一：Notepad 默认可能使用
ANSI或GBK编码，而 VS Code 默认使用UTF-8。若打开后出现中文乱码，请点击右下角编码标识（如UTF-8），选择 Reopen with Encoding → GBK（临时修复），然后另存为 UTF-8 格式以保证长期兼容； - 不要依赖“新建标签页”粘贴：单纯新建空白文件再粘贴代码，易丢失原始文件路径、权限及版本控制上下文；
-
启用 Live Server（可选但强烈推荐）：安装官方扩展 Live Server，右键 HTML 文件 → “Open with Live Server”，即可一键启动本地服务器并自动刷新，比双击打开
file://协议更接近真实环境。
掌握这两种文件级导入方式，是你迈向专业前端开发的第一步——VS Code 不仅是编辑器，更是你项目的起点与中枢。
