在HTML中嵌入JavaScript脚本有三种主要方式:
标签中编写JavaScript代码。.js
文件中,并在HTML文档中通过
标签的src
属性引用它。内联脚本是将JavaScript代码直接嵌入到HTML文档的标签中。以下是一个简单的例子:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联脚本示例title>
head>
<body>
<h1>欢迎来到我的网站h1>
<p id="demo">p>
<script>
// 这是一个简单的JavaScript代码,它会在页面加载时向元素中添加文本
document.getElementById("demo").innerHTML = "Hello, World!";
script>
body>
html>
外部脚本是将JavaScript代码保存在独立的.js
文件中,并在HTML文档中引用它。这样做的好处是可以将JavaScript代码与HTML结构分离,使代码更加清晰和易于维护。
首先,创建一个名为script.js
的文件,并在其中编写JavaScript代码:
// script.js
document.getElementById("demo").innerHTML = "Hello from an external script!";
然后,在HTML文档中通过标签的
src
属性引用这个外部脚本:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部脚本示例title>
head>
<body>
<h1>欢迎来到我的网站h1>
<p id="demo">p>
<script src="script.js">script>
body>
html>
行内事件处理是在HTML元素的属性中直接嵌入JavaScript代码。这种方法通常用于处理简单的事件,如按钮点击。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内事件处理示例title>
head>
<body>
<h1>欢迎来到我的网站h1>
<button onclick="alert('Button clicked!')">点击我button>
body>
html>
在这个例子中,当按钮被点击时,会触发onclick
事件,并执行嵌入在其中的JavaScript代码,弹出一个警告框。
标签放在HTML文档的
标签的底部,这样可以确保在脚本执行之前页面的HTML元素已经完全加载。src
属性中添加一个查询字符串(如script.js?v=1.0
)。通过掌握这些基本的HTML脚本知识,你可以开始创建动态和交互式的网页了。随着你对JavaScript的深入了解,你将能够实现更加复杂和有趣的功能。