正文

掌握HTML调用内嵌JS的5种简单方法

/0 浏览量
0820

在HTML页面中，将JavaScript代码嵌入到页面中是常见的做法。以下介绍五种简单的方法，帮助你轻松地在HTML中调用内嵌的JavaScript。

方法一：在HTML标签中使用<script>标签

这是最直接的方法，将JavaScript代码放在<script>标签中，并放置在HTML文档的<head>或<body>部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript内嵌示例</title>
    <script>
        // 在这里写你的JavaScript代码
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

方法二：使用<script>标签的src属性

如果你有外部的JavaScript文件，可以使用<script>标签的src属性来引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部JavaScript示例</title>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

确保替换path/to/your/script.js为实际的文件路径。

方法三：在<head>或<body>中直接写JavaScript代码

除了使用<script>标签，你还可以直接在<head>或<body>标签中写JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直接写JavaScript示例</title>
    <script>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

方法四：使用<script>标签的defer属性

如果你希望在文档加载完成后才执行JavaScript代码，可以使用defer属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用defer属性示例</title>
    <script defer>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

方法五：使用<script>标签的async属性

如果你希望JavaScript文件异步加载，可以使用async属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用async属性示例</title>
    <script async src="path/to/your/script.js"></script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

确保替换path/to/your/script.js为实际的文件路径。

通过以上五种方法，你可以轻松地在HTML页面中调用内嵌的JavaScript。选择最适合你的需求的方法，让你的网页更加生动有趣！

-- 展开阅读全文 --