跳到主要内容

HTML 和 Javascript

提示
  1. JavaScript在HTML中的作用:JavaScript 用于增强 HTML 页面的交互性和动态特性,例如通过按钮点击触发弹出警告对话框。
  2. 添加JavaScript的两种方式:一是在HTML文件中使用 <script> 标签直接编写内部脚本;二是通过 <script> 标签的 src 属性链接到外部的JavaScript文件。
  3. <noscript> 标签的用途:用于向禁用 JavaScript 或浏览器不支持 JavaScript 的用户显示备用内容,确保网页的可访问性。

JavaScript,也称为 JS,是一种用于网页开发的编程语言。它用于使 HTML 页面更加互动和动态。例如,

<html>
<head>
<script>
function speak() {
alert("你好");
}
</script>
</head>
<body>
<button onclick="speak()">点击我</button>
</body>
</html>

浏览器输出(点击前)

使用内部 JS 显示警告的图片(点击前)

浏览器输出(点击后)

使用内部 JS 显示警告的图片(按钮点击后)

在上述示例中,我们通过使按钮点击时触发警告对话框来为按钮添加功能。

如何添加 JavaScript

向 HTML 文件添加 JavaScript 有两种方式:

  • 添加内部脚本
  • 添加外部脚本

添加内部脚本

我们可以通过在 <script> 标签内编写 JavaScript,将其添加到 HTML 文档中。例如,

<head>
<title> </title>
<script>
function showHiddenText() {
document.getElementById("demo").innerHTML = "你好,世界";
}
</script>
</head>
<body>
<button onclick="showHiddenText()">点击我</button>
<p id="demo"></p>
</body>

浏览器输出(点击前)

按钮图片

**浏览器输出(点击后)

**使用内部 JS 显示按钮和文本的图片

在上述示例中,点击按钮后显示 你好,世界 文本。

注意: 一般来说,script 标签放置在文档的 <head> 中,但放置标签的位置没有限制。

添加外部脚本

我们也可以在 HTML 文档中使用外部 JavaScript 文件。要添加外部脚本,我们需要在 <script> 标签的 src 属性中提供 JS 文件的位置。例如,

<script src="scripts/code.js"></script>

这里,我们在 HTML 文件中使用了 scripts 文件夹中的 code.js 文件。

当 JavaScript 代码较大时,这种方法很有帮助,因为它可以通过避免混乱来保持 HTML 文件的小巧。此外,HTML 文档也可以使用它。这同样有助于通过避免混乱保持 HTML 文件的小巧和语义化。

HTML <noscript> 标签

HTML 的 <noscript> 标签用于向禁用 JavaScript 或其浏览器不支持 JavaScript 的用户提供信息。例如,

<noscript>请启用 JavaScript 以查看此页面!</noscript>

如果浏览器无法运行 JavaScript,则 <noscript> 标签的内容才会显示。

浏览器输出

因为禁用了 JS 而显示 noscript 标签内的文本