今天我们来看看 <script> 标签的一些写法和属性吧。
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 个属性。
一、 src：指定外部 JavaScript 文件的路径。
路径有相对路径和绝对路径两种。
（1）相对路径。是指相对于当前 HTML 文档的路径，也最为常见，它的写法有3种，比如：
（2）绝对路径。是指从根目录开始的完整路径。绝对路径的写法是/path/to/file.js，其中path/to/file.js是要引入的 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 点：
湘公网安备 43102202000103号