|
 
- 帖子
- 130
- 积分
- 348
- 注册时间
- 2006-9-23
|
HTML代码分析(献给最初级者)
以下是偶转的帖:
迈出主页制作第一步－HTML代码分析
--------------------------------------------------------------------------------
http://tech.sina.com.cn 2000/05/23 软件世界
记得在本人刚开始学习编写网页时曾向一位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"><strong><font 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"><strong><font face="隶书" color="#A6A6FF">华人网站站长：张鸣</font></strong></td>
</tr>
<tr>
<td width="100%"><strong><font 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>。它是用来定义表头，但此元素在今天已经不常用到了。因此，笔者也不多作介绍。 |
|
发表于 2006-11-3 17:57
| 
]
发表于 2008-1-26 19:06
| 
