＜script＞元素

最新推荐文章于 2024-04-04 13:43:31 发布

JD强子

最新推荐文章于 2024-04-04 13:43:31 发布

阅读量192

点赞数

分类专栏： js(JavaScript) 文章标签： javascript

本文链接：https://blog.csdn.net/m0_53698336/article/details/118564915

版权

js(JavaScript) 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

使用 `<script>` 元素的方式有两种：

直接在页面中嵌入 JavaScript 代码。
包含外部 JavaScript 文件。

有些时候你会看到<script>标签还设置了一个type属性：

<script type="text/javascript">
  ...
</script>

在 HTML5 规范中，<script> 的 type 属性默认是 "text/javascript"，所以可以省略；但是在 HTML 4.01 和 XHTML 1.0 规范中，type 属性是必须的。可以参考 Stack Overflow 上的回答：http://stackoverflow.com/questions/4243577/which-is-better-script-type-text-javascript-script-or-script-scr

`<script>`元素的位置

按照惯例，所有的 <script> 元素都应该放在页面的 <head>和 <body>元素中，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

可是这种做法意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（浏览器在遇到 <body> 元素时才开始呈现内容）。对于那些需要加载很多 JavaScript 代码的页面来说，会导致页面出现明显的延迟（浏览器窗口一片空白）。为了避免这个问题，最好的做法是把 <script> 元素放到 HTML 文档的最后面，</body> 元素之前，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这里放内容 -->
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</body>
</html>

直接在页面中嵌入 JavaScript 代码。

由<script>...</script>包含的代码就是JavaScript代码，它将直接被浏览器执行。

<html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
  ...
</body>
</html>

包含外部 JavaScript 文件

把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件：

<html>
<head>
  <script src="/static/js/abc.js"></script>
</head>
<body>
  ...
</body>
</html>

这样，/static/js/abc.js就会被浏览器执行。

包含在 <script> 元素内部的 JavaScript 代码将被从上至下依次解释，在解释器对 <script> 元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示。

如果要通过 <script> 元素来包含外部 JavaScript 文件，那么 src 属性就是必需的。这个属性的值是一个指向外部 JavaScript 文件的链接，通过 <script> 元素的 src 属性还可以包含来自外部域的 JavaScript 文件。例如：

<script src="https://code.jquery.com/jquery-3.0.0.min.js">
  ...
</script>

需要注意的是，带有 src 属性的 <script> 元素不应该在其 <script> 和 </script> 元素之间再包含额外的 JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

<script type="text/javascript" src="example.js">
    console.log("Hello!");  //永远不会执行
</script>

把JavaScript代码放入一个单独的.js文件中更利于维护代码，并且多个页面可以各自引用同一份.js文件。

可以在同一个页面中引入多个.js文件，还可以在页面中多次编写<script> js代码... </script>，浏览器按照顺序依次执行。

如果运行的是一小段 JavaScript 代码，则不必每次都这样做。我们可以利用 Chrome 浏览器的「开发者工具」来运行这些小段代码，通常按 F12 或者 Ctrl+Shift+J 快捷键可以唤醒控制台。

现代浏览器可以使用函数 console.log() 来向控制台输出消息，通过这种方式可以非常方便地调试代码。

小结

把 JavaScript 插入到 HTML 页面中要使用 <script> 元素。使用这个元素可以把 JavaScript 嵌入到 HTML 页面中，让脚本和标记混合在一起；也可以包含外部的 JavaScript 文件。

在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL。而这个文件既可以是本服务器上的文件，也可以是其他任何域中的文件。

所有 <script> 元素都会按照他们在页面中出现的先后顺序依次被解析。

JD强子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
＜script＞元素

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。使用 <script> 元素的方式有两种：直接在页面中嵌入 JavaScript 代码。包含外部 JavaScript 文件。有些时候你会看到<script>标签还设置了一个type属性：<script type="text/javascript"> ...</script>在 HTML5 规范中，<script> 的
复制链接

扫一扫