script标签怎么用？JavaScript如何嵌入HTML？-html教程-PHP中文网

script标签怎么用？JavaScript如何嵌入HTML？

幻夢星雲

发布： 2025-07-29 17:16:01

原创

824人浏览过

script标签用于嵌入或引用javascript代码，主要用法有两种：1. 直接在html中嵌入javascript代码，通过<script>标签包裹代码并立即执行；2. 引用外部javascript文件，使用src属性指定文件路径，便于代码复用和维护；通常建议将script标签放在body底部以避免阻塞页面渲染，若需提前加载可使用defer或async属性；可通过onerror事件处理脚本加载失败；type属性除默认的text/javascript外，还可设置如application/json用于嵌入json数据，并通过javascript解析使用。

script标签怎么用？JavaScript如何嵌入HTML？

script标签主要用于在HTML文档中嵌入或引用JavaScript代码。它让浏览器知道这部分内容是JavaScript，并按照JavaScript的规则来解析和执行。

解决方案：

script标签的使用方法相当直接，但灵活性也很高。主要有两种用法：直接嵌入JavaScript代码，或者引用外部JavaScript文件。

立即学习“Java免费学习笔记（深入）”；

嵌入式JavaScript：

<!DOCTYPE html>
<html>
<head>
<title>嵌入式JavaScript</title>
</head>
<body>

<h1>我的网页</h1>

<p id="demo">这是一个段落。</p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "段落已更改。";
}
myFunction(); // 页面加载后立即执行
</script>

</body>
</html>

登录后复制

这里，<script>标签直接包裹了JavaScript代码。myFunction()改变了id为"demo"的段落内容。注意，这个函数在页面加载后会被立即执行，因为我们在<script>标签内直接调用了它。

引用外部JavaScript文件：

<!DOCTYPE html>
<html>
<head>
<title>引用外部JavaScript</title>
</head>
<body>

<h1>我的网页</h1>

<p id="demo">这是一个段落。</p>

<script src="myScript.js"></script>

</body>
</html>

登录后复制

在这个例子中，<script src="myScript.js"></script>告诉浏览器去加载名为"myScript.js"的外部文件。这个文件应该包含JavaScript代码。这样做的好处是代码可以被多个HTML页面复用，也便于维护。

JavaScript放在head里还是body里？

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

179

查看详情

这是一个常见的问题。通常，将<script>标签放在<body>标签的底部是一个不错的选择。这样做的好处是，浏览器会先加载并渲染HTML内容，然后再加载和执行JavaScript代码。这样可以避免JavaScript代码阻塞页面渲染，提高用户体验。当然，如果你的JavaScript代码需要在页面加载时立即执行，或者依赖于某些HTML元素，那么将其放在<head>标签中也是可以的。但要注意，如果放在<head>中，最好使用defer或async属性，以避免阻塞页面渲染。

<script src="myScript.js" defer></script>

登录后复制

defer属性告诉浏览器在HTML解析完成后再执行脚本，而async属性则告诉浏览器异步加载脚本，并在脚本加载完成后立即执行。

如何处理JavaScript加载失败的情况？

虽然我们希望JavaScript代码总是能够成功加载和执行，但在实际情况中，可能会遇到各种问题，比如网络问题、文件不存在等等。为了应对这些情况，可以使用onerror事件来检测JavaScript加载失败的情况。

<script src="myScript.js" onerror="handleScriptLoadError()"></script>

<script>
function handleScriptLoadError() {
  console.error('Failed to load myScript.js');
  // 在这里可以执行一些错误处理逻辑，比如显示错误提示信息
}
</script>

登录后复制

在这个例子中，如果"myScript.js"加载失败，handleScriptLoadError()函数会被调用，你可以在这个函数中执行一些错误处理逻辑。

script标签的type属性有什么用？

虽然现在HTML5默认<script>标签的type属性为"text/javascript"，但在一些特殊情况下，你可能需要使用其他的type属性。比如，如果你想嵌入一些非JavaScript的代码，比如JSON数据，你可以将type属性设置为"application/json"。

<script type="application/json" id="myJsonData">
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
</script>

<script>
  const jsonData = JSON.parse(document.getElementById('myJsonData').textContent);
  console.log(jsonData.name); // 输出 "John"
</script>

登录后复制

在这个例子中，我们使用<script type="application/json">来嵌入JSON数据，然后使用JSON.parse()函数将其解析为JavaScript对象。虽然这种情况比较少见，但在某些特定的应用场景中还是很有用的。

以上就是script标签怎么用？JavaScript如何嵌入HTML？的详细内容，更多请关注php中文网其它相关文章！