html 页面与 JavaScript 脚本混合使用可以使原本的页面具有更强的动态和交互性。通过 <script> 标签来定义客户端脚本，比如 JavaScript。<script> 标签既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证、事件响应以及内容动态更新等。当然也可以通过 <script> 标签在 html 页面上直接输出一段内容，如：
但是这种操作与直接在 html 的 body 中写 "Hello World !!!" 的效果一致，所以这并不是 html 脚本的正确使用方法。
常见的 html 脚本的使用方法如下：
动态更改页面样式(事件响应)
如上图所示，我们在 html 文件中创建了一个段落 <p>，设置了该段落的唯一标识 id 为 "p_id"，之后再该段落下边定义了一个按钮 button，点击该按钮会触发 "changeStyle()" 方法，而该方法的定义和实现则在 html 的 head 文件中使用 <script> 标签去关联，即我们代码中指定的 base.js。
function changeStyle() {var x;// 获取内容x = document.getElementById("p_id");// 修改样式x.style.color="#6495ED";x.style.fontSize="20px";
}在该 js 文件中，我们改变段落中的内容的字体颜色和字体大小，因此，点击 "改变样式" 按钮之后的页面展示就为：
改变页面样式算是一种最基本的 html 的用处了，这种用处其实可以被称为事件响应。比如说我们可以通过页面按钮的事件相应去获取当前时间。操作方法与上面类似：
其实最常用的是通过 javaScript 脚本去验证表格中的内容，如，当选择 "有" 爱好时，内容正常显示，如果选择 "无" 爱好，则隐藏爱好的具体内容。
该表格有一行两列，第一列为是否有爱好列，td 的唯一标识记作 "td_1"，两个取值为单选框，单选框的名称记为 "hobby"，第二列为具体的爱好项，td 的唯一标识记作 "td_2"。当选择有无爱好时，会触发 "check()" 方法，该方法中会首先拿到选择项的内容，即选择的到底是有爱好，还是五爱好，如果没有爱好，则隐藏 "td_2" 的内容；如果有爱好，则正常展示。演示效果为：
可能是因为我的表格设置了宽度和高度的样式，导致第二次选择有爱好时页面展示内容不符合预期。希望有懂的大佬指教一下！！！
通过 JavaScript 脚本去验证表格内容应该是 html 使用 javaScript 脚本最大、最常用的用处了，比如常见的对输入框中的内容进行合法性校验之类，都是通过 javaScript 脚本实现的。
本文涉及到的所有代码为：
<!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"><script src="../resource/javaScripts/base.js" type="text/javascript"></script><title>HTML 脚本示例</title>
</head>
<body><script>document.write("Hello World !!!")</script><hr /><h3>html 使用脚本更改页面样式</h3><p id="p_id">待更改样式的文本内容</p><button type="button" onclick="changeStyle()">更改样式</button><hr /><h3>html 使用脚本获取当前时间</h3><p id="p_id">当前时间为：</p><p id="p_id2"></p><button type="button" onclick="getDate()">获取时间</button><hr /><h3>html 使用脚本验证表格内容</h3><table width="60%" border="1" cellspacing="1" cellpadding="4" bgcolor="#cccccc" align="center"><tr><td id="td_1" width="30%"><p>爱好:<input type="radio" name="hobby" value="yes" onclick="check();" />有<input type="radio" name="hobby" value="no" onclick="check();" />无</p></td><td width="30%" id="td_2"><input type="radio" name="hobby2" value="eat" />吃<br /><input type="radio" name="hobby2" value="sleep" />睡</td></tr></table></body>
</html>js 代码：
function changeStyle() {var x;// 获取内容x = document.getElementById("p_id");// 修改样式x.style.color="#6495ED";x.style.fontSize="20px";
}function getDate() {var date = new Date();// 获取年分var year = date.getFullYear();// 获取月份var month = date.getMonth() + 1;// 获取日期var strDate = date.getDate();// 获取小时var hour = date.getHours();// 获取分钟var minute = date.getMinutes();// 获取秒var second = date.getSeconds();if (month >= 1 && month <= 9) {month = '0' + month;}if (strDate >= 0 && strDate <= 9) {strDate = '0' + strDate;}if (minute >= 0 && minute <= 9) {minute = '0' + minute;}if (second >= 0 && second <= 9) {second = '0' + second;}var currentdate = `${year}-${month}-${strDate} ${hour}:${minute}:${second}`;document.getElementById("p_id2").innerHTML=currentdate;
}function check() {var value = document.getElementsByName("hobby");for (var i = 0; i < value.length; i++) {if (value[i].checked) {if (value[i].value == "no") {document.getElementById("td_2").style.display="none";} else {document.getElementById("td_2").style.display="block";}} }
}
本文参考自：HTML 脚本 | 菜鸟教程
