|
边框代码注解 （资料来源：网络）
边框其实就是一种表格。要制作边框或者要调节边框中的具体细节，首先要明确表格语法与表格代码的基本属性。
一、基本代码简介：
<table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。
<tbody>：表体的起始符。紧跟在<table>之后，表示表体开始。必须有结尾符，放在</table>之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，否则，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。
<tr>：tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<tr>;紧跟在<tbody>之后。必须有终止符</tr>。
<td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。
</TD></TR></TBODY></TABLE>：这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。 从表格的代码框架分析得出：表格标签里，所有元素都成对出现，而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大，它占在起始和终结的位置，tbody是老二，tr是老三，td最小，它在最里层。
border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。
cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
cellpadding：单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。
width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。
height：表格的高度，取值方法同width。提示：如果不是特别需要，建议不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示。
bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。单元格td也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。
background：表格的背景图。其值为一个有效的图片地址。td也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。
bordercolor：表格的边框颜色，当border值不为0时设置此值有效。取值同bgcolor。
bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。
bordercolordark：暗边框颜色，当border值不为0时设置有效。暗边框指表格的右边和下边的边框。
align：表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align定义的是表格自身的位置，这是一个很有用的属性。
二、表格语法：
表格语法：
<table aling=left>...</table>表格位置,置左
<TABLE aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
<!>分割窗口
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架.
三、其它参考：
| <TABLE> |
● |
表格标记 |
设定该表格的各项参数 |
|
| <CAPTION> |
● |
表格标题 |
做成一打通列以填入表格标题 |
|
| <TR> |
● |
表格列 |
设定该表格的列 |
|
| <TD> |
● |
表格栏 |
设定该表格的栏 |
|
| <TH> |
● |
表格标头 |
相等于<TD>，但其内之字体会变粗 |
|
| 表单标记 |
| <FORM> |
● |
表单标记 |
决定单一表单的运作模式 |
|
| <TEXTAREA> |
● |
文字区块 |
提供文字方盒以输入较大量文字 |
|
| <INPUT> |
○ |
输入标记 |
决定输入形式 |
|
| <SELECT> |
● |
选择标记 |
建立 pop-up 卷动清单 |
|
| <OPTION> |
○ |
选项 |
每一标记标示一个选项 |
|
| 图形标记 |
| <IMG> |
○ |
图形标记 |
用以插入图形及设定图形属性 |
|
| 连结标记 |
| <A> |
● |
连结标记 |
加入连结 |
|
| <BASE> |
○ |
基准标记 |
可将相对 URL 转绝对及指定连结目标 |
|
| 框架标记 |
| <FRAMESET> |
● |
框架设定 |
设定框架 |
|
| <FRAME> |
○ |
框窗设定 |
设定框窗 |
|
| <IFRAME> |
○ |
页内框架 |
于网页中间插入框架 |
|
| <NOFRAMES> |
● |
不支援框架 |
设定当浏览器不支援框架时的提示 |
HTML最基本的代码认识
做音画代码帖首先我们先打破对代码的困惑，而我们最先接触的代码就是
<table><tr><td>
<table><tr><td>必须成对出现，缺一不可，
table这一项是具体的工作场，如吧整个音画做为一出戏，那table就是戏中的舞台
要是吧整个音画做为一顿美餐。table就是桌子
tr是拓展工作区域的标识工具。
td就是舞台上的装饰品
例：代码<table bgcolor=#000066 width=300 height=200><tr><td></td></tr></table>
效果如下：
这个代码中多了大家不认得的代码bgcolor。 bgcolor是设置舞台背景色的代码
</TD></TR></TABLE>这是结束代码
有多少个
<TABLE>
<TBODY>
<TR>
<TD>,就有多少个</TD></TR></TBODY></TABLE>而顺序也是刚好相反
再看一下另外一个贴 代码为：
<TABLE height=200 width=500 bgColor=#000066>
<TBODY>
<TR>
<TD align=middle><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。</FONT></TD></TR></TBODY></TABLE>
效果如下：
上面这个贴的代码中多了文字代码
<TD align=middle>时文字得位置。当中。
align=cneter(居中，align:文字对齐方式的标识），还有一种是right(居右）left（居左），
<FONT color=#ff0000 size=6>时文字得属性。color=#ff0000 。字得色彩。可以用英文代替。size=6字体大小
</FONT></TD></TR></TBODY></TABLE>对应的收尾代码。
我们再看另外一个贴 代码为
<TABLE height=200 width=500 bgColor=#000066><BR>
<TBODY>
<TR>
<TD align=middle><BR><MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT></P></MARQUEE></TD></TR></TBODY></TABLE>
上面这个舞台的代码。已经接近我们一般做帖的代码了。但文字代码多了一个属性：marouee
marouee是文字的移动代码。
scrollamount=3:文字滚动速度，数字越大速度越快
direction=UP: 文字滚动方向，它有四个参数：UP（向上），down(向下），left（向左），right(向右）
height:滚动文本框的高度，width: 滚动文本框的宽度 ，数值多少自已可以定，高度太小了，视觉会很窄，高度太了，字又很少，滚动一次和第二次的间隔会很长，宽度小了字不能完全显示
效果如下：
|
我们上面所有的贴只是在一个舞台上展示。下面我们就来看看变动多一点的舞台看看。
代码为：
<center ><table bgcolor=#000066 width=500 border=10 bordercolor=#EEAD0E height=300> <TBODY> <tr><td>
<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT>
</td></tr> </TBODY></table></center><BR>
效果如下：
上面这个代码中多了给音画定位的center（中间）代码。关键是多了这两个代码：border(设定边框宽度）bordercolor(设定边框颜色）。如果我们想让边框理漂亮一点，就要用到这个工具：cellspacing(设定内部细小格线的工具）看一下下面这个舞台设计：
上面的边框代码为：
<center ><table bgcolor=#000066 width=500 cellspacing＝10 border=10 bordercolor=#EEAD0E height=300> <TBODY> <tr><td>
<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT>
</td></tr> </TBODY></table></center><BR>
这里我们设的cellspacing＝10，你做的时候可以任意更改，想设为多少都行，上面所有的代码我们都没有用到图片，而在我们做音画必不可少的就是图片，我们现在就看看怎样吧色彩代码变为图片代码。我们现在把bgcolor换成background。把色彩代码换成图片链接地址：http://img.blog.163.com/photo/ieJjc4eOJLshbzHI-4DRTg==/3739113590625184963.jpg看一下效果：
谢谢 腾飞 老师
| 
评论