☆代码学习群简易教程（8）

春天没来 2014-04-15

展开全文

“春天没来”欢迎您 第八节移动标签">

移动标签是有趣的标签，是神奇的标签，是制作网页很重要的一个标签。文字、图片、边框、音画，甚至整个网页，都可以应用移动标签让它们动起来。特别是用两个移动标签控制移动内容的那些网页，其效果更是变幻莫测。移动标签，大有文章可作。我这里的讲解，也只能起个抛砖引玉的作用。希望大家深入研究、大胆探讨，充分应用移动标签，制作出各式各样的具有神奇效果的漂亮网页来。

移动标签，也是一套标签。需要首标签与尾标签配套应用。

移动标签的表达式为：<marquee>内容</marquee>

标签解析：

<marquee>是移动首标签，</marquee>是移动尾标签，中间的“内容”，被这两个标签包裹着、控制着。在首标签<marquee>的尖括号内，我们可以给它添加属性与属值。

移动标签常用的属性：移动方向（direction）、移动速度（scrollamount）、移动方式（behavior）、延时属性（scrolldelay）、对齐方式（aligh）、移动屏幕的宽（width）和高（height）等属性。

移动方向的属值：left（向左移动）、 right（向右移动）、up（向上移动）、down（向下移动）。默认为left （向左移动）。

移动方向的表示方法如：direction=up （等号后面的方向可替换）

移动速度：

移动速度的属值是大于等于1的数字，数字越大移动速度越快。速度取值的大小要看你制作网页的需要而确定。一般取值为3－4。

表示方法如：scrollamount=4

移动方式：slide（由一端快速滑动到另一端）、alternate（来回滚动）

表示方法：behavior="slide" 表示由一端快速滑动到另一端；behavior=alternate表示来回滚动。

移动屏幕的宽和高:

移动屏幕的宽和高是指显示移动内容的那个“方框”的宽度和高度。width（宽）、height（高）。

表示方法：width="?" height="?" （？处输入数值）。

对齐方式是指移动内容在移动屏幕中的位置，是居左、居中还是居右。

对齐方式表示方法：aligh=left （居左对齐）或者align=right（居右对齐）或者align=center （居中对齐）

用css样式表示对齐方式：

style="TEXT-ALIGN: left" （居左对齐） style="TEXT-ALIGN: center" （居中对齐）style="TEXT-ALIGN: right" （居右对齐）

移动标签的默认状况：移动方向与移动次数是向左滚动无数次，移动速度是6，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前网页的宽度（大约680px左右），垂直滚动的高度是网页的高度（大约200px左右）。

移动标签也是一种块级标签，是放置网页内容的容器。

代码知识0基础的朋友，首先一定要把移动标签的常用属性弄清楚。弄清楚每种属性的写法，弄清楚每种属性的显示效果，才能够准确地组合应用移动标签的各种属性，制作出自己喜欢的神奇的网页来。

一、认识移动方向：

1、向左移动的文字代码：

<MARQUEE>这是向左移动的文字</MARQUEE>或者：

<MARQUEE direction=left>这是向左移动的文字</MARQUEE>

上面的移动文字代码是由“移动标签”与“文字标签”组合起来应用的。它们的应用顺序是：移动首标签→文字首标签→文字内容→文字尾标签→移动尾标签。

因为移动标签默认的移动方向是向左移动的，所以，direction=left属性，可以不添加。

把上面的代码“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后观察其显示效果，并掌握向左移动的文字代码。

上面文字标签中字体、颜色、字号属性的属值都是可以修改的。

2、向右移动的文字代码：

<MARQUEE direction=right>这是向右移动的文字</MARQUEE>

把上面的代码“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后观察其显示效果，并掌握向右移动的文字代码。

上面文字标签中字体、颜色、字号属性的属值都是可以修改的。

3、向上移动的文字代码：

<MARQUEE direction=up>这是向上移动的文字</MARQUEE>

把上面的代码“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后观察其显示效果，并掌握向上移动的文字代码。

上面文字标签中字体、颜色、字号属性的属值都是可以修改的。

3、向下移动的文字代码：

<MARQUEE direction=down>这是向下移动的文字</MARQUEE>

