HTML代码学习教程---为了教材的完整请不要跟帖!!!!(页 1) - 代码习作 - 简单音乐论坛音乐使我们沟通更简单

席特 2006-7-23 14:58

HTML代码学习教程---为了教材的完整请不要跟帖!!!!

资料整理中，请不要跟贴，谢谢!! 有兴趣想学的请在练习专贴中跟帖 此贴请长期保留 
IPm#BXpxK
<TABLE borderColor=#ffcccc cellPadding=2 width=701 align=center border=1>&]%vcGhW3H
<TBODY>,v `+d[+zm
<TR>Xh|&K.P b)P.tT
<TD bgColor=#ffcccc colSpan=4 height=19>
<DIV align=center>HTML教程</DIV></TD></TR>y+H;\Km`r"h
<TR>2xg#O^$_"|C@:C
<TD width=140 bgColor=#ffffdf rowSpan=6>%O;b1n%Q$T:K$W7d.B^
<DIV align=center>基础部分 文字部分</DIV></TD>qO0aQ(tpV:m6m3V
<TD width=183 bgColor=#ffffdf>)@mg4JiIk
<DIV align=left>HTML入门</DIV></TD>
<TD width=215 bgColor=#ffffdf>
<DIV align=center>02楼~</DIV></TD>%OJ@$hXB ?E3IUW
<TD width=127 bgColor=#ffffdf><A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D1&page=1" target=_blank>去看看</A></TD></TR>Z,|5w1MPw
<TR>
<TD width=183 bgColor=#ffffdf>
<DIV align=left>论坛常用代码</DIV></TD>
<TD width=215 bgColor=#ffffdf>
<DIV align=center>至</DIV></TD>n'k^? ^OEy
<TD width=127 bgColor=#ffffdf><A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D1&page=1" target=_blank>去看看</A></TD></TR>i%m8B l5pvL8wS
<TR>$j)tKN0wZ
<TD width=183 bgColor=#ffffdf>
<DIV align=left>
<DIV align=left>静态文字基本代码</DIV></DIV></TD>y2rX^1X*~3_OFt
<TD width=215 bgColor=#ffffdf>3Jl!|~n
<DIV align=center>~10楼</DIV></TD>
<TD width=127 bgColor=#ffffdf><A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D1&page=1" target=_blank>去看看</A></TD></TR>D+@EFp8a$m3]
<TR>
<TD width=183 bgColor=#ffffdf>[I?} q'TAt#M
<DIV align=left>静态文字特效</DIV></TD>
<TD width=215 bgColor=#ffffdf>-`w~-yF5wnr
<DIV align=center>11~20楼</DIV></TD>z#Q;fG~el(M
<TD width=127 bgColor=#ffffdf>|uf#t ^]1|b
<A href="http://www.e077.com/viewthread.php?tid=7686&page=2&extra=#pid24519" target=_blank>去看看</A></TD></TR>
<TR>v$bmH-eY C6Q0I0YC
<TD width=183 bgColor=#ffffdf>
<DIV align=left>动态文字特效</DIV></TD>
<TD width=215 bgColor=#ffffdf>[m'ASRN,c
<DIV align=center>21~30楼 </DIV></TD>
<TD width=127 bgColor=#ffffdf><A href="http://www.e077.com/viewthread.php?tid=7686&page=3&extra=#pid24532" target=_blank>去看看</A></TD></TR>
<TR>,?bB,?'ab
<TD width=183 bgColor=#ffffdf>pH[c0G5J(c#o4t
<DIV align=left>色彩对照表FLASH表</DIV></TD>
<TD width=215 bgColor=#ffffdf>
<DIV align=center>30~32楼</DIV></TD>6v&qxw!I6S,z:|
<TD width=127 bgColor=#ffffdf><A href="http://www.e077.com/viewthread.php?tid=7686&page=4&extra=page%3D1#pid24549" target=_blank>去看看</A></TD></TR>
<TR>
<TD width=140 bgColor=#dfffdf rowSpan=4>
<DIV align=center>图片部分</DIV></TD>H9IjA0Sh9~
<TD width=183 bgColor=#dfffdf>
<DIV align=left>图片的基本格式</DIV></TD>
<TD width=215 bgColor=#dfffdf>V:I7Y]xWxR(TE(B1^
<DIV align=center>33楼</DIV></TD>"L5I[$H7_$V][;\~,E
<TD width=127 bgColor=#dfffdf><A href="http://www.e077.com/viewthread.php?tid=7686&page=4&extra=page%3D1#pid24549" target=_blank>去看看</A></TD></TR>)~} tP N4x
<TR>Bp,ENC'w!R
<TD width=183 bgColor=#dfffdf>U6H&B2v.c0}a*I
<DIV align=left>MaL4`1~Ah
图片的静态特效</DIV></TD>1ZAi+ag&e0K
<TD width=215 bgColor=#dfffdf>
<DIV align=center>34~40楼 </DIV></TD>
<TD width=127 bgColor=#dfffdf><A href="http://www.e077.com/viewthread.php?tid=7686&page=4&extra=page%3D1#pid24549" target=_blank>去看看</A></TD></TR>
<TR>jT6Hq?mTf8_
<TD width=183 bgColor=#dfffdf>:N@ U NAi
<DIV align=left>图片的动态特效</DIV></TD>
<TD width=215 bgColor=#dfffdf>/H7rrU}Z'Q\0_
<DIV align=center>41~50楼 </DIV></TD>
<TD width=127 bgColor=#dfffdf><A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D1&page=5" target=_blank>去看看</A></TD></TR>)r*r.dYbYM
<TR>
<TD width=183 bgColor=#dfffdf>
</TD>
<TD width=215 bgColor=#dfffdf>{2fX}7V{
51楼~60</TD>P4?(kuo;QP3D*A0L
<TD width=127 bgColor=#dfffdf></TD></TR>j J ~@9t4uKcY"gA rZ+r
<TR>
<TD width=140 bgColor=#d0ffff rowSpan=5>
<DIV align=center>ir ek,r9}*r
<DIV align=center>表格部分</DIV></DIV></TD>
<TD width=183 bgColor=#d0ffff>
<DIV align=left>表格基本知识 </DIV></TD>
<TD width=215 bgColor=#d0ffff>
61~63楼 </TD>JYlKF7G0kw0Z
<TD width=127 bgColor=#d0ffff><A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D1&page=7" target=_blank>去看看</A></TD></TR>
<TR>
<TD width=183 bgColor=#d0ffff>|Gv nSs)r#t:oH
<DIV align=left>
<DIV align=left>表格的制作</DIV></DIV></TD>+E'B8{DqneUv
<TD width=215 bgColor=#d0ffff>4jff6QW
<DIV align=center>64~70楼 </DIV></TD>*j#S VB_-O~
<TD width=127 bgColor=#d0ffff></TD></TR>.z:\m&}/m~
<TR>
<TD width=183 bgColor=#d0ffff>q*u\9a,?.?
<DIV align=left>'NfW1}:C1bE1akU
<DIV align=left>表格的套用</DIV></DIV></TD>
<TD width=215 bgColor=#d0ffff>*O{i/o)uZ+X
<DIV align=center>71楼 至~</DIV></TD>yda7pf0N
<TD width=127 bgColor=#d0ffff></TD></TR>1OJ)YlX\.B8b
<TR>[)IxlD
<TD width=183 bgColor=#d0ffff>4a:m'ozJ%lGm
<DIV align=left>表格的修饰</DIV></TD>e;tD~:b
<TD width=215 bgColor=#d0ffff>{/re-aT1Q
<DIV align=center></DIV></TD>
<TD width=127 bgColor=#d0ffff></TD></TR>
<TR>
<TD width=183 bgColor=#d0ffff>如何转贴</TD>
<TD width=215 bgColor=#d0ffff>
<DIV align=center>~80楼</DIV></TD>-?}4rO @d
<TD width=127 bgColor=#d0ffff></TD></TR>;@n_:i8S|*V\
<TR>
<TD width=140 bgColor=#ffffdd rowSpan=3>
<DIV align=center>
<DIV align=center>音频视频部分</DIV></DIV></TD>#O%?(k2Lof+l;IB
<TD width=183 bgColor=#ffffdd>
<DIV align=left>播放器部分</DIV></TD>
<TD width=215 bgColor=#ffffdd>"i3e1p.of1Gm
<DIV align=center>81楼至 </DIV></TD>o~}'b@.d%_$y
<TD width=127 bgColor=#ffffdd><A href="http://www.e077.com/viewthread.php?tid=7686&page=9&extra=page%3D1#pid24596" target=_blank>去看看</A> </TD></TR>e!qw;]8t+FJ
<TR>:O*l8L2Zu*VsY
<TD width=183 bgColor=#ffffdd>FLASH部分</TD>
<TD width=215 bgColor=#ffffdd>l!lc!c(l%F@.V
<DIV align=center>~84楼 </DIV></TD>
<TD width=127 bgColor=#ffffdd></TD></TR>[RC,_)~f-Q'oT5?
<TR>
<TD width=183 bgColor=#ffffdd>各类播放器及特效</TD>
<TD width=215 bgColor=#ffffdd>0D/G;`6^ed:F
<DIV align=center>85~100</DIV></TD>+bpF#U:xC$_(J0d
<TD width=127 bgColor=#ffffdd><A href="http://www.e077.com/viewthread.php?tid=7686&page=9&extra=page%3D1#pid24596" target=_blank>去看看</A> </TD></TR>x&h8rS W
<TR>)O\^HM7Z7c
<TD width=140 bgColor=#ddddff>i;v3pAVy#lI
<DIV align=center>现成边框收集</DIV></TD>F RL8S6U
<TD width=183 bgColor=#ddddff></TD>
<TD width=215 bgColor=#ddddff>101楼~~增加中</TD>3BR6C2Nl1CQF-sF
<TD width=127 bgColor=#ddddff><A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D1&page=11" target=_blank>去看看</A></TD></TR>
<TR bgColor=#ccffff>
<TD rowSpan=3>
<DIV align=center>其它素材收集</DIV></TD>t _7vo2WQP.{5I7L
<TD width=183>
<DIV align=left>FLASH部分</DIV></TD>
<TD width=215></TD> RcOe/}le
<TD width=127>
<A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D&page=17" target=_blank>去看看</A></TD></TR>IKS0s4BQ
<TR>
<TD width=183 bgColor=#ccffff>
<DIV align=left>背景部分</DIV></TD>
<TD width=215 bgColor=#ccffff></TD>'A2wu$U"W|o8h
<TD width=127 bgColor=#ccffff>^$es%P/f
<A href="http://www.e077.com/viewthread.php?tid=7686&extra=page%3D&page=17" target=_blank>去看看</A></TD></TR>
<TR>yb;n6x#_T
<TD width=183 bgColor=#ccffff>B0B2wk+~#p`B
<DIV align=left>装饰分隔线部分</DIV></TD>;wcm-Ag5t
<TD width=215 bgColor=#ccffff></TD>
<TD width=127 bgColor=#ccffff></TD></TR></TBODY></TABLE> h8h-AI;KI-l

