☆代碼學習群簡易教程（8）

春天沒來 2014-04-15

展開全文

“春天沒來”歡迎您 第八節(jié) 移動標簽">

移動標簽是有趣的標簽，是神奇的標簽，是制作網頁很重要的一個標簽。文字、圖片、邊框、音畫，甚至整個網頁，都可以應用移動標簽讓它們動起來。特別是用兩個移動標簽控制移動內容的那些網頁，其效果更是變幻莫測。移動標簽，大有文章可作。我這里的講解，也只能起個拋磚引玉的作用。希望大家深入研究、大膽探討，充分應用移動標簽，制作出各式各樣的具有神奇效果的漂亮網頁來。

移動標簽，也是一套標簽。需要首標簽與尾標簽配套應用。

移動標簽的表達式為：<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屬性，可以不添加。

把上面的代碼“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后觀察其顯示效果，并掌握向左移動的文字代碼。

上面文字標簽中字體、顏色、字號屬性的屬值都是可以修改的。

2、向右移動的文字代碼：

<MARQUEE direction=right>這是向右移動的文字</MARQUEE>

把上面的代碼“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后觀察其顯示效果，并掌握向右移動的文字代碼。

上面文字標簽中字體、顏色、字號屬性的屬值都是可以修改的。

3、向上移動的文字代碼：

<MARQUEE direction=up>這是向上移動的文字</MARQUEE>

把上面的代碼“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后觀察其顯示效果，并掌握向上移動的文字代碼。

上面文字標簽中字體、顏色、字號屬性的屬值都是可以修改的。

3、向下移動的文字代碼：

<MARQUEE direction=down>這是向下移動的文字</MARQUEE>

把上面的代碼“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后觀察其顯示效果，并掌握向上移動的文字代碼。

上面文字標簽中字體、顏色、字號屬性的屬值都是可以修改的。

二、認識移動速度：

移動速度的屬值是用數字來表示的，是大于等于1的數字。數字越大，移動速度越快；數字越小，移動速度越慢。數字的單位是px。px是制作網頁常用的一種長度單位，是“像素”的意思，也就是一個“點”。px的大小是不固定的。在小屏幕的電腦上，1px可能比一顆米粒還??；在大屏幕的電腦上，1px則會比一粒黃豆還會大。

你把移動速度設置為4，即：scrollamount=4 ，這就是說，移動標簽控制的內容，每次移動4px的長度。你把移動速度設置為10，即：scrollamount=10 ，就是指移動標簽控制的內容，每次移動10px的長度。

這里的“每次”，是指移動內容在移動屏幕中（即：方框中）跳動一次，可不能理解為移動內容在移動屏幕中從出現到消失為“一次”歐！

要想深刻理解移動次數的概念，請你參閱我撰寫的這篇文章：

http://www.hbhlny.cn/content/14/0301/08/4127803_356640150.shtml

把下面的兩段代碼，“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后觀察其顯示效果，把握移動速度的概念，掌握移動速度的用法。

代碼1：

<MARQUEE scrollAmount=1>我的移動速度為1</MARQUEE>

代碼2：

<MARQUEE scrollAmount=10>我的移動速度為10</MARQUEE>

三、把握移動標簽的延時屬性：

移動標簽的延時屬性scrolldelay，是指每兩次移動之間的間隔時間，單位是毫秒。秒與毫秒的進率為：1秒＝1000毫秒。

如果你已經弄清楚了移動“次數”的概念，你就會懂得，移動內容實際的移動速度不只與“移動速度”有關，而且與移動的“延時屬性”也有很大的關系。

假如你把移動速度設置得很大，把移動的延時屬性也設置得很大，移動標簽所控制的內容照樣移動得挺慢的。

你看看下面的這個例子：

代碼：

<MARQUEE scrollAmount=15 scrollDelay=800>我的移動速度為15，為什么我還是跑得這樣慢呢？</MARQUEE>

把上面的代碼，“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后觀察其顯示效果，懂得網頁內容的實際“移動速度”與移動標簽中設置的“移動速度”和移動的“延時屬性”都有很大的關系。

四、認識移動屏幕：

上面我已經講過了，移動標簽是一種塊級標簽。

所謂塊級標簽，就是說，這種標簽會形成一個“塊”，也就是會形成一個方框。

設置移動標簽的寬度與高度就是設置這個方框的大小的。設置了寬度與高度，移動內容就會在我們規(guī)定的這個方框中按照我們所設置的要求移動。

舉例如下：

代碼：

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

要想觀察代碼的顯示效果，必須把代碼“復制”“粘貼”到你的圖書館首頁“撰寫”文章處的“代碼編輯”頁面中，“發(fā)表”以后才能夠觀察。在下面舉例的時候，我就不贅述了。

上面的代碼，制作為網頁以后，是移動文字。文字內容是：“世上無難事只怕有心人”。文字的“字體”是“黑體”，文字的“字號”（即大?。┦?/font>“25px”，文字的“顏色”是“藍色”。移動屏幕的規(guī)格：“高度”是“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樣式設置?！熬幼蟆睂R的對齊方式可以缺?。ň褪遣辉O置）。

六、認識移動方式的屬性：

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>學代碼要手腦并用。多認標簽多理解，多制作多觀察。發(fā)現錯誤及時改，有了體會記下來。</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樣式設置這些屬性試試。

作業(yè)：

1、認識移動標簽是一套標簽，首標簽與尾標簽要配套應用。認識移動標簽是塊級標簽，應用移動標簽，會形成一個方框（就是移動屏幕）。

2、本節(jié)教程，重在掌握移動標簽的“表達方式”與移動標簽的“六種屬性”：移動方向、移動速度、移動方式、移動的延時屬性、移動屏幕的規(guī)格與對齊方式（對齊方式要用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、自己找?guī)灼a解析一下。

“春天沒來”編撰

2014年4月15日于北京