把上面的代码“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后观察其显示效果，并掌握向上移动的文字代码。

上面文字标签中字体、颜色、字号属性的属值都是可以修改的。

二、认识移动速度：

移动速度的属值是用数字来表示的，是大于等于1的数字。数字越大，移动速度越快；数字越小，移动速度越慢。数字的单位是px。px是制作网页常用的一种长度单位，是“像素”的意思，也就是一个“点”。px的大小是不固定的。在小屏幕的电脑上，1px可能比一颗米粒还小；在大屏幕的电脑上，1px则会比一粒黄豆还会大。

你把移动速度设置为4，即：scrollamount=4 ，这就是说，移动标签控制的内容，每次移动4px的长度。你把移动速度设置为10，即：scrollamount=10 ，就是指移动标签控制的内容，每次移动10px的长度。

这里的“每次”，是指移动内容在移动屏幕中（即：方框中）跳动一次，可不能理解为移动内容在移动屏幕中从出现到消失为“一次”欧！

要想深刻理解移动次数的概念，请你参阅我撰写的这篇文章：

http://www.360doc.com/content/14/0301/08/4127803_356640150.shtml

把下面的两段代码，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后观察其显示效果，把握移动速度的概念，掌握移动速度的用法。

代码1：

<MARQUEE scrollAmount=1>我的移动速度为1</MARQUEE>

代码2：

<MARQUEE scrollAmount=10>我的移动速度为10</MARQUEE>

三、把握移动标签的延时属性：

移动标签的延时属性scrolldelay，是指每两次移动之间的间隔时间，单位是毫秒。秒与毫秒的进率为：1秒＝1000毫秒。

如果你已经弄清楚了移动“次数”的概念，你就会懂得，移动内容实际的移动速度不只与“移动速度”有关，而且与移动的“延时属性”也有很大的关系。

假如你把移动速度设置得很大，把移动的延时属性也设置得很大，移动标签所控制的内容照样移动得挺慢的。

你看看下面的这个例子：

代码：

<MARQUEE scrollAmount=15 scrollDelay=800>我的移动速度为15，为什么我还是跑得这样慢呢？</MARQUEE>

把上面的代码，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后观察其显示效果，懂得网页内容的实际“移动速度”与移动标签中设置的“移动速度”和移动的“延时属性”都有很大的关系。

四、认识移动屏幕：

上面我已经讲过了，移动标签是一种块级标签。

所谓块级标签，就是说，这种标签会形成一个“块”，也就是会形成一个方框。

设置移动标签的宽度与高度就是设置这个方框的大小的。设置了宽度与高度，移动内容就会在我们规定的这个方框中按照我们所设置的要求移动。

举例如下：

代码：

<marquee direction="left" height="150" width="480" scrollAmount="3" scrollDelay="10">世上无难事只怕有心人</MARQUEE>

要想观察代码的显示效果，必须把代码“复制”“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中，“发表”以后才能够观察。在下面举例的时候，我就不赘述了。

上面的代码，制作为网页以后，是移动文字。文字内容是：“世上无难事只怕有心人”。文字的“字体”是“黑体”，文字的“字号”（即大小）是“25px”，文字的“颜色”是“蓝色”。移动屏幕的规格：“高度”是“150px”，“宽度”是“480px”；“移动方向”是“向左”，“移动速度”是“3px”，“移动间隔时间”是“10毫秒”。

这就是我在前面讲过的，首标签对其控制的内容起着修饰、限制的作用。

五、认识对齐属性：

对齐属性的作用：是控制移动内容在移动标签中的位置的。

1、“居左对齐”的移动标签：

<MARQUEE style="TEXT-ALIGN: left" direction=up height=150 width=480 scrollAmount=3 scrollDelay=10>世上无难事只怕有心人</MARQUEE>

2、“居中对齐”的移动标签：

<MARQUEE style="TEXT-ALIGN: center" direction=up height=150 width=480 scrollAmount=3 scrollDelay=10>世上无难事只怕有心人</MARQUEE>

3、“居右对齐”的移动标签：