[[i] 本帖最后由席特于 2006-10-23 14:50 编辑 [/i]]

席特 2006-7-23 15:02

rH0Q!He
s3b5?%J nMce
\"IO+D&|$h
1\:t;Qwfa3K$D X
　　HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 *SiRf,e,s#p4`
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 'h"J8L,tW|Cq5l
　　通过HTML可以表现出丰富多彩的设计风格 
　　　　　图片调用：<IMG SRC="文件名"> 　　　　　文字格式：文字 
效果如下: "ZNC{ Y [0g_
文字 T+H0F~a,C n)cc'~
通过HTML可以实现页面之间的跳转 4v.b}{,he:zj]
　　　　　页面跳转：〈A HREF="文件路径/文件名"></A> -U7Q"wwzfO
　　通过HTML可以展现多媒体的效果 ]1^k5F#z^o"~9^
　　　　　声频：<EMBED SRC="音乐文件名" AUTOSTART=true> 　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true> 
你可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如<table></table>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。 tJs!i6DVm
从代码结构来看，HTML帖子实际上就是一个去头去尾的Web页面,换句话说用HTML代码编辑的帖子 6EJ3Miy}
其实质就是网页编辑的一个小内容.因此要想学精通是比较困难的,可是千万别怕!!!我们都不是从事网页设计的,只想编个漂亮的帖子而已,那就简单的多了.大家只要记熟一些常用的代码,了解这些代码的含义就完全够了,我们可以采取套用(简单的复制粘贴),转贴后修改等方法来达到目的,多则半个月,少则一个星期,应该就能制作HTML代码帖子了,套用多了,自然就熟悉了,有兴趣的话可以进一步求精了.

