HTML代码入门基础(二)(页 1) - 代码习作 - 简单音乐论坛音乐使我们沟通更简单

席特 2007-4-23 02:26

HTML代码入门基础(二)

`8b"LfkY
学习代码首先只要了解几个最常见的代码含义就可以了. 甚至你不需要去刻意记他,只要看到知道大概什/g)~A*v?5bvU9s&g

么意思就行了,完全不会影响你去使用它,用多了自然就记住了.
m4m5cx4Gc}v!j5JO
我的课程全部不用你们去死记硬背,放松一些吧,下面进入正题.
 
在第一节已经说过#k+w7JRFF/x
 1ADb-N#Lh!{7S
mT{r5pR
一个完整HTML代码的帖子包含了最基本的几个要素EZl2G Hy!Dwk
}D/Z({(chgsY
1.表格(容纳内容的一个容器):O \\&[v4a

2,图片:包括FLASH 

3.内容:连接地址,文字说明介绍等 

4. 播放器
 
由此可以看出,这里关键的问题就是表格,因为其它的如文字,图片等大家都不同程度的知道或者了解 
  c'c0NI+J*N `T0Ep
初学者往往就是被表格给卡住了,有了表格就好像有了房子,文字,图片等往里面搬就是了(最简单的复制粘贴)!g:@R.a6t[+T
 
其实一个最基本的表格是非常简单的 ,千万别被那些成堆的代码给吓唬住了,因为大多数帖子都是采用多
 
层表格来实现风格各异的效果,掌握了简单的就可以慢慢的去套2层3层....直至多层Bh['Z b&d!W
 
我下面给出一个最基本的表格 .3E&J0e#E7Ks
 
v)ZZ'?$WxYU
<TABLE borderColor=#716699 width="50%" heihgt=50 bgColor=#1AE6BD border=5> <TBODY> <TR> <TD>$m4F dED'rU8Z
这里面就是表格的内部可以装图片等内容2C~5Du.j
</TD>
</TR> P.d0t"h{-L
</TBODY> 
</TABLE> `/NSGL.v
 :T b4u#o b4YJh
ml4t8H)@rY
我用不同的颜色来标注它们的对应关系
 很明显这些代码都是成对出现的,这是一个必须牢牢掌握的基本原则!!!记住:有多少<TABLE>或者<TR>等等开头就一定要有多少</TABLE>等等收尾,并注意他们的相对位置`d-kb7hh"B&t
 ]bm6R1b+Blf

上面的表格代码显示后就是如下
 &L_&n_o#T