<MARQUEE style="TEXT-ALIGN: right" direction=up height=150 width=480 scrollAmount=3 scrollDelay=10>世上无难事只怕有心人</MARQUEE>

对齐方式一般用于“向上”移动或者“向下”移动的移动标签中，要用css样式设置。“居左”对齐的对齐方式可以缺省（就是不设置）。

六、认识移动方式的属性：

1、behavior=slide ：表示由一端滚动到另一端，不会重复，即只移动一次。

<MARQUEE style="TEXT-ALIGN: right" direction=up height=150 behavior=slide width=480 scrollAmount=3 scrollDelay=10>世上无难事只怕有心人</MARQUEE>

2、behavior=alternate ：表示在两端之间来回滚动，即来回走。

<MARQUEE style="TEXT-ALIGN: right" direction=up height=150 behavior=alternate width=480 scrollAmount=3 scrollDelay=10>世上无难事只怕有心人</MARQUEE>

七、认识移动标签的其它属性：

1、移动标签中的背景颜色：

代码：

<MARQUEE bgColor=#00ff00 height=50 scrollAmount=3 scrollDelay=10>授之以鱼，仅供一餐之食；授之以渔，则终生受益无穷。</MARQUEE>

代码：

<MARQUEE style="BACKGROUND: rgb(255,204,0)" height=50 scrollAmount=3 scrollDelay=10>攻城不怕坚，攻书莫畏难；代码虽难学，巧学能过关。</MARQUEE>

上面两例，第一例是用HTML代码设置的背景颜色：bgColor=#00ff00 ，第二例是用CSS样式设置的背景颜色：style="BACKGROUND: rgb(255,204,0)" 。

2、移动标签中的边框线：（下面标签中的蓝色代码）

<MARQUEE style="BORDER-BOTTOM: rgb(0,250,0) 10px dotted; BORDER-LEFT: rgb(0,250,0) 10px dotted; WIDTH: 608px; HEIGHT: 50px; BORDER-TOP: rgb(0,250,0) 10px dotted; BORDER-RIGHT: rgb(0,250,0) 10px dotted" scrollAmount=3>学代码要手脑并用。多认标签多理解，多制作多观察。发现错误及时改，有了体会记下来。</MARQUEE>

3、移动标签中的背景图片： （下面标签中的蓝色代码）

<MARQUEE style="WIDTH: 680px; BACKGROUND: url(http://image29.360doc.com/DownloadImg/2011/05/2421/12090895_26.gif); HEIGHT: 50px">朋友们，让我们共同学习代码，探讨代码，制作我们自己喜欢的网页吧！ </MARQUEE>

4、移动标签中的竖排版样式：（下面标签中的蓝色代码）

<MARQUEE style="WRITING-MODE: tb-rl" direction=up height=150 width=350 scrollAmount=1 scrollDelay=100>攻城不怕坚， 攻书莫畏难； 代码虽难学， 巧学能过关。</MARQUEE>

5、移动标签中的文字属性：（下面标签中的蓝色代码）

<MARQUEE style="LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; COLOR: rgb(255,0,250); FONT-SIZE: 27pt" scrollAmount=4>温故而知新，反复而知精。拳不离手，曲不离口。</MARQUEE>

6、移动标签中的自定义鼠标指针：（下面标签中的蓝色代码）

<MARQUEE style="LINE-HEIGHT: 150%; WIDTH: 99%; LETTER-SPACING: 5px; FONT-FAMILY: 华文行楷; COLOR: rgb(0,255,0); FONT-SIZE: 30pt; CURSOR: url(http://imgup2.poco.cn/mypoco/ani/mouse171.ani), default" scrollAmount=3>温故而知新，反复而知精。拳不离手，曲不离口。</MARQUEE>

7、移动标签中的文字属性与绝对定位样式：（下面标签中的蓝色代码）

<MARQUEE style="POSITION: absolute; FONT-FAMILY: 华文行楷; HEIGHT: 150px; COLOR: rgb(250,55,0); FONT-SIZE: 30pt; TOP: 200px; LEFT: 100px" scrollAmount=2 scrollDelay=10>温故而知新，反复而知精。拳不离手，曲不离口。</MARQUEE>

