<script> 元素

将js插入html中主要方法是使用 script元素，主要具有以下几个属性，都是可选的

属性	描述
async	表示应该立即下载脚本，但是异步下载, 下载完后立即执行（针对外部脚本）
defer	表示应该立即下载脚本，但是异步下载, 会等待页面其他内容加载完毕之后才会去执行脚本（针对外部脚本）
src	需要外部引入的js文件（支持跨域）
type	代码块中的脚本语言内容类型，按照惯例，这个值始终是 `text/javascript` ，如果这个值是 `module` ，代码会被当作 `es6` 的模块进行解析，只有这个时候，代码中才支持 `import` 和 `export`

使用 <script> 方式有两种，一种是直接写在标签体内，一种是通过 src 去引入外部的 js 文件

标签内

包含在 <script>标签内的代码会被从上到下进行解析

在使用行内js的时候, 要注意代码中不能出现字符串</script>

<script>
    console.log('</script>') // error: Unterminated string literal
</script>

浏览器在解析的时候看到</script>后，会当作他是闭标签，想避免这个问题，只需要加上转义字符即可

<script>
    console.log('<\/script>')    
</script>

外部引入

如果要使用外部引入的js，就必须要使用src去指向一个外部的地址，

如果使用了src属性，标签内部的代码就不会被执行了，浏览器只会下载并执行脚本文件，而会忽略标签内的代码

推迟执行脚本

异步执行脚本

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <script async src="./async1.js"></script>
  <script defer src="./defer.js"></script>
  <script async src="./async2.js"></script>
</head>

<body>
  <script>
    console.log('行内script')
  </script>
</html>

动态加载脚本

除了<script>标签，我们还可以使用js中的DOM API 去创建一个script标签进行加载

<script>
    const script = document.createElement('script');
    script.src = "./async1.js"
    document.head.appendChild(script)
    console.log('行内script')
</script>

默认情况下，这种方式创建的js会被附上async 属性，如果你不想使用异步方式，可以手动更改为false

script.async = false;

<noscript>标签

针对早起的浏览器不支持script标签，需要一个页面的优雅降级的方法，最终<noscript>出现，用于给不支持js的浏览器提供代替的内容

符合以下条件会显示<noscript>标签内容

浏览器不支持脚本
浏览器对脚本的支持关闭

总结

js是通过<script>标签嵌入html中的, 要么是将js脚本写在标签内部，要么通过src去引入外部脚本，src的优先级大于标签内部的

可以使用async和defer来改变js的加载顺序

对于不支持js的浏览器，可以使用<noscript>标签来进行优雅降级

2.HTML中使用javascript

<script> 元素

推迟执行脚本

异步执行脚本

动态加载脚本

<noscript>标签

总结