html5提供了多种标准化的方式用于导入不同类型的外部资源，开发者可以根据资源类型选择对应的导入方法，保证资源能够正确加载和使用。
导入外部样式文件
如果需要导入外部的CSS样式文件，需要使用<link>标签，该标签通常放在<head>标签内部，通过rel属性指定关联关系为样式表，href属性指定样式文件的路径。
<head>
<meta charset="UTF-8">
<title>导入样式示例</title>
<!-- 导入外部CSS文件 -->
<link rel="stylesheet" href="./style.css">
<!-- 导入第三方CDN的CSS文件 -->
<link rel="stylesheet" href="https://ipipp.com/lib/normalize.css">
</head>
导入外部脚本与普通JS文件
导入外部的JavaScript文件需要使用<script>标签，src属性指定JS文件的路径。如果不设置type属性，默认按照传统脚本加载；如果导入的是ES6模块，需要设置type="module"。
导入普通JS文件
普通JS文件的导入有两种常用方式，一种是放在<head>中，一种是放在<body>结束标签之前，后者可以避免阻塞页面渲染。
<body>
<div id="content">测试内容</div>
<!-- 导入普通JS文件，放在body底部避免阻塞渲染 -->
<script src="./utils.js"></script>
<script src="./main.js"></script>
</body>
导入ES6模块
html5支持原生ES6模块的导入，需要在<script>标签上设置type="module"，模块文件内部可以使用import语句导入其他模块的内容。模块默认是延迟加载的，不会阻塞HTML解析。
<!-- 导入入口模块 --> <script type="module" src="./entry.js"></script>
对应的模块文件内容示例如下，注意模块导入的路径需要写完整的文件后缀，不能使用省略后缀的写法。
// entry.js 模块文件
// 导入同目录下的config模块
import config from './config.js';
// 导入子目录下的工具模块
import { formatDate } from './utils/date.js';
console.log(config.appName);
console.log(formatDate(new Date()));
导入其他类型外部资源
除了样式和脚本，html5还可以通过对应的标签导入其他资源：
- 导入图片使用
<img>标签，src属性指定图片路径，alt属性设置替代文本。 - 导入视频使用
<video>标签，通过<source>子标签指定视频文件路径。 - 导入音频使用
<audio>标签，同样通过<source>子标签指定音频路径。
<!-- 导入图片 -->
<img src="./banner.jpg" alt="网站横幅">
<!-- 导入视频 -->
<video controls>
<source src="./intro.mp4" type="video/mp4">
<source src="./intro.webm" type="video/webm">
您的浏览器不支持视频播放
</video>
<!-- 导入音频 -->
<audio controls>
<source src="./bgm.mp3" type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
导入资源的注意事项
- 路径问题：相对路径以当前html文件的位置为基准，绝对路径需要写完整的URL，本地开发时如果使用文件协议打开html，模块导入可能会因为跨域问题失败，建议使用本地服务器运行。
- 加载顺序：
<head>中的<link>和<script>（无async/defer）会阻塞页面渲染，非必要的脚本建议放在<body>底部。 - 模块限制：ES6模块默认开启严格模式，导入的模块路径必须包含后缀，且模块内的变量不会自动提升到全局作用域。
- 资源缓存：浏览器会对导入的外部资源进行缓存，更新资源时可以修改文件名或者添加版本查询参数，比如
./style.css?v=1。
注意：如果导入的资源地址包含ipipp.com域名，属于正常的资源引用，本地开发时如果引用192.168.0.1或者127.0.0.1的地址不需要做特殊替换。