html学习 (转) 个人认为比较全的

                                1.字体设置

 让我们首先从字体设置开始。

    在HTML代码里,字体的定义并不是很难,我们只需用<font>标签即可定义字体、字号、字体颜色等。<font> 标签原则上要求成对出现,即在被修饰的字体前使用<font>引导,在被修饰的文字后用</font>结尾。下面给出例子和效果 及相关说明:

    语法:<font face=黑体 size=4 color=red>寒冰的博客</font>

    效果:寒冰的博客

    说明:<font>标签里,face为字体名称,“=黑体”即表示被修饰的文字即“寒冰的博客”的字体为黑体,至于定义为什么字体,看你的喜 好了,如果你所设置的字体不存在,系统自动使用默认字体显示(如中文Windows平台下宋体就是默认字体);size表示字号,论坛里可用字号是1号到 7号,通常数字越大字号也就越大(也有的论坛相反),如果用户定义的字号超过7号则以7号显示(但还有其他方法突破7号字体,稍后我们会讨论到 的);color用来定义文字的显示颜色,其值放在和前面的各元素一样放在等号的后面,颜色的表示方式可用少量的颜色英文明文,也可用Web色码方式, 如#ff0000,色码表请参阅寒冰博客上的提供的色码一览表日志

    size还有一种赋值方法,形式如下:

    <font size=+1>寒冰的博客</font>

    这类表达式适用于未使用CSS设定的页面,它表示被修饰的文字在默认字号基础上加大一号。

    字体修饰还用到其他的标签,分别介绍如下:

    粗体:<b>文字</b>  (例:文字

    加重:<strong>文字</strong> (例:文字

    上标:<sup>文字</sup>  (例:文字

    下标:<sub>文字</sub>  (例:文字

    斜体:<i>文字</i>  (例:文字

    下划线:<u>文字</u>  (例:文字

    提示:连同<font>标签一块,以上这些修饰方法,只要不相互冲突就可以结合起来使用。

    标题修饰:<hx>文字</hx>。其中,x为1到6的数字。以下是h1到h6的标题式样效果,我们可以看到,字号是逐渐变小的:

标题一

 

标题二

 

标题三

标题四

 

标题五
标题六

    最后讲讲突破7号字大小问题:

    我们需要以嵌套方式调用CSS样式来定义字体,这种方法可以让我们最大限度地设置字号大小,实现方法也很简单,只需在<font>标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果:

    代码:<font color=#1ff000 style=" font-size: 100pt;font-family:华文行楷,隶书,黑体">寒冰</font>

    效果:
寒冰

    CSS扩展了HTML功能,它能够令帖子和网页的可控制程度更高。更多的CSS知识将在后面陆续介绍,你也可以阅读了解和学习一下CSS滤镜修饰字体的强大功能。

                                                             2.分隔标签详解

 从 代码结构来看,HTML帖子实际上就是一个去头去尾的Web页面,原帖和回复置于<body>和</body>之间,我们可以把 原帖和回复帖分开来看,这样,每一个帖子实际上就相当于Web页面的正文了。正文的行与行之间、段与段之间甚至上一个显示元素和下一个显示元素之间,如若 我们不刻意去把它们分隔开来,情形会怎么样呢?显然会是一团糟,你的帖子将是一个大团块,阅读起来将十分不便。

    为此,学习和掌握HTML语法中的分隔标签非常有必要,娴熟地应用分隔标签,将能令你制作的帖子可读性强、外观整洁漂亮。

    强行换行:<br>

    在需要处打上<br>标签,<br>后面的内容将强行换到下一行。Web页会根据自己的可显示宽度自动换行(除非定义为不换行,不换行标签是<nobr>),但有些情况下,我们需要强行换行(比如诗歌、歌词等的编排),此时<br>标签就能派上用场。<br>可以连续使用,如果<br>后面没有内容,它将表示一个空行。<br>是独立使用的标签,没有终止符,</br>是错误的!

    强行分段:<p>内容</p>

    与换行不同,p用来强行分段,它是成对出现的标签,即以起始符<p>引导被修饰的段落,以</p>结束该段。在HTML页面里,段与段之间的距离相当于一个空行,并不像Word里用回车分段得出的效果那样。默认情况下用两个<br>也得到分段的效果,但这样可能会存在一些问题:一是,假设预定义了行高,那么,两个<br>造成的两个段落的上下间距可能与用p的不同;二是,像动网论坛那样,用<br>来给一系列超级链接分行,不管连续用多少个<br>,<br>都极可能被吞掉,结果是,那些超级链接外观上将是连在一起的,分辩起来哪是哪比较困难,所以建议用p标签来给它们分段(当然还有其他的手段)。

    类似p标签的还有div,记作:<div>内容</div>。严格来说div不是一个分段标签,它和span等元素一样,属于网页布局元素,用于网页制作的布局、定位、色块等设计,但在论坛里,div的作用非常类似于p,不过,它分出的段落间距不一定与标签p一致。

    分隔线:<hr>

    分隔线标签<hr>也是独立使用的,它将令Web页出现一条线条。如果不需要特别的装饰,直接用<hr>即可,也可以修饰分隔条,让它和你的帖子更协调地配合起来。<hr>标签可定义元素主要有:

    size  — 厚度,即分隔线的粗细,默认为1;
    color — 颜色,记作:color=颜色值;
    width — 宽度,可用实数值表示,也可用百分比;
    align — 对齐方式。居中:center,左对齐:left,右对齐:right。默认为居中;

    <hr>标签还有一些诸如title(标题)、noshade(无阴影)等元素,这里就不一一介绍了。

                             3.排版标签详解

HTML的排版不同于Word的直观排版概念,它不是所见即可得的。但是,最终追求的结果是一样的:令终端页面的外观像我们预设的一样显示出来。

    在支持HTML论坛里,排版可分为常规排版和非常规排版两种,后者属于较为高深的内容,出于学习的循序渐进要求,我们在本节只介绍常规排版。

    一、格式预设:<pre>内容</pre>

    这是非常有用的一个标签,它可以使得最终显示效果以原始格式实现。请看以下代码和效果:

代码:

<pre>
1236
-1207
--------
29
</pre>

效果:
1236
-1207
--------
29

    论坛里,有时我们需要精确地对齐某些元素,pre标签能够帮上大忙,它能令效果比在“设计”模式下用空格符移动显示符号更准确。

    二、对齐:align

    align作为一个元素放置在相应标签里令被该标签修饰的显示单元按指定方式对齐或在图文混排时定义图片与文字的对齐方式。

    先介绍前者,即被修饰单元的对齐方式。这种情形,align通常有三个值可以选 择:left(左对齐)、center(居中)、right(右对齐),记作align=值。align不能独立使用,它要放在相应的标签里,如放在& lt;table ...>里,则令表格按取值情况对齐,<table ... align=center>一句,将令表格居中;再如放在<p>标签里,则令<p>...</p>里面的内容 按指定值对齐,<p laign=right>文字</p>将使“文字”右对齐。align的这种用法还可以用于<div>、<hr& gt;等标签里。

    而当align用于<img>(图像标签)里时,它所指的是图片与文字的对齐方式,其值比较多,现解释如下:

    left:图片位于文字的左边。例:

寒冰的博客

    right:图片位于文字的右边。例:

寒冰的博客

    top:后面的文字与图片的顶站对齐。例:

寒冰的博客

    bottom:后面的文字与图片的底部对齐。例:

寒冰的博客

    middle:后面的文字与图片的中间对齐。例:

寒冰的博客

    absmiddle:后面的文字与图片的绝对中间对齐。例:

寒冰的博客

    更多的img标签里的align元素请参阅其他资讯。

    三、缩进:<blockquote>

    blockquote将例被修饰的对象往右边缩退,记作<blockquote>内容</blockquote>,以下效果是这样的语法实现的(用了两个缩进单位)如:<blockquote><blockquote>寒冰博客是……</blockquote></blockquote>

寒冰博客是一个综合性博客,有“PC动力”、“原创大厅”、“情感小屋”、“读书角”、“音画广场”和“音乐岛”六个栏目,网站还开设有听歌台主站。

    当然,你也可以用空格符号实现缩进(代码记作&nbsp;),但它只管左边的,对右边没有影响,而blokcquote标签是有的。

    四、居中对齐:<center>内容</center>

    这个很简单,成组使用即可,不多说什么了。

    五、其他排版方式:表格

    用表格来实现网页布局一直被大量使用。在论坛里发帖,有些需要居中的地方,我们不妨用用表格,它得出的效果会比用center标签好得多。试看以下例子:

为了那一夏的热
爱需要蛰居多久

在漫长的暗无天日的日子里
一切早已精心策划
单等风和日丽之时破土而出
而后羽化成歌

烈日下本就炽热的爱必须张扬
让正午的阳光更为燥热
让黄昏的空气鼓动起来
让爱肆无忌惮

当爱成为阳光下的风景
曾经的等待又何需忆起

    如果我们将表格的边框设置为0,那么,看表将看不到,文字的居中效果就非常理想了。

                             4.图像标签

或许贴图是论坛里最容易的事情。有人当初玩论坛就爱上论坛的原因就是发图太简单了。复制→粘贴就可以发一张图片,这是动网论坛的便利。用HTML方式贴图,它的语法也是很简单。

基本语法:<img src=图片地址 border=数值 align=对齐方式>

    我们看到,img标签没有终止符。其常用参数也不太多,非常容易记住。

    src:图片地址。在论坛里,强烈建议使用图片的完整地址也就是绝对地址,若是上传到论坛的图片,可以使用相对地址,一般从upload一节开始。

    border:图片的边框。取值范围为正整数,边框颜色不可改变(黑色)。多数论坛里的图片都会链接到自身,当用户点击过它,它的边框颜色通常就是默认的蓝色,故为美观起见,建议设置为0。

    align:图片与文字的位置关系。这个内容,我们在上一节已经讲过,还不太熟悉的请参阅 排版标签

    img标签还有其他的参数:

    alt、title:说明、标题。都是当鼠标移到图片时弹出的文字。下面是使用效果,请将鼠标指针分别移到图片上看看发生什么:

alt=黑马在线动力      

    hspace、vspace:图文混排时图片与左右、上下物件的距离。取值为正整数

    width、height:图片的宽度、高度。如 果图片的高与宽未做设置,系统会按照图片的原本高宽显示出来,但不少论坛并非这样,论坛系统嵌入了一组js代码对图片的尺寸进行处理:如果图片的宽度超过 300个像素则以300个像素显示,为止设置图片的高度宽度在这些论坛没有意义;也有的论坛支持用户设置,这类论坛就需要我们对一些尺寸不合要求的图片做 一下设置了。是的,图片不一定按原来的尺寸显示,可以通过设置width、height值做必要的调整。

                             5.超级连接

 在很多论坛里,我们在Design(设计)编辑模式下输入或复制一个网址或其他地址,论坛系统自动令其成为超级链接模式,即发布后,一点击这个地址,浏览器会打开该地址。这是因为,论坛系统在后台给出了超级链接标签。在HTML编辑模式下,我们得自己编写超级链接代码,否则输入的链接是点不了的。

 语法:<a href=地址 target=数值>文字或图像</a>

    地址没什么可说,只要是完整有效的网址即可。

    target是连接目标,它实际上指链接的打开方式,它的值有好几个,但在论坛里我们只用到_blank这个值,记作: target=_blank, 意思是将在新页面打开目标链接。如果省略掉target元素,系统默认为在本页打开目标链接,即当前页面的内容将跳转为目标链接指向的内容。一些论坛用不 用target都视为开启新页面打开目标链接,这里因为预设定了的缘故,比如,在系统调用的INC之类的文件里有那么一句,它的作用就是所有的链接都指向 新页面: <base target="_blank"> 。这种环境下,我们对target元素没有操作权限了。

    <a href>标签还有title、name等属性,但在论坛里可操作性不强甚至没有用处,这里就不多说了,感兴趣的朋友可以查阅其他资讯。

    现在我们要讨论的是超级链接的字体颜色问题。我们知道,论坛都预定义了字体颜色,超级链接样式的字体颜色也一样规定好了。这样就可能存在一个问题:当我们 的帖子设定了背景颜色,原论坛的超级链接颜色式样可能不适用,会出现链接看不到的情形。比如黑马就常用黑色背景,而黑色的链接字体颜色显然是不能在黑色的 背景里显现出来的。我们必须处理这个问题。

    曾考虑使用嵌入式CSS样式表来批量自定义超级链接的字体颜色,一直弄不出来,也看到过有人在<table>标签里做文章,尝试过,没有效果。简单的方法还是在链接宿的文字前后使用<font>标签,语法样式如下

    <a href=地址 target=_blank><font color=white>文字</font></a>

    这样一来,显示是不成问题了,只是,当链接很多时,工作量还是挺大的,所以,还是应该寻求其他的方法,比如,研究一下论坛代码,它可能会提供几个样式的超级链接的字体颜色,通常在<head>和</head>之间可以查找得到,在CSS代码里,它们标志为 a:link之类的。如果有也能找出就非常方便了,我们只需要在诸如表格的<td>标签里加入 class=lnk1 就行了(lnk1是假设的一个名称)。

                            6.媒体标签

图文并茂的帖子还需要有音乐、影像等媒体做衬托,帖子的整体效果才达到极致。虽然论坛一般都提供插入媒体文件的方法,但那是很有局限的,并不能满足特殊的要求。为此,有必要学习和掌握媒体标签的使用方法。

    首先我们先了解一下三种主要的音乐格式。这些音乐格式都是当前网络上较为流行的,它们更被广泛地应用于论坛。

    出于编写代码的要求,我们这里以支持这些音乐的播放机为划分音乐格式的依据,这种划分方法以前也是有人使用过的。

    第一种:WMP格式。

    WMP即为Windows Media Player的缩写,是微软公司的媒体播放机,它集成在Windows系统里,可以格外免费升级(网上一般都有下载链接)。其网络ActiveX插件为 Windows Media Player。当前WMP所支持的音乐及影像媒体文件的格式主要有(仅介绍网络上常用的格式,下同):

    MP3(音频)、WMA(音频)、WMV(视频)、AVI(视频)、MPEG(电影)、WAV(音频)、MIDI(音频)、ASF(视频)、AIFF(音频)、AU(音频)、wpl文件(WMP播放列表文件)、m3u文件(Winamp的播放列表文件)等。

    第二种:RP格式。

    这是有着悠久历史的一种媒体格式,宽带普及以前的网络媒体文件的老大,由RealNetworks公司开发。它当前的网络ActiveX插件是Real Player G2 Control。常见文件后缀名为:

    rax、ram、rmm、rsml、rvx、rmj、rmx、rjt、rm

    REAL也支持MP3、MIDI、Wav等格式的媒体文件,但它的播放效果没有WMP的好,所以我们不把它列入RP格式。

    第三种:Flash格式。这是Macromedia公司开发的结合音频视频在一块的媒体格式。其插件为Shock Wave。文件后缀名为.swf。

    弄清楚以上文件格式后,我们就可以使用<embed>标签来编写播放媒体文件的代码了。语法:

格式一:<embed src=地址 autostart=值 loop=值 widht=值 height=值 type=值>

格式二:<embed src=地址 autostart=值 loop=值 hidden=true type=值>

    格式一适用于显示播放界面的情形,格式二适用于隐藏播放界面的情形。

    下面分别讲解各参数的取值规定和要求。

    src:媒体音乐地址。地址要完整、有效。如果文件名包含非英文字符,建议整个地址用小角双引号引起来。

    autostart:是否自动播放(即一打开帖子就播放与否)。true为自动,false为手动。

    loop:是否循环播放。true为循环,false只播放一次;也可用正整数表示播放多少次,比如等于3表示播放3次。

    width:播放界面的宽度。建议在300到500之间。

    height:播放界面的高 。这个很讲究。针对音频文件,视频界面是没有必要出现的,为此,WMP播放机设置为45非常合适,RP播放机为85较好;有视频的则根据情况设置。

    hidden:是否隐藏播放界面。 格式二语法式样中设置为true,即不可见,如果设置为false,则表示可见,但若不设置width和height,它的样子是不好看的。有不少人也用 width=0 height=0来隐藏播放机的播放界面,其是这样是隐藏不了的,WMP有一个点,RP有一条竖线。

    type:这是一个重要的值,用于指播放机的插件类型,一些论坛会根据有效的src自动给出type类型(这类论坛我们编写代码时可以省略type),但也有的论坛不会自动给出类型,需要用户指定。type的取值依据和取值规定是:

    WMP类:audio/mpeg (wma的可用audio/x-ms-wma,不过都一样)

    RP类:application/octet-stream

    Flash:application/x-shockwave-flash

    注:Flash还可指定wmode=transparent表示背景透明,quality=high表示以高档画质播 放,pluginspage=http://www.macromedia.com/go/getflashplayer指定插件下载地址(可省略)。

    类型的指定尽量不要弄错,否则极可能出现有些朋友访问你的帖子时不能正常欣赏到音乐和影像媒体。

    对于支持object的论坛,建议使用object来播放媒体文件,它得到的效果更能令人满意。因其代码较多,不便记忆,这里就不介绍了,但你可以通过FP或DW插入Web组件的方法并对ActiveX控件进行相应的设置得到完整的代码。

                                               7.marquee标签详解

  在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果:向左、向右、向上、向下。再嵌套使用marquee语句,效果就更加丰富了。

    marquee的基本语法:<marquee> ... </marquee>

说明:与大多数HTML语法元素一样,它也是成双出现的,被修饰对象就放在起始符和终止符之间。请看如下例子:

<marquee> 啦啦啦,真的会动耶!</marquee>

啦啦啦,真的会动耶!

    瞧,简单吧?不过,以上例子只是使用了marquee的默认用法。我们加入相应的参数,它的移动方法就有所不同了。

    参数一:direction。direction的英文意思就是方向。这个参数的取值有四个:left(左)、right(右)、up(上)、down(下)。

例:<marquee direction=up>向上移动</marquee>

向上移动

    参数二:behavior。移动方式。值:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

例:<marquee direction=left behavior=alternate>哈哈,我来回走!</marquee>

哈哈,我来回走!

<marquee direction=left behavior=slide>累!我只走一次!</marquee>

累!我只走一次!

    参数三:loop。循环。若未指定则循环不止(infinite),其值取数值。例:

<marquee loop=3>我只走三次哦</marquee>

我只走三次哦

    参数四:scrollamount。移动速度。值取正整数。数值越大,速度越快。例:

<marquee scrollamount=25>看,我走多快!</marquee>

看,我走多快!

    参数五:scrolldelay

延时。数值。例:

<marquee scrolldelay=1000>我走一走,停一停</marquee>

我走一走,停一停

参数六:bgcolor

底色。例:

<marquee bgcolor=pink>看到了吧?有底色!</marquee>

看到了吧?有底色!

    参数七:width和height。就是移动的宽度与高度了。例:

<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动!</marquee>

这个面积不够我移动!

    其他参数:空白(Margins)<hspace=数值 vspace=数值>;对齐方式(Align) <align=top/ middle/bottom>

    我们在本节所举的例了当中,marquee所移动的对象都是文字,其实呢,凡可视对象,只要有足够的区域,marquee都能令它们移动。

                                  8.表格初步

表格是在论坛做帖的重要武器。这原因是,论坛里提供给用户操作的区域是非常有限的,用户只能 在论坛程序框架好的body区域里的某个区域施展身手,不能修改body的背景色,更不能介入head的定义,因此,诸如让自己的帖子有底色、底图之类的 修饰,用户只能通过表格来实现。表格是一个可自定义的容器,因而它就是我们用以实现帖子构设的利器。

    把表格称作容器缘于表格的装载特性。表格是用于装载数据的,与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格,知道表 格有表头、表体、单元格、行、列等等概念,它们并不难理解。而在HTML里,我们对表格的理解和运用可能会增加一些概念,但并非复杂,在学习本教程的过程 中,通过领会和实践,相信是很容易掌握的。

    表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在论坛做帖也起到不可估量的作用,帖子的页面布局将因使用了表格而可以随心所欲地排版。

    现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框架,为了能够一目了然,各元素尚未引入它们的属性:

<table>

  <tbody>

    <tr>

       <td>内容</td>

    </tr>

  </tbody>

</table>

    说明:

    <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最小,它在最里层。

    本节对表格的介绍到这里打住,更多的表格内容将陆续介绍。下课。

                            9.表格属性设置

本节所指的表格属性设置其概念等同于诸如FP的“设计”编辑模式下的表格属性设置,在“设计”模式下,通过点击鼠标,可以方便地设置表格的属性,只是,它没有通过代码设置的灵活。

    我们先看看<table>标签里都有哪些需要设置的属性。

    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定义的是表格自身的位置,这是一 个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置,因 为这么做将导致论坛添加许多废码!此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。

    表格标签的属性较多,使得本节有一定的难度,需要悉心领会并一一记住。

    下面给出一个表格式样和代码,表格中有一些简单的说明。

本表格的属性设置:

边框大小:border=1

边框颜色:bordercolor=#ff0000

背景色:bgcolor=#cc9968

表格宽度:width=400

单元格间距:cellspcing=16

单元格衬距:cellpadding=8

表格的对齐方式(居中):align=center

注:其他属性未设置。

参考代码:

<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>

  <tbody>

    <tr>

      <td>表格里的内容写在这里</td>

    </tr>

  </tbody>

</table>

                 

10.单元格属性设置

在上一节对表格属性设置的介绍中,我们提到,有一些属于表格的属性单元格也有,比如,背景色、宽度和高度等等。本节我们学习单元格的属性设置,但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。

    从表格的整体外观上看,单元格是表格的基本构成单元,一张表格至少要有一个单元格。单元格 由<tr><td></td></tr>共同组成,但在一组tr里,可以拥有多组td,我们前面说过, 有多少组td该表格就有多少列;同样,一张表格可以拥有多组tr,表格有多少组tr就有多少行。显而易见,构成表格最小单元的td,它的属性设置是不可忽 视的。

    单元格的属性设置主要体现在<td>里,除了我们在上一节学到的bgcolor等之外,还有许多属性需要掌握,令人高兴的是,很多属性的设置 方法都是和<table>属性设置一样的,如width、height、bordercolor等。关于width,我们在此着重讨论一下。 好的习惯是,如果是一个单元格的表格,假设我们在<table>里设置了其宽度,那么,就不必再设置<td>的宽度了,因为这是 多余的,但我经常看到不少朋友的代码就是重复设置的,且这么设置:<td width="100%">,显然只是增加了帖子的代码量,它没有任何作用——当有了表格宽度,单元格的宽度会自动占满表格的宽度。但是,在多列表 格里,<td>的宽度就应该设置,如若不设置,系统会自动按各单元格里的内容的占位情况自行分配宽度,效果是可想而知的。

    单元格的bordercolor设置有些讲究,主要用于实现单像素的表格边框——要实现这种效果,要求表格的border为1, 且<table>里设置了bordercolor颜色值,cellpadding和cellspacing都设置为0,然后 将<td>的bordercolor颜色值设置为与<td>的背景色相一致。

    单元格的最为重要的属性应该为align和valign,align规范单元格里的内容的水平对齐方式,valign则规定垂直方向的对齐方式——请特别 注意:它们规定的对齐方式是单元格里面的内容,而不象表格里的align那样定义自身的位置!align取值方法和前面介绍的一样,valign的取值方 法主要有:left(左对齐)、middle(居中)、top(靠顶)、bottom(靠底)等。以下是<td>的两个对齐属性的不同设置所 产生的效果示例:

默认对齐(不设置)

水平:居中
垂直:靠顶
代码:<td align=center valign=top>

    单元格元素中,<tr>也有些属性设置,因在论坛中作用不是很大,这里就不介绍了。但有一个有趣的不属于“属性”的情况这里格外提一 下:<tr>后面可以有文字,以下的示例的“表一”和“表二”就是放在<tr>和<td>之间的:

表一

水平:居中
垂直:默认

表二

水平:右对齐
垂直:靠底
代码:<td align=right valign=bottom>

    通过探索,我们还有可能发现更多的书上没有介绍的东西。建议大家安装可以自动填充代码的网页编辑器(如FP2003),这样,当我们在“代码”编辑模式下编写代码时,就会看到,有很多属性或其他内容自动弹出来,我们可以做些尝试,然后通过预览看看是什么样的效果。

posted @ 2009-09-23 10:53  依然神思者  阅读(327)  评论(0编辑  收藏  举报