下载PDF文件
下载PDF文件
Visual Studio Code是微软推出的一个源代码编辑器。它在Windows、macOS和Linux上都能使用。你可以通过它用各种编码语言来编写和编辑代码，其中也包括HTML。但要是你想运行HTML代码来预览外观，又该怎么办呢？好在有一些Visual Studio Code的扩展能让你在Visual Studio Code中轻松运行HTML代码。你也可以使用终端来运行HTML文件。这篇文章将教你如何在Visual Studio Code中运行HTML文件。
步骤
-
打开Visual Studio Code。 它的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
- 如果你还没有安装，可以从 https://code.visualstudio.com/ 免费下载Visual Studio Code。只用点击网页上的 下载 按钮，然后从网页浏览器或“下载”文件夹中打开安装文件。按照说明完成安装。
-
打开或创建一个新的HTML文件。 通过以下步骤之一来打开或创建一个新文件。
- 要创建一个新文件，点击顶部菜单栏中的 文件 。然后点击 新建文件 。开始 输入HTML代码 。
- 要打开现有的文件，可在顶部的菜单栏中点击 文件 。然后点击 打开文件 。找到你要打开的HTML文件，点击选中它。然后点击 打开 。
-
把文件另存为HTML文件。 如果准备在Visual Studio Code中运行HTML文件，你首先需要把文件另存为HTML格式。一旦保存了HTML文件，你就可以在所选择的任何浏览器中 运行它 。按照以下步骤在Visual Studio Code中保存HTML文件：
- 点击顶部菜单栏中的 文件 。
- 点击 另存为 。
- 在“文件名”旁边输入文件名。
- 使用“另存为类型”旁边的下拉菜单选择“ HTML ”。
- 点击 保存 。
广告
-
打开Visual Studio Code。 Visual Studio Code的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
-
打开或创建一个新的HTML文件。 如果还没有打开HTML文件，那就打开一个现有的HTML文件，或者创建一个新的HTML文件并另存为HTML格式。如果已经打开，那就点击屏幕上方包含你的HTML文件的选项卡来进行查看。
-
打开一个新的终端。 点击屏幕上方的 终端 ，然后点击 新建终端 。终端是在Visual Studio Code中运行HTML文件而不使用扩展的唯一方法。但同时它也是最复杂的方法。
- 或者，你可以点击顶部的 查看 ，然后点击 终端 。
-
键入 cd 后接HTML文件的路径，然后按 ↵ Enter 。 这样就会转到你的HTML文件的位置。比如，你的HTML文件在“文档”文件夹中，你就可以键入 cd \用户\用户名\文档 并按 Enter 。
- 如果你的HTML文件被保存在与操作系统不同盘符的分区上，那你得在终端中改成该盘符，然后才能转到HTML文件的路径。要进行更改，只用输入盘符（比如 D: 表示D:盘），然后按 Enter 。
- 如果你不确定HTML文件的保存位置，可以右键点击屏幕上方的HTML文件选项卡，然后点击 复制路径 。在终端输入 cd ，然后紧接着就粘贴刚才复制的路径。删除掉路径末尾的文件名，然后按 Enter 。
- 如果HTML文件的路径中的任何一个文件夹名称包含了空格，那么终端就无法转到该文件夹。使用Windows上的“文件资源管理器”或Mac上的“访达”转到任何名称中包含空格的文件夹，然后重命名这些文件夹以避免任何空格（例如，你的文件夹名称为“HTML Files”，那就把它改为“HTML_Files”）。
-
键入 start 后接HTML文件名，然后按 ↵ Enter 。 例如，你要运行一个索引HTML文件，那就可以键入 start index.html 并按 Enter 。这样会在一个单独的窗口中启动HTML文件，以便你预览HTML文件。
- 要关闭预览，只用点击窗口顶部的“x”图标。 [1] X 研究来源
广告
-
打开Visual Studio Code。 它的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
-
点击“扩展”按钮。 这是左侧菜单栏中类似4个方块的图标。这样将显示扩展的搜索菜单。
-
在搜索栏中键入 HTML Preview 。 搜索栏位于左边扩展菜单的顶部。这样将显示符合你搜索查询的扩展列表。“HTML Preview”是Visual Studio Code的一个扩展，让你能在Visual Studio Code中使用分屏或全屏模式来预览HTML文件。
-
点击“HTML Preview”扩展。 它应该是列表顶部的第一个扩展。它是由Thomas Haakon Townsend创建的，图标类似于一个橙色的盾牌，中间有一个“5”（HTML 5的标志）。
-
点击 安装 。 它在扩展菜单右侧的信息页面中，位于“HTML Preview”标题下面。这样将安装该扩展。等几分钟，让它完成安装。
-
打开或创建一个新的HTML文件。 如果还没有打开HTML文件，那就打开一个现有的HTML文件，或者创建一个新的HTML文件并另存为HTML格式。如果已经打开，那就点击屏幕上方包含你的HTML文件的选项卡来进行查看。
-
点击分屏预览按钮。 这是一个类似于分屏的图标，左边有一个放大镜。它位于屏幕的右上角。这样就会在Visual Studio Code中以分屏方式打开HTML文件的预览。
- 按住 Alt 并点击预览按钮，然后就能查看HTML代码的全屏预览。
- 要关闭预览，点击屏幕上方预览标签中的“x”图标就可以了。
广告
-
打开Visual Studio Code。 它的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
-
点击“扩展”按钮。 这是左侧菜单栏中类似4个方块的图标。这样将显示扩展的搜索菜单。
-
在搜索栏中键入 open in browser 。 搜索栏位于左边扩展菜单的顶部。这样将显示符合你搜索查询的扩展列表。“Open in browser”是Visual Studio Code的一个扩展，让你能在Visual Studio Code中使用所选择的网络浏览器来打开HTML文件。
-
点击“open in browser”扩展。 它应该是列表顶部的第一个扩展。它是由TechER创建的，名称都是小写字母。点击扩展选中它。
-
点击 安装 。 它在扩展菜单右侧的信息页面中，位于“open in browser”标题的下面。这样将安装该扩展。等几分钟，让它完成安装。
-
打开或创建一个新的HTML文件。 如果还没有打开HTML文件，那就打开一个现有的HTML文件，或者创建一个新的HTML文件并另存为HTML格式。如果已经打开，那就点击屏幕上方包含你的HTML文件的选项卡来进行查看。
-
在HTML代码中右键点击任意位置。 这项将显示一个上下文菜单。
-
点击 在默认浏览器中打开 。 这样就会在默认网络浏览器中打开HTML文件，以便你进行查看。 [2] X 研究来源
- 或者，你也可以点击 在其他浏览器中打开 ，然后双击你选择的网络浏览器。
- 如果要求你选择一个默认浏览器，那就点击你要用来打开文件的浏览器，然后点击 确定 。
广告
参考
广告
