script标签怎么用？JavaScript如何嵌入HTML？
在现代Web开发中，HTML负责页面结构，CSS负责页面样式，而JavaScript则负责页面的交互与动态行为。要让HTML文档能够执行JavaScript代码，就需要使用<script>标签。本文将详细介绍<script>标签的使用方法，以及将JavaScript嵌入HTML中的三种主要方式。
一、行内式：直接在HTML标签中编写
行内式是将JavaScript代码直接写在HTML标签的事件属性中，例如onclick、onmouseover等。这种方式最直观，但会导致HTML结构与JavaScript行为高度耦合，不利于后期的代码维护和复用，因此在实际开发中不推荐大量使用。
示例代码如下：
<button onclick="alert('你好，行内式JavaScript！')">点击我</button>二、内嵌式：使用script标签包裹代码
内嵌式是在HTML文档中使用<script></script>标签，将JavaScript代码包裹在标签内部。这是比较常见的一种方式，适合JS代码量较少，且仅为当前页面服务的情况。
<script>标签可以放置在HTML文档的<head>或<body>中。为了避免浏览器因加载和执行JS代码而阻塞页面的渲染，通常建议将其放在<body>标签的末尾。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内嵌式示例</title>
</head>
<body>
<h1>内嵌式JavaScript测试</h1>
<script>
// 在这里编写JavaScript代码
console.log('这是内嵌式JS代码');
document.querySelector('h1').style.color = 'blue';
</script>
</body>
</html>三、外链式：通过src属性引入外部JS文件
外链式是将JavaScript代码写在一个独立的.js文件中，然后通过<script>标签的src属性将其引入到HTML页面中。这是企业级开发中最推荐的做法，它实现了结构（HTML）与行为（JS）的彻底分离，极大提高了代码的可维护性和复用性。
需要注意：一旦<script>标签使用了src属性引入外部文件，那么该标签内部的任何JavaScript代码都将被浏览器忽略，不会执行。
示例代码如下：
<!-- 引入外部的JavaScript文件 -->
<script src="https://www.ipipp.com/js/main.js"></script>
<!-- 错误示范：标签内部的代码不会被执行 -->
<script src="https://www.ipipp.com/js/main.js">
alert('这段代码不会被执行');
</script>四、script标签的重要属性
在使用外链式引入JS文件时，浏览器默认会暂停页面的解析，去下载并执行脚本，这也就是常说的“阻塞渲染”。为了优化页面加载性能，<script>标签提供了async和defer两个关键属性。
1. async 属性
async属性表示异步加载脚本。浏览器在解析HTML的同时，会在后台下载带有async属性的JS文件，一旦下载完毕，浏览器会暂停HTML解析，立即执行该脚本。多个带有async的脚本执行顺序无法保证，谁先下载完谁先执行。适用于独立的、不依赖DOM的第三方脚本（如统计代码）。
2. defer 属性
defer属性表示延迟执行。浏览器同样会在后台下载带有defer属性的JS文件，但在整个HTML文档解析完成之后，才会按照它们在页面中出现的顺序依次执行。这种方式非常适合需要操作DOM的主业务脚本。
<!-- 异步加载，下载完立即执行，执行顺序不确定 --> <script src="https://www.ipipp.com/js/analytics.js" async></script> <!-- 延迟加载，HTML解析完毕后按顺序执行 --> <script src="https://www.ipipp.com/js/main.js" defer></script>
五、总结
将JavaScript嵌入HTML主要有行内式、内嵌式和外链式三种方式。在实际开发中，应当尽量避免使用行内式，少量代码可以使用内嵌式，而对于大型项目，强烈推荐使用外链式引入独立JS文件，并配合defer或async属性来优化页面的加载与渲染性能，从而为用户提供更流畅的访问体验。