媒体标签
图片标签
在网页中显示图片
<img src="" alt="">
特点:
1.单标签
2.img标签需要展示对应的效果,需要借助标签的属性进行设置
标签属性:src=" 属性值" alt="属性值 "
属性名:src alt
属性注意点:
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性,属性之间、标签名与属性之间(指的是img与src或alt之间)都用空格隔开
3.属性之间没有顺序之分
当前网页和目标图片在同一个文件夹中,路径直接写目标图片的即可(包括后缀名)
例如:图片文件是1.jpg
<body>
<img src="./1.jpg" alt="" title=""
//"./"里的"."是指当前网页所在位置
</body>
alt的属性值是替换文本,当图片加载失败时才显示alt文本,当图片加载成功时,不会显示alt的文本。
<body>
<img src="./错的路径图片会加载失败" alt="我是替换文本" title=""
</body>
title的属性值提示文本,当鼠标悬停(把鼠标放在上门的意思)时才显示文本,title属性不仅仅可以用于图片标签,还可以用于其他标签。
<body>
<img src="./1.jpg" alt="我是替换文本" title="我是title的效果"
</body>
width和height属性值分别是宽度和高度(数字)
如果只设置width或height中的一个,另一个会等比例缩放(照片不会变形),如果同时设置这两个,若设置不当图片可能会变形。
路径
页面加载图片,需要先找到对应的图片和图片的对应路径。
路径可分为:
1.绝对路径(了解):目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径。
·盘符开头:D: \day01\images\1.jpg
·完整的网络地址 https://www.itcast.cn/2018czgw/image/logo.gif
(了解)
2.相对路径(常用):从当前文件出发找目标文件。(当前文件是当前网页所在位置)
相对路径分类:
·同级目录:当前文件和目标文件在同一目录
例如目标文件是1.jpg
方法一:<img src="1.jpg"
方法二:<img src="./1.jpg"
·下级目录:目标文件在下级目录中
例如 imag文件里装有目标文件1.jpg,imag和当前文件同级
<img src="imag/1.jpg">
先进到imag这个文件夹再找1.jpg
·上级目录:目标文件在上级目录中
例如imag文件是当前文件,imag和目标文件1.jpg同级
往上一级”../",往上两级“../../”
<img src="../1.jpg"
音频标签
在页面中插入音频
<audio src="./music.mp3" controls> </audio>
常见属性:
属性名 功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放
音频标签只支持三种格式:MP3、Wav、Ogg
视频标签
在网页中插入视频
<video src="./video.mp4" controls></video>
常见属性:
属性名 功能
src 视频的路径
controls 显示播放的控件
autoplay 自动播放(部谷歌浏览器中需要配合muted实现静音播放,即加上muted)
loop 循环播放
视频标签只支持三种格式:MP4、Wav、Ogg(这两个有的浏览器不兼容)
链接标签
点击之后从一个页面跳转到另一个页面
双标签
<a href="./目标网页.html">超链接</a>
例如:<a href=".https://www.baidu.com/">跳转到百度</a>
href:跳转地址
<a href="#">空链接,不知道跳哪去</a>
target属性值是:目标网页的打开形式
取值 效果
_self 默认值,在当前窗口中跳转(覆盖原网页)
_blank 在新窗口中跳转(保留原网页)
用法:<a href=".https://www.baidu.com/" target="-blank">跳转到百度</a>