📜  如何在 vscode 中链接 js 和 html 文件 - Javascript (1)

📅  最后修改于: 2023-12-03 15:24:25.159000             🧑  作者: Mango

如何在 VS Code 中链接 JS 和 HTML 文件 - Javascript

在编写 Web 应用程序时,我们经常需要将 JavaScript 和 HTML 文件链接在一起。本文将介绍如何在 VS Code 中链接这两个文件。

步骤:

  1. 创建一个 HTML 文件

在 VS Code 中新建一个 HTML 文件,比如 index.html,并保存到本地。

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Link JS and HTML Files</title>
  </head>
  <body>

  </body>
</html>
  1. 创建一个 JavaScript 文件

在同一目录下新建一个 JavaScript 文件,比如 app.js

示例代码:

console.log('Hello World');
  1. 链接 JS 文件到 HTML 文件

在 HTML 文件中插入一个 script 标签,并在 src 属性中引入 app.js 文件的路径。

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Link JS and HTML Files</title>
  </head>
  <body>
    <script src="./app.js"></script>
  </body>
</html>
  1. 运行 HTML 文件

在浏览器中打开 HTML 文件,就可以看到控制台输出了 Hello World

示例代码:

Hello World

以上就是如何在 VS Code 中链接 JS 和 HTML 文件的方法。

代码片段

HTML 文件中的 script 标签

<script src="./app.js"></script>

JavaScript 文件中的示例代码

console.log('Hello World');