简单玩转HTML的邪修大法速成(二)!!

55 阅读1分钟

祝早日成为大佬喔。

多媒体嵌入:媒体标签

让网页变得丰富生动,离不开图片、音频、视频等多媒体内容,相应标签可实现这些元素的嵌入 。

(一)图片标签  <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"  可去除默认的边框 。

——————————----------------------------————————————

基操勿六,点赞加关注,更新不迷路😍😍😍!