HTML和JavaScript代码分离，使得代码更易于阅读、调试和维护

Bol5261

已于 2023-12-29 19:57:00 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

于 2022-02-22 19:42:31 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/123075647

Javascript(Promise/asyncAwait) 同时被 2 个专栏收录

377 篇文章

订阅专栏

HTML5(HyperText Markup)

305 篇文章

订阅专栏

本文详细介绍了如何在HTML中插入JavaScript代码，包括内联脚本和外部脚本两种方式，并强调了内联脚本中避免使用</script>字符串的重要性。同时，提到了使用转义字符解决这一问题的方法，以及现代浏览器对async和defer属性的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将JavaScript插入HTML的主要方法是使用

要嵌入行内JavaScript代码，直接把代码放在<script>元素中就行：<script>
function sayHi() {
    console.log("Hi!");
  }
</script>
包含在<script>内的代码会被从上到下解释。在上面的例子中，被解释的是一个函数定义，并且该函数会被保存在解释器环境中。在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。
在使用行内JavaScript代码时，要注意代码中不能出现字符串</script>。比如，下面的代码会导致浏览器报错：<script>
  function sayScript() {
    console.log("</script>");
  }
</script>
浏览器解析行内脚本的方式决定了它在看到字符串</script>时，会将其当成结束的</script>标签。想避免这个问题，只需要转义字符“\”1即可：1此处的转义字符指在JavaScript中使用反斜杠“\”来向文本字符串添加特殊字符。——编者注<script>
  function sayScript() {
    console.log("<\/script>");
  }
</script>
这样修改之后，代码就可以被浏览器完全解释，不会导致任何错误。

是的，您说得对。在HTML中插入JavaScript代码主要有两种方式：内联脚本和外部脚本。

内联脚本：这是通过在HTML元素中直接编写JavaScript代码来实现的。例如，如果你想在页面加载时运行一些代码，你可以使用标签的onload属性，如下所示：

在这个例子中，myFunction()是一个JavaScript函数，当页面加载时会被执行。 2. 外部脚本：这是通过在HTML文档中引用外部的JavaScript文件来实现的。你可以创建一个.js文件，然后在HTML文档中使用这种方式在某些情况下可能是有用的，但它已经有点过时了。现在大多数浏览器对async和defer属性的处理方式是一样的，所以通常推荐使用async属性。以上就是在HTML中插入JavaScript的主要方法。希望对你有所帮助！此外，当你在HTML文档中使用