分享
 
 
 

初学网页应知:用实例来学习HTML

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

记得在本人刚开始学习编写网页时曾向一位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>。它是用来定义表头,但此元素在今天已经不常用到了。因此,笔者也不多作介绍。

五.<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。这是指文字滚动的速度。它的单位是毫秒。再看此代码“<marquee

border="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。

摘自《软件世界》/文

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有