席特 2006-7-23 15:04

论坛HTML帖子常用代码 一、文字标记 基本代码如下： 插入文字 align=center　表示字体居中，可选值为居右（right）居左（left） color=颜色代码 face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等 size=字体大小，这里的最大值为6　取值越大文字就越大 1.字体变化 .......... a.字体大小 .......... #=1~7；数字愈大字也愈大 b.指定字型 .......... c.文字颜色 .......... rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码 rrggbb也可用6位颜色代码数字 2.粗体字 .......... 3 字体加粗..........和标签差不多的效果 4.换行（也称回车） 5.分段标记 文字的对齐方向 #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.之后的文字都会以所设的对齐方式显示，直到出现另一个改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。 6.区隔标记 <DIV> <DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。 <DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性。。 以 <DIV align="center"> 为例： align="center" 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 <DIV align="center"> 的作用和居中标记 <CENTER>一样。。 注：其实常用跟标签的效果差不多，但是功能比相对强一些。。。 7.分隔线 <hr> a.分隔线的粗细 <hr size=点数> b.分隔线的宽度 <hr size=点数或百分比> c.分隔线对齐方向 <hr align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 d.分隔线的颜色 <hr color=#rrggbb> e.实心分隔线 <hr noshade> 8.居中对齐 <center>..........</center> 跟........,<DIV align="center">........<DIV>效果基本是一样的。。。 9.文字移动标记<MARQUEE>..........</MARQUEE> <marquee 属性＝属性值> 滚动内容 </marquee> 移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。 字符移动每步的延时:scrolldelay=# 属性值为数字， #最小为1，数值越大速度越大，反之亦然。 移动方向指令是：direction=# up向上、down向下、left向左、right向右。 移动方式:behavior 属性值为scroll：文字单向移动，side：移动到边界停止，alternate：到边界后反向移动； align，对齐方式，其属性值为center，left，right，top, middle, bottom，分别表示居中，左对齐，右对齐，对齐上沿、中间、下沿； bgcolor，移动字符的背景色，属性值为颜色代码，可以是rrggbb 16 进制数码，r=red，g=green， b=blue，也就是色彩中的三原色，也可是预定义色彩； loop，移动字符的循环次数，属性值为数字，若未指定则循环不止(infinite)； width及height，文字高度和宽度，以象素为单位，属性值为数字； hspace字符左右留白长度，属性值为数字； vspace字符上下留白长度，属性值为数字； scrollamount字符的移动速度，属性值为数字，数值越大速度越大，反之亦然；

