HTML 脚本
天天向上
发布： 2025-02-22 13:28:29
原创
516
人浏览过
在 HTML 中，脚本通常是指通过 <script> 标签嵌入到网页中的 JavaScript 代码。JavaScript 是一种用于添加动态行为和交互功能的脚本语言。你可以使用 JavaScript 来操作网页上的元素、处理事件、与服务器通信等。
1. 基本语法
HTML 中的 <script> 标签用于嵌入或引用 JavaScript 代码。
示例：
<script>
// JavaScript 代码
alert('Hello, World!');
</script>这段代码将在页面加载时弹出一个“Hello, World!”的消息框。
2. 内联 JavaScript
可以直接在 <script> 标签内写 JavaScript 代码，这叫做内联 JavaScript。
示例：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>欢迎访问我的网页</h1>
<script>
document.querySelector('h1').style.color = 'red'; // 设置标题文字颜色为红色
</script>
</body>
</html>这段代码会将页面中的 <h1> 标签的文字颜色设置为红色。
3. 外部 JavaScript 文件
你也可以将 JavaScript 代码放入一个单独的文件中，然后通过 <script> 标签引用。这样有助于提高代码的组织性和可重用性。
步骤：
- 创建一个 JavaScript 文件（例如：
script.js）。 - 在 HTML 中引用该文件。
示例：
<!DOCTYPE html>
<html>
<head>
<title>外部脚本示例</title>
</head>
<body>
<h1>外部脚本示例</h1>
<script src="script.js"></script>
</body>
</html>script.js 文件内容：
document.querySelector('h1').style.color = 'blue'; // 设置标题文字颜色为蓝色4. async 和 defer 属性
当你引用外部 JavaScript 文件时，<script> 标签可以使用 async 或 defer 属性来控制脚本的加载方式。
async：表示脚本是异步加载的，加载完成后立即执行。此时，脚本的执行顺序不能保证。defer：表示脚本会在文档解析完成后执行，执行顺序和在 HTML 中的出现顺序相同。
示例：
<!DOCTYPE html>
<html>
<head>
<title>异步和延迟示例</title>
<script src="script.js" async></script> <!-- 异步加载 -->
</head>
<body>
<h1>这是一个测试页面</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>异步和延迟示例</title>
<script src="script.js" defer></script> <!-- 延迟加载 -->
</head>
<body>
<h1>这是一个测试页面</h1>
</body>
</html>5. 事件处理
你可以在 HTML 元素中使用 on 事件属性来触发 JavaScript 脚本。例如，可以在按钮点击时执行某个函数。
示例：
<button onclick="alert('按钮被点击了！')">点击我</button>或者将事件绑定到 JavaScript 函数中：
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').onclick = function() {
alert('按钮被点击了！');
};
</script>6. 在文档头部与尾部插入脚本
- 将
<script>标签放在文档头部 (<head>) 中：脚本会在 HTML 内容加载之前执行。 - 将
<script>标签放在文档尾部 (</body>) 中：脚本会在 HTML 内容加载完毕后执行，这通常是最佳实践，因为它能避免脚本阻塞页面的加载。
7. 脚本的作用
- 动态内容更新：使用 JavaScript 动态更新网页内容，例如，修改文本或样式。
- 表单验证：在表单提交前验证用户输入的内容。
- 事件监听：在用户与网页交互时（点击、滑动、输入等）触发脚本。
- 动画效果：使用 JavaScript 创建网页上的动画效果。
总结
HTML 脚本是通过 <script> 标签引入的 JavaScript 代码。你可以将 JavaScript 代码直接写在 HTML 文件中，也可以通过外部文件进行引用。使用 JavaScript 可以实现动态效果、交互和更复杂的功能。在现代网页开发中，JavaScript 脚本几乎是所有交互式网页应用的基础。