HTML——图片与多媒体
一、图片
网页图片格式
常用图片格式：
- JPEG，格式最大可支持32位色彩，JPEG的文件格式一般有两种文件扩展名：“.jpg”，“jpeg”。
- GIF，最高支持8位色彩，分为GIF87a和GIF89a两种类型。
- PNG是Web图像中通用的格式，是一种无损压缩格式，最多支持32位颜色。
- BMP使用的是索引色彩，可以使用16MB色彩渲染图像。
以上知识这里只需了解即可。
现在详细学习一下基本语法
- 插入图片
基本语法：<img src="图片地址">
img标记属性名及说明
| 属性 | 说明 |
|---|---|
| alt | 规定图片的替代文本 |
| src | 规定显示图片的URL |
| name | 规定图片的名称 |
| height | 设置图片的高度 |
| width | 设置图片的宽度 |
| align | 设置文本中的图片对齐方式：top/ middle/ bottom/ left/ center/ right |
| border | 定义图片周围的边框 |
| hspace | 定义图片左侧和右侧的空白 |
| vspace | 定义图片顶部和底部的空白 |
| usemap | 将图片定义为客户端图片 |
-
设置图片的替代文本
基本语法：<img src="图片地址" alt="替代图片的文本">
这个语法主要用于图片加载不出来时也能让读者理解你所要表达的。 -
设置图片的高度和宽度
基本语法：<img src="图片地址" width=“数值”>
这里的数值单位是像素也可以是百分比 -
设置图片的边框
基本语法<img src="图片地址" border="数值">
单位是像素 -
设置图片的对齐方式
基本语法<img src="图片地址" align="对齐方式">
align值说明
| 值 | 说明 |
|---|---|
| top | 顶端对齐，当前行高度相应扩大 |
| middle | 水平居中对齐，当前行高度相应扩大 |
| bottom | 底端对齐，当前行高度相应扩大 |
| left | 左对齐，行高不变 |
| center | 居中对齐，当前行高度相应扩大 |
| right | 右对齐，行高不变 |
- 设置图片的间距
基本语法<img src="图片地址" hspace="水平间距数值"vspace="垂直间距数值">
解释：hspace调整图片左右两边的空白距离，vspace调整图片上下两边的空白距离。 - 设置图片超链接
基本语法：
<a herf="超链接地址" target="，目标窗口的打开方式">
<img src="图片地址"/>
<a/>
说明：herf属性是用来设置图片的链接地址的；target属性是用来设置目标窗口的打开方式。
target属性说明
| target值 | 说明 |
|---|---|
| _self（默认值） | 在当前窗口打开目标文件 |
| _blank | 在新窗口中打开文件 |
| _top | 在整个浏览器窗口打开链接（忽略任何框架） |
| _parent | 在当前窗口的上一级窗口打开，一般在框架中使用 |
- 设置图片热区链接
基本语法
<img src="图片地址" usemap="#映射图像名称">
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" herf="链接地址">
</map>
Shape属性的取值
| shape属性值 | coords属性值 | 说明 |
|---|---|---|
| rect | x1,y1,x2,y2 | 矩形区域，代表矩形两个顶点坐标 |
| circle | center x,center y,radius | 圆形区域，代表圆心和半径 |
| poly | x1,y1,x2,y2,…,xi,yi,…,xn,yn,xl,yl | 多边形区域，代表各顶点坐标（首、尾坐标相同，形成封闭图形） |
举例说明（结合理解）
<html>
<head>
<title>插入图片</title>
</head>
<body>
<img src="微信图片_20210514212536.jpg" //图片地址
alt="共读一本书" //设置图片的代替文本，图片加载不出来时会显示
width="349" height="253" //设置图片的宽度和高度
border="20px" //设置图片的边框大小
align="top"> //设置图片的对齐方式
<p>担心太多不会减轻明天的负荷，只会剥夺今日的快乐</p>
<img src="微信图片_20210514214407.jpg"
width="390" height="322"
hspace="20px" vspace="20px" //设置图片间距>
</body>
</html>
效果图
二、音频、视频及Flash文件
- embed标记的使用
使用该标记，网页上会出现控制面板，可以直接控制多媒体文件的开与关，以及音量的大小。
基本语法<embed src="多媒体文件地址" width="界面的宽度" autostart="true/false"> </embed>
embed标记的主要属性
| 属性名称 | 属性说明（功能） |
|---|---|
| src | 指定了媒体文件（音频、视频或Flash动画）来源的URL位置 |
| volume | 指定了媒体播放声音的音量大小，取值为0~100.如果没有设定，就用系统音量。该属性只有Netscape支持，IE总是设置在50以上 |
| name | 规定了媒体的名称，以便脚本控制 |
| width/height | 分别规定了控制面板的宽度和高度 |
| border | 规定了控制面板边框的宽度 |
| align | 规定了面板的对齐方式 |
| hspace/vspace | 分别规定了控制面板与其他内容的水平间距和垂直间距 |
| autostart | 指定是否要媒体文件传送完就自动播放，true是要，false是不要，默认为false，可以用它实现背景音乐的功能 |
| loop | 设定媒体播放的重复次数，这里的true表示无限次播放，false表示播放一次就停止 |
| hidden | 指定是否要隐藏控制面板 |
- 添加背景音乐
基本语法<bgsound src="背景音乐地址" loop="播放次数">
loop属性的取值可以是任何数值，这里需要注意的是infinite或-1表示播放无限次数。 - 常用的音频、视频及Flash动画文件格式
插入多媒体文件
举例说明（结合理解）
<html>
<head>
<meta charset="utf-8">
<title>插入音频文件</title>
</head>
<body background="微信图片_20210514233052.jpg">
<h2 >丢了你--戴羽彤</h2>
<embed src="丢了你 (Live) - 戴羽彤.mp3" //插入多媒体文件
width="341" height="186" //设置控制面板宽度和高度
autostart="false" //设置是否要自动播放
loop="true"> //设置播放次数,这里的true代表无限次播放
</embed>
</body>
</html>
效果图
可在Web上播放的音频格式
| 格式 | 文件后缀名 | 描述 |
|---|---|---|
| MIDI | .mid, .midi | MIDI(Musical instrument Digtal Interface)是一种针对电子音乐设备（比如合成器、声卡等）的格式。MIDI文件不含有声音，包含的是可被电子产品播放的数字音乐指令。 |
| RealAudio | .rm, .ram | RealAudio格式是由RealMedia针对因特尔开发的。该格式也支持视频，允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽的，质量常会降低 |
| Wave | .wav | 所有运行Windows的计算机和几乎所有网络浏览器都支持他 |
| WMA | .wma | WMA（Windows Media Audio）格式质量优于MP3，兼容大多数播放器，WMA文件可作为连续的数据流来传输，这使于他对于在线音乐很实用 |
| MP3 | .mp3 | MP3文件实际上是MPEG文件的声音部分。MP3是最受欢迎的针对音乐的音乐格式 |
可在Web上播放的视频格式
| 格式 | 文件后缀名 | 描述 |
|---|---|---|
| AVI | .avi | AVI由微软开发，所有运行Windows系统的计算机都支持 |
| WMA | .wma | Windows Media是由微软开发的格式，需安装相应的组件 |
| MPEG | .mpg, .mpeg | MPEG格式是跨平台的,支持所有的主流浏览器 |
| QuickTime | .mov | 由苹果公司开发，需安装相应的组件 |
| Real Video | .rm, .ram | RealAudio格式是由RealMedia针对因特尔开发的。允许低带宽条件下的视频流，但质量会降低。 |
| Flash | .swf, .flv | 由Macromedia开发，需安装相应的组件 |
| MPEG-4 | .mp4 | 一种针对因特网的新格式 |
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
