正文

HTML5 引用的 JavaScript 可通过多种方式包含，常见的方法有：内联脚本、外部脚本文件和通过标签。例如：内嵌式 ``。

/0 浏览量
0331

在 HTML5 中，JavaScript 是一种非常强大的脚本语言，它允许我们为网页添加动态和交互性功能。要使用 JavaScript，我们需要将其包含在 HTML 文档中。以下是一些常见的包含 JavaScript 的方法：

内联脚本

内联脚本是指将 JavaScript 代码直接嵌入到 HTML 标签内的 <script> 标签中。这种方式简单直接，适用于小型脚本或测试用例。

<!DOCTYPE html>
<html>
<head>
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个内联脚本示例：</p>
    <script type="text/javascript">
        document.write("这是一个内联脚本。");
    </script>
</body>
</html>

外部脚本文件

将 JavaScript 代码保存在外部文件中是一种更为推荐的做法，这有助于提高页面加载速度，并允许我们在多个页面之间共享脚本。

创建外部脚本文件

首先，我们需要创建一个 JavaScript 文件，例如 script.js。

// script.js
document.write("这是一个外部脚本文件。");

在 HTML 中引用外部脚本

接下来，在 HTML 文档中通过 <script> 标签引用外部脚本文件。

<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个外部脚本示例：</p>
    <script src="script.js" type="text/javascript"></script>
</body>
</html>

注意事项

  • 在 <script> 标签中，src 属性指定了外部脚本文件的路径。
  • 如果同时使用内联脚本和外部脚本，内联脚本将在外部脚本之后执行。
  • 如果没有指定 type 属性，HTML5 默认为 text/javascript。

通过 <script> 标签的标签属性

HTML5 允许我们将 JavaScript 代码直接放在 <script> 标签的标签属性中，这种方式适用于一些简单的脚本。

<!DOCTYPE html>
<html>
<head>
    <title>标签属性脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个通过标签属性包含的脚本示例：</p>
    <script type="text/javascript">document.write("这是一个标签属性脚本。");</script>
</body>
</html>

注意事项

  • 这种方法适用于非常简单的脚本。
  • 不推荐将复杂的脚本放在标签属性中，因为这样做不利于代码的可维护性。

总结

以上介绍了 HTML5 中常见的三种引用 JavaScript 的方法。根据实际需求选择合适的方法，可以使你的网页更加动态和互动。

-- 展开阅读全文 --