HTML單層及多層代碼【教程詳解】

ぅ|く闊漁沉 2010-04-10

展開全文

完整的HTML帖子由：背景（顏色背景或圖片背景）、插圖、文章、收尾等元素組成。一層背景（顏色背景或圖片背景）即是一層表格，不同背景疊加效果即是不同表格的疊加效果。

例：這是一層的顏色背景：

這層背景的表格代碼如下：
<TABLE align=center cellSpacing=0 cellPadding=0 bgcolor=#1C4F1D width=500 height=100 border=0>
<TR>
<TD>
</TD>
</TR>
</TABLE>

例：這是一層的圖片背景：

    這層背景的表格代碼如下：
<TABLE align=center cellSpacing=0 cellPadding=0 borderColorDark=#283058 borderColorLight=#283058 background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_4.jpg width=500 height=100 border=2>
<TR>
<TD>
</TD></TR></TABLE>

    請仔細看看表格的構成。
    表格代碼由以下基本元素組成：
<TABLE align=center cellSpacing=0 cellPadding=0 orderColorDark=#000000 borderColorLight=#000000 background=背景圖片地址 bgcolor=#1C4F1D（背景顏色） width=0 height=0 border=0>
<TR>
<TD>
</TD>
</TR>
</TABLE>

    表格代碼的參數(shù)設定及注解：
table表格元素
align=表格的擺放位置元素（水平）可選值為：居中center，左left,　右right
cellspacing=表格格線的厚度元素"0"數(shù)值
cellpadding=表格格線內(nèi)厚度元素"0"數(shù)值
bordercolordark=表格邊框背光部分的顏色"#000000"（黑色）顏色編碼
bordercolorlight=表格邊框向光部分的顏色元素"#000000"（黑色）顏色編碼
background=表格的背景圖片元素"背景圖片地址"例如：http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_4.jpg
bgcolor=表格的背景顏色元素"#1C4F1D "
bgcolor（表格的背景顏色元素）與background（表格的背景圖片元素）不能同時使用
width=顯示寬度元素"0"數(shù)值，接受絕對值（如 500）或相對值（如 80%）
height=顯示高度元素"0"數(shù)值，接受絕對值（如 500）或相對值（如 80%）
border=表格邊框的厚度元素"0"數(shù)值，根據(jù)需要設置
<TR>表格行元素
<TD>表格列元素
</TD>表格行收尾元素
</TR>表格列收尾元素
</TABLE>表格收尾元素
特別注意：用了多少層<table......><tr><td>表格起始代碼，后面就要有多少</td></tr><table>收尾的結束代碼。多收尾和少收尾都會造成帖子的不規(guī)整。

您若是對此有興趣，可以將代碼復制后，在“音畫廣場”使用HTML編輯模式或者打開在線HTML編輯器進行試做。

二

我們所看到用HTML代碼編輯的帖子，其實是由一層層表格相套而成?，F(xiàn)在，將背景圖片鏈接失效，就能看明白。

輸入標題文字

輸入文字并排版，換行處務必插入<br>代碼

教程中第一層表格的構成代碼：
<P align=center><TABLE cellSpacing=24 borderColorDark=#4A533F cellPadding=0 width=980 borderColorLight=#4A533F background=背景圖片地址 border=1>
<TBODY>
<TR>
<TD>

代碼分析：
<P align=center>居中
<TABLE表格元素 cellSpacing=數(shù)字兩個單元格之間的間隔度 borderColorDark=#4A533F表格框內(nèi)側部分顏色 cellPadding=數(shù)字/%表格線內(nèi)厚度 width=數(shù)字/%指定這張表格的寬度 borderColorLight=#4A533F表格框向光部分顏色 background=背景圖片路徑插入格式為gif、jpg的圖片 border=數(shù)字表示表格邊框線的寬度>
<TBODY>
<TR表格行中行的元素>
<TD表格行中列的元素>

一張表格代碼是由表格元素、表格行、表格列構成一組的，其中，表格元素內(nèi)包含各個表格屬性，各個屬性可以根據(jù)需要設置數(shù)值、顏色；更換適合內(nèi)容的圖片為背景等等，由它們來具體地達到設計效果。幾組表格代碼層層疊套，可增可減，在最上面一層表格上插入圖片、文字、音樂、特效等元素，就產(chǎn)生了個性化的美帖。

了解了表格組代碼各元素及屬性變化，接著再來對插入圖片、文字、音樂等內(nèi)容分析一番，您自己琢磨可以作何種設計，作出個性化的帖子。
<P align=center><IMG height=20 src="http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_1.gif" width=247></P>

<CENTER><P><FONT face=楷體_GB2312 color=#4A533F size=4>輸入文字</FONT></P></CENTER>

<P align=center><IMG height=42 src="http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_3.gif" width=251></P>

<img圖片元素組 src=".jpg/.gif"圖片路徑 width="100"寬度 height="10"高度 border="0"邊線寬度 align=""屬性：LEFT左對齊、CENTER居中、RIGHT右對齊>

< FONT文字元素組 face=字體元素= 楷體_GB2312字體屬性 color顏色元素=#EFEDEA顏色屬性 size字號元素=4字號屬性>

建議您將圖片元素組與文字元素組可調(diào)節(jié)的屬性，用“在線HTML編輯器”對藍色代碼進行更換圖片、改變顏色、字體、字號等調(diào)試，以便熟悉和掌握設計這部分體現(xiàn)個人審美風格和理念的帖子核心部分。

請看例題的完整頁面：

輸入標題文字

輸入文字并排版，文字換行務必插入<br>字符進行分行。
例如：閑坐屏前敲五筆<br>感時鍵上造詩篇

顯示為：
閑坐屏前敲五筆
感時鍵上造詩篇

請看這張頁面的代碼：(適合1024*768分辨率設置，文字居中型代碼)

<CENTER><TABLE cellSpacing=24 borderColorDark=#4A533F cellPadding=0 width=980 align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_5.jpg border=0><TBODY><TR><TD>
<TABLE cellSpacing=19 borderColorDark=#4A533F cellPadding=0 width="86%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_6.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=3 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_7.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=8 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_5.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=3 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_7.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=4 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_7.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=0 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_6.jpg border=1><TBODY><TR><TD align=middle>
<P align=center><IMG height=74 src="http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_1.gif" width=429>
</P> <TABLE cellSpacing=3 borderColorDark=#4A533F cellPadding=0 width="92%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_7.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=12 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_5.jpg border=1><TBODY><TR><TD>
<TABLE cellSpacing=3 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_7.jpg border=1><TBODY> <TR><TD>
<TABLE cellSpacing=0 borderColorDark=#4A533F cellPadding=0 width="100%" align=center borderColorLight=#4A533F background=http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_6.jpg border=0><TBODY><TR><TD>
<P align=center><br><FONT face=幼圓 color=#246424 size=5>輸入標題文字<br><br></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P align=center><IMG height=20 src="http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_2.gif" width=247> <BR></P>
<CENTER> <P> <FONT face=楷體_GB2312 color=#246424 size=4>輸入文字并排版</FONT></P></CENTER>
<P><IMG height=42 src="http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_3.gif" width=251></P> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY> </TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER><br>