HTML需通过标准方式引用外部资源：一、用<link rel="stylesheet">引入CSS；二、用<script src>加载JS，可加defer/async；三、用@import或<link>引入字体；四、用img/audio/video的src或source嵌入媒体；五、用a标签跳转或fetch调用API。
如果您希望HTML页面能够正确加载样式、脚本或媒体内容，必须通过标准方式准确引用外部资源。以下是实现HTML与外部资源连接的具体操作方法：
一、引入外部CSS样式表
使用<link>标签在<head>中声明外部CSS文件，浏览器将据此下载并应用样式规则。
1、在HTML文档的<head>标签内插入<link>元素。
2、设置rel属性为stylesheet。
立即学习“前端免费学习笔记（深入）”；
3、通过href属性指定CSS文件的相对路径或绝对URL，例如css/style.css或https://cdn.example.com/styles/main.css。
二、嵌入外部JavaScript文件
通过<script>标签的src属性加载外部JS文件，使页面获得交互逻辑或功能扩展。
1、在<head>或<body>底部添加<script>标签。
2、设置src属性指向JS文件位置，如js/app.js或https://unpkg.com/lodash@4.17.21/lodash.min.js。
3、可选添加defer或async属性以控制执行时机：defer确保按顺序执行且不阻塞解析，async允许异步下载并立即执行。
三、加载外部字体资源
利用@import规则或<link>标签引入网络字体，确保文本渲染符合设计要求。
1、在CSS文件开头使用@import语句，例如：@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2、或在HTML的<head>中使用<link rel="preconnect">配合<link rel="stylesheet">提升加载优先级。
3、在CSS中通过font-family声明调用该字体，例如：font-family: 'Roboto', sans-serif;
四、嵌入外部图片与媒体资源
通过img、audio、video等标签的src属性或picture/source结构引用托管于本地或CDN的媒体文件。
1、为<img>标签设置src属性，值为图片路径，如images/logo.png或https://example.com/assets/banner.jpg。
2、使用<source>标签配合media属性提供响应式图像源，例如：<source srcset="img/photo-large.webp" media="(min-width: 1200px)" type="image/webp">。
3、为<audio>或<video>标签设置controls属性，并通过多个<source>提供不同格式备选，如mp3与ogg。
五、链接外部网页与API端点
使用a标签跳转至其他HTML页面，或通过fetch、XMLHttpRequest调用外部API获取动态数据。
1、在<a>标签中设置href属性指向目标页面，例如：/about.html或https://example.com/contact。
2、在JavaScript中调用fetch函数，传入API URL，如：fetch('https://api.example.com/data')。
3、确保跨域请求已配置CORS响应头，或后端启用Access-Control-Allow-Origin字段允许当前域名访问。
