HTML学习笔记多媒体页面一

Posted 2020-07-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML学习笔记多媒体页面一相关的知识，希望对你有一定的参考价值。

使用marquee标签可以将文字设置为动态滚动的效果，语法：<marquee direction="滚动方向" behavior="滚动方式">滚动文字</marquee>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>多媒体页面</title>
 6 </head>
 7 <body>
 8 <marquee direction="left" behavior="slide">
 9 古之成大事者
10 </marquee>
11 <marquee direction="right" behavior="scroll"><font color="#FF3366" size="+2">
12 不惟有超世之才</font>
13 </marquee>
14 <marquee behavior="alternate"><font color="#0099CC" size="+3">
15 亦有坚忍不拔之志</font>
16 </marquee>
17 </body>
18 </html>

通过scrollamount属性能够调整文字滚动的速度，scrolldelay属性可以设置滚动文字的时间间隔

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>多媒体页面</title>
 6 </head>
 7 <body>
 8 <marquee scrollamount="100" scrolldelay="10">
 9 <font size="+2" color="#CC3366">看我不停脚步地走</font>
10 </marquee>
11 <marquee scrollamount="100" scrolldelay="100">
12 <font size="+2" color="#6633CC">看我走走停停</font>
13 </marquee>
14 <marquee scrollamount="100" scrolldelay="500">
15 <font size="+2" color="#99FF00">我要走一步停一停</font>
16 </marquee>
17 </body>
18 </html>

设置滚动文字后，默认会不断地循环下去，如果希望文字滚动几次停止，则可以使用loop属性来进行设置 <marquee loop="循环次数">滚动文字</marquee>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多媒体页面</title>
</head>
<body>
<marquee direction="up" loop="10">
<font size="+5" color="#CC0000" face="隶书">君子之交淡如水<br>
小人之交甘若醴<br>
</font>
</marquee>
</body>
</html>

如果不设置滚动背景的面积，那么默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用width和height属性可以调整其水平和垂直的范围<marquee bgcolor="颜色代码" width="" height="">滚动文字</marquee>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多媒体页面</title>
</head>
<body>
<marquee behavior="alternate" bgcolor="#66FFFF">
王勃
</marquee>
<br/>
<br/>
<marquee behavior="alternate" bgcolor="#66CCFF" width="500" height="500">
老当益壮，宁知白首之心；穷且益坚，不坠青云之志
</marquee>
</body>
</html>

滚动空间属性hspace、vapace可以设置水平范围和垂直范围

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>多媒体页面</title>
 6 </head>
 7 <body>
 8 不设置空白空间的效果：
 9 <marquee behavior="alternate" bgcolor="#FFCC33">
10 明日科技欢迎你!
11 </marquee>
12 明日科技致力于编程的发展！！ <br/>
13 <hr color="#0099FF"/>
14 <br/>
15 设置水平为90像素、垂直为50像素的空白空间：
16 <marquee behavior="alternate" bgcolor="#CCCC00" hspace="90" vspace="50">
17 明日科技欢迎您！
18 </marquee>
19 明日科技致力于编程的发展！
20 </body>
21 </html>

以上是关于HTML学习笔记多媒体页面一的主要内容，如果未能解决你的问题，请参考以下文章