8、移动标签中“用光标指挥文字移动或者停留的代码”：

遗憾的是馆方已经“屏蔽”了这种移动效果！

☆注意：

移动标签中的有些属性，用HTML代码设置是无效的，也就是说，浏览器识别不了。遇到这种情形，你可以用css样式设置这些属性试试。

作业：

1、认识移动标签是一套标签，首标签与尾标签要配套应用。认识移动标签是块级标签，应用移动标签，会形成一个方框（就是移动屏幕）。

2、本节教程，重在掌握移动标签的“表达方式”与移动标签的“六种属性”：移动方向、移动速度、移动方式、移动的延时属性、移动屏幕的规格与对齐方式（对齐方式要用css样式设置）。

3、移动标签的其它属性，作为选学内容。代码知识基础好的朋友，可以掌握它们的用法；代码知识基础差的朋友，可以先了解一下，待以后有了一定的代码知识基础，再回过头来学习。

4、“标签解析”是认识代码学习代码的一种好方法。经常进行这种练习，可以使你尽快地熟悉各种标签，熟悉各种属性与属值。标签解析时，尽量保留原标签的样式，不要随意修改标签中的各种符号。举例如下：

代码：

解析：

<移动标签 css样式＝“对齐方式：居中对齐” 移动方向＝向上高度＝150 宽度＝480 移动速度＝3 移动延时＝10 ><文字标签 css样式＝“字体：黑体；颜色：十进制颜色（红色值为0，绿色值为0，蓝色值为255）；字号：25px”>文字内容是：世上无难事只怕有心人<文字尾标签><移动尾标签>

要注意分辨：

在上面的代码中，移动标签中的属性：css样式是移动标签的一个属性。它只包含一个属值：对齐方式。而文字标签的属性：css样式是文字标签的一个属性。它却包含了三个属值：字体、颜色与字号。

应该怎样分辨呢？

css样式属性的“值”，也就是“等号后面的内容”，必须用双引号“引起来”。上面移动标签中css样式属性的“值”，双引号内是一个内容：对齐方式；而文字标签中css样式属性的“值”，双引号内是三个个内容：字体、颜色与字号。

双引号内如果有几个属性属值，属性与属值要用冒号连接，各个属性之间要用分号隔开。

5、解析下列代码：

（1）<MARQUEE style="LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; COLOR: rgb(255,0,250); FONT-SIZE: 27pt" scrollAmount=4>温故而知新，反复而知精。拳不离手，曲不离口。</MARQUEE>

（2）<MARQUEE style="POSITION: absolute; FONT-FAMILY: 华文行楷; HEIGHT: 150px; COLOR: rgb(250,55,0); FONT-SIZE: 30pt; TOP: 200px; LEFT: 100px" scrollAmount=2 scrollDelay=10>温故而知新，反复而知精。拳不离手，曲不离口。</MARQUEE>

（3）<MARQUEE style="LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; COLOR: rgb(255,0,250); FONT-SIZE: 27pt" scrollAmount=4>温故而知新，反复而知精。拳不离手，曲不离口。</MARQUEE>

（4）<MARQUEE style="WRITING-MODE: tb-rl" direction=up height=150 width=350 scrollAmount=1 scrollDelay=100>攻城不怕坚， 攻书莫畏难； 代码虽难学， 巧学能过关。</MARQUEE>

（5）<MARQUEE style="WIDTH: 680px; BACKGROUND: url(http://image29.360doc.com/DownloadImg/2011/05/2421/12090895_26.gif); HEIGHT: 50px">朋友们，让我们共同学习代码，探讨代码，制作我们自己喜欢的网页吧！ </MARQUEE>

（6）<MARQUEE style="BORDER-BOTTOM: rgb(0,250,0) 10px dotted; BORDER-LEFT: rgb(0,250,0) 10px dotted; WIDTH: 608px; HEIGHT: 50px; BORDER-TOP: rgb(0,250,0) 10px dotted; BORDER-RIGHT: rgb(0,250,0) 10px dotted" scrollAmount=3>认识边框线代码</MARQUEE>

6、自己找几篇代码解析一下。

“春天没来”编撰

2014年4月15日于北京