Register
> 博客>

js代码写在html哪里

新星源码网 2月 12日 2 0

在HTML文件中，JavaScript代码可以写在内联方式：JavaScript代码可以直接写在HTML文件中的<script>标签中。例如：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Inline JavaScript Example</h1>
    <script>
        // Inline JavaScript code
        console.log("Hello, world!");
    </script>
</body>
</html>

在<script>标签中，你可以直接编写JavaScript代码，它将在页面加载时执行。

内部脚本：JavaScript代码也可以写在HTML文件中<script>标签内部，通常位于<head>或<body>标签中。例如：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Script Example</title>
    <script>
        // Internal JavaScript code
        console.log("Hello, world!");
    </script>
</head>
<body>
    <h1>Internal Script Example</h1>
</body>
</html>

外部脚本：JavaScript代码可以存储在外部文件中，然后通过src属性将其引入到HTML文件中。例如：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>External Script Example</h1>
</body>
</html>

在这个例子中，script.js包含JavaScript代码，通过<script>标签中的src属性引入到HTML文件中。

选择在哪里放置JavaScript代码通常取决于代码的复用性、维护性和性能需求。

除了上述三种常见的放置 JavaScript 代码的方式外，还有一些其他的放置方式：

事件处理函数：JavaScript代码可以直接作为事件处理函数，绑定到HTML元素的事件属性上。例如：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handler Example</title>
</head>
<body>
    <button onclick="alert('Button clicked!')">Click me</button>
</body>
</html>

在这个例子中，onclick事件绑定了一个内联的 JavaScript 函数。

动态加载：JavaScript代码可以在页面加载完毕后，使用JavaScript动态地插入到HTML文档中。这样做可以根据需要加载和执行代码，提高页面加载速度和性能。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Loading Example</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var script = document.createElement("script");
            script.src = "script.js";
            document.body.appendChild(script);
        });
    </script>
</head>
<body>
    <h1>Dynamic Loading Example</h1>
</body>
</html>

在这个例子中，script.js文件在页面加载完毕后动态加载到了页面中。

选择使用哪种方式取决于你的需求和应用场景，但是为了代码的可维护性和性能，通常建议将 JavaScript 代码分离出去，放在外部文件中，并通过外部引用的方式加载到 HTML 页面中。

Related

热门文章

微海报