五、媒体标签

·  阅读 60
 五、媒体标签

五、媒体标签

一)图片标签(< img >)

(< img src="" alt=""><标记名 属性>)

1.图片标签的src属性

属性名:src;

属性值:目标图片的路径;

注意事项:

*当前网页和目标在同一个文件夹中,路径直接写目标图片的名字即可(要带后缀名);

*如果在其他文件夹中,记得./or../跳出文件夹选择;

*可以用网络图片,需填写图片的完整域名。

2.图片标签的alt属性

属性名:alt;

属性值:替换文本;

注意事项:

*当图片加载失败时才会显示出来的文字内容(图片路径错误时所显示的文字)

3.图片标签的title属性

属性名:title;

属性值:提示文本,当鼠标悬停在目标图片上时,会显示出来的文本。

注意事项:title属性不仅可以用于图片标签,还可用于其他标签。

代码格式:

<img src="" alt="图片不见了" title="这是一只猫">
复制代码

4.图片标签的宽高属性(hight、width)

属性名:hight和width;

属性值:高度和宽度(数字 常用单位排序)

代码格式:

注意点:

*如果只设置了一张图片的高度而没有设宽度,那么其宽度则会根据高度自动等比例缩放;

*高宽设置不当,图片有可能会发生变形。

二)路径的介绍

使用场景:页面需要加载图片,需要通过路径找到对应的图片。

两种路径:绝对路径和相对路径。

1.绝对路径:

1)概念:

指目录下的绝对位置,可以直接达到目标位置,访问外网资源时(站外资源),只能使用绝对路径

2)书写格式1:协议://域名/目录

例:taobao.com/jiushi.css

3)书写格式2:盘符:\目录

例:D:\day01\imges\1.jpg

2.相对路径:

1)概念:

当前文件出发寻找目标文件的过程(引用站内资源时,用相对路径)

2)相对路径分类:

同级目录、下级目录、上级目录

3)使用方法:

wps1.png

a.同级目录

访问同一文件夹中的另一b.html时:

例:要从a中访问b时:

<a href="./b.html"></a>
复制代码

或:

<a href="b.html"></a>
复制代码

b.上级目录

a访问根目录相同的c.html:

<a href="./../c.html"></a>
复制代码

(注意:第一组./不可省略)

c.跳级1

a访问根目录相同的文件夹中的e.html:

 <a href="./../002文件夹/e.html"></a>
复制代码

d.跳级2

a访问根目录相同的文件夹中的文件夹中的d.html

 <a href="./../002文件夹/003文件夹/d.html"></a>
复制代码

e.跳级3

d访问a:

 <a href="../../001文件夹/a.html"></a>
复制代码

三)音频标签的介绍

1.使用场景:

在页面中插入音频

2.代码格式:

<audio src="" controls></audio>
复制代码

3.常见属性:

属性名功能
src音频的路径
controls显示播放的控件(播放钮进度条等)
autoplay自动播放(部分浏览器不支持)
loop循环播放

4.注意事项:

音频标签目前只支持MP3、Wav、Ogg三种格式

四)视频标签的介绍:

1.使用场景:

在页面中插入视频

2.代码格式:

<video src="" controls></video>
复制代码

3.常见属性:

属性名功能
src视频的路径
controls显示播放的控件
autoplay自动播放(谷歌浏览器需要配合muted实现静音播放)
loop循环播放

4.注意事项:

视频标签目前只支持MP4、WebM、Ogg三种格式

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改