一、添加图像
1、网页中常见的图像格式
网页中所用的三种图片格式分别是JPEG、PNG、GIF。不同的图片需要选择不同的存储格式,这样能够避免由于图片格式错误而造成页面性能降低。
现在对三种web图片存储格式做一个简单知识归纳如下:
(1)JPEG
适用于:照片和复杂图像使用
特点:
- 适合连续色调图像,如照片。
- 可以表示包含多达1600万种不同颜色的图像。
- 在缩小文件大小时会丢掉图像信息,是一种“有损”格式。
- 不支持透明度。
- 文件比较小,以便Web页面更高效的显示。
- 不支持动画。
(2)PNG
适用于:单色图像和线条构成的图像(如logo,剪贴画和图像中的小文本)
特点:
- 可以表示上百万种不同颜色的图像、PNG有3种:PNG-8、PNG-24、PNG-32.取决于需要表示多少种颜色。
- 会压缩文件来缩小文件大小,不过不会丢掉信息。是一种“无损”格式
- 允许将颜色设置为“透明”,使图像下面的东西可以显示出来。
- 与相应的JPEG文件相比,PNG文件更大一些,不过取决的与使用的颜色数,可能比相应的GIF文件小,也可能更大。
(3)GIF
适用于:类似于PNG,GIF最适合单色图像和线条构成的图像(如logo,剪贴画和图像中的小文本)
特点:
- GIF可以表示最多256中不同颜色的图像。
- GIF也是一种“无损”格式。
- GIF也支持透明度,不过只允许一种颜色设置为“透明”。
- GIF往往比相应的JPEG文件大。
- 支持动画。
2、插入图像并设置图像属性
1、图像标记img <img src="图像文件地址">
2、设置图像高度height 图像宽度width 不定义则按原始尺寸,如果只给出其中的一项,则图像按原宽高比例进行缩放
3、设置图像的边框 border <border="图像边框的宽度"> 单位是像素
4、图像水平间距hspace 图像默认与周围的文字保持2像素单位的距离,使用该属性设置图像周围空白,通过调整图像边距
使文字和图像排列紧凑
5、图像垂直间距vspace
6、图像的对齐方式align bottom与底部对齐 middle与中央对齐 等等
7、设置图像的替代文字alt 指定图像的替代文本,用于在图像无法显示时或者禁止显示时,代替图像显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图像和多媒体</title>
</head>
<body>
<!--
-->
<img src="D:\webstorm文件\images\360wallpaper.jpg" height="650" width="450" border="5"
align="middle" alt="鲜花" />
</body>
</html>
二、添加多媒体文件
在网页中添加音乐或视频文件
<embed src="多媒体文件地址" width="宽度" height="高度"
autostart="是否自动运行" loop="是否循环播放"></embed>
width和height一定要设置,否则无法正确显示播放多媒体的文件;
autostart的取值有true false
loop 取值 true无限次循环播放 false只播放一次
三、添加背景音乐
随网页的打开而循环播放
1、设置背景音乐bgsound <bgsound src="存放路径">
2、设置循环播放次数loop 取值-1则无限循环