若页面图片不显示、动画失效或样式错乱，需检查路径、标签用法及加载顺序：一、img标签须设正确src与alt；二、script置body底或加defer，确保DOM就绪；三、link须在head中且rel="stylesheet"；四、CSS background-image路径以CSS文件为基准；五、picture配合source实现响应式图片。
如果您在HTML5页面中需要引入图片、JavaScript动画脚本或CSS样式资源，但页面未正常显示图像、动画失效或样式错乱，则可能是素材路径、标签用法或加载顺序存在问题。以下是具体使用方法：
一、使用img标签引入图片素材
img标签是HTML5中嵌入位图或矢量图像的标准方式，需确保src属性指向可访问的图片路径，并设置alt提供替代文本以增强可访问性。
1、在HTML文件的body内插入img标签，src属性填写图片相对或绝对路径。
2、为img添加width和height属性（或通过CSS控制），避免页面重排。
立即学习“前端免费学习笔记（深入）”；
3、设置alt属性值为图片内容的简明描述，例如：alt="公司Logo"。
4、如需响应式图片，使用srcset与sizes属性配合不同分辨率资源。
二、使用script标签引入JS动画素材
script标签用于加载JavaScript代码，动画逻辑通常依赖DOM就绪状态及资源加载完成时机，需区分内联脚本与外部引用，并注意执行时机控制。
1、将script标签置于body底部，或在head中添加defer属性，确保HTML解析完成后再执行。
2、通过src属性引入外部JS文件，路径需准确指向.js文件位置，例如：src="js/animation.js"。
3、若动画依赖第三方库（如GSAP、Three.js），须先引入库文件，再引入自定义动画脚本。
4、检查浏览器控制台是否报错，确认脚本中选择的DOM元素在执行时已存在于文档中。
三、使用link标签引入CSS样式素材
link标签用于导入外部CSS文件，是组织样式资源的标准方式，必须放在head中且rel属性设为stylesheet，才能正确应用样式规则。
1、在head内添加link标签，设置rel="stylesheet"和href指向CSS文件路径。
2、确保CSS文件中定义的类名或选择器与HTML结构匹配，例如动画类需配合@keyframes声明。
3、若CSS中包含背景图，其url()内的路径是相对于CSS文件位置，而非HTML文件位置。
4、使用media属性控制样式表适用场景，例如：media="screen and (max-width: 768px)"。
四、使用CSS background-image引入图片素材
CSS background-image属性可在任意块级或行内元素上叠加图片，适用于装饰性图像、精灵图或动态切换场景，不参与文档流。
1、为指定元素设置background-image属性，值为url()函数包裹的图片路径。
2、搭配background-size、background-position等属性精确控制图像显示区域与缩放行为。
3、路径为相对路径时，以CSS文件所在目录为基准，例如：url("../images/icon.png")。
4、为提升性能，对静态装饰图启用CSS Sprites技术，合并多张小图为单张大图并定位显示。
五、使用HTML5新增的picture与source标签响应式引入图片
picture元素提供基于设备特性（如像素密度、视口宽度）的图片源选择机制，比单纯使用img srcset更灵活，适用于复杂适配需求。
1、用picture标签包裹多个source标签和一个备用img标签。
2、每个source标签设置media属性（如"(min-width: 768px)"）和srcset属性指定对应图片路径。
3、img标签作为兜底方案，其src和alt属性必须存在，否则无图时无法降级显示。
4、验证各source条件是否互斥且覆盖完整断点，避免浏览器因匹配失败而跳过所有source直接加载img。
