关于html的script标签

前言

在开始学习之前，最好了解过一些Html的基础知识。因为这一章节介绍的是script标签，如果你还不了解少么是标签，还需要去了解html的基础知识。

script 标签

在 HTML 中，JavaScript 代码通常插入在标签之间。

您可以在 HTML 文档中放置任意数量的脚本。脚本可以放在， 或HTML 页面的部分，或两者中。

在Html文档中可以编写任意多的script标签，编写任意多的js代码。script标签可以放在， 或中。

放在body和head的区别

在本小节中，我会告诉你：

改变颜色

运行

在浏览器中运行test.html。效果如下：字体的颜色并没有变成绿色。

这里我们可以重新验证上文说的：脚本在p标签之前加载了。在加载脚本的时候，是无法找到p标签的，最终导致无法改变颜色。

放在body中

现在让我们尝试相反的方法，在 body 的底部：

改变颜色

还有一件事：虽然最好将 JavaScript 包含在 HTML 的末尾，但将 JavaScript 放在HTML 的中并不总是会导致错误。

外部 JavaScript

JavaScript 也可用于外部文件。JavaScript 文件的文件扩展名为“.js”。要使用外部脚本，请将脚本文件的名称放在脚本标记的 src 属性中。

|

外部 JavaScript 的优点：

将 JavaScript 代码放在外部 js 文件中比内联脚本有一些优势：

分离 HTML 和 JavaScript 代码将有助于更轻松地管理代码库。

设计人员可以与编码人员并行工作而不会发生代码冲突。

适用于现代源代码版本控制系统，例如 GIT。这意味着这些文件中的每一个都将维护一个历史记录，并且可以由多个程序员签入、签出。

代码和 HTML 都易于阅读。

外部 JavaScript 文件由浏览器缓存，可以加快页面加载时间。

许多流行的 JavaScript 包都托管在内容交付网络 (cdn) 上，您可以使用src 中的 URL 简单地指向它们*，*从而避免将 js 文件复制到本地文件夹。

script标签到底放在哪里

以下是浏览器加载带有

JavaScript：

// my-script.js document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, i.e. when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart"; });

因为您的浏览器不知道my-script.js在下载和执行之前不会修改文档，所以解析器停止解析。

过时的推荐

解决这个问题的旧方法是将

具有 async 属性的脚本是异步执行的。这意味着脚本在下载后立即执行，同时不会阻止浏览器。这意味着可以在脚本 1 之前下载和执行脚本 2。

根据http://caniuse.com/#feat=script-async，97.78% 的浏览器都支持这个。

延迟defer

具有 defer 属性的脚本按顺序执行（即第一个脚本 1，然后是脚本 2）。这也不会阻止浏览器。

与异步脚本不同，延迟脚本仅在整个文档加载后才执行。

根据http://caniuse.com/#feat=script-defer，97.79% 的浏览器都支持这个。98.06% 至少部分支持它。

HTML JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。