在html中添加script脚本的2种方法和注意事项

2023年5月27日上午9:07 • JavaScript

在HTML中，我们可以通过添加<script>标签来添加JavaScript脚本。下面分别介绍两种添加<script>标签的方法以及需要注意的事项。

方法一：直接添加在HTML文件中

在HTML文件中，可以使用<script>标签来内联嵌入JavaScript代码。可以把脚本放在<body>标签或<head>标签中。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script>
      alert("Hello, world!");
    </script>
  </head>
  <body>
    <h1>Welcome to Example Page</h1>
    <script>
      console.log("The page is loaded.");
    </script>
  </body>
</html>

需要注意的是，当脚本代码嵌入到HTML文件中时，脚本会随着HTML文件一同下载，这可能对页面的性能造成影响，特别是当脚本过于冗长时。

方法二：引用外部 JavaScript 文件

我们还可以在HTML文件中通过添加<script>标签来引用一个或多个外部 JavaScript 文件。这种方式比将 JavaScript 代码写在HTML文件中更推荐，因为这样可以使HTML文件更加简洁，便于维护。可以使用以下代码来引用外部 JavaScript 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script src="example.js"></script>
  </head>
  <body>
    <h1>Welcome to Example Page</h1>
  </body>
</html>

需要注意的是，在使用外部 JavaScript 文件时，需要确保文件路径正确。同时也应该避免同时加载大量 JavaScript 文件，这样会导致页面加载速度变慢。

使用外部 JavaScript 文件的方法还可以让多个页面共用一个 JavaScript 文件，这样可以缩短页面加载时间，提高页面性能。

总体来说，在添加<script>标签时应该注意以下事项：