HTML语言基础

本系统主旨为培训学生.net开发技能，详细演示内容请参看：第一章建立项目。

HTML语言基础

发布日期：2005年9月17日|更新日期：2005年10月13日
部分内容来源于网络，京胜世纪整理

摘要：本文讲述HTML的基本语法及相关技巧。

本页内容：

HTML语言入门
 HTML的基础结构
 页面设计与文字设计
 列表
 TABLE表格
 文件间的链接
 插入图形
 多窗口页面

HTML语言入门

HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。

所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

·通过HTML可以表现出丰富多彩的设计风格

图片调用：<IMG SRC="文件名">
文字格式：<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>

·通过HTML可以实现页面之间的跳转

页面跳转：〈A HREF="文件路径/文件名"></A>

·通过HTML可以展现多媒体的效果

声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
视频：<EMBED SRC="视频文件名" AUTOSTART=true>

上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。

<<返回目录

HTML的基础结构

超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 标记一般不省略，表示正文内容的开始。

下面是一个最基本的超文本文档的源代码：

<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>

<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
　　这是我第一次做主页，无论怎么样，我都会努力做好！
</FONT>
</CENTER>
</BODY>

</HTML>

演示效果

超文本中的标签

刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1. 单标签
某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：

< 标签名称>

最常用的单标签是<BR>, 它表示换行。

2.双标签
另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：

<标签> 内容</ 标签>

其中“内容”部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：

3.标签属性
许多单标记和双标记的始标记内可以包含一些属性，其语法是：

< 标签名字属性1 属性2 属性3 … >

各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：

其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值）， CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"。

<<返回目录

页面设计与文字设计

1.标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

<H1>…</H1>　　　　　第一级标题
<H2>…</H2>　　　　　第二级标题
<H3>…</H3>　　　　　第三级标题
<H4>…</H4>　　　　　第四级标题
<H5>…</H5>　　　　　第五级标题
<H6>…</H6>　　　　　第六级标题

请看下面的例子：

<html>

<head>
<title>标题示例</title>
</head>

<body>
<P>这是一行普通文字</P>
<H1>一级标题</H1>
<H2>二级标题</H2>
<H3>三级标题</H3>
<H4>四级标题</H4>
<H5>五级标题</H5>
<H6>六级标题</H6>
</body>

</html>

演示效果

在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上<br>标签。

请看下面的例子：

<html>
<head>
<title>无换行示例</title>
</head>

<body>
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</body>
</html>

演示效果

2.段落标签<P>
为了排列的整齐、清晰，文字段落之间，我们常用<P></P>来做标记。文件段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束。
<P>标签还有一个属性ALIGN，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。

3.水平线段<HR>
这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：
　size　水平线的宽度
　width 水平线的长，用占屏幕宽度的百分比或象素值来表示
　align 水平线的对齐方式，有LEFT RIGHT CENTER三种
　noshade 线段无阴影属性，为实心线段

4.文字的大小设置
提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

5.文字的字体与样式
HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

请看例子：

<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>

<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>

</HTML>

演示效果

6.文字的颜色
文字颜色设置格式如下：