2N`nzG%rAK
<TABLE borderColor=#716699 width="50%" bgColor=#1ae6bd border=5 heihgt="50">
<TBODY>
<TR>9v,Y4fQ,u0Tp
<TD>这里面就是表格的内部可以装图片等内容 </TD></TR></TBODY></TABLE>
 
sVL^y/S&Z6F
注意:将上面代码复制到论坛编辑器后一定要构选左侧的启用HTML代码
 

下面再说说这些代码的含义
 <TABLE> 就是定义这是一个表格,是表格的开头.9UX;| F/z0UB~/J7z+e
 <TBODY>表体的起始符,实际使用中也可以省略不用.+y#y$BXazGOR6CY
 }"_+b#_!}&E$Xe#C
,dQ2]bQ4b6ZJ
<tr>：tr的作用是规定表格里面相关内容的行，其中，t是table，r是row（行）。有多少组tr，这张表格内就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。!Q"D{)RG(U`3c
补充说明:
所谓行,我们不能简单的把它理解为一条线,因为在<tr> </tr>之间是可以容纳我们所需要安排的任何内容的. ubK3L$[1C{;eq&F
 !F GXb%[

<td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格内就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成表格内的单元格。(我们可以这样去理解,<TABLE></TABLE>是一间房子,房子里面有纵横分布不同的)M:~w r kE!j&Sh
房间.;Gw3oYWk3_`

为了加深你们对这些代码的理解,下面我用实际例子来作说明&`%l]lJ.?M1y!N cc

例子1代码:
<TABLE width="50%" borderColor=#716699 width="50%" heihgt=50 bgColor=#1AE6BD border=5> <TBODY> <TR> <TD>第一列第一栏</TD> <TD>第一列第二栏</TD></TR></TBODY></TABLE>,|,T){2Wh*h{

显示为:

/px4f2Zm3J
<TABLE borderColor=#716699 width="50%" bgColor=#1ae6bd border=5 heihgt="50">
<TBODY>6FQOk.r
<TR>
<TD>第一列第一栏</TD>4aF8WEI
<TD>第一列第二栏</TD></TR></TBODY></TABLE>

;g]+|Du
例子2代码:
Gz/o [5yl!] FO
<table width="60%" border="1" cellspacing="5"> <tr bordercolor="#0000FF"> 
<DD><td>第一列第一栏</td> 
<DD><td>第一列第二栏</td> </tr> <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> e C ?5H[K
<DD><td>第二列第一栏</td> QAy;y @g2|(~Y
<DD><td>第二列第二栏</td> </tr> </table> .})UlkL#Z'I*Q

显示为:Lk K;A.n,@


<TABLE cellSpacing=5 width="60%" border=1>?|6h3r9UB0x
<TBODY>0`Z*e*CRA3BVK
<TR borderColor=#0000ff>
<TD>第一列第一栏</TD>'a9OJ7f(p)V
<TD>第一列第二栏</TD></TR>q3K'S%@F8T \C
<TR borderColorLight=#ff00ff borderColorDark=#00ff00>4_8O[$F_'i rh;B
<TD>第二列第一栏</TD>@K W%N@4f(T
<TD>第二列第二栏</TD></TR></TBODY></TABLE>
<DD>z"lO#ZYb[9P
 
^&H0t s.Cza/NE
上面的代码中应用了表格的一些属性,后面再讲解
<DD>
 
7d)s#~]Ul2V.} K,L
首先就是要你们明白TR和TD在表格中能够起什么作用7t(P Q6U?ps3{5p
<DD>
 

以上内容你们可以自己试试,并且可以改变其中的颜色代码,或者50%这样的数字
<DD>-p_1l)Gg5Dgt
 

色彩代码可以在IE中复制下面的一个FLASH地址,点击颜色区内不同地方就会给出不同的颜色代码w1O;a R(u*i
<DD>
 
1gKAw+Kl
<A href="http://bbs.cnhubei.com/UploadFile/2006-6/200662410505520205.swf">http://bbs.cnhubei.com/UploadFile/2006-6/200662410505520205.swf</A>A U5A,eF0t'\C0F,{
<DD>AS }aT,Cedv;T
 hg"U.EsR2B'kO
;H ~0u%mrS]5~
记住要在色号前面加上#,颜色号都是6位数
<DD>
  I |t7OIx

50%是我们发表后IE中可以显示的帖子最大宽度的50%%pG8| _P,Q
<DD>
 PY Yd8ccCK R

可以使用百分比,也可以是具体数字,一般最大显示宽度是800,你们只要在800内选择就行了,超过800,帖子会有一部分被遮盖而看不到,你们不妨试试超过800 的宽度效果.
<DD>
注:也不是完全不能超过800显示,这要使用全屏显示的方法,这是后话,暂且不深究.
 m5K ^-v)X
<DD>_e+}V?l
 
<DD> o4A'C.qx?
:O Lsg y"`jLw k o
还有做HTML代码帖子要从开始养成发表前使用预览看看效果的习惯,一旦发现预览显示不正常(例如帖子高度超出了编辑区,完全不显示内容等等,就要及时检查,修正错误,否则一旦点击发表,很可能你连编辑按钮都找不到了)-A6?`!kK!M%f,~'H
<DD>)~0RWB X
 ;`A*Hm9z ? ~ P'X
<DD>
有了表格,其他的就非常容易了,往里面搬吧,注意搬东西可是需要将编辑器转换到即见即所得模式下的(也就是点击编辑器作上面的即见即所得按钮)这种模式下一切都是可见的,可以利用编辑器上方的各种功能键来改变字体颜色,字体大小,居中等等(改变对象需要先选中对象,也就是使用左键去选)
 z*e9N,~+zE
<DIV style="FONT-SIZE: 12px">:E+E5OGW|b
下面再介绍表格的7个属性
 
这些属性不是在任何表格中都会运用,要看需要:Qi.\\E(G2d
 ]RW-wwa eUS+L+{
1.  bgcolor=某种颜色      表格的底色注:如果选用图片作为背景就不能同时用表格底色bgcolor.用背景图片的代码是:(background=图片地址    表格的背景图片)
  Gc]A"l{R
2.  bordercolor=某种颜色  表格边框的颜色4E }U*dM!jb
 $e jHD6Yh/y-f
3.  bordercolorlight=某种颜色   向光部分的颜色(注意不能和上面的边框颜色bordercolor同时使用)[同时注意只有在border边框厚度大于1时该属性才会有效果]A['~jU%W
 4. bordercolordark=某种颜色    背光部分的颜色(注意不能和上面的边框颜色bordercolor同时使用)[同时注意只有在border边框厚度大于1时该属性才会有效果]
 
5. border=数字        表格边框的厚度;o t@DR;g/IP&l)u\j
 
6. cellspacing=数字   表格格子之间的间隙大小(可根据自己需要设定,不选用该属性则系统按默认自动设置)
 
