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>

    表格代码的参数设定及注解：
table表格元素
align=表格的摆放位置元素（水平）可选值为：居中center，左left,　右right
cellspacing=表格格线的厚度元素"0"数值
cellpadding=表格格线内厚度元素"0"数值
bordercolordark=表格边框背光部分的颜色"#000000"（黑色）颜色编码
bordercolorlight=表格边框向光部分的颜色元素"#000000"（黑色）颜色编码
background=表格的背景图片元素"背景图片地址"例如：http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_4.jpg
bgcolor=表格的背景颜色元素"#1C4F1D "
bgcolor（表格的背景颜色元素）与background（表格的背景图片元素）不能同时使用
width=显示宽度元素"0"数值，接受绝对值（如 500）或相对值（如 80%）
height=显示高度元素"0"数值，接受绝对值（如 500）或相对值（如 80%）
border=表格边框的厚度元素"0"数值，根据需要设置
<TR>表格行元素
<TD>表格列元素
</TD>表格行收尾元素
</TR>表格列收尾元素
</TABLE>表格收尾元素
特别注意：用了多少层<table......><tr><td>表格起始代码，后面就要有多少</td></tr><table>收尾的结束代码。多收尾和少收尾都会造成帖子的不规整。

您若是对此有兴趣，可以将代码复制后，在“音画广场”使用HTML编辑模式或者打开在线HTML编辑器进行试做。

二

我们所看到用HTML代码编辑的帖子，其实是由一层层表格相套而成。现在，将背景图片链接失效，就能看明白。

输入标题文字

输入文字并排版，换行处务必插入<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=数字两个单元格之间的间隔度 borderColorDark=#4A533F表格框内侧部分颜色 cellPadding=数字/%表格线内厚度 width=数字/%指定这张表格的宽度 borderColorLight=#4A533F表格框向光部分颜色 background=背景图片路径插入格式为gif、jpg的图片 border=数字表示表格边框线的宽度>
<TBODY>
<TR表格行中行的元素>
<TD表格行中列的元素>

一张表格代码是由表格元素、表格行、表格列构成一组的，其中，表格元素内包含各个表格属性，各个属性可以根据需要设置数值、颜色；更换适合内容的图片为背景等等，由它们来具体地达到设计效果。几组表格代码层层叠套，可增可减，在最上面一层表格上插入图片、文字、音乐、特效等元素，就产生了个性化的美帖。

了解了表格组代码各元素及属性变化，接着再来对插入图片、文字、音乐等内容分析一番，您自己琢磨可以作何种设计，作出个性化的帖子。
<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字号属性>

建议您将图片元素组与文字元素组可调节的属性，用“在线HTML编辑器”对蓝色代码进行更换图片、改变颜色、字体、字号等调试，以便熟悉和掌握设计这部分体现个人审美风格和理念的帖子核心部分。

请看例题的完整页面：

输入标题文字

输入文字并排版，文字换行务必插入<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>