正确使用link和script标签引用外部资源可提升网页性能与结构。1. 引用CSS需在head中使用link标签,rel="stylesheet",href指定路径,推荐type="text/css";2. 引用JS常用script标签,src指定文件路径,建议置于body末尾或通过defer/async异步加载以优化渲染;3. 注意路径正确性、CDN安全性(integrity和crossorigin)、资源加载时机,确保页面高效稳定运行。

在HTML中引用外部资源,比如CSS样式表或JavaScript文件,是网页开发的基础操作。正确使用 link 和 script 标签可以让页面加载更清晰、结构更规范。
引用外部CSS文件(使用 link 标签)
要引入外部的CSS文件,使用 link 标签,并放在HTML文档的 head 区域内。
示例代码:
支持相对路径和绝对路径:
立即学习“前端免费学习笔记(深入)”;
- 相对路径:
href="css/style.css" - 绝对路径:
href="https://example.com/styles/main.css"
引用外部JavaScript文件(使用 script 标签)
引入外部JS文件使用 script 标签,通常放在 body 结尾处以避免阻塞页面渲染,也可放在 head 中配合 defer 或 async 属性。
- src 属性指定JS文件路径
- 不需要在标签内写JavaScript代码
- type="text/javascript" 可省略(HTML5默认类型)
基本写法:
推荐使用异步加载优化性能:
-
defer:延迟执行,等页面解析完成后再按顺序执行
适合依赖DOM的脚本 -
async:异步加载并立即执行,不保证顺序
适合独立脚本如统计代码
带属性的示例:
常见问题与注意事项
确保外部资源引用有效,需注意以下几点:
- 检查文件路径是否正确,避免404错误
- CSS放在 head 提升渲染体验,JS尽量靠后或使用 defer/async
- 引用CDN资源时,考虑添加 integrity 和 crossorigin 属性提高安全性
- 可以使用条件注释或媒体查询控制资源加载(如 print 样式表)
带完整性校验的CDN引用示例:
基本上就这些。合理使用 link 和 script 标签,能让你的网页结构更清晰,加载更高效。











