WEB高手培训班之HTML篇

【 tulaoshi.com - Web开发 】

　　记得在本人刚开始学习编写网页时曾向一位WEB高手请教过如何用FRONTPAGE 98来制作一张绚丽多姿的个人网页。他告诉我，他制作网页时不用任何网页制作软件，而是靠手写的。当时我一下子愣住了，“WHAT？手写网页！OH，MY GAD！这人简直是高手中的高手呀！”从此他在我心目中地位犹如伟人般的高大……然而时过半年到了今天，他已经不再是我的偶像。因为我也能手写网页了，而且编写出的WEB还要胜他一筹（自我感觉）。看到此处你一定会问我，到底我取了什么“真经”能“逍遥仙境”呢？其实很简单，那就是HTML语言。

　　HTML是由WEB的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言。它是标准通用化标记语言SGML的应用。用它的语法规则建立的文档可以运行在不同操作系统的平台上。因此，HTML文档属于纯文本文件（它能用任意的文本编写器书写）。现在有很多网迷称HTML为程序语言，把写HTML文档理解为编程，这显然是走进了一个误区。

　　在了解了HTML的定义后，接下来我们便来学习此语言。由于篇幅有限，本文不可能把HTML语言的属性一一讲解。笔者只是选了一些比较重要而又广泛使用的元素进行分析。

　　在进入正题前，我们先来看看下面这张网页源代码。（这是笔者个人主页的源代码，本文将围绕着此代码进行详解。）

html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title意境/title
/head
body
table border="0" width="100%" cellpadding="0"
tr
td width="100%"p align="center"font face="隶书" size="6" color="#FF00FF"strong欢迎进入华人网站/strong/font/td
/tr
/table
table border="0" width="100%" cellspacing="0" cellpadding="0"
tr
td width="100%"table border="0" width="100%" cellspacing="0" cellpadding="0"
tr
td width="10%" valign="top" align="center"/td
td width="80%" valign="top"table border="0" width="100%" cellspacing="0" cellpadding="0"
tr
td width="17%"/td
td width="17%"
a href="http://202.103.176.80/g/speaker/cool.htm"
img src="http://202.103.176.80/g/speaker/huaren/mypic1.gif" alt="共享程序网站进入口" border="0" width="180" height="90"/a/td
td width="17%"/td
/tr
tr
td width="17%"/td
td width="17%"/td
td width="17%"/td
/tr
tr
td width="17%"
img src="http://202.103.176.80/g/speaker/huaren/mypic2.gif"
alt="个人作品网站进入口" width="180" height="90"/td
td width="17%"/td
td width="17%"a href="http://202.103.176.80/g/speaker/dault.htm"
img src="http://202.103.176.80/g/speaker/huaren/mypic4.gif" alt="华人主页进入口" border="0"/a/td
/tr
tr
td width="17%"/td
td width="17%"　p　/td
td width="17%"/td
/tr
tr
td width="17%"/td
td width="17%"
img src="http://202.103.176.80/g/speaker/huaren/mypic3.gif" alt="名家推荐网站进入口"/td
td width="17%"/td
/tr
/table
/td
td width="10%" valign="top" align="center"/td
/tr
tr
td width="10%"/td
td width="80%"/td
td width="10%"/td
/tr
/table
/td
/tr
/table
p　/p

table border="0" width="100%" cellpadding="0"
tr
td width="100%"table border="0" width="100%" cellpadding="0"
tr
td width="100%"p align="center"strongfont face="隶书" color="#A6A6FF"二OOO年三月三十日制作完成/font/strong/td
/tr
tr
td width="100%"p align="center"font face="隶书" color="#A6A6FF"strong谢谢您的光临/strong/font/td
/tr
tr
td width="100%"p align="center"strongfont face="隶书" color="#A6A6FF"华人网站站长：张鸣/font/strong/td
/tr
tr

td width="100%"strongfont face="隶书" color="#A6A6FF"
marquee border="0" align="middle" scrolldelay="120"
若您需要帮助，请及时找我，联系E-MAIL：dibazh@online.sh.cn/marquee/font/strong/td
/tr
/table
/td
/tr
/table
/body
/html

　　看了这段代码后，您是否感到有些头晕呀？（这么多英文，好复杂呦！）其实这一点都不复杂，请听我慢慢道来。

　　一．HTML/HTML元素。它表示了这个文档为HTML文档，即：我们所说的网页。

　　二．HEAD/HEAD元素。它是用来标明当前文档的若干信息。例如，文档标题，文档所用的字符集等等。在上例中，HEAD/HEAD中插入的TITLE和META元素就分别给HEAD元素指明了题目（“意境”）以及所用的字符集（gb2312）。

　　三．TITLE/TITLE和META元素。上面已经提到过这两个元素分别代表的含义。TITLE是给文档起个题目，META是说明HTML所使用的一些信息。（注意：此元素不要与HEAD混淆，META元素一般包括在HEAD元素中。）META不仅能指明文档所用的字符集，而且还能提供一些有趣的功能。例如：自动跳转网页（代码为：meta http-equiv="refresh"

　　content="240（秒数）; url=http://breaker.126.com（地址）")和网页出现方式（可以圆形打开网页，方形打开网页等等）。

　　四．四个表格元素。它是HTML中最主要的元素。它能够帮助您解决在排版上所遇到的众多问题，例如，文字与图象对齐等等。如果有人对您说我在制作网页时从来不用表格元素的话，那么此人的网页肯定称不上“精品”。

　　1．table/table。这是定义表格的元素，也可以说是表格的“身份证”。要想知道网页中总共有几张表格那就数一数有几对此元素便可。拿上例来看，总共有五对table/table，那么此张网页就有五张表格。另外此元素还附有一些属性，在此本人介绍几个比较重要的。

