全部学科

Python全栈

NodeJS全栈

通用技术

redis git docker nginx mysql zookeeper rabbitmq

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Web前端

TypeScript vue CSS HTML javascript npm pinia vite

GO后端

golang gorm gin

📝 1 篇文章 20 道配套习题

HTML多媒体与嵌入内容专题

专题说明

本专题系统讲解HTML多媒体与嵌入内容的相关技术，包括图片标签属性、视频音频嵌入、iframe框架使用、SVG矢量图形绘制、响应式多媒体适配等内容。

学习目标

掌握img标签的src、alt、srcset等属性的使用
掌握video和audio标签的嵌入与控制属性
掌握iframe的嵌入与安全控制
掌握SVG基本图形元素与样式属性
掌握picture标签和响应式图片方案
掌握CSS aspect-ratio保持宽高比的方法

学习内容

图像嵌入：img标签、src/alt属性、srcset/sizes响应式图片、picture标签
视频嵌入：video标签、controls/autoplay/muted/loop/poster属性、多格式支持
音频嵌入：audio标签、controls/autoplay/loop属性、音频格式兼容
iframe嵌入：跨域嵌入、sandbox安全控制、allow权限设置
SVG图形：基本图形元素、path路径、fill/stroke样式、内联SVG
响应式方案：srcset响应式图片、aspect-ratio宽高比、媒体查询适配

学习建议

alt属性对SEO和无障碍访问非常重要，务必正确使用
自动播放需配合muted属性，否则可能被浏览器阻止
iframe嵌入外部内容时注意安全，使用sandbox限制权限
SVG内联可获得CSS和JavaScript控制能力
响应式图片使用srcset和picture标签优化加载性能

📝 配套习题（20 题）

💡 参考答案在文末

判断题

1

<embed>标签和<iframe>标签的功能完全相同，可以互相替代。

A

对

B

错

2

<img>标签需要使用</img>作为结束标签。

A

对

B

错

3

在HTML5中，单独设置autoplay属性即可让视频在有声音的情况下自动播放。

A

对

B

错

4

<iframe>只能嵌入来自同一域名下的页面，不能嵌入外部网站的页面。

A

对

B

错

5

SVG图形元素不能使用CSS进行样式控制，只能通过SVG自身的属性设置样式。

A

对

B

错

6

SVG文件可以通过<img>标签引用，但这种方式下SVG内部的元素无法被CSS样式化。

A

对

B

错

单选题

7

关于<img>标签的alt属性，以下说法正确的是？

A

alt属性是可选的，如果不设置浏览器会显示图片文件名

B

alt属性只在图片无法加载时显示，正常情况下没有任何作用

C

alt属性提供图片的文本描述，对SEO和无障碍访问都很重要

D

alt属性和title属性功能完全相同

8

HTML5中使用哪个标签嵌入视频内容？

A

<media>

B

<video>

C

<movie>

D

<embed video>

9

以下哪种方式嵌入的外部资源可以与页面进行DOM交互和通信？

A

<img src="icon.svg">

B

<iframe src="widget.html">

C

<embed src="document.pdf">

D

<video src="video.mp4">

10

<img>标签中用于指定图片路径的必需属性是？

A

href

B

src

C

link

D

path

11

HTML中用于嵌入另一个网页的标签是？

A

<embed>

B

<include>

C

<iframe>

D

<frame>

12

以下哪种方式不能在HTML页面中嵌入SVG图形？

A

使用<svg>标签直接内嵌SVG代码

B

使用<img>标签引用外部SVG文件

C

使用<video>标签嵌入SVG

D

使用CSS的background-image属性引用SVG

13

<img>标签的srcset属性的作用是？

A

设置图片加载失败时的备用图片

B

根据屏幕分辨率或宽度提供不同尺寸的图片源

C

设置图片的加载优先级

D

设置图片的动画效果

多选题

14

以下哪些属性同时适用于<video>和<audio>标签？（多选）

A

controls

B

autoplay

C

poster

D

loop

15

关于响应式图片的<picture>元素，以下哪些说法是正确的？（多选）

A

<picture>元素可以根据屏幕宽度选择不同的图片源

B

<picture>元素内部必须包含<img>元素作为默认图片

C

<source>元素使用media属性定义媒体查询条件

D

<picture>元素可以同时提供不同格式的图片供浏览器选择

16

以下哪些方法可以让视频响应式适配不同的屏幕宽度？（多选）

A

设置width="100%"属性让视频宽度自适应

B

使用CSS max-width: 100%; height: auto;

C

使用CSS aspect-ratio属性保持宽高比

D

使用<picture>元素包裹<video>

填空题

17

HTML5中使用____________标签嵌入音频内容。设置____________属性可以显示浏览器内置的播放控件，设置____________属性可以让音频循环播放。要提供多种音频格式，可以在标签内使用source子元素。

18

使用CSS的____________属性可以保持元素的宽高比。例如设置____________可以保持16:9的宽高比，设置____________可以保持4:3的宽高比，设置1可以保持1:1的正方形比例。

19

SVG元素使用____________属性设置填充颜色，使用____________属性设置描边颜色，使用____________属性设置描边宽度。当需要无填充时，fill属性设置为none。

20

SVG中绘制圆形使用____________元素，绘制矩形使用____________元素，绘制直线使用____________元素，绘制路径使用path元素。其中path是最灵活的元素，可以绘制任意复杂图形。

参考答案

1.错误 2.错误 3.错误 4.错误 5.错误 6.正确 7.C 8.B 9.B 10.B 11.C 12.C 13.B 14.A;B;D 15.A;B;C;D 16.B;C 17.audio;controls;loop 18.aspect-ratio;16/9;4/3 19.fill;stroke;stroke-width 20.circle;rect;line

想在手机上练习这套专题？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码