你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。
云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集
300篇原创内容-更多前端系列内容可以go公众.h：云桃桃
后台回复“前端基础路线”可获取前端基础学习路线
后台回复“前端基础题”可得到前端基础100题汇总，持续更新中
后台回复“前端电子书”可获取20+本精选电子书
前言
今天我们来看看 <script> 标签的一些写法和属性吧。
2 种基本用法
1、内联 JavaScript：直接在 <script> 标签内部编写 JavaScript 代码。
代码如下：
<script>
// JavaScript 代码放在这里
document.getElementById('title').innerHTML = 'hello world!'
</script>
2、外部 JavaScript 文件：是将 JavaScript 代码存储在一个单独的文件中，然后在 HTML 文档中使用<script>标签的src属性来引入这个文件。
比如，下面的写法，引入相对路径 js 文件夹下面的 script.js 文件，外部文件的写法就是内联方式标签里的内容。
<script src="js/scirpt.js"></script>
2者相比，最好使用 src 外部引入，它的优势如下几点：
代码复用：将 JavaScript 代码存储在一个单独的文件中，可以方便地在多个页面中复用这些代码。
代码维护：将 JavaScript 代码存储在一个单独的文件中，可以方便地进行代码的维护和修改。
提高性能：将 JavaScript 代码存储在一个单独的文件中，可以提高页面的加载速度。
需要注意的是，<script> 标签可以放在 HTML 文档的任何位置，但是为了保证代码的可读性和可维护性，最好将<script>标签放在<body>标签的底部，或者放在<head>标签中。
接下来，我们来看看它的 4 个属性。
4 个属性
一、 src：指定外部 JavaScript 文件的路径。
路径有相对路径和绝对路径两种。
（1）相对路径。是指相对于当前 HTML 文档的路径，也最为常见，它的写法有3种，比如：
-
./：表示当前目录，不写这个也表示当前目录。 -
../：表示上一级目录。 -
/：表示根目录。
（2）绝对路径。是指从根目录开始的完整路径。绝对路径的写法是/path/to/file.js，其中path/to/file.js是要引入的 JavaScript 文件的完整路径。
其实这个路径，我们和前面超链接HTML基础：超链接那篇文的写法是一样的，可以看看。
那在外部引入 JavaScript 文件时，最好用哪种呢？我认为最好是使用相对路径，它有以下几个好处：
-
可移植性：相对路径是相对于当前 HTML 文件的位置，而不是固定的绝对路径。这意味着，如果你将整个项目移动到其他位置或服务器上，相对路径仍然有效，而无需修改 JavaScript 文件的路径。这样可以提高项目的可移植性，使其更容易在不同环境中运行。
-
简洁性：相对路径通常比绝对路径更简洁，因为它们不包含完整的文件系统路径。这使得代码更易于阅读和理解，尤其是在项目结构复杂的情况下。
-
避免依赖于特定的服务器配置：绝对路径可能会受到服务器配置的影响，例如服务器的根目录位置或虚拟主机设置。使用相对路径可以避免这种依赖，确保代码在不同的服务器环境中都能正常工作。
-
团队协作方便：在团队开发中，使用相对路径可以减少因为文件路径不一致而导致的问题。
然而，在某些情况下，绝对路径可能也是合适的，例如：
-
如果 JavaScript 文件位于与 HTML 文件不同的域名或服务器上，那么必须使用绝对路径。
-
如果你希望在不同的网站或项目中共享相同的 JavaScript 文件，并且这些网站或项目的根目录位置不同，那么使用绝对路径可能更方便。
总的来说，在大多数情况下，使用相对路径是一个更好的选择。但具体使用哪种路径方式，还需要根据实际情况来决定。
二、 type：指定脚本的 MIME 类型，默认为 text/javascript。所以，基础学习中，我们不写 type 也没问题。
<script type="text/javascript"> // 不写type属性也可以
// JavaScript 代码放在这里
</script>
三、 async：表示脚本将异步加载，浏览器会并行下载脚本，不阻塞页面的解析，但会阻塞文档的加载和渲染直到脚本执行完毕。
<script src="script.js" async></script>
四、 defer：表示脚本将在文档解析完成后，且在 DOMContentLoaded 事件触发前执行。多个带有 defer 属性的脚本会按照它们在文档中出现的顺序执行。适用于脚本依赖于文档的解析，并且希望在文档解析完成后再执行脚本。
那假设你有一个外部 JavaScript 文件 app.js，你想在文档加载完毕后再执行它，可以这样写：
<script src="app.js" defer></script>
如果你需要立即执行内联脚本，可以这样写：
<body onload="console.log('页面开始加载');">
<!-- 页面内容 -->
<script>
// 页面加载时立即执行的脚本
</script>
</body>
使用时候，需要注意以下 2 点：
-
内联脚本应放在文档的底部，或者使用
defer或async属性，以避免阻塞页面渲染。 -
外部脚本可以放在头部（
<head>），通过使用defer或async来控制脚本的加载和执行时机。
OK，本文完。
![[开发|鸿蒙] DevEco Studio编译构建（笔记，持续更新）](https://img-blog.csdnimg.cn/direct/22d732e1f656413485c5f0918ef9b98e.png)