A．table border=数字表示表格边框线的宽度。
B. table border width=数字;height=数字指定整个表格的宽度及高度。
C. table border cellspacing=数字表示两个单元格之间的距离。
D. table border cellpadding=数字表示单元格的大小。

　　注意：上面的“数字”可用正整数表示，也可用百分数表示。他们的单位都是“象素”。另外，笔者在此推荐各位在编写网页时最好用正整数来表示，因为这比较直观。而用百分数来写的话，还需经过换算才能知道您表格或单元格的大小。

　　2．tr/tr。这是用来定义表行的元素。即：表格中行的“身份证”。在表格中有几对此元素就表示当前表格中有几行。

　　3．td/td。关于此对元素的定义在很多书中的解释都很专业，对初识HTML语言的朋友来讲很难理解。现本人通过自己的领悟而给它一个的定义：td/td是表示一行中单元格的元素。同上原理，一行中有几对此元素，就有几个单元格。

　　4．th/th。它是用来定义表头，但此元素在今天已经不常用到了。因此，笔者也不多作介绍。

　　五．font/font。此元素规定了字体运用的方式，它有三个属性：SIZE，COLOR，FACE。这分别代表了字体的大小，颜色及哪种字体。例如上面的网页中这段代码font face="隶书" size="6" color="#（可以省略）FF00FF"strong欢迎进入华人网站/strong/font它表示了“欢迎进入华人网站”这八个文字，用隶书六号粗（strong/strong代表粗字体）字体紫红色在网页中显示出来。另外，color="#FF00FF" 代码中的“#”可以省略。

　　六．img。它是专门设置图片属性的元素。我们以上例中的这段代码进行分析：

　　img src="http://202.103.176.80/g/speaker/huaren/mypic1.gif" alt="共享程序网站进入口" border="0" width="180" height="90"。其中img src是指明了图片的路径。在ITERNENT上若要能正常地显示您在网页中所设置的图片，那么您图片的路径必须正确。否则的话，图片不会呈现。img alt这是表示在浏览器不能打开图片时显示的说明，这个说明可以是由您任意命名，但最好能写些有意义的文字。就如本人给此图片取名为“共享程序网站进入口”，也就是说当点击此图片时，网页会自动连接到共享程序网站同时打开此网站的首页。至于border,width,height这些属性很简单，即：图片的边框线宽度，图片的宽度以及图片的高度。它与表格的border,width,height属性定义差不多，只是前者是针对图片，而后者是针对表格。

　　七．a href/a。这是一个超连接的元素。在href后面写下欲连接的网址，在a href与a之间写入文字或插入图片，那么您的超连接就完成了。怎么样很容易吧！

　　八．marquee/marquee。这是HTML语言的高级技术运用元素。用它可以实现WEB中文字的滚动效果，让您的网页更具有动态魅力。这个元素支持以下几个属性：

　　1． DIRECTION。它是指定文字的滚动方向，例如，marquee direction=right就是指文字
从左向右滚动。除了right，我们还可以用left（从右到左）,up（自下往上）,down（由上朝下）来设定文字的方向。

　　2． BEHAVIOR。这是指定文字的滚动方式。它有三个对象：SCROLL，SLIDE，ALTERNATE。这三个对象分别代表了环绕滚动，滚动一次和来回滚动。其中，环绕滚动（即SCROLL）是滚动方式（BEHAVIOR）的默认值。例如上例中的“marquee border="0" align="middle" scrolldelay="120"若您需要帮助，请及时找我，联系E-MAIL：dibazh@online.sh.cn/marquee”的这段代码就指明了文字以默认值SCROLL的方式进行滚动。

　　3． LOOP。这是指定文字滚动的循环次数。当LOOP=-1或LOOP=INFINITE时，则表明文字滚动是无限循环。

　　4． SCROLLDELAY。这是指文字滚动的速度。它的单位是毫秒。再看此代码“marqueeborder="0" align="middle" scrolldelay="120"若您需要帮助，请及时找我，联系E-MAIL：dibazh@online.sh.cn/marquee”，其中“scrolldelay="120"”表示，文字滚动速度为120毫秒。

　　5． ALIGN。这是滚动文字的对齐属性也就是处于的位置。它有TOP（对齐上方），MIDDLE（对齐中部），BOTTOM（对齐下方）三个对象。上段代码中的“align="middle"”则明确了文字的位置是在中部。另外，此元素不仅能够用在MARQUEE中而且在其他元素中也经常用到，例如，TABLE，TD等等。它们的用法与含义与MARQUEE是相同的。

　　好了，HTML介绍到此就该告已段落。现在再回首看一下上文开始时的网页代码，您是否觉得太简单了。（惨啦！又有一位网页高手出现了，我的“饭碗”不保。）是啊！作为网页编写语言――HTML它真的是非常容易。笔者只用了很少的时间便能彻底领悟它的精髓，我想对于聪明的读者来说肯定是不在话下的。

　　在写本文时，笔者遇到一位电脑朋友，他劝我不要写这篇文章因为如今有很多网页编辑软件，如ProntPage98，Dreamweaver3等等，它们都能自动生成网页，为何还需研究HTML呢？这位朋友的话初听起来不无道理，然而仔细想想便感到他的话缺乏“品味”。其实HTML语言是所有网页的基础，对于一个想成为WEB高手的您来讲，学习HTML是必不可少的。就象今天我们虽有计算器，但在学数学时仍须从“1+1=2”开始一样，这就是基本功。要知道“建立在沙漠中的宫殿，再豪华也会倒塌的。”（因为缺乏基础！）
最后，祝愿您们都能成为WEB高手！若有问题，请E-MAIL本人:　dibazh@online.sh.cn。