文章目录
- 相关背景
- HTML中嵌入JS的第一种方式
- 实现代码
- 图是结果
- 在HTML中插入JS的第二种方式
- 实现代码
- 实现结果
- HTML中引入JS的第三种方式
- 实现代码
- 实现结果
相关背景
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>
实现结果
