html__0">大白话html 第四章学习图像和多媒体标签
图像标签 <img>
想象一下你要在网页上展示一张漂亮的照片,这时候就需要用到 <img>
标签。它就像是一个相框,能把你指定的图片“装”到网页里。
关键属性:
src
:这个属性就像是给图片指了条路,告诉浏览器这张图片在哪里。比如图片在你的电脑里,或者在某个网站上。alt
:当图片因为各种原因(比如网络不好、图片地址错误)显示不出来的时候,alt
属性里的文字就会出现,告诉用户这张图片大概是什么内容。
代码示例:
html"><!DOCTYPE html>
<html>
<body><!-- 插入一张图片,src 指定图片路径,alt 是图片的替代文本 --><img src="https://example.com/cute-cat.jpg" alt="一只可爱的猫咪"></body>
</html>
在这个例子里,src
属性指向了一张猫咪图片的地址,alt
属性告诉用户如果图片加载失败,这张图是一只可爱的猫咪。
音频标签 <audio>
如果你想在网页上播放一段好听的音乐或者有声故事,就可以用 <audio>
标签。它就像是一个小音响,能播放你指定的音频文件。
关键属性:
src
:和图片标签的src
类似,它指明了音频文件的位置。controls
:加上这个属性后,网页上会出现一个播放控件,用户可以用它来播放、暂停、调节音量等。
代码示例:
html"><!DOCTYPE html>
<html>
<body><!-- 插入一个音频播放器,src 指定音频文件路径,controls 显示播放控件 --><audio src="https://example.com/music.mp3" controls>你的浏览器不支持音频播放。</audio></body>
</html>
这里,浏览器会尝试播放 src
属性指定的音频文件。如果浏览器不支持音频播放,就会显示 <audio>
标签里的文字。
视频标签 <video>
要是你想在网页上放个有趣的视频,<video>
标签就能派上用场。它就像一个小电视,能播放你提供的视频。
关键属性:
src
:指定视频文件的位置。controls
:添加播放控件,方便用户操作。width
和height
:可以设置视频播放窗口的宽度和高度。
代码示例:
html"><!DOCTYPE html>
<html>
<body><!-- 插入一个视频播放器,src 指定视频文件路径,controls 显示播放控件,width 和 height 设置视频窗口大小 --><video src="https://example.com/video.mp4" controls width="640" height="360">你的浏览器不支持视频播放。</video></body>
</html>
在这个例子中,浏览器会尝试播放指定的视频文件,并且按照设置的宽度和高度显示视频窗口。如果浏览器不支持视频播放,就会显示提示文字。