在 html 中包含脚本(1)

📌 相关文章

📜 在 html 中包含脚本(1)

📅 最后修改于: 2023-12-03 14:50:56.073000 🧑 作者: Mango

在 HTML 中包含脚本

在 HTML 中可以通过 <script> 标签来包含脚本，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>包含脚本示例</title>
</head>
<body>

  <div id="hello-world"></div>

  <script>
    var div = document.getElementById('hello-world')
    div.innerText = 'Hello World!'
  </script>

</body>
</html>

在上述示例中，我们使用了 <script> 标签将 JavaScript 代码嵌入 HTML 页面中，在 <script> 标签内的代码会在页面加载时执行。在本示例中，我们利用 JavaScript 来修改了页面中一个 <div> 元素的内容。

外部脚本文件

虽然可以在 HTML 文件中嵌入 JavaScript 代码，但通常情况下我们会将 JavaScript 代码放到一个外部文件中，例如：

<!DOCTYPE html>
<html>
<head>
  <title>包含外部脚本示例</title>
  <script src="hello-world.js"></script>
</head>
<body>

  <div id="hello-world"></div>

</body>
</html>

在上述示例中，我们使用了 src 属性来引入一个外部的 JavaScript 文件 hello-world.js。在 hello-world.js 中，我们同样使用了 JavaScript 代码来修改页面中的 <div> 元素。

标记位置

当我们在 HTML 页面中引入外部 JavaScript 文件时，通常将 <script> 标签放在 <head> 或者 <body> 中。根据落脚点的不同，会对页面性能造成不同的影响：

如果将 <script> 标签放在 <head> 中，由于 JavaScript 文件下载需要一定的时间，因此页面加载速度会变慢。但是，JavaScript 文件加载后，可以在页面加载完成之前先被执行，从而改善页面交互性和用户体验。
如果将 <script> 标签放在 <body> 中，由于 JavaScript 文件需要等所有 HTML 内容加载完成之后才会加载和执行，因此会加快页面加载速度。但是，由于 JavaScript 标签通常都放在页面底部，因此页面交互性可能会受到一定影响。

总结

在 HTML 中包含脚本可以通过 <script> 标签实现，可以嵌入 JavaScript 代码，也可以引入外部的 JavaScript 文件。在选择在哪个标记位置引入 JavaScript 文件时，需要考虑页面性能对交互性和用户体验的影响。