学习ＨＴＭＬ语言
<H2>[转]《网络教程和素材》学习HTML语言.....</H2>
<DIV class=t_msgfont id=postmessage_123068>有些人在网上看到了好多漂亮的音画帖帖，自已是否也想来制作呢？<BR>下面我来教大家如何运用HTML语言，其实很简单的，只要你掌握一定的规律，一点都不难的。如果你会运用HTML语言，那就不要浪费时间看下去了。<BR>一、边框：<BR>1、一层<BR><TABLE cellSpacing=1 cellPadding=0 width="100%" align=center background=http://pugongyingw.51.net/image/bj/10.jpg border=5><BR></td></tr></tbody></table><BR>2、两层<BR><p ALIGN=CENTER><BR><TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1><BR><TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#A93CC4 border=0><BR><TBODY><TR><TD>加入内容</td></tr></tbody></table></td></tr></tbody></table></p><BR>3、三层<BR><CENTER><TABLE cellSpacing=10 cellPadding=2 width=450 bgColor=#000000 border=1><TR><TD><TABLE cellSpacing=8 cellPadding=10 width=450 bgColor=#CCCC33 border=1><TR><TD><CENTER><TABLE cellSpacing=8 cellPadding=10 width=450 background=http://www.vigevano.net/pianzoline/fotoset04/013/wingstile.jpg border=0><TR><TD>加入内容</TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></CENTER> <BR>4、四层<BR><CENTER><BR><TABLE cellSpacing=0 cellPadding=30 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/frosarayasluz.jpg border=0><BR><TBODY><BR><TR><BR><TD><BR><TABLE borderColor=#0000ff cellSpacing=0 cellPadding=10 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/frosaluminoso.jpg border=1><BR><TBODY><BR><TR><BR><TD><BR><TABLE borderColor=#0000ff cellSpacing=0 cellPadding=10 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/fromheavengold.jpg border=1><BR><TBODY><BR><TR><BR><TD><BR><TABLE borderColor=#0000ff cellSpacing=0 cellPadding=0 width="100%" align=center background=http://www.vigevano.net/pianzoline/fotoset04/013/frosaramosblancosuave.jpg border=1><BR><TBODY><BR><TR><BR><TD>内容<BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE></CENTER><BR><BR>二、加框有一层FLASH的图片<BR><TABLE height=280cellSpacing=0 cellPadding=0 width=380 background=http://home.u911.com/051904/1.jpg border=1 bortercolor="#000000"><BR><TBODY><BR><TR><BR><TD><BR><p align=center><EMBED src=http://imgfree.21cn.com/free/flash/7.swf width=600 height=150 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></P></TD></TR></TBODY></TABLE><BR>三：图片倒影效果：<BR><p align=center><FONT style="FONT-SIZE: 27pt; WIDTH: 220px; COLOR: #00ff00; HEIGHT: 10px"><IMG src="<A href="http://www.tianshi163.com/zy/4.gif" target=_blank><FONT color=#0000ff>http://www.tianshi163.com/zy/4.gif"><FONT</FONT></A> id=ew style="FONT-SIZE: 27pt; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 220px; COLOR: #3333ff; HEIGHT: 10px"><IMG src="<A href="http://www.tianshi163.com/zy/4.gif" target=_blank><FONT color=#0000ff>http://www.tianshi163.com/zy/4.gif"></FONT></FONT></P</FONT></A>><BR><BR>四、加入背景音乐代码：<BR><EMBED src=http://www.flamesky.org/raynal-onwer/asoka%20theme..wma.wma hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED><BR><EMBED align=middle src=http://baysky.com/Music/wzmkl.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin autostart="true" controls="PlayButton" volume="100" loop="true"></EMBED><BR>所用元素：<EMBED></EMBED><BR>参数：src：音乐文件的URL；hidden：=true为不可见，=false反之；type：指定音频类型；LOOP：是否循环播放，注意其值置于小角双引号中；AUTOSTART：是否自动播放，其值同上。<BR>常用代码汇编<BR>1.标题文字 <h#>..........</h#> #=1~6；h1为最大字，h6为最小字<BR>2.字体变化 <font>..........</font> <BR>【1】字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大 <BR>【2】指定字型 <font face="字体名称">..........</font> <BR>【3】文字颜色 <font color=#rrggbb>..........</font> rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码<BR>3.显示小字体 <small>..........</small> <BR>4.显示大字体 <big>..........</big><BR>5.粗体字 <b>..........</b><BR>6.斜体字 <i>..........</i> <BR>7.打字机字体 <tt>..........</tt><BR>8.底线 <u>..........</u><BR>9.删除线 <strike>..........</strike><BR>10.下标字 <sub>..........</sub><BR>11.上标字 <sup>..........</sup><BR>12.文字闪烁效果 <blink>..........</blink><BR>13.换行 <br><BR>14.分段 <p> <BR>15.文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.<p align="#">之後的文字都会以所设的对齐方式显示， 直到出现另一个<p align="#">改变其对齐方向，遇到 <hr>或<h#>标签时会自动设回预设的向左对齐。<BR>16.分隔线 <hr> <BR>【1】分隔线的粗细 <hr size=点数> <BR>【2】分隔线的宽度 <hr size=点数或百分比> <BR>【3】分隔线对齐方向 <hr align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 <BR>【4】分隔线的颜色 <hr color=#rrggbb> <BR>【5】实心分隔线 <hr noshade><BR>17.居中对齐 <center>..........</center><BR>18.依原始样式显示 <pre>..........</pre><BR>19.<body>指令的属性 <BR>【1】背景颜色 -- bgcolor <body bgcolor=#rrggbb> <BR>【2】背景图案 -- background <body background="图形文件名"> <BR>【3】设定背景图案不会卷动 -- bgproperties <body bgproperties=fixed> <BR>【4】文件内容文字的颜色 -- text <body text=#rrggbb> <BR>【5】超连结文字颜色 -- link <body link=#rrggbb> <BR>【6】正被选取的超连结文字颜色 -- vlink <body vlink=#rrggbb> <BR>【7】已连结过的超连结文字颜色 -- alink <body alink=#rrggbb><BR>一、图片<BR>1.插入图片 <img src="图形文件名"><BR>2.设定图框 -- border <img src="图形文件名" border=点数><BR>3.设定图形大小 -- width、height <img src="图形文件名" width=宽度点数 height=高度点数><BR>4.设定图形上下左右留空 -- vspace、hspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数><BR>5.图形附注 <img src="图形文件名" alt="说明文字"><BR>6.预载图片<BR><img src="高解析度图形文件名" lowsrc="低解析度图形文件名"> P.S.两个图的图形大小最好一致<BR>7.影像地图（Image Map） <img src="图形文件名" usemap="#图的名称"> <map name="图的名称"><BR><area shape=形状 coords=区域座标列表 href="连结点之URL"><BR><area shape=形状 coords=区域座标列表 href="连结点之URL"><BR><area shape=形状 coords=区域座标列表 href="连结点之URL"><BR><area shape=形状 coords=区域座标列表 href="连结点之URL"> </map> <BR>【1】定义形状 -- shape<BR>shape=rect：矩形 shape=circle：圆形 shape=poly：多边形 <BR>【2】定义区域 -- coords<BR>a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标<BR>例：<area shape=rect coords=100,50,200,75 href="URL"> <BR>b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度<BR>例：<area shape=circle coords=85,155,30 href="URL"><BR>c.任意图形（多边形）：将图形之每一转折点座标依序填入<BR>例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"<BR>二、表格相关<BR>1.表格标题<BR><caption>..........</caption> <BR>表格标题位置 -- align<BR><caption align="#"> #号可为 top：表标题置于表格上方（预设值）<BR>bottom：表标题置于表格下方<BR>2.定义列 <tr><BR>3.定义栏位 《1》<td>：*左对齐<BR>《2》<th>：*中对齐ⅱ粗体 <BR>【1】水平位置 -- align <th align="#"><BR>#号可为 left：向左对齐<BR>center：向中对齐 right：向右对齐<BR>【2】垂直位置 -- align <th align="#"> #号可为<BR>top：向上对齐 middle：向中对齐<BR>bottom：向下对齐 <BR>【3】栏位宽度 -- width<BR><th width=点数或百分比> <BR>【4】栏位垂直合并 -- rowspan<BR><th rowspan=欲合并栏位数> <BR>【5】栏位横向合并 -- colspan<BR><th colspan=欲合并栏位数><BR>三、FRAME<BR>1、分割视窗指令 <frameset>..........</frameset> <BR>【1】垂直（上下）分割 -- rows<BR><frameset rows=#> #号可为点数：如欲分割为100,200,300三个视窗，则<BR><frameset rows=100,200,300>；亦可以*号代表，如<frameset rows=*,500,*><BR>百分比：如<frameset rows=30%,70%>，各 项总和最好为100%<BR>【2】水平（左右）分割 -- cols <frameset cols=点数或百分比><BR>2、指定视窗内容 -- <frame><BR><frameset cols=30%,70%> <frame> <frame> </frameset><BR>【1】指定视窗的文件名称 -- src <frame src=HTML档名> <BR>【2】定义视窗的名称 -- name<BR><frame name=视窗名称> <BR>【3】设定文件与上下边框的距离 -- marginheight<BR><frame marginheight=点数> <BR>【4】设定文件与左右边框的距离 -- marginwidth<BR><frame marginwidth=点数> <BR>【5】设定分割视窗卷轴 -- scrolling<BR><frame scrolling=#> #号可为 yes：固定出现卷轴<BR>no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）<BR>【6】锁住分割视窗的大小 -- noresize <frame noresize><BR><P><BR><TABLE cellSpacing=18 borderColorDark=#3366ff width="80%" align=center borderColorLight=#3366ff background=背景图片地址1 haru2 haru><BR><TBODY><BR><TR><BR><TD width="100%" background=背景图片地址2 huyu><BR><P align=center><FONT color=#f4dbb5 size=4> </FONT></P></TD></TR></TBODY></TABLE></P><BR>大家试试吧！很简单的啦 <BR><BR>七层的代码：<BR><TABLE cellSpacing=1 cellPadding=1 width="100%" background=http://wtv-zone.com/BannerzRus/2tbacks/mback10b.jpg border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=10 cellPadding=15 width="100%" background=http://wtv-zone.com/BannerzRus/2tbacks/mback10a.jpg border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=3 cellPadding=3 width="100%" background=http://wtv-zone.com/BannerzRus/2tbacks/ani9.gif border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=5 cellPadding=5 width="100%" background=http://wtv-zone.com/BannerzRus/2tbacks/mback10b.jpg border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=3 cellPadding=3 width="100%" background=http://wtv-zone.com/BannerzRus/2tbacks/ani9.gif border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=3 cellPadding=3 width="100%" background=<BR>border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://wtv-zone.com/BannerzRus/2tbacks/mback10.jpg border=0><BR><TBODY><BR><TR><BR><TD align=middle width="100%"><BR><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><BR><TBODY><BR><TR><BR><TD>内容<BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE><BR></DIV>