这里的颜色值可以是一个十六进制数(用“#”作为前缀，也请看例子：

<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>

<BODY BGCOLOR=000080>
<CENTER>
<FONT COLOR=WHITE>色彩斑斓的世界</FONT><BR>
<FONT COLOR=RED>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FFFF>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFFFF>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#C0C0C0>色彩斑斓的世界</FONT><BR>
</CENTER>
</BODY>

</HTML>

演示效果

7.位置控制
通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：

<DIV ALIGN=#>　　　#＝left／right／center

例：

演示效果

另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。
如：

<P ALIGN=#>
<HR ALIGN=#>　　　#＝left/right/center
<H1 ALIGN=#>

<<返回目录

列表

1.无序号列表
无序号列表使用的一对标签是<ul></ul>，每一个列表项前使用<LI>。其结构如下所示：

效果：

第一项
第二项
第三项

2.序号列表
序号列表和无序号列表的使用方法基本相同，它使用标签<OL></OL>，每一个列表项前使用<LI>。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：

效果：

第一项
第二项
第三项

3.定义性列表
定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签<DT>标明，说明性文字使用<DD>表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：

<DL>
<DT>第一项 <DD>叙述第一项的定义
<DT>第二项 <DD>叙述第二项的定义
<DT>第三项 <DD>叙述第三项的定义
</DL>

效果：

第一项: 叙述第一项的定义
第二项: 叙述第二项的定义
第三项: 叙述第三项的定义

<<返回目录

TABLE表格

1.表格的基本结构

<table>...</table> 　定义表格
<caption>...</caption>　定义标题
<tr> 　定义表行
<th> 　定义表头
<td> 　定义表元(表格的具体数据)

以下是一个简单的例子：

效果：

姓名	性别	年龄
王林	男	25

2.表格的标题
表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。
设置标题位于表格上方：

设置标题位于表格下方：

3.表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：

width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。下表是一个长为200像素，宽为100像素的表格。<table width="200" height="100">

下表是一个长为屏幕的20%，宽为屏幕的10%的表格。<table width=20% height=10%>

4.边框尺寸设置
边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。
如：

效果：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

显示结果：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

显示结果：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

5.格间线宽度
格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：

<TABLE　CELLSPACING=#>　　　#表示要取用的像素值

例：

显示结果为：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

6.内容与格线之间的宽度
我们还可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：

<TABLE　CELLPADDING=#>　　　#表示要取用的像素值

例：

显示结果为：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

7.表格内文字的对齐/布局表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

<tr align=#>
<th align=#> 　　#=left, center, right
<td align=#>

<tr valign=#>
<th valign=#> 　　#=top，middle，bottom，baseline
<td valign=#>

左右排列

显示结果：

居左	居中	居右
A	B	C

上下排列

显示结果：

上齐	居中	下齐	基线
A	B	C	D

<<返回目录

文件间的链接

超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：

·标签<A>表示一个链接的开始，</A>表示链接的结束；
·属性“HREF”定义了这个链接所指的地方；
·通过点击“链接文字”可以到达指定的文件。

链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。

1.本地链接：
对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。
例如：我们现在正在浏览的这一页的绝对路径是：d:\html\html.html
而这一页相对于当前目录即“HTML教程”的相对路径是：html.html
如果是浏览HTML教程之外的一页，该文件路径要以两个圆点(..)来表示上一层目录：

../../internet/IP地址

现在我们把这几种路径的表示方法写入链接中：
以绝对路径表示：<A HREF="/d:\HTML\html.html">文件的链接</A>
以相对路径表示：<A HREF="html.htm">文件的链接</A>
链接上一目录中的文件：<A HREF="../../Internet/IP地址">IP地址</A>

一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C:\的资源地址用户将无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。

2.URL链接
如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。

URL链接的形式是：　　协议名：//主机.域名／路径／文件名
其中协议包括：

file　　　　　　本地系统文件
http　　　　　　WWW服务器
ftp　　　　　　 ftp服务器
telnet　　　　　基于TELNET的协议
mailto　　　　　电子邮件
news　　　　　　Usenet新闻组
gopher　　　　　GOPHER服务器
wais　　　　　　WAIS服务器

例如，我们这样来表达一个URL地址：

http://www.kingvcn.com/
ftp://www.kingvcn.com
telnet://bbs.kingvcn.com

写在HTML文件中，链接其他主机上的文件时，格式如下：

<A HREF="http://www.sjstc.edu.cn/default.htm">中国山西之窗</A>
<A HREF="telnet://bbs.xanet.edu.cn">西北网络中心兵马俑站</A>

效果：

中国山西之窗西北网络中心兵马俑站

3.目录链接
前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、下部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我们可以是使用目录链接。

制作目录链接方法是：
·首先把把某段落设置为链接位置，格式是：<A NAME="链接位置名称"></A>
·在调用此链接部分的文件，定义连接：<A HREF="文件名＃链接位置名称">链接文字</A>
如果是在一个文件内跳转，文件名可以省略不写。例：

演示效果

我们的HTML教程已经进行到“文件之间的链接”部分，其中，我们学习了<A href="link01.htm#n1">本地链接<A>、<A href="link01.htm#n3">目录链接</A>和<A href="link01.htm#n2">URL链接</A>。之前，我们还介绍了<A href="4.htm">文字的设计</A>、<A href="table.htm">TABLE表格</A>、<A href="list01.htm">列表</A>等内容。也许很多人理解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往往要度过很长的一段接受时期。<P>
除了我们的这个教程外，网上也有很多的站点介绍了HTML文件的制作方法，在这里，我来推荐几个做得相当不错的站点：

HTML语言参考
 HTML语言教程
 HTML程序员手册

<<返回目录

插入图形

超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。

基本格式
超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。
插入图象的标签是<IMG>，其格式为：

SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。例：

IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示。

图文之间的距离设置：
在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。

<<返回目录

多窗口页面

使用Frames结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，令人高兴的是，每个窗口是可以相互沟通的。有时用得恰到好处，感觉真是好极了。
这是一个非常好用的技巧，不过，学习内容也不少，我们一起从基本语法学起吧！

Frames结构的基本格式

在有Frames结构的HTML文件中，Frames文件的整体结构为：

Framees结构中的每个URL值指定了一个文件（这个文件必须事先做好），这个文件将载入相应的窗口。

各窗口的尺寸设置
我们将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现。

#的值为一对用引号括起来的字符串，字符串中的数字表示每个分窗口所占的尺寸，数字中间用逗号隔开，有几个数字就表示分出了几个窗口。当然，这其中的任何一个数字也可以由“*”来代替，这样表示由浏览器自动设置其大小。如：

<frameset cols="100,200,*">
<frameset cols="100,*,*"> 　　将100像素以外的窗口平均分配
<frameset cols="*,*,*"> 　　　将窗口分为三等份

纵向排列多个窗口：

横向排列多个窗口：

纵横排列多个窗口：

<<返回目录