7. cellpadding=数字   表格边框和表格内部内容之间的间隙(可根据自己需要设定,不选用该属性则系统按默认自动设置)</DIV>%]2[:@V6\X9K9Jnf
<DIV style="FONT-SIZE: 12px"> </DIV>
<DIV style="FONT-SIZE: 12px"> </DIV>
<DIV style="FONT-SIZE: 12px">[G3P4CoW
<DIV style="FONT-SIZE: 12px">iD#t~i HG[w+`t
下面就几个属性问题用实例说明
 
 bgcolor属性
前面说了这个属性决定表格的底色%e"b.E nZ
 
代码:
<TABLE  borderColor=#78596D  width="50%" heihgt=50 bgColor= #07737D border=5> <TBODY> <TR> <TD>6gL"sx2m~$o Q1]
表格底色变了
</TD></TR></TBODY></TABLE> \Q4}q o
<TABLE borderColor=#78596d width="50%" bgColor=#07737d border=5 heihgt="250">l'J7[#].y4l9SH^
<TBODY>
<TR>,x\9HC.B
<TD>表格底色变了 </TD></TR></TBODY></TABLE></DIV>
 </DIV>
我不使用底色而选用背景图片
 
代码:
<TABLE  borderColor=#78596D  width="50%" heihgt=500 background=http://image.17173.com/bbs/upload/2005/12/14/1134531115.gif border=5> <TBODY> <TR> <TD>
看看,有背景了$j KThd}I
 
</TD></TR></TBODY></TABLE>d:P'S0]/h1Af
 Mn4UI FQ5w u
注:1个 就相当于一个回车
 5xd3o4s9EA
 
<TABLE borderColor=#78596d width="50%" background=http://image.17173.com/bbs/upload/2005/12/14/1134531115.gif border=5 heihgt="500">9h%h)@VLB&jDF'a
<TBODY>e%lk-Z d0|*TX*S@
<TR>
<TD>z9_,e;fNK5K!`*H.gT
看看,有背景了 z6VU|A)Em
 q]|3|:k*av
 
 yp3R`#F'V_
 
 
 
 JTH/Osx`
 </TD></TR></TBODY></TABLE>
 M0B3Mh#V!tlj@


 @&d e3x7~J-K"~
这里还必须提醒大家注意表格代码和各种属性之间都必须有一个空格否则,这些属性是不能显示的.
 
再就是使用HTML代码编辑帖子后不能够再去使用Discuz!代码,两者不可混用
 $n7?"M+i5m
 
至于这里没有提到的播放器当然也必须使用HTML代码播放器,大家可以到<A style="COLOR: blue" href="http://www.e077.com/thread-7686-1-1.html">HTML代码学习教程</A>中去选择自己喜欢的类型,只要将代码复制到表格中就OK 了(将编辑器转到Discuz!模式下复制)e+sEV dab w
 
地址:<A href="http://www.e077.com/viewthread.php?tid=7686&page=9&extra=page%3D1#pid24596">http://www.e077.com/viewthread.php?tid=7686&page=9&extra=page%3D1#pid24596</A>
 1Rr4jMsrn2X
 .L_?3g(} C|[;^~K
说到这里,大家是否感觉很简单呢,一点都不难.
 ;GH.{"X}j"Z
有了这个基础后面就更不难了.*i$Dr1N(e1G h
 
 0h+T.Rm8qhFH
练习请到置顶处的练习专贴中去练习,另开主题一律删除.
 
 /t? wia ?D
 </DD>

skyhorse 2007-5-23 15:07

<table width="60%" border="1" cellspacing="5"> b&j'T?Om#}q
<tr bordercolor="#0000FF"> 2n'g8p B-J/h
1bp7qi$d&\
<td>第一列第一栏</td>
<td>第一列第二栏</td> 3j1MYC|.{.m@6Y
</tr>
<tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> .X0xt%B)H7NuZ
<td>第二列第一栏</td> {\7J'H'N6e(z b
<td>第二列第二栏</td>
</tr> ]B$?F%q@&Q
</table>

magic97 2007-5-26 10:04

学学看如何

qwetqh 2007-5-29 18:58

太多字拉!看的有点头晕

天使的侧脸 2007-6-2 11:51

谢谢LZ 稍微有点入门了嘿嘿
z)[Nhe&tF$Ax
还要自己继续摸索

qingtianpili 2007-6-16 20:07

谢谢LZ 先入门了

露西 2007-8-6 17:07

谢谢LZ，看的有点迷茫。。。。

洪河水 2007-9-5 01:02

谢谢老大的精彩讲解！学习中

leslie83 2007-9-7 17:24

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:25

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:25

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:25

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:26

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:26

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:26

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:26

*** 作者被禁止或删除内容自动屏蔽 ***

leslie83 2007-9-7 17:27

*** 作者被禁止或删除内容自动屏蔽 ***

漠然 2007-9-7 17:57

:amazing: :greedy: :bad_egg: 扣分扣死你！

忘情的城市 2007-9-11 16:43

好东西，发贴收藏

在云雨外 2007-9-25 13:25

老大能不能做一个帖子出来,
然后再把代码放上来.这样一看我就懂了,现在还是看不明白.

查看完整版本: HTML代码入门基础(二)

HTML代码入门基础(二)