HTML学习笔记☆移动标签

HTML学习笔记☆移动标签        一、移动标签名称：marquee 创建一个滚动的文本字幕，应用于文字、图片、表格。   二、移动标签语法： <marquee>移动的文字、图片、动画、表格等内容</marquee>   三、移动标签的属性语句表达式：标签名称、属性内容和属值。属性汇总例句如下：   <marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 bgcolor=#ccffff height=150 width=15% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()><P align=center>此处输入滚动内容</P></marquee>   四、marquee属性名称与解析（注：标签的属性都是可选的，根据需要设置）   属性名称 属性解析 direction 表示移动的方向（默认为left） behavior 表示移动的方式（默认为scroll） loop 表示移动内容的移动次数（默认为无数次） scrollamount 指定移动内容的移动速度 scrolldelay 指定移动内容的移动延时 bgcolor 指定滚动内容范围的背景颜色 width和height 指定滚动内容在页面中的矩形范围大小 hspace和vspace 指定滚动矩形区域距周围的空白区域 onmouseover=this.stop() 表示当鼠标移上区域的时候滚动停止 onmouseout=this.start() 表示当鼠标移开的时候又继续滚动 align 指定水平对齐方式 valign 指定垂直对齐方式   五、marquee标签属性、属值参数、语法示例与效果    标签属性 属值参数 语法示例 显示效果 direction 移动方向 direction=left 向左（默认值） <marquee direction=left> 我向左移动 </marquee> 我向左移动 direction=right 向右 <marquee direction=right> 我向右移动 </marquee> 我向右移动 direction=up 向上 <marquee direction=up> 我向上移动 </marquee> 我向上移动 direction=down 向下 <marquee direction=down> 我向下移动 </marquee> 我向下移动 标签属性 属值参数 语法示例  显示效果 behavior 移动方式 behavion=scroll 单方向循环卷动 （默认值）   <marquee behavion=scroll> 我一般卷动 </marquee> <marquee  behavion=scroll direction=up height=60> 我改单方向 向上循环滚动 </marquee> 我一般卷动 我改单方向向上循环滚动 behavior=alternate 来回滚动 <marquee behavior=alternate> 我来回滚动 </marquee> 我来回滚动 behavior=slide 只滚动一次 <marquee behavior=slide>  我只滚动一次  </marquee> <marquee behavior=slide direction=up>  我改向上只滚动一次 </marquee> 我只滚动一次 我改向上只滚动一次  标签属性 属值参数 语法示例 显示效果 loop 移动次数 loop=3 只滚动三次 <marquee loop=3>  我只滚动三次  </marquee> 我只滚动三次 loop=infinite 无限循环滚动 （默认值） <marquee loop=infinite> 我无限循环滚动 </marquee> 我无限循环滚动 loop=-1 无限循环滚动 <marquee loop=-1> 我无限循环滚动 </marquee> 我无限循环滚动 标签属性 属值参数 语法示例 显示效果 scrollamount 移动速度 取值大于1的数字，数字越大速度越快，正常取值3-4为宜。 scrollamount=1 速度太慢 <marquee scrollamount=1  width=40> 我的速度太慢 </marquee> 我的速度太慢 scrollamount=3 速度正常 <marquee scrollamount=3> 我的速度正常  </marquee> 我的速度正常 scrollamount=10 速度较快 <marquee scrollamount=10> 我的速度较快   </marquee> 我的速度较快 标签属性 属值参数 语法示例 显示效果 scrolldelay 移动延时 单位：毫秒 1秒=1000毫秒   scrolldelay=30 小步前进 <marquee scrolldelay=30> 我小步前进  </marquee> 我小步前进 scrolldelay=1000 scrollamount=100>大步前进 <marquee scrolldelay=1000 scrollamount=100> 我大步前进 </marquee> 我大步前进 标签属性 属值参数 语法示例 显示效果 border 背景颜色 border=滚动范围内的背景颜色 （形式：16进制#aaabbcc或css样式rgb(255,255,0)或颜色名称：red、yellow、blue等） <marquee behavior=scroll direction=left bgcolor=#00ffff> 我的背景颜色 </marquee> 我的背景颜色 width 宽度 height 高度   wifth和height指定滚动内容在页面中的矩形范围宽度和高度，参数可以是数字或百分比，数字表示矩形所占的（宽和高）像素数，百分比表示矩形所占浏览器窗口（宽和高）的百分比。 <marquee width=300 height=30 bgcolor=#ff00ff> 我宽300像素， 我高30像素。 </marquee> 我宽300像素，我高30像素。 标签属性 属值参数 语法示例 显示效果 hspace 周围水平空白   vspace 周围垂直空白   hspace和vspace这两个属性指定滚动矩形区域周围的空白区域 <marquee width=300 height=30 hspace=10 vspace=10 bgcolor=#00ffff> 我距矩形边缘水平和垂直距周围各10像素 </marquee> <marquee idth=300 height=30 space=50 vspace=50 bgcolor=#ffff00> 我距矩形边缘水平和垂直各50像素</marquee> 我距矩形边缘水平和垂直周围各10像素 我距矩形边缘水平和垂直周围各50像素 onmouseover 鼠标触发事件   onmouseout 鼠标移开事件 onmouseover=this.stop()表示当鼠标移上区域的时候停止滚动 oumouseout=this.start() 当鼠标移开的时候又继续滚动 <marquee onmouseover=this.stop()  onmouseout=this.start()>鼠标移上我停，鼠标移开我动。 </marquee> 鼠标移上我停，鼠标移开我动。 align 水平对齐   valign   垂直对齐 align=水平对齐方式 可选值为：left（左）,right（右）,center（中间）,默认值为：left。这个属值决定滚动内容位于矩形内的左、中、右位置。 <marquee scrollamount=3 behavior=alternate> <table border=1> <tbody><tr><td > 属值决定滚动内容位置。 </td></tr></tbody></table> 属值决定滚动内容位置。 valign=垂直对齐方式  可选值为：top（上部）,middle（中部）,bottom（底部）,默认值为：middle。这个属值决定滚动内容位于矩形内的上、中、下位置。 <marquee direction=up width=300 height=200 bgcolor=#ccffff><p valign=bottom>这个属值决定滚动内容位于矩形内的上中下位置</p></marquee> 这个属值决定 滚动内容 位于矩形内的 上中下的位置    六、移动标签练习    1、图片从左上角向右上角移动 用两个移动标签，一个控制上下方向，另一个控制左右方向。第一个移动标签控制向上移动direction=up,第二个移动标签控制向右移动direction=right。   语法代码： <marquee scrollamount="4" direction="up" width="360" height="360" bgcolor="#6495ed"><marquee scrollamount="4" direction="right" width="100%" height="50"><img src="http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif" width="40" img src=http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif  width="40"></marquee></marquee> 显示效果： 2、图片从右下角向左上角移动   用两个移动标签，一个控制上下方向，另一个控制左右方向。第一个移动标签控制向上移动direction=up,第二个移动标签控制向右移动direction=left。   语法代码： <marquee crollamount="5" direction="up" width="360" height="360" bgcolor="#6495ed"><marquee scrollamount="5" direction="left" widrh="100%" height="50" ><img scr="http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif" width="40" img scr=http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif width="40"></marquee></marquee> 显示效果： 3、图片从右上角向左下角移动 用两个移动标签，一个控制上下方向，一个控制左右方向。第一个移动标签控制向下移动direction=down,第二个移动标签控制向左direction=left。 语法代码：   <marquee direction="down" scrollamount="3" width="360" height="360" bgcolor=#6495ed><marquee direction="left" scrollamount="3" width="100%" height="50" ><img src=http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif  width="40" img src=http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif  width="40"></marquee></marquee>   显示效果：     4、图片从左上角向右下角移动 ※控制语句：direction=left 向左 direction=down 向下。 语法代码： <marquee direction="down" scrollamount="3" width="360" height="360" bgcolor="#6495ed"><marquee direction="right" scrollamount="3" width="100%" height="50" ><img src="http://userimage5.360doc.com/14/0307/19/9060464_201403071915050389_main.jpg" width="40" img src="http://userimage5.360doc.com/14/0307/19/9060464_201403071915050389_main.jpg" width="40"></marquee></marquee>   显示效果：   5、图片从四角向中心移动   ※控制语句：direction=left 向左， direction=down 向下，direction=right 向右，direction=up 向上。   语法代码： <table border="0" width="400" height="200" bgcolor="#6495ED"> <tr> <td width="200" height="200"> <marquee scrollamount="5" direction="down" width="200" height="200"> <marquee scrollamount="5"direction="right" width="100%"height="50" > <img style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif" type=image width=50 height="50"> </marquee></marquee> </td> <td width="200" height="200"> <marquee scrollamount="5" direction="down" width="200" height="200"> <marquee scrollamount="5"direction="left" width="100%"height="50"> <img style="FILTER: alpha(opacity=100,style=2)" img src="http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif" type=image width=50 height="50"> </marquee></marquee> </td></tr> <tr> <td width="200" height="200"> <marquee scrollamount="5" direction="up" width="200" height="200"> <marquee scrollamount="5"direction="right" width="100%"height="50" > <img style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif" type=image width=50 height="50"> </marquee></marquee> </td> <td width="200" height="200"> <marquee scrollamount="5" direction="up" width="200" height="200"> <marquee scrollamount="5"direction="left" width="100%"height="50" > <img style="FILTER: alpha(opacity=100,style=2)" img src="http://image74.360doc.com/DownloadImg/2014/06/0922/42457790_1.gif" type=image width=50 height="50"> </marquee></marquee> </td></tr> </table>  显示效果：   6、图片从四角向中心移动聚集再移动到四角。 语法代码： <TABLE border=0 width=400 bgColor=#6495ed align=center height=200> <TBODY> <TR> <TD height=200 width=200> <MARQUEE direction=down height=200 behavior=alternate width=200 scrollAmount=5> <MARQUEE direction=right height=50 behavior=alternate width="100%" scrollAmount=5><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image73.360doc.com/DownloadImg/2014/06/0915/42446044_1.gif" width=50 height=50 input="" type="image"></MARQUEE></MARQUEE></TD> <TD height=200 width=200> <MARQUEE direction=down height=200 behavior=alternate width=200 scrollAmount=5> <MARQUEE height=50 behavior=alternate width="100%" scrollAmount=5><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image73.360doc.com/DownloadImg/2014/06/0915/42446044_1.gif" width=50 height=50 type="image" img=""></MARQUEE></MARQUEE></TD></TR> <TR> <TD height=200 width=200> <MARQUEE direction=up height=200 behavior=alternate width=200 scrollAmount=5> <MARQUEE direction=right height=50 behavior=alternate width="100%" scrollAmount=5><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image73.360doc.com/DownloadImg/2014/06/0915/42446044_1.gif" width=50 height=50 input="" type="image"></MARQUEE></MARQUEE></TD> <TD height=200 width=200> <MARQUEE direction=up height=200 behavior=alternate width=200 scrollAmount=5> <MARQUEE height=50 behavior=alternate width="100%" scrollAmount=5><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image73.360doc.com/DownloadImg/2014/06/0915/42446044_1.gif" width=50 height=50 type="image" img=""></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>  显示效果： 7、文字在图片上向上移动 语法代码：   <div align="center"><table height=380 width=580 background=http://www./photopreview/230/230_182_18248.jpg border=1 cellpadding="20"><tr><td align=left valign=top><marquee scrollamount=1 direction=up width=450 height=150>,font face=华文行楷 size=5 color=#0000ff ><b>《梅花落》<br>隆冬十二月，寒风西北吹。<br>独有梅花落，飘荡不一枝。<br>留恋逐霜彩，漫步下冰斯。<br>何当与春日，共映芙蓉词。</b></font></marquee></td></tr></table></div>   显示效果： 　　　《梅花落》 隆冬十二月，寒风西北吹。 独有梅花落，飘荡不依枝。 留恋逐霜彩，漫步下冰斯。 何当与春日，共映芙蓉词。           http://jxry988.360doc.com 吉祥如意988-360doc个人图书馆