祝早日成为大佬喔。
多媒体嵌入:媒体标签
让网页变得丰富生动,离不开图片、音频、视频等多媒体内容,相应标签可实现这些元素的嵌入 。
(一)图片标签 <img>
用于在页面中插入图片,是单标签,关键属性如下:
-
src:指定图片的路径,可为相对路径(如 images/logo.png ,相对于当前 HTML 文件的路径 )或绝对路径(如 example.com/logo.png )。 -
alt:当图片无法加载显示时,展示的替代文本,能帮助用户了解图片内容,也对 SEO 有帮助 。 -
width和height:设置图片的宽度和高度,值可以是像素(如 width="200" )或百分比(如 width="50%" ),合理设置可避免页面布局偏移 。
<img src="images/flower.jpg" alt="一朵美丽的花" width="300" height="200">
(二)音频标签 <audio>
用于插入音频内容,支持多种音频格式 。
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持音频播放功能
</audio>
注:💫 controls 属性会显示播放、暂停、音量调节等控制条;
💫💫💫<source> 用于指定音频文件路径和类型,当浏览器不支持当前格式时,会显示标签内的提示文本 。
(三)视频标签 <video>
用来嵌入视频,让用户在网页上观看视频内容 。
<video controls width="600">
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
注:同上。
(四)嵌入网页标签 <iframe>
可在当前页面中嵌入其他网页内容,比如嵌入地图、视频平台的视频等 。
<iframe src="https://www.baidu.com" width="800" height="600" frameborder="0"></iframe>
src 是要嵌入的网页地址, width 和 height 设置嵌入区域的宽高, frameborder="0" 可去除默认的边框 。
——————————----------------------------————————————
基操勿六,点赞加关注,更新不迷路😍😍😍!