将 JavaScript 添加到 HTML

2025 年 3 月 25 日 | 阅读 5 分钟

我们可以通过以下三种方式将JavaScript代码添加到HTML文档中：

在<head>…</head>标签中包含JavaScript代码。
在<body>…</body>标签之间以及在body标签关闭后包含JavaScript代码。
在HTML中链接单独的JavaScript文件。

在<head>标签中包含JavaScript代码。

在本节中，您将学习如何在<head>和</head>标签之间包含JavaScript代码。

语法

<html>
<head>
<script>
JavaScript Code
Statement 1
Statement 2
......
Statement N
</script>
</head>
<body>
</body>
</html>

在上述语法中，JavaScript代码写在<script>……. </script>标签之间，并放置在HTML文件的<head>和</head>标签之间。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Include JavaScript in head tag 
</title>

<script>
function check()
{
/* The following statement is used to display a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */
confirm("Your JavaScript Code Run"); 
}
</script>
<style>
/* The following tag selector button use the different properties for the Button. */
button {
  background-color: red;
padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  color: white;
  width: 100%;
  opacity: 0.9;
}
/* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. -->
<button type="button" onclick="check()"> Click Me for running a JavaScript Code </button>

</form>
</body>
</html>

输出

2. i) 在<body>标签中包含JavaScript代码。

在本节中，您将学习如何在<body>和</body>标签之间包含JavaScript代码。

语法

<html>
<head>
</head>
<body>

<script>
JavaScript Code
Statement 1
Statement 2
......
Statement N
</script>
</body>
</html>

在上述语法中，JavaScript代码写在<script>……. </script>标签之间，并放置在HTML文件的<body>和</body>标签之间。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Include JavaScript in body tag 
</title>
<style>
/* The following tag selector button use the different properties for the Button. */
button {
  background-color: red;
   padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
 color: white;
  width: 100%;
  opacity: 0.9;
}
/* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<script>
function bdy_JS ()
{
/* The following statement is used to display a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */
confirm("Your JavaScript Code Run which is used in the Body tag");
}
</script>

<!-- The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. -->
<button type="button" onclick="bdy_JS()"> Click Me for running a JavaScript Code </button>
</form>
</body>
</html>

输出

ii) 在<body>标签之后包含JavaScript代码。

在本节中，您将学习如何在<body>标签之后包含JavaScript代码。

语法

<html>
<head>
</head>
<body>
</body>
<script>
JavaScript Code
Statement 1
Statement 2
......
Statement N
</script>

</html>

在上述语法中，JavaScript代码写在<script>……. </script>标签之间，并放置在HTML文件的<body>…</body>标签之后。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Include JavaScript code after the body tag 
</title>
<style>
/* The following tag selector button use the different properties for the Button. */
button {
  background-color: red;
  color: white;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 16px 20px;
  opacity: 0.9;
}
/* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. -->
<button type="button" onclick="bdy_JS()"> Click Me for running a JavaScript Code </button>

</form>
</body>
<script>
function bdy_JS ()
{
/* The following statement is used to display a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */
confirm("Your JavaScript Code Run which is used after the Body tag");
}
</script>
</html>

输出

在HTML中链接单独的JavaScript文件。

在本节中，您将学习如何在HTML文件中包含JavaScript代码文件。

语法

<html>
<head>
<script src="Name_of_JavaScript_file>
</script>
</head>
<body>
</body>
</html>

在上述语法中，src是<script>标签的一个属性，用于指定JavaScript文件的名称。

示例

以下代码用JavaScript（inc）编写，并以.js扩展名保存。

function funcjs ()
{
/* The following statement displays a Confirm dialog box on a webpage with the statement which is enclosed in the brackets. */
confirm("Your JavaScript Code Run which is used after the Body tag");
}

以下代码写在HTML文件中，其中<script>标签使用src属性来指定上述JavaScript文件。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Include JavaScript file in head tag of HTML file 
</title>
<script src="inc.js">
</script>
<style>
/* The following tag selector button use the different properties for the Button. */
button {
  background-color: red;
  color: white;
margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 16px 20px;
  opacity: 0.9;
}
/* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<!-- The following statement use the Button type which is used to call a function of JavaScript when this button is clicked. -->

<button type="button" onclick="funcjs()"> Click Me for running a JavaScript Code </button>
</form>
</body>
</html>

输出

下一主题HTML背景图像

将 JavaScript 添加到 HTML

在<head>标签中包含JavaScript代码。

2. i) 在<body>标签中包含JavaScript代码。

ii) 在<body>标签之后包含JavaScript代码。

在HTML中链接单独的JavaScript文件。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

将 JavaScript 添加到 HTML

在<head>标签中包含JavaScript代码。

2. i) 在<body>标签中包含JavaScript代码。

ii) 在<body>标签之后包含JavaScript代码。

在HTML中链接单独的JavaScript文件。

相关帖子

HTML 转 Markdown Python

HTML 可访问性

HTML 问卷模板

HTML 页面弹出窗口

HTML 表格生成器

HTML 模拟器

使用 for 循环在 HTML 中创建简单的计算器

HTML 图片按钮

使用 HTML 和 CSS 进行图片滑块

HTML 与 HTML5

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器