子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

<script> 标签 ​

<script> 标签属于 HTML5 的嵌入式内容标签。

通常用于实现网页的动态功能，如图像操作、表单验证以及内容的动态更改。

加载方式

<script>标签的加载方式默认是同步的，这意味着 HTML 页面在遇到<script>标签时会暂停加载，等待脚本加载并执行完成后才会继续。这种行为可能会影响网页的性能，因此在性能优化中，对<script>标签的管理和加载策略至关重要。

1. 什么是 <script> 标签 ​

  • <script> 标签用于在 HTML 文档中包含或引用客户端脚本，通常指 JavaScript 代码，也可以是其他脚本语言。使用 <script> 标签可以向网页插入交互式功能和动态内容。

2. 标签属性和页面位置 ​

  • 属性：<script> 标签有一些常见的属性，如：

    • src：用于指定外部脚本文件的 URL。
    • type：定义脚本内容的 MIME 类型，默认为 "text/javascript"。

    <script type="text/babel">

    <script type="text/babel">是用来指示浏览器这个<script>标签内的代码需要被 Babel 处理。Babel 是一个 JavaScript 编译器，它可以将使用最新 JavaScript 语法编写的代码转换成旧版本浏览器可以理解的 JavaScript 代码。

    在 HTML 中，<script>标签的type属性通常用于指定脚本文件的 MIME 类型。例如，text/javascript表示这是一个 JavaScript 脚本。然而，大多数现代浏览器都默认将<script>标签内的代码当作 JavaScript 来处理，所以即使不设置type属性，<script type="text/javascript">或者简单地写成<script>也同样可以生效。

    除了text/babel和text/javascript，type属性还可以设置为其他 MIME 类型，以指示脚本文件的格式。例如：

    • text/css：用于包含 CSS 样式表。
    • module：表示这个脚本是一个 ES6 模块，它可以导入或导出绑定。
    • text/html：理论上可以用来包含 HTML 代码，但实际上不常用。

    对于 Babel 处理的代码，使用text/babel作为type属性值是一种约定俗成的做法，它告诉浏览器这个脚本块需要通过 Babel 进行预处理。如果不设置type="text/babel"，Babel 将无法识别并处理这个脚本块中的 JSX 和其他需要转换的 JavaScript 语法。因此，在使用 Babel 编译 React 代码的情况下，设置type="text/babel"是必要的。

    • defer：延迟脚本的执行，等到文档解析完成后再执行。
    • async：异步加载并执行脚本，不影响文档解析。
    • charset：指定脚本文件的字符编码。

  • 页面位置：<script> 标签通常可以放置在以下位置：

    • 在文档的 <head> 中：用于在页面加载时执行必要的脚本。
    • 在文档的 <body> 中：可以放在页面内容的任何位置，用于延迟加载或优化性能。
    • 外部链接：通过 src 属性引用外部 JavaScript 文件。

3. 使用方式 ​

  • 内部脚本：在文档中编写 JavaScript 代码
    html
    <script>
  // JavaScript 代码
  document.getElementById("myElement").style.color = "red";
</script>
  • 外部脚本：引用外部 JavaScript 文件
    html
    <script src="script.js" charset="UTF-8"></script>
  • 带有属性的脚本：使用属性来控制脚本行为
    html
    <script src="script.js" type="text/javascript" defer></script>
  • ES6 模块：声明为 ES6 模块的脚本
    html
    <script type="module">
  import { exampleFunction } from "./module.js";
  exampleFunction();
</script>

通过以上详细信息和示例，您应该能够更好地理解 <script> 标签的作用以及如何在 HTML 中使用它来包含或引用客户端脚本。如果您有任何进一步的疑问，请随时提出。

总的来说，<script> 标签是网页开发中的一个基本元素，它允许开发者在 HTML 中嵌入或引用脚本，从而为网页添加各种动态效果和功能。