[[i] 本帖最后由席特于 2006-7-23 15:45 编辑 [/i]]

席特 2006-7-23 15:04

p q Ag/B8z
如何突破6号字的大小
   我们需要以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果：X$M ^"ay-K d
简单4D/dC{Y*B;GL(|
简单
#Kmm0lu#n%c
[[i] 本帖最后由席特于 2006-7-23 16:00 编辑 [/i]]

席特 2006-7-23 15:04

以上是部分最常用的代码,HTML代码还有很多,全都列举出来会让初学者头皮发麻的,因此不想一下子全部列举.我想在实际的运用中结合实例再详细讲解,大家的印象会更深,也更容易理解.
以前面的文字移动标记<MARQUEE>..........</MARQUEE>为例,我们用实际来讲解
   在论坛默认的编辑状态下，我们可以通过UBB语法的move和fly语句让对象动起来，但功能很简单，只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果：向左、向右、向上、向下。再嵌套使用marquee语句，效果就更加丰富了。
    marquee的基本语法：<marquee> ... </marquee> 说明：与大多数HTML语法元素一样，它也是成双出现的，被修饰对象就放在起始符和终止符之间。请看如下例子：3C5X/c1f!_I?
<marquee> 简简单单音乐论坛</marquee>

<MARQUEE>[size=4][color=#FF0033]简简单单音乐论坛[/color][/size]</MARQUEE>/V)Y@e7Q'H0J4KE
 瞧，简单吧？不过，以上例子只是使用了marquee的默认用法。我们加入相应的参数，它的移动方法就有所不同了。
参数一：behavior。移动方式。值：scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
例：<marquee direction=left behavior=alternate>哈哈，我来回走！</marquee>
W7J ij_et}d,ns
<MARQUEE behavior=alternate>[size=4][color=#FF0033]哈哈，我来回走！[/color][/size]</MARQUEE>jv.Ws~
参数二：scrollamount。移动速度。值取正整数。数值越大，速度越快。例：
<marquee scrollamount=25>看，我走多快！</marquee>wF Y,l&y'pxbI

<MARQUEE scrollAmount=25>[size=4][color=#FF0033]看，我走多快！[/color] [/size]</MARQUEE>
 参数三：scrolldelay 延时。数值。例：
<marquee scrolldelay=1000>我走一走，停一停</marquee>"Q%Ex,C&\

<MARQUEE scrollDelay=1000>[size=4][color=#FF0033]我走一走，停一停[/color][/size]</MARQUEE>
参数四：bgcolor 底色。例：_+R|xrQ:H
<marquee bgcolor=pink>看到了吧？我有底色！</marquee>s'vA8zZ[Y

<MARQUEE bgColor=pink>[size=4][color=#FF0033]看到了吧？我有底色[/color][/size]</MARQUEE>a0jyW9Z^ Q
#=rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua;v;b-I2dHo+`l,Z7w
参数五范围：width和height。就是移动的宽度与高度了。例：Lz:{~"V!L\K7{
<marquee width=200 height=200 bgcolor=pink direction=down>在我的地盘里移动！</marquee>1Ke:x,Af*|7Tg)X
5S&LuA0i9A\z&T @
<MARQUEE direction=down width=200 bgColor=pink height=200>[size=4][color=#FF0033]在我的地盘里移动！[/color] [/size]</MARQUEE>
<H5>参数6:外观(Layout)设置</H5>n ])I6\`3I
1.对齐方式(Align) <align=#> #=top, middle, bottom"?6M5u\%|0nI+S,Un
<DL>
<DD><TT><marquee align=top width=400>我在上面移动</marquee></TT></DD>!\_Z;G&N&h5G%?J b GP
<DD><TT><marquee align=middle width=400>我在中间移动</marquee></TT></DD>
<DD><TT><marquee align=bottom width=400>我在下面移动</marquee></TT></DD>
<DD><TT> 对齐上沿、中间、下沿。</TT></DD></DL><TT>

<MARQUEE width=400 align="top">[size=4][color=#FF0033]我在上面移动[/color][/size]</MARQUEE>对齐上沿
}4h)vm9yG1~
<MARQUEE width=400 align="middle">[size=4][color=#FF0033]我在中间移动[/color][/size]</MARQUEE>对齐中间

<MARQUEE width=400 align="bottom">[size=4][color=#FF0033]我在下面移动[/color][/size]</MARQUEE>对齐下沿-i:iO.s9m&Wc f
 
参数7:空白<Margins><hspace=# vspace=#>
******************************************** 你好 <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>假人来了</marquee> 大家好！ ********************************************;E}-Q _1T5[O)m b3M
[color=#FF0033][size=4]******************************************** 你好 ^et*NJ(I
<MARQUEE hspace=20 vspace=20 width=150 bgColor=#ffaaaa align="middle">假人来了</MARQUEE>大家好！ [/size] ********************************************[/color]
</TT> 

[[i] 本帖最后由席特于 2006-7-23 17:12 编辑 [/i]]

席特 2006-7-23 15:05