常见的使用方式（可以在HTML页面中的任意位置添加<script>标签）：
1. 直接在<script type="module"> </script>标签内写JS代码。
例如：
index.html中的内容为：
<body>
<script type="module">
let x = 2;
console.log(x);
</script>
</body>
2. 直接引入文件：<script type="module" src="/static/js/index.js"> </script>。
例如：
/static/js/index.js文件中的内容为：
console.log("hello world");
index.html中的内容为：
<script type="module" src="/static/js/index.js"> </script>
3. 将所需的代码通过import关键字引入到当前作用域。
例如：
/static/js/index.js文件中的内容为：
let name = "kitty"; // 定义一个变量name
function print() { // 定义一个print()函数
console.log("Hello World!"); // 输出到控制台
}
export { // 将变量name,函数print()暴露出来，以便可以用来调用
name,
print
}
index.html中的内容为：
<script type="module">
import { name, print } from "/static/js/index.js";
console.log(name);
print();
</script>
执行顺序：
1. 类似于HTML与CSS，按从上到下的顺序执行。
2. 事件驱动执行。
HTML, CSS, JavaScript三者之间的关系：
1. CSS控制HTML
2. JavaScript控制HTML与CSS
3. 为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。
ps:（可以在HTML页面中的任意位置添加
<script>标签）
先静态后动态：把js放在标签最后面，防止访问时没有渲染出来bug。
标签：index,调用,console,HTML,js,顺序,print,JS,name From： https://www.cnblogs.com/kitty-38/p/18673228