文章目录
相关背景
HTML中嵌入JS的第一种方式
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS嵌入HTML的第一种方式</title>
</head>
<body align="center">
<input type="button" value="hello" onclick="window.alert('张三');
window.alert('lisi');
window.alert('王五');">
</body>
</html>
图是结果
在HTML中插入JS的第二种方式
实现代码
<Script type="text/javascript">
window.alert("1");
window.alert("1");
window.alert("1");
window.alert("1");
</Script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在HTML中插入JS的第二种方式</title>
<Script type="text/javascript">
window.alert("2");
window.alert("2");
window.alert("2");
window.alert("2");
</Script>
</head>
<body>
<input type="button" value="我是一个按钮">
<Script type="text/javascript">
window.alert("3");
window.alert("3");
window.alert("3");
window.alert("3");
</Script>
<input type="button" value="我是一个按钮">
</body>
</html>
<Script type="text/javascript">
window.alert("4");
window.alert("4");
window.alert("4");
window.alert("4");
</Script>
实现结果
HTML中引入JS的第三种方式
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入JS代码的第三种方式</title>
</head>
<body>
<script type="text/javascript" src="1.js"></script>
<script>
window.alert("hhhhh1");
window.alert("hhhhh2");
window.alert("hhhhh3");
</script>
<input type="button" value="hello" onclick="window.alert('hello test')
window.alert('hello test')">
</body>
</html>