导入JS的3种方式

行内导入JS（慎用：不安全）
内嵌式
外链式

1. 行内导入JS（慎用）

<div onclick="alert('hello world!')"></div>

2. 内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        alert('hello world~~~');
    </script>
</body>
</html>

3. 外链式

// 1.js
alert('hello world!!!');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="1.js"></script>
</body>
</html>

注意

注意：内嵌导入和外链导入不能合并在一起，如果当前时外链导入的，那么 SCRIPT 脚本块中编写的所有代码都不会被执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="1.js">
        // 不可以
        alert('hello world!');
    </script>
</body>
</html>

导入css的4种方式

行内（不推荐）：HTML 和 CSS 混淆，代码结构混乱
内嵌式
外链式
导入式

/* 1.css*/
div {
    width:100px;
    height:200px;
    background:pink;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 3.外链式 -->
    <link rel="stylesheet" href="1.css"/>
    <style>
        <!-- 4. 导入式 -->
        @import "1.css";
        <!-- 2. 内嵌 -->
        div {
            width:100px;
            height:200px;
            background:pink;
        }
    </style>
</head>
<body>
    <!-- 1. 行内（不推荐）：HTML和CSS混淆，代码结构混乱 -->
    <div style="width:100px; height:200px; border:1px solid #000;"></div>
</body>
</html>