HTML 脚本
# HTML 脚本
HTML 支持使用 <script> 标签在网页中嵌入脚本，以实现动态效果和交互功能。常用的脚本语言是 JavaScript。
# 1. HTML <script> 标签
<script>标签用于定义客户端脚本，比如 JavaScript。<script>元素既可包含脚本语句，也可通过src属性指向外部脚本文件。- JavaScript 最常用于图片操作、表单验证以及内容动态更新。
# 1.1 内嵌 JavaScript
在 <script> 标签内直接书写 JavaScript 代码。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
上面的代码将在网页中显示 "Hello World!"。
# 1.2 引用外部 JavaScript 文件
通过 src 属性可以引用外部的 JavaScript 文件。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
在 myscript.js 文件中可以包含任意的 JavaScript 代码，这些代码将在页面加载时执行。
# 2. HTML <noscript> 标签
<noscript>标签提供在浏览器不支持或禁用 JavaScript 时显示的替代内容。<noscript>元素可包含普通 HTML 页面的<body>元素中能够找到的所有元素。- 只有在浏览器不支持脚本或者禁用脚本时，才会显示
<noscript>元素中的内容。
<script>
document.write("Hello World!");
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
1
2
3
4
2
3
4
# 3. JavaScript 体验
# 3.1 JavaScript 输出内容
JavaScript 可以直接在 HTML 输出，例如使用 document.write() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 3.2 JavaScript 事件响应
JavaScript 可以响应用户的交互事件，例如按钮点击：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 JavaScript </h1>
<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
点击按钮后，页面上的内容将被更新。
# 3.3 JavaScript 改变 HTML 样式
JavaScript 可以动态改变 HTML 元素的样式，例如颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction() {
var x = document.getElementById("demo"); // 找到元素
x.style.color = "#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
点击按钮后，段落文本的颜色将变为红色。
# 4. 常用的 JavaScript 事件
JavaScript 事件是用户与网页交互时发生的动作。以下是一些常用的 JavaScript 事件：
# 4.1 鼠标事件
onclick：鼠标点击时触发onmouseover：鼠标悬停在元素上时触发onmouseout：鼠标移出元素时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<script>
function showAlert() {
alert("元素被点击了!");
}
</script>
</head>
<body>
<p onclick="showAlert()">点击这段文字</p>
<p onmouseover="this.style.color='red'">鼠标悬停在这段文字上</p>
<p onmouseout="this.style.color='black'">鼠标移出这段文字</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 4.2 键盘事件
onkeydown：键盘按键按下时触发onkeyup：键盘按键释放时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script>
function keydownEvent() {
alert("按下了一个键!");
}
</script>
</head>
<body>
<input type="text" onkeydown="keydownEvent()">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 4.3 表单事件
onsubmit：表单提交时触发onfocus：表单元素获得焦点时触发onblur：表单元素失去焦点时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单事件</title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("名字必须填写");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
姓名: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 5. HTML 脚本标签
<script>：用于嵌入或引用 JavaScript 代码。<noscript>：在浏览器不支持或禁用脚本时显示的替代内容。
通过这些示例和详细解释，您可以更好地理解和使用 HTML 中的脚本标签，实现网页的动态效果和交互功能。
编辑此页 (opens new window)