HTML脚本怎么运行?

一、JavaScript

JavaScript 是一种脚本语言，可用于在 HTML 文档中添加交互性、动态效果和复杂的功能。它可以被嵌入到 HTML 页面中，并由浏览器解释和执行。JavaScript 可以与 HTML 和 CSS 互动，使得页面的设计更加灵活、响应式和易于使用。

现代浏览器都支持 JavaScript，包括 Chrome、Firefox、Safari、Edge 等等。JavaScript 还有大量的开源库和框架可供使用，使得开发者能够更快速、高效地构建复杂的 Web 应用程序。

二、插入脚本

要将 JavaScript 脚本插入到 HTML 页面中，有几种不同的方法可以选择：

1、内联脚本

可以在 HTML 页面的 <script>标签中直接编写 JavaScript 代码。将脚本代码放置在 <script>标签中，并将其放置在 <head>或 <body>标签内部。

<html>
<head>
<title>我的网页</title>
<script>
// 内联脚本
function myFunction() {
alert("Hello, World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点击我</button>
</body>
</html>

2、外部脚本

可以将 JavaScript 代码保存到一个独立的 .js 文件中，并通过 <script>标签的 src属性引用该文件。这种方式使得 JavaScript 代码可以在多个页面之间共享和重用。

在外部脚本文件（例如 script.js）中编写 JavaScript 代码：

// script.js
function myFunction() {
alert("Hello, World!");
}

在 HTML 页面中通过 <script>标签引用外部脚本文件：

<html>
<head>
<title>我的网页</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="myFunction()">点击我</button>
</body>
</html>

3、异步加载脚本

通过添加 async属性可以异步加载脚本，这样浏览器在加载脚本时不会阻塞页面的渲染。

<html>
<head>
<title>我的网页</title>
<script async src="script.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

4、延迟加载脚本

通过添加 defer属性可以延迟加载脚本，在页面完成解析后再执行脚本。这种方式常用于需要依赖页面结构的脚本。

<html>
<head>
<title>我的网页</title>
<script defer src="script.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

三、script标签

示例代码：

<script>
document.write("Hello World!")
</script>

以上脚本会向浏览器输出 “Hello World!”。

四、noscript标签

示例代码：

<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

五、旧版浏览器

在早期的浏览器中可能会出现无法识别 <script> 标签的情况，但将脚本放置在 HTML 注释中并不是解决问题的正确做法。事实上，这样做会导致浏览器无法正确解析脚本代码，并在页面中显示注释内容。

正确的做法是使用<noscript>标签，这个标签用于指定在浏览器不支持脚本或者禁用脚本时，应该显示哪些替代内容。这些替代内容通常是一些普通的 HTML 页面元素，例如文本、图片、表单等。

以下是一个示例：

<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<!-- 使用 JavaScript 加载广告 -->
<script src="ad.js"></script>
<!-- 当浏览器无法执行 JavaScript 代码时，显示替代内容 -->
<noscript>
<p>请启用 JavaScript 以便查看广告。</p>
<img src="fallback-ad.png" alt="替代图片" />
</noscript>
</body>
</html>

在上面的示例中，当浏览器可以成功加载并执行 ad.js 脚本时，会显示广告；如果浏览器无法执行 JavaScript 代码，则会显示 <noscript> 元素中的替代内容（一段文本和一张图片）。