web添加图片与视频方法

Web期末笔记：图片与视频添加方法

一、插入图片 img 标签

1. 基础语法
   
   • src：必填，填写图片地址（本地/网络地址）

• alt：图片加载失败时显示文字，优化SEO

2. 路径分类

3. 同级文件夹：src="bg.jpg"

4. 下级文件夹：src="images/bg.jpg"

5. 网络图片：src="shturl.cc/9JPU06GgKf2vu"

6. 常用属性

• width/height：设置宽高，只写一个会等比例缩放

• title：鼠标悬浮显示提示文字

4. 图片加超链接



二、插入视频 video 标签

1. 基础语法
   
   多兼容写法（推荐考试使用）
   

您的浏览器不支持视频播放 2. 核心属性（高频考点）

• controls：显示播放、暂停、音量控制面板（必加）

• width/height：设置播放器尺寸

• autoplay：页面加载自动播放（多数浏览器需搭配muted静音）

• muted：静音播放

• loop：循环播放

• poster="图片地址"：视频未播放时展示封面图

示例完整代码

三、简答背诵考点

1. alt属性作用：图片加载失败提示、无障碍阅读、搜索引擎优化。

2. video标签controls属性作用：展示播放控制条。

3. 本地资源路径书写规则：同级直接写文件名，子文件夹加文件夹名称/。