内容提要
- 图像img标记语法及属性设置方法。
- 设置图像热区链接。
- 滚动文字marquee标记语法及属性设置方法。
- 背景音乐bgsound标记语法及属性设置方法。
- 嵌入多媒体文件embed标记语法及属性设置方法。
- 采用超链接插入动画、音频和视频类多媒体文件。
图像
-
网页上插入图像的方法就是使用<img>标记。它的众多属性可以控制图像的路径、尺寸和替换文字等各种功能。
-
基本语法：<img src=" " width=" " height=" " hspace=" " vspace=" "align=" " border=" " alt=" ">
-
属性说明：
- src：图像的路径(可以是本地也可以是网络上的URL地址)。
- alt：添加图片的替代文字。
- width/height：设置图片的高度和宽度(px或%)。
- border：设置图片的边框(只输入数字，不加px)。
- align：设置图片对齐方式(水平/垂直两个方向) 。
- hspace/vspace：设置图片的间距，hsapce指水平间隔，vspace指垂直间隔。
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>插入图像</title> <style type="text/css"> body { text-align: center; } </style> </head> <body> <h2 align="center">网页中插入图像：“龙脊梯田”，这张图片来自互联网</h2> <hr color="red" width="60%"> <img src="https://bbs-fd.zol-img.com.cn/t_s1200x5000/g3/M07/08/02/Cg-4WFQ3W-SIYGcYACGkktMcfoMAAP-FgB1ZJ8AIaSq304.jpg" alt="龙脊梯田" height="600" width="800"> <br><br> <h2 align="center">网页中插入图像：“龙脊梯田”，这张图片来自互联网</h2> <hr color="red" width="60%"> <img src="龙脊梯田.jpg" alt="龙脊梯田" height="600" width="800"> </body> </html>
-
设置图像的宽度和高度
- 语法：<img src=" " width=" " height=" ">
- 图像高度和宽度的单位可以是像素，也可以是百分比。在设置图像的宽度和高度的属性时，可以只设置宽度或高度其中之一，另一个属性会按原图像宽高等比例显示。
- 同时设置两个属性时图像可能会发生变形。
-
设置图像的边框
- 语法：<img src=" " border="value">
- value为边框线的宽度，用数字表示，单位为像素。
-
设置图像对齐方式及间距
取值 说明 top 图像的顶端和当前行的文字顶端对齐，当前行高度相应扩大 middle 图像水平中线和当前行的文字顶端对齐，当前行高度相应扩大 bottom 图像的底端和当前行的文字顶端对齐，当前行高度相应扩大 left 图像左对齐，浮动游离于文字之外，文字环绕图像周围，文字行高度没有任何变化。 center 图像中线和当前行的文字中线对齐，当前行高度相应扩大 right 图像右对齐，浮动游离于文字之外，文字环绕图像周围，文字行高度没有任何变化。 -
图像热区链接
-
基本语法：
- <img src="图片地址" usemap="#映射图片名称">
- <map name="#映射图片名称"> <area shape="热区形状" coords="热区坐标" href="URL"> </map>
-
热区形状shape：
- rect(矩形)；
- circle(圆形)；
- poly(多边形)。
-
coords与shape对应的坐标值：
- rect：x1,y1,x2,y2(4个值)
- circle：center-x,center-y,radius(3个值)
- poly：(x1,y1,x2,y2…xi,yi…xn,yn,x1,y1)((n+1)*2个值，多边形的顶点数)。
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像热区链接</title> </head> <body> <p> <img src="龙脊梯田.jpg" align="bottom" width="200" border="3" alt="龙脊梯田" usemap="#long"> <map name="long"> <area shape="circle" coords="50,50,30" href="https://www.baidu.com" alt="百度"> </map> </p> </body> </html>
-
滚动文字
-
设计一个生动的网站，有时需要在网页中添加多媒体元素。
-
多媒体元素可以更好地体现设计者的个性，通常滚动文字可以增加文字的动态效果。
-
通过marquee标记可以添加滚动文字(内容)，增加动态效果，丰富网页的内容。
-
基本语法：<marquee width=" " height=" " bgcolor=" " direction="up|down|left|reight" behavior="scoll|slide|alternate" hspace=" " vspace=" " scollamount=" " scrolldelay=" " loop=" " onmouseover="this.stop()" onmouseout="this.start()">滚动内容</marquee>
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>添加滚动文字</title> </head> <body> <h3 align="center">添加滚动文字</h3> <hr color="#000066"> <marquee behavior="" direction=""> <h4>该文字为滚动效果</h4> </marquee> </body> </html> -
设置滚动文字背景颜色与滚动循环
- 基本语法：<marquee bgcolor=" " loop="5">滚动内容</marquee>
- 文字背景颜色采用5种方式，最常用的设置方式是十六进制和rgb()函数。
- 默认情况下，滚动文字会不停地循环滚动，但使用loop属性可以设置滚动文字的滚动循环次数。循环次数直接使用数字表示。一般为整数，-1表示无限循环(默认值)。
-
设置滚动方向与滚动方式
- 基本语法：<marquee direction="滚动方向" behavior="滚动方式">滚动内容</marquee>
- 语法说明：
- direction：up|down|left(向左滚动，默认值)|right
- behavior：scroll(循环往复滚动，为默认值)|slide滚动一次就停止|alternate(来回交替滚动)
-
设置滚动速度与滚动时延
- 基本语法：<marquee scrollamount="20px" scrolldelay="100ms>滚动内容</marquee>
- 语法说明：
- 滚动速度是滚动文字每次移动的长度，长度用数字表示，单位为像素px。
- 延迟时间以毫米ms为单位，延迟时间越小滚动速度越快，延迟时间越大即会出现走走停停的效果。
-
设置滚动范围与滚动空白空间
-
基本语法：<marquee width=" " height=" " hspace=" " vspace=" ">滚动内容</marquee>
-
宽度值和高度值均用数字表示，单位为像素。
-
hspace、vspace属性值是整数，单位为像素，但不要加单位。设置滚动空白空间就是指滚动文字背景和它周围文字及图像之间的空白空间范围。默认情况下，滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间的空白空间。hspace是左右边距，vspace指上下边距。
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>设置滚动文字的滚动空白与滚动范围</title> <style type="text/css"> p { font-size: 18px; color: #0000cc; text-indent: 2em; /* 首行缩进 */ } </style> </head> <body> <h3 align="center">设置滚动文字的滚动空白与滚动范围</h3> <hr color="#330099"> <marquee scrollamount="1" scrolldelay="20" bgcolor="#c4e1c6" width="600px" height="100p" hspace="50" vspace="100" behavior="alternate" direction="down"> <p> 设置滚动空白空间就是指滚动文字背景和它周围文字及图像之间的空白空间范围。默认情况下， 滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间 的空白空间。 </p> </marquee> </body> </html>
-
音频、视频及Flash文件
-
除了滚动文字外，可以使用<embed> </embed>标记为网页添加背景音乐等效果。
-
网页中的多媒体文件还包括：
- 音频文件
- 视频文件
- flash文件
-
可以播放的文件类型有：Midi、Mav、AIFF、SWF、AV、MP3、MOV、AVI等。
-
基本语法：<embed src="多媒体文件" width="界面宽度" height="界面高度" autostart="true|false" loop="true|false"></embed>
-
语法说明：
- width、height：整型值，单位为像素。设置播放界面的宽度和高度，否则不显示播放界面。
- 一些高版本浏览器不设置宽度和高度也可以出现播放界面。如果播放声音、音乐文件作为背景音乐时，必须同时将宽度和高度设为0.
- src：设置媒体文件的路径。
- autostart：设置是否自动播放。
- true为自动播放；
- false为被动播放。
- loop：设置是否循环播放。
- true为循环播放；
- false为不循环播放。
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面嵌入多媒体文件</title> <style type="text/css"> div { text-align: center; font-size: 18px; font-family: 雅黑; } </style> </head> <body> <div id="" class=""> <h3>醉花阴</h3> <h4>李清照</h4> <hr size="5" color="#660099"> <p>薄雾浓云愁永昼，瑞脑销金兽。<br>佳节又重阳，玉枕纱厨，半夜凉初透。<br> 东篱把酒黄昏后，有暗香盈袖。<br>莫道不销魂，帘卷西风，人比黄花瘦。</p> <hr size="5" color="#660099"> <embed src="http://mp32.9ku.com/upload/320/2016/12/22/856939.mp3" width="0" height="0" autostart="true"> </div> </body> </html>
小结
- 网页中插入图像、滚动文字、音频及其他多媒体文件的方法。
- img标记
- marquee标记
- embed标记的语法及其属性的设置方法
- 运用上述标记可以对所开发的网站进行重新布局、页面美化，不断改善用户体验，吸引更多网络访问者浏览自己的网站。