多媒体与嵌入

图片

在HTML中,图象由<img>标签定义。语法为:

1
2
> <img src='url' alt=''/>
>

<img>是空标签,它只包含属性,没有闭合标签。要在页面上显示图像,需要使用源属性srcsrc的值是图像文件的URL,也就是引用该图像的文件的绝对路径或者是相对路径。alt规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title设置鼠标悬停时显示的内容(一般不用设置)。另外还可以设置widthheight的值来设置图片的宽和高。

1
<img src='https://albert-5.cn/img/avatar.jpg' alt='萨瓦迪卡不' title='Hello' width='700px' height='600px' />

相对路径

这种路径是以引用文件的网页所在位置为参考基础,而建立出的目录路径。

  • 图象文件和HTML文件位于同一文件夹:只需要输入图象文件的名称即可
  • 图象文件位于HTML文件的下一级文件夹:输入文件夹和文件名,之间用/隔开
  • 图象文件位于HTML文件的上一级文件夹:在文件名之前加入../,如果是上两级,则需要使用../../,以此类推

绝对路径

指当所有网页引用同一个文件时,所使用的路径都是一样的,就是交待清文件的具体位置,例如C:\Users\DELL\Desktop

自适应图片

网页前端开发的时候,需要让图片能够根据父元素自适应变化大小,从而使网页排版更加美观。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<! DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<title></title>
<style type='text/css'>
img{
-moz-background-size: contain|cover;
-webkit-background-size: contain|cover;
background-size: contain|cover;
width: 100%;
height: auto;
}
</style>
</head>

<body>
<img src="https://albert-5.cn/img/avatar.jpg"/>
</body>
</html>

注:通过把width设置为100%,使得图片随着窗口宽度的改变而自动适应变化大小

视频和音频内容

video标签

用来插入视频

1
<video src='https://labfile.oss.aliyuncs.com/codehour/codehour.mp4' controls='controls'>我也不知道这是啥</video>

video标签的常用属性:

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后立马播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性,则当媒介文件完成后播放后再次开始播放
preload preload 如果出现该属性,则视频在页面加载时,并预备播放;如果使用“autoplay”,则忽略该属性。
src url 要播放视频的url
width pixels 设置视频播放的宽度

audio标签

用来嵌入音频

1
2
3
<audio controls>
<source src='http://labfile.oss.aliyuncs.com/courses/1236/平凡之路.mp3' type='audio/mp3'>
</audio>

Web增加向量图

向量/矢量图定义

矢量图像,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体,就可以在维持它原有清晰度和弯曲度的同时,多次移动和改变它的属性,而不会影响图例中的其它对象。这些特征使基于矢量的程序特别适用于图例和三维建模,因为它们通常要求能创建和操作单个对象。基于矢量的绘图同分辨率无关。这意味着它们可以按最高分辨率显示到输出设备上。

注:以上定义来源于百度百科

为什么要使用矢量图?

电脑中的图像类型分为两大类,一类称为点阵图(位图),一类称为矢量图; 点阵图在图片放大的时候会出现模糊现象(你可以试着把一个 png 格式的图片放大观察一下),矢量图则不会。因此越来越多的人开始使用矢量图来作为网页图标。

如何添加矢量图

注:上述矢量图标用时再做考虑吧!

iframe

iframe元素会创建包含另外一个文档的内联框架(即行内框架),用于嵌入其他网页

1
<iframe src='规定在iframe中显示的文档的url' width='' height='' frameborder='1/0' name='iframe名称' scrolling

常用属性说明

属性 描述
align left right top middle bottom
frameborder 1 0 规定是否显示框架周围的边框
height pixels % 规定iframe的高度
longdesc url 规定一个页面,包含有关iframe的较长描述
marginheight pixels 定义iframe的顶部和底部的边距
marginwidth pixels 规定iframe的左侧和右侧的边距
name frame_name 规定iframe的名称
sandbox allow-forms allow-same-origin allow-scripts allow-top-navigation 启用一系列对<iframe>中内容的额外限制
scrolling yes no auto 规定是否在iframe中显示滚动条
seamless seamless 规定<iframe>看上去像是包含文档的一部分
src url 规定iframe中显示的文档的url
srcdoc html_code 规定<iframe>中显示的页面的HTML内容
width pixels 定义iframe的宽度
1
2
3
4
5
6
7
8
9
10
<! DOCTYPE html>
<html lang='en'>
<head>
<meta chaeset='utf-8'>
</head>
<body>
<iframe src='https://albert-5.cn' width='400px' height='400px' frameborder='0' marginheight='50px' marginwidth='50px' scrolling='yes' name='text'>
</iframe>
</body>
</html>
效果展示如下