常用標籤代碼及其應用
06-16
常用標籤代碼及其應用 代碼是由標籤組成的。HTML語言標籤代碼，可以巧妙的將多種元素組合在一起，製作成各種漂亮的網頁。因此電腦操作必須掌握一定的標籤代碼知識。學代碼必須從學標籤開始。現將我重點學習的幾個最最常用的標籤及常用代碼小結如下。 一、區段標籤<DIV> <div>標籤是區段標籤，稱為區隔標記 ，是大塊頭，是最常用的標籤之一，它與尾標籤之間可以包含表格、移動、圖片、段落等不同的內容。它的作用是設定表格、畫、字等的擺放位置。 在<div>區段標籤中，可以添加許多屬性。添加屬性的方式，大部分是以「樣式」（style）的方式添加的。現舉例如下： （1）設置對齊方式：<div align="center"> 居中 （2）設置寬度、高度和背景顏色： <div width_=200px;height=200px bg=ffff00>或用css樣式表示屬性如下： <div style="width:200px;height:200px;background-color:Black;"> background-color:Black---背景色為Black色即黑色。 （3）設置外邊距、寬度、高度和背景顏色： <div style="margin:5px 10px 20px 30px;width:200px; height:200px; background-color:White;"> background-color:White---背景色為White色即白色 （4）設置定位方式：相對定位：<DIV style="POSITION: relative" class=divBorderStyleRelative>絕對定位：<DIV style="POSITION: absolute; TEXT-ALIGN: right; TOP: 50px; LEFT: 300px" class=divBorderStyle> 意思是絕對定位在：距頂邊50，距左邊300處。 二、表格標籤 <TABLE> 表格標籤是常用標籤之一。邊框也是表格，是添加了裝飾的表格。表格標籤可以理解成它是為布展東西而設的一個展台。大表格里還可以設小表格以方便使用。 表格標籤，是一套4個標籤。它包括表格標籤<TABLE>、主體標籤<TBODY>、行標籤 <TR>、列標籤<TD>，在使用的時候，相互配合，缺一不可。首標籤<TABLE>至尾標籤</TABLE>之間所有內容都在該表格上展示。 表格標籤常用屬性及表示方法： border=0 邊框線的寬度 （數值0時為隱性表格） bordercolor 邊框顏色 cellspacing =0 單元格之間的距離 （數值0時為隱性表格） cellpadding=0 內容與邊線之間的距離 （數值0時為隱性表格） background=圖片地址 表格的背景圖片 （或bgColor=#00ff00 是表格的背景顏色） WIDTH: 1000px 表格的寬度 height=165 px表格的高度 例、<TABLEborder=0 cellSpacing=0 cellPadding=0 background=http://userimage5.360doc.com/13/1225/15/2904667_201312251547000215.jpgWIDTH: 1000px height=165><TBODY><TR><TD></TABLE> 註：上例中邊框線寬度為0，故未再列邊框顏色；是圖片背景故 不能再列背景顏色。 三、移動標籤<marquee> 移動標籤，是很重要的一個標籤。文字、圖片、邊框、音畫，甚至整個網頁，都可以應用移動標籤讓它們動起來，其效果真是變幻莫測，這裡只做初步探討。移動標籤的移動對象在首尾標籤之間。 移動標籤常用屬性及表示方法： width_=600px 移動範圍寬度為600 height=50px 移動範圍高度為50scrollAmount="3" 移動速度為3 behavior="alternate" 移動方式為來回移動 direction=？ 移動方向=向上（或向下左右）： direction=up向上； direction=down向下 direction=left向左； direction=right向右例、<marquee width_=600px height=50pxscrollAmount="3"behavior="alternate" > 四、貼圖標籤<img> 在製作網頁的時候，我們常常會用到圖片，按著我們的要求大小用貼圖標籤把它粘貼在需要的地方。常用的屬性是圖片的寬度、高度、地址及四邊距。如果不設寬度高度，則按原圖粘貼。例1、設寬度高度的貼圖標籤：<img style="width: 300px; height: 400px;" src="https://www.getit01.com/getimg_360.php?url=http://image4.360doc.com/DownloadImg/2009/9/21/88761_6265622_7.jpg">分析：1、先用CSS樣式設置了圖片的寬度和高度： width: 300px; height: 400px然後是圖片地址 src="圖片地址" 2、貼圖中，有時需要把圖片翻轉貼，所以有的貼圖標籤中加了一個 「style="FILTER: FlipH"」，它是圖片水平翻轉屬性。如下貼圖標籤： <imgstyle="FILTER: FlipH"src="圖片地址"height=150> 但其翻轉屬性對有些圖片不適用！！！例2、設四邊距的貼圖標籤：<img style="margin: 0px 10px 0px 0px;"src=http://image35.360doc.com/DownloadImg/2011/09/0200/16878443_20.gif> 分析：margin 是邊緣的意思。該代碼用CSS樣式設置了圖片四個外邊距（margin：0px 10px 0px 0px）（即至上邊距0px，右邊距10px， 下邊距0px左邊距0px）。 然後是圖片地址。例3、設邊框、四邊距、寬度、高度的貼圖標籤：<img style="border-width: 0px; margin: 0px; width: 1000px; height: 305px;" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg"> 分析：用CSS樣式設置了圖片的邊框寬度（border-width：0px）、圖片外邊距（margin：0px）、即四邊均為0px。 圖片的寬度（width：1000）和高度（heigght:305 若：margin:10px 5px ;（設置了兩個值）則指上外邊距和下外邊距為10px、 左外邊矩和右外邊距為5px。 若：margin:10px （設置了一個值）則是所有 4 個外邊距都是10px 五、文字標籤<TONT>製作網頁離不開文字，這就必須用文字標籤。文字標籤常常與移動等標籤 結合使用。 文字標籤常用的屬性有：字體（face）、字型大小（size）、顏色（color）。例1、普通文字標籤： <font face="宋" size="6" color="#ffff00">「清泉書館歡迎您」 </font>分析： 上例中，字體為宋（實為仿宋體）字型大小為 6，顏色黃色， 字型大小size=6 的表示方法還可以用css樣式設置如例2.例2、用css樣式表示字型大小和字體的文字標籤： <FONTstyle="FONT: 28pt 楷體, 楷體_GB2312, SimKai" color=#ff0000> <b>「清泉書館歡迎您 」</b></FONT>分析： css樣式 字型大小 28；字體 楷體-GB2312；字色 紅色。例3、特殊表示法---少用<font face="楷體_gb2312" color="blue" size="+2"><b>「清泉書館歡迎您 」</b></FONT> 分析：字體 楷體-GB2312 的另種表示法，但不是css樣式，且 gb必須小寫，顏色必須用字母。 六、其它 1、<EMBED> 多媒體標籤，多用於嵌入flash 動畫2、 <A> 鏈接標籤。 如：<A href="要鏈接的網址" target=_blank>內容</A>。 <A>是鏈接標籤名稱。 href：指定鏈接目標。href 等號後面的內容即「要鏈接的網址」。鏈 接對象可以是您的圖書館內的任何文章、圖片的地址，也可以 是其它網站的任何文章圖片的地址。 target=_blank：是指在瀏覽器的新窗口中打開鏈接。這個屬性相當重 要，不能缺少。 內容：一般是文章的題目，當然包括文字標籤以及標題文字。 3、 <p>是在區段內分小段落時使用的段落標籤。小段落結束時用尾標籤 </p>小封口。 4、<SPAN> 它不會製作什麼。只是定義一個小區域內的某些屬性數值。 如果把區段大塊頭<div>比作塊級大容器，那麼<span>可以說是行級 小容器。如 <SPAN style="COLOR: #ff0000"> 5、style="FILTER: FlipH" 它是圖片水平翻轉屬性。在貼圖標籤中有了它即可 實現圖片水平翻轉。七、應用代碼例1、圖片並列代碼<DIV><TABLE style="WIDTH: 1000px" border=0 cellSpacing=0 cellPadding=0 height=180><TBODY><TR><TD><IMG src="圖片地址" width_=300 height=180> <IMG src="圖片地址" width_=300 height=180> <IMG src="圖片地址" width_=300 height=180> </TD></TR></TBODY></TABLE> </DIV> 分析：①、這是最簡單的一個代碼。只有表格和貼圖兩種主要標籤。這裡開頭設了一個<div>，最後是</div>。表示全代碼為一個區段。②、為了把多幅圖片貼在一張圖片上，設置了一個透明表格標籤<TABLE>及配套的<TBODY> <TR><TD>（4個標籤成套一個不少）。以便在表格中布置圖片。③、幾個貼圖標籤<IMG>，連排即可，每幅圖片的寬度和高度值都是自己設定的。但注意連排的總寬度不要超過表格的寬度。④、若想使並列的圖片移動，則在前面加個移動標籤即可。參考圖片地址：http://userimage2.360doc.com/11/0623/21/3459959_201106232154240670.gifhttp://image18.360doc.com/DownloadImg/2010/11/2814/7176389_10.jpghttp://image14.360doc.com/DownloadImg/2010/08/2810/4898234_8.jpg例2、並列圖片移動代碼<DIV align=left><MARQUEE style="WIDTH: 1000px; HEIGHT: 165px" behavior=alternate scrollAmount=1><TABLE style="WIDTH: 1000px" border=0 cellSpacing=0 cellPadding=0 height=165><TBODY><TR><TD><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="圖片地址" width_=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px;BORDER-RIGHT: 0px" border=0 src="圖片地址" width_=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="圖片地址" width_=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="圖片地址" width_=1000 height=165> </TD> </TR></TBODY></TABLE></MARQUEE> </DIV> 分析：1、該代碼主要由移動標籤、表格標籤、貼圖標籤三部分組成。 2、移動標籤 用style設置了移動範圍：寬1000，高165；來回移動、速度為1。移動對象為貼在表格中的多幅圖片。 表格標籤： 表格標籤中 用style設置了表格的寬度，而後設 置了邊框寬度為0，各間距為0，高度為165接著貼圖：4個貼圖標籤<IMG>。<IMG>標籤中用style設置了邊框（BORDER）樣式：底（BOTTOM）、左（CEFT）、 上（TOP）、右（RIGHT）均為0，邊框寬度border為0。然後是圖片地址和自定 的圖片寬度與高度。 3、從尾到頭的各尾標籤。從</DIV><DIV>可知全部內容都抱在此區段中。 4、補充說一下，這裡開頭設了一個<DIV align=left>（左對齊），最後是</div>。表示全代 碼為一個區段。參考圖片地址： http://userimage6.360doc.com/15/0707/13/3459959_201507071310500643.gif http://userimage2.360doc.com/11/0623/21/3459959_201106232154240670.gif http://image18.360doc.com/DownloadImg/2010/11/2814/7176269_1.jpg http://image18.360doc.com/DownloadImg/2010/11/2814/7176389_10.jpg http://image14.360doc.com/DownloadImg/2010/08/2810/4898234_8.jpg附：圖片並列移動無縫連接代碼<marquee height="165" behavior="alternate" width_="1000" scrollamount="2" style="height: 165px; width: 1000px;"><table style="WIDTH: 1000px" border="0" cellspacing="0" cellpadding="0" height="165"><tbody><tr><td><img src="https://www.getit01.com/getimg_360.php?url=http://userimage8.360doc.com/17/0325/14/3459959_201703251409130945888868.gif" width_="1200" height="165"></td><td><img src="https://www.getit01.com/getimg_360.php?url=http://userimage8.360doc.com/17/0325/20/3459959_201703252026450195164773.gif" width_="1200" height="165"></td></tr></tbody></table></marquee><div></div></marquee>例3、並列圖片滾動加移動字代碼<DIV style="POSITION: relative" class=divBorderStyleRelative align=left><MARQUEE style="WIDTH: 1000px; HEIGHT: 170px" height=170 behavior=alternate width_=1000 scrollAmount=1><TABLE border=0 cellSpacing=0 cellPadding=0 height=165 WIDTH: 1000px><TBODY><TR><TD><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="圖片地址" width_=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="圖片地址" width_=1000 height=165> <DIV style="POSITION: absolute; TOP: 20px; LEFT: 300px" class=divBorderStyle><MARQUEE direction=up height=120 width_=300 scrollAmount=3><FONT style="FONT: 24pt 楷體, 楷體_GB2312, SimKai" color=#ff0000> <B>恭祝朋友 節日愉快<BR>闔家歡樂 幸福安康 </B></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE></MARQUEE> </DIV>分析：該代碼由區段標籤、移動、表格、貼圖、移動字組成。 ①、前面區段標籤<div>中用relative設置了相對定位可以防止後面的移動文字在 某些情況下飄移到別處。最後</div>封口表示全代碼為一個區段。 ②、第一個移動標籤：移動圖片用。 ③、表格標籤：透明表格，給顯示建一個展台。 ④、貼圖標籤：<IMG>若干。 ⑤、移動字部分由絕對定位標籤、移動標籤、文字標籤、加粗標籤和文字組成。絕對定位標籤<div>：POSITION 定位屬性；absolute 絕對定位；TOP: 20px 距頂部垂直啟點，值越大越靠下部，必要時可設負值； LEFT: 300px 是距左邊啟點，值越大越靠右，必要時也可設負值。 第二個移動標籤：移動文字用。移動方向、範圍、速度等。文字標籤中：FONT: 24pt 楷體--是字型大小；楷體_GB2312, SimKai--是字體； color=#ff0000--是字的顏色。⑥、若把文字標籤和文字有關換成貼圖標籤，則可成為小圖片在大圖片中移動。參考圖片地址：http://userimage2.360doc.com/11/0102/20/328003_20110102201530214.jpghttp://userimage2.360doc.com/11/0623/21/3459959_201106232154240670.gifhttp://image18.360doc.com/DownloadImg/2010/11/2814/7176269_1.jpghttp://image18.360doc.com/DownloadImg/2010/11/2814/7176389_10.jpg例4、小圖片在大圖片上飄飛代碼<DIV align=center><TABLE style="WIDTH: 620px; HEIGHT: 450px" border=0 cellPadding=0 background=背景圖片地址align=center><TBODY><TR><TD><MARQUEE style="WIDTH: 620px; HEIGHT: 450px" direction=down scrollAmount=2><MARQUEE direction=right behavior=alternate><IMG style="FILTER: FlipH" src="小圖片地址" height=150></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></DIV>分析：①、該代碼的結構特點：表格標籤（圖片背景）+兩個移動標籤+貼圖標籤表格標籤<table>是圖片背景。②、移動部分有兩個移動標籤。 第一個移動標籤規定了圖片的移動範圍WIDTH: 620px; HEIGHT: 450px、 圖片移動速度；垂直移動向下direction=down（或向上direction=up） 第二個移動標籤規定了水平移動向右direction=right（或向左direction=ceft）及來回移動behavior=alternate。 ③、下面才是貼圖標籤<IMG>，是移動對象。貼圖標籤中有一個style="FILTER: FlipH" ，它是圖片水平翻轉屬性（但其 翻轉屬性對有些圖片不適用）。不需要時可把它刪除；小圖片地址和圖片 高度height=150都由自己選定。④、如果小圖片是透明flash圖片，則必須把<IMG>標籤全部刪除，全部換成多媒體 標籤如下： <EMBED height=200 type=application/x-shockwave-flash width_=400src=透明flash小圖片地址wmode="transparent"> 有關數值大小可進行適當調整。參考背景圖片地址：http://image21.360doc.com/DownloadImg/2011/01/0714/8296724_15.jpg參考小圖片地址：http://userimage6.360doc.com/15/0902/20/3459959_201509022059160347889894.gifhttp://image49.360doc.com/DownloadImg/2012/02/2016/21665632_8http://xuanfei.cctv118.com/2009fla/yanhua/6.swf例5、定位嵌入透明slash動畫代碼<div style="POSITION: relative"> <TABLE border=0 cellSpacing=0 borderColorLight=#000000 borderColorDark=#000000 cellPadding=0 background=背景圖片地址 align=center width_=1000 height=165><TBODY><TR><TD> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 0px" height=170 type=application/x-shockwave-flash align=right width_=220 src=透明slash動畫地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent"> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 5px" height=170 type=application/x-shockwave-flash align=right width_=690 src=透明slash動畫地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent"> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 5px" height=140 type=application/x-shockwave-flash align=right width_=850 src=透明slash動畫地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent"> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 63px" height=100 type=application/x-shockwave-flash align=right width_=1500 src=透明slash動畫地址allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent"> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 45px" height=150 type=application/x-shockwave-flash align=right width_=1000 src=透明slash動畫地址allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent"> </TD></TR></TBODY></TABLE> </div>分析：①、先以區段標籤設置了相對定位屬性。全部標籤都在一個區段中。②、表格標籤是圖片背景。一個顯示舞台。③、 <EMBED>五個嵌入多媒體標籤，絕對定位嵌入flash動畫： display:block----顯示； TOP: 0px" height=170----絕對定位位置； type=application/x-shockwave-flash--表示類型是flash 類型；align=right---右對齊； width_=690--圖片的寬度；透明flash動畫地址；allowscriptaccess="never" allownetworking= "internal"---永遠接受腳本訪問；loop="0"--自由循環；autostart="0"---從0開始； wmode="transparent"---wmode是透明的意思；transparent意思是背景透明。 有 wmode="transparent 各種背景色的flash動畫就透明，其它圖片無效， 如果它出了問題flash就不透明了。③、本代碼只適用於定位嵌入透明flash動畫, 其他動畫圖片不適用。參考背景圖片地址： http://userimage6.360doc.com/15/0608/12/3459959_201506081249460910.gif 參考透明slash動畫地址：http://pendant.360doc.com/1/3.swf 花瓣飄落（湖藍色底） http://webdisk.yyjxkj.com/dllc/1常用flash/鳥橫飛.swf http://pendant.360doc.com/1/72.swf 鴨子浮水（黑色底） http://pendant.360doc.com/1/5.swf鬱金香（湖藍色底） http://webdisk.yyjxkj.com/dllc/1常用flash/男女背影.swf例6、定位粘貼各種動畫及移動字代碼（flash動畫不適用）<DIV style="POSITION: relative" ><TABLE style="TEXT-ALIGN: left; WIDTH: 1000px; HEIGHT: 165px"title=清泉書館 border=0 cellSpacing=0 cellPadding=0 background=背景圖片地址 align=center ><TBODY><TR ><TD ><IMG style="POSITION: absolute; WIDTH: 120px; HEIGHT: 100px; TOP: 0px; LEFT: 140px" class=divBorderStyle border=0 src="透明動畫地址"> <IMG style="POSITION: absolute; WIDTH: 100px; HEIGHT: 100px; TOP: 0px; LEFT: 230px" class=divBorderStyle border=0 src="透明動畫地址"> <IMG style="POSITION: absolute; WIDTH: 105px; HEIGHT: 105px; TOP: 0px; LEFT: 800px" class=divBorderStyle border=0 src="透明動畫地址"> <IMG style="POSITION: absolute; WIDTH: 95px; HEIGHT: 95px; TOP: 0px; LEFT: 880px" class=divBorderStyle border=0 src="透明動畫地址"> <DIV style="POSITION: absolute; TEXT-ALIGN: right; TOP: 80px; LEFT: 200px" class=divBorderStyle><MARQUEE style="WIDTH: 600px" scrollAmount=3><FONT style="FONT-SIZE: 33px" color=#ffff00> <STRONG> 您想寫的字</STRONG></FONT></MARQUEE></DIV></TD></TR</TBODY></TABLE> </div> 分析：①、全部標籤都在一個區段中。 先用<div>設置了相對定位。 表格標籤（設置了圖片背景、標題顯示「title=清泉書館」等）。四個表格標籤 成套出現一個不缺。②、絕對定位貼圖標籤<IMG>。。其數值根據需要調整。適用於一般動畫圖片。 ③、絕對定位標籤及移動文字 ：移動標籤、文字、加粗共4個標籤。 從末至首，尾標籤一個不缺。參考背景圖片地址： http://userimage5.360doc.com/14/0704/21/3459959_201407042102400429.jpg 參考透明動畫地址：http://image58.360doc.com/DownloadImg/2013/01/2123/29756826_30.jpghttp://image86.360doc.com/DownloadImg/2013/09/2413/55242674_1.gifhttp://image58.360doc.com/DownloadImg/2013/01/2123/29756826_41.jpghttp://image51.360doc.com/DownloadImg/2012/04/2400/23445801_73http://userimage3.360doc.com/12/1222/20/3459959_201212222003340478.gif綜合上述六例可見：1、前邊的<div> 開始至後邊</div>結束, 期間的所有內容都屬這個區段， 這個標籤都把它們抱進去了。同樣道理，表格標籤<table>開始至後邊 </table>結束, 期間的所有內容都抱在此表格中了。 2、多個<IMG>（或多個<EMBED>）連排時，可直接連排。 3、需要定位的比如移動文字或粘貼的動畫等，則必須設置定位屬性。為確保其位置確定而不飄動，必須採取以下措施：①、在最前邊以區段標籤設置相對定位屬性的標籤<DIV style="POSITION: relative" >②、定位對象處再以區段標籤設置絕對定位屬性及TOP值、CEFT值，如： <DIV style="POSITION: ;absolute TEXT-ALIGN: right; TOP: 50px; LEFT: 280px" class=divBorderStyle> 必要時如TOP值可設負值。 4、小圖片在大圖片上飄飛。必須設置兩個移動標籤，除必須設置移動範圍、 移動速度外，還必須設置向上、向下、來回移動屬性。5、多行文字滾動。移動字代碼中，移動標籤中加入向上屬性direction=up （或向下direction=down）和所寫文字之間加換行標籤<br>，調整文字大小， 可實現多行文字向上（或向下）滾動。 6、兩種貼圖標籤各顯其能： ①、普通貼圖標籤<IMG>適用於粘貼一般圖片或一般動畫。flash圖片無效。②、多媒體嵌入標籤<EMBED>只適用於嵌入flash圖片或動畫，其它圖片無效。 上述例碼都是一個區段結構，比較簡單。下面是一個多區 段綜合應用代碼。例7、多區段綜合應用代碼--我的空間導航<DIV align=center><TABLE style="TEXT-ALIGN: left; BACKGROUND-COLOR: #fff68f; WIDTH: 300px; HEIGHT: 380px" border=1 cellSpacing=1 cellPadding=0 bgColor=#fff68f align=center><TBODY><TR><TD><DIV><IMG style="WIDTH: 230px; HEIGHT: 110px" src="小圖片地址"> <IMG style="WIDTH: 30px; HEIGHT: 44px" src="小圖片地址"> </DIV><DIV align=center><TABLE style="WIDTH: 280px; BORDER-COLLAPSE: collapse" border=1 cellSpacing=0 borderColor=#ff6600 cellPadding=2><TBODY><TR><TD><MARQUEE style="WIDTH: 300px; HEIGHT: 18px" behavior=alternate scrollAmount=3> <IMG style="WIDTH: 12px; HEIGHT: 12px" src="小圖片地址"> <FONT style="FONT-FAMILY: 隸書,SimLi" color=#00ff00 size=3> <STRONG>我的空間導航 <IMG style="WIDTH: 12px; HEIGHT: 12px" src="小圖片地址"> </STRONG></FONT></MARQUEE></TD></TR></TBODY></TABLE></DIV><DIV align=center><MARQUEE direction=up height=80 width_=300 scrollAmount=1 scrollDelay=1><FONT style="FONT-SIZE: 16px" color=#800000> <STRONG> 【清 泉 書 館 推 薦】 </STRONG></FONT> <BR> <FONT style="FONT-SIZE: 12px" color=#ff0000> 【精選】 </FONT><A href="鏈接文章地址" target=_blank ><FONT style="FONT-SIZE: 12px" color=#0000ff> 鏈接文章標題 </FONT></A><BR> <FONT style="FONT-SIZE: 12px" color=#ff0000> 【精選】 </FONT><A href="鏈接文章地址" target=_blank ><FONT style="FONT-SIZE: 12px" color=#0000ff> 鏈接文章標題 </FONT></A></MARQUEE></DIV><DIV align=center><IMG style="WIDTH: 270px; HEIGHT: 40px" src="圖片地址"> </DIV> </TD></TR></TBODY></TABLE></DIV>參考圖片地址：http://image6.360doc.com/DownloadImg/2009/12/1808/2020112_5.jpghttp://userimage1.360doc.com/09/1216/10/328003_200912161035000060.gifhttp://image3.360doc.com/DownloadImg/2009/1/22/51604_2385694_1.gifhttp://image3.360doc.com/DownloadImg/2009/1/22/51604_2385694_1.gifhttp://image48.360doc.com/DownloadImg/2011/12/1912/20140178_12.jpg參考鏈接文章地址和標題http://www.360doc.com/showWeb/0/0/499052077.aspx常用標籤代碼及其應用http://www.360doc.com/content/10/1123/13/3459959_71688391.shtml 養成良好習慣 http://www.360doc.com/showWeb/0/0/254147672.aspx 神奇念力威力無窮http://www.360doc.com/content/14/1214/19/3459959_432906209.shtml【PS動畫】 六球會http://www.360doc.com/content/13/1112/12/3459959_328602726.shtml自編原地十三式太極拳……………………分析：上碼中 <A href="鏈接文章地址" target=_blank ><FONT style="FONT-SIZE: 12px" color=#0000ff> 鏈接文章標題 </FONT></A> <A>是鏈接標籤名稱。 href：指定鏈接目標。href 等號後面即要鏈接的網址。鏈 接對象可以是您的圖書館內的任何文章、圖片的地址，也可以 是其它網站的任何文章圖片的地址。 target=_blank：是指在瀏覽器的新窗口中打開鏈接。這個屬性相當重 要，不能缺少。 後面是要鏈接文章的標題和文字標籤。 下面我們重點分析該代碼的結構： 1、最前面先以<DIV align=center>水平居中和<TABLE ><TBODY><TR><TD>設了一個大表格，它是個布置東西的大展顯示台，五個標籤統管全局，全部布置完後最後才以這五個尾標籤總封口。我們看到在大表格中先後布展了四個從<div>到</div>也就是四大塊。 2、第一大塊是<div>後貼了兩幅小圖片，完成後立即以</div>區段封口。 3、第二大塊是從<DIV align=center>水平居中開始，在大表格中布置東西。這裡用四個一套的表格標籤設置了一個小表格。在小表格中為了水平移動圖片、文字、圖片三項內容，具體設置了移動標籤、貼圖標籤、文字標籤、文字「我的空間導航」、貼圖標籤。然後是該區段的尾標籤 </STRONG></FONT></MARQUEE></TD></TR></TBODY></TABLE></DIV>區段封口。至此，小表格內布置完畢。 4、第三大塊是從<DIV align=center>水平居中開始，先設了一個移動標籤，這個移動標籤移動本區段各項內容，都是垂直向上。然後繼續在大表格中布置東西。這裡要解決多行文字移動問題，而且文字大小、顏色不同，又分行。所以可分為幾個小段落。 ①、「清泉書館推薦」幾個字的移動為第一小段。包括文字標籤、加粗標籤、文字「清泉書館推薦」，然後段落小封口</STRONG></FONT>。 ②、換行<BR>後「 【精選】」二字的移動為第二小段。包括文字標籤、文字「精選」，然後段落小封口</FONT>。 ③、鏈接第一篇文章為第三小段。包括鏈接標籤<A>（含鏈接文章的地址）、文字標籤、「文章標題」。然後段落小封口</FONT></A>。 ④、重複②③再鏈接第二篇文章，第三篇文章…… ⑤、區段封口。以</MARQUEE></DIV>實現區段封口。5、最後一個區段<DIV align=center>開始，水平居中粘貼了一幅圖片而後區段尾標籤</DIV>區段封口。6、總封口。全部布置完之後，以尾標籤</TD></TR></TBODY></TABLE></DIV>總封口全部結束。
推薦閱讀：
推薦閱讀：
※首個食品營養標籤強制性國家標準公布
※不輕易給人貼標籤，是你最大的善行
※易百科：食品的營養標籤
※煙花易冷圖片+文字屬性標籤實例注釋/贈給自學代碼的朋友
※男同們的表現遺傳「標籤」