HTML 脚本

HTML 只负责描述网页"长什么样"，而点击按钮、弹出提示、校验表单这类"动起来"的行为，需要脚本语言来实现，最常用的就是 JavaScript。这节课以 HTML 讲师的身份，讲讲如何用 <script> 标签把脚本嵌入网页。

<script> 标签：把脚本写进网页

<script> 用于在文档中定义客户端脚本，浏览器遇到它就会执行其中的代码。第一个例子是向页面写内容并弹窗： ```html <!DOCTYPE html> <html> <body> <script> document.write("<h2>你好，脚本！</h2>"); // 向页面写入内容 alert("弹出提示框"); // 弹出一个警告框 </script> </body> </html> ```

在浏览器中显示为：页面出现"你好，脚本！"标题，随后弹出提示框。注意 document.write 只在页面加载过程中有效。

脚本放在哪里更合适

  • 放在 <head> 中：先于页面内容加载，适合做初始化，但可能拖慢首屏显示。
  • 放在 <body> 末尾：先渲染内容再执行脚本，页面响应更快，是推荐写法。
  • 多个脚本按出现顺序依次执行，后面的代码可以使用前面定义好的内容。

用事件触发脚本

脚本不一定加载即运行，更多时候等用户操作触发，最常用的是 onclick 单击事件：

<button onclick="alert('你点击了我！')">点我</button>
<!-- 在浏览器中显示为：一个按钮，点击后弹出提示框 -->

外部脚本文件

代码量大时，应单独保存为 .js 文件，再用 src 属性引入，实现"结构"与"行为"分离：

<script src="myjs.js"></script>  <!-- 引入同目录下的 myjs.js -->

这样做的好处：多个页面可共用同一份脚本，浏览器会缓存它，页面加载更快。src 既可以写相对路径，也可以写完整的 URL。

<noscript>：给禁用脚本的用户留后路

<noscript> 标签在浏览器不支持、或用户禁用了 JavaScript 时，显示一段替代内容：

<script>
document.write("欢迎访问本站");
</script>
<noscript>很抱歉，您的浏览器禁用了 JavaScript！</noscript>

易错点

  • <script> 必须有 </script> 结束标签，漏写会导致整段脚本失效。
  • 事件名统一小写：onclick 不能写成 onClick（在 XHTML 中大小写敏感）。
  • 用 src 引入外部脚本时，<script> 标签之间不要再写任何代码，写了也会被忽略。
  • 页面加载完成后再调用 document.write，会覆盖掉整个页面的内容。

小结：脚本让 HTML 页面"活"起来。<script> 负责引入代码、事件负责触发行为，代码变多后就拆到外部 .js 文件中统一管理。

笔记加载中…

标签：#HTML

返回知识库