HTML语言教程(完整版)

最新推荐文章于 2025-03-12 19:22:51 发布

土渣渣

最新推荐文章于 2025-03-12 19:22:51 发布

阅读量1w

点赞数 42

文章标签： html

本文介绍了HTML的基础概念、基本结构以及常用标签与属性，帮助初学者快速掌握HTML文档的编写技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一章 HTML概述与基本结构

一、HTML 的概述

HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器HTTP显示出效果。

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示：

通过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只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。

二、 HTML的基本结构：

一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置。

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

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

1－1.html

<HTML> ---------------------------------------- 开始标签

一个简单的HTML示例

</TITLE>

</HEAD> --------------------------------------

<BODY> ---------------------------------------- | 文件主体

<CENTER> |

<H1>

欢迎光临我的主页

</H1> |

<BR> |

<HR>

<FONT SIZE= 7 COLOR= red> |

这是我第一次做主页 |

</FONT> |

</CENTER> |

</BODY> ---------------------------------------

</HTML> --------------------------------------- 结尾标签

<HTML>。。。</HTML>在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 <html>标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。

<HEAD>。。。</HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。

<title>。和。</title>是嵌套在<HEAD>头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

<BODY>。。。</BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。

上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。

三、 HTML的标签与属性:

对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用 “<” 和 “>”括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项。

HTML的标签分 单标签和 成对标签两种。成对标签是由首标签 <标签名> 和尾标签 </标签名>组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式<标签名>，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：

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

作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：

<font color="#ff00ff" face="宋体" size="30">字体设置</font>

注意事项：输入始标签时，一定不要在“<”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确的识别括号中的标志命令，从而无法正确的显示你的信息。

第二章 HTML主体标签及属性、颜色的设定

为了使你的网页绚丽多姿，吸引更多的浏览者阅读，可以给网页添加更多的标签及属性，这是为了对网页中的元素进行修饰、布局。下面就来逐一介绍这些标签。

一、 html的主体标签<body>

在 <body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。

<body>标签有自己的属性，设置 <body>标签内的属性，可控制整个页面的显示方式。 <body>标签的属性：

**<body>标签的属性**
属性	属性描述
link	设定页面默认的连接颜色
alink	设定鼠标正在单击时的连接颜色
vlink	设定访问后连接文字的颜色
background	设定页面背景图像
bgcolor	设定页面背景颜色
leftmargin	设定页面的左边距
topmargin	设定页面的上边距
bgproperties	设定页面背景图像为固定，不随页面的滚动而滚动
text	设定页面文字的颜色

格式：

实例：2-1.html

<html>

<head>

<title>

bady的属性实例

</title>

</head>

<body bgcolor="#FFFFE7" text="#ff0000" link="#3300FF" alink="#FF00FF" vlink="#9900FF">

<center>

<h2>设定不同的连接颜色</h2> 测试body标签

<p> <a href=" http://www.baidu.com/ ">默认的连接颜色</a>

<p> <a href=" http://www.sina.com.cn ">正在按下的连接颜色,</a>

<p> <a href=" http://www.sohu.com/ ">访问过后的连接颜色,</a>

<P> <a href="#" onClick="window.history.back()">返回</a>

</conter>

</body>

</html>

显示结果

设定不同的连接颜色

测试body标签

默认的连接颜色

正在按下的连接颜色,

访问过后的连接颜色,

实例说明：

<body> 的属性设定了页面的背景颜色，文字的颜色，链接的颜色为#3300ff，单击的连接颜色为#ff00ff，单击过后的颜色为#9900ff。

Body里面的是页面中的链接标签，对于属性可根据页面的效果来定，用那个属性就设定那个属性。对于上面的属性在后面的章节中还会介绍，在这里就不逐一引用了，我们的学习目的主要是掌握标签及属性的使用方法。

二、颜色的设定

颜色值是一个关键字或一个RGB格式的数字。在网页中用得很多，在此就先介绍一下。颜色是由 "red" "green" "blue " 三原色组合而成的，在 HTML 中对颜色的定义是用十六进位的，对於三原色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成16777216种颜色。

例如：

白色的组成是 red= f f, green= f f , blue= f f , RGB 值即为 f f f f f f

红色的组成是 red= f f , green= 00, blue= 00, RGB值即为 f f 0000

绿色的组成是 red=00, green= f f , blue= 00, RGB值即为 00 f f 00

蓝色的组成是 red=00, green= 00, blue= f f , RGB值即为 0000 f f

黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000

第三章文字版面的编辑
3-1 换行标签 <br>

换行标签是个单标签，也叫空标签，不包含任和内容，在html文件中的任何位置只要使用了 <br> 标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。

请看下面的例子：3-1html

<html>

<head>

<title>

无换行示例

</title>

</head>

<body>

无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

<br>有换行标记：

<br>登鹳雀楼

<br>白日依山尽，

<br>黄河入海流。

<br>欲穷千里目，

<br>更上一层楼。

</body>

</html>

显示结果

无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
有换行标记：
登鹳雀楼
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。

3-2 换段落标签<p>及属性：

由 <p>标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个<P>的开始就意味着上一个<P>的结束。良好的习惯是成对使用。格式：

<P> <P ALIGN= 参数> 其中, ALIGN 是 <p> 标签的属性，属性有三个参数 left，center，right。这三个参数设置段落文字的左，中，右位置的对齐方式。

实例：3-2html

<html>

<head>

<title>

测试分段控制标签

</title>

</head>

<body>

<p>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。</p>

<p align="right">或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。</p>

<p align=center>而美丽苦短的花期</p>

<p align="left">却是那最后悲伤的秋风挽歌中的瞬间插曲。</p>

</body>

</html>

显示结果

花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。

或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。

而美丽苦短的花期

却是那最后悲伤的秋风挽歌中的瞬间插曲。

3-3 原样显示文字标签<pre>

要保留原始文字排版的格式,就可以通过 <pre> 标签来实现,方法是把制作好的文字排版内容前后分别加上始标签 <pre>和尾标签</pre>. 实例:3-3html

<HTML>

<HEAD>

<TITLE>

原样显示文字标签

</TITLE>

</HEAD>

<BODY>

<PRE>

白日依山尽，

黄河入海流。

欲穷千里目，

更上一层楼。

</PRE>

</BODY>

</HTML>

显示

白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。

3-4 居中对齐标签 <center>

文本在页面中使用 <center> 标签进行居中显示，<center>是成对标签，在需要居中的内容部分开头处加<center>，结尾处加</center> 实例：3-4html

<HTML>

<HEAD>

<TITLE>

居中对齐标签

</TITLE>

</HEAD>

<BODY>

<CENTER>

《送孟浩然之廣陵》

<p> 故人西辭黃鶴樓， 煙花三月下揚州。 孤帆遠影碧山盡， 惟見長江天際流。

</CENTER>

</BODY>

</HTML>

显示

《送孟浩然之廣陵》

故人西辭黃鶴樓，煙花三月下揚州。孤帆遠影碧山盡，惟見長江天際流。

3-5 引文标签 (缩排标签）<blockquote>

<blockquote> 标签可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别。实例：3-5html

<HTML>

<HEAD>

<TITLE>

引文标签

</TITLE>

</HEAD>

<BODY>

春

<BR>

<PRE>

<BLOCKQUOTE>

盼望着，盼望着，东风来了，春天脚步近了。

<br> 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球,赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。

</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>

桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，村上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶儿却绿得发亮。小草儿也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑着伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的，在雨里静默着。

</BLOCKQUOTE></BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>

天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也都赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事儿去。 “一年之计在于春”，刚起头儿，有的是工夫，有的是希望。春天像刚落地的娃娃，从头到脚都是新的，它生长着。春天像小姑娘，花枝招展的，笑着，走着。春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。

</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>

</PRE>

</BODY>

</HTML>

显示

春

  
  
   
                   盼望着，盼望着，东风来了，春天脚步近了。
    
  一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。  小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球,赛几趟跑，捉几 回迷藏。风轻悄悄的，草软绵绵的。 

  
  
  
  
   
   
    
      
                桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，村上仿佛已  经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草 丛里像眼睛，像星星，还眨呀眨的。  “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的  空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童 的短笛，这时候也成天嘹亮地响着。  雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶儿却绿得发  亮。小草儿也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑着伞慢  慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的，在雨里静默着。 

   
   
  
  
  
  
   
   
    
    
     
       
                天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也都赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞 抖擞精神，各做各的一份事儿去。  “一年之计在于春”，刚起头儿，有的是工夫，有的是希望。 春天像刚落地的娃娃，从头到脚都是新的，它生长着。 春天像小姑娘，花枝招展的，笑着，走着。  春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。

3-6水平分隔线标签 <hr>

<hr> 标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置<hr>标签的属性值，可以控制水平分隔线的样式。

**<hr>标签的属性**
属性	参数	功能	单位	默认值
size		设置水平分隔线的粗细	pixel(像素）	2
width		设置水平分隔线的宽度	pixel(像素）、%	100%
align	left， center， right	设置水平分隔线的对齐方式		center
color		设置水平分隔线的颜色		black
noshade		取消水平分隔线的3d阴影

实例：3-6html

<HTML>

<HEAD>

<TITLE>

测试水平分隔线标签

</TITLE>

</HEAD>

<BODY>

<CENTER> 春晓

<HR > 春眠不觉晓，

<hr size="6"> 处处闻啼鸟。

<hr width="40%"> 夜来风雨声，

<hr width="60" align="left"> 花落知多少？

<hr size="6" width="30%" align="center" noshade color=red >

</CENTER>

</BODY>

</HTML>

显示

春晓

春眠不觉晓，

处处闻啼鸟。

夜来风雨声，

花落知多少？

3-7署名标签 <address>

<address> 署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。在 <address>。。。</address> 标签之间的文字显示效果是斜体字。 实例：3-7html

<HTML>

<HEAD>

<TITLE>

署名标签

</TITLE>

</HEAD>

<BODY>

<CENTER> 乐游原

<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>

<PRE>

向晚意不适，驱车登古原。夕阳无限好，只是近黄昏。

</PRE>

<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>

<ADDRESS>

[唐] 李商隐

</ADDRESS>

</BODY>

</HTML>

显示

乐游原

                           向晚意不适，  驱车登古原。 夕阳无限好， 只是近黄昏。

[唐] 李商隐

3-8特殊字符

在HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如"<"等，为防止代码混淆，必须用一些代码来表示它们。

**HTML几种常见特殊字符及其代码表**
特殊或专用字符	字符代码	特殊或专用字符	字符代码
<	<	?	©
>	>	×	×
&	&	?	®
"	"	空格

实例：3-8html

<HTML>

<HEAD>

<TITLE>

特殊字符

</TITLE>

</HEAD>

<BODY>

<CENTER> <赋得古原草送别>

<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>

<PRE>

离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。

</PRE>

<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>

<ADDRESS>

白居易 ©

</ADDRESS>

</BODY>

</HTML>

显示

<赋得古原草送别>

 
                         离离原上草， 一岁一枯荣。 野火烧不尽， 春风吹又生。

白居易 ?

3-9注释标签

在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。

注释标签的格式有如下：  实例:3-9html

<HTML>

<HEAD>

<TITLE>

注释标签

</TITLE>

</HEAD>

<BODY>

<CENTER> <赋得古原草送别>

<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>

<PRE>

<! pre代表原样显示排版格式>

离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。

</PRE>

<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>

<ADDRESS>

白居易 ©

</ADDRESS>

</BODY>

</HTML>

显示

<赋得古原草送别>

  
                          
                         离离原上草， 一岁一枯荣。 野火烧不尽， 春风吹又生。

白居易 ?

3-10字体属性

3-10-1标题文字标签 <hn>

<hn> 标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。

标题标签的格式： <hn align=参数〉标题内容</hn>

说明：

<hn> 标签是成对出现的，<hn>标签共分为六级，在<h1>...</h1>之间的文字就是第一级标题，是最大最粗的标题；<h6>...</h6>之间的文字是最后一级，是最小最细的标题文字。

align 属性用于设置标题的对齐方式，其参数为 left（左）， enter（中)， right (右）。

<hn> 标签本身具有换行的作用，标题总是从新的一行开始。实例 3-10-1html

<HTML>

<HEAD>

<TITLE>

设定各级标题

</TITLE>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">一级标题。</H1>

<H2>二级标题。</H2>

<H3>三级标题。</H3>

<H4>四级标题。</H4>

<H5 ALIGN="RIGHT">五级标题。</H5>

<H6 ALIGN="LEFT">六级标题。</H6>

</BODY>

</HTML>

显示

一级标题。

二级标题。

三级标题。

四级标题。

五级标题。

六级标题。

3-10-2文字格式控制标签 <FONT>

<FONT> 标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。

**FONT标签的属性**
属性	使用功能	默认值
face	设置文字使用的字体	宋体
size	设置文字的大小	3
color	设置文字的颜色	黑色

格式： <font face=值1 size=值2 color=值3〉文字 </font>

说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体。

size： 属性的取值为1~7。也可以用"+"或"-"来设定字号的相对值。

color： 属性的值为：rgb 颜色 "#nnnnnn" 或颜色的名称 实例：3-10-2html

<html>

<head>

<title>

控制文字的格式

</title>

</head>

<body>

<center>

<font face=黑体 size=6 color="red" >

盼望着，盼望着，东风来了，春天脚步近了。

</font>

<p> <font face=隶书 size=+3 color="green">

一切都像刚睡醒的样子，欣欣然张开了眼。

<p>山朗润起来了，水涨起来了，太阳的脸红起来了。

</font>

<p> <font face=楷体 size=4 color="#ff00ff">

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。

<p>园子里，田野里，瞧去一大片一大片满是的。

<p>坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。

<p>风轻悄悄的，草软绵绵的。

</font>

</center>

</body>

</html>

显示

盼望着，盼望着，东风来了，春天脚步近了。

一切都像刚睡醒的样子，欣欣然张开了眼。

山朗润起来了，水涨起来了，太阳的脸红起来了。

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。

园子里，田野里，瞧去一大片一大片满是的。

坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。

风轻悄悄的，草软绵绵的。

3-10-3特定文字样式标签

在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在html中用于这种功能的标签可以分为两类， 物理类型和逻辑类型。

1、物理类型

(1) 粗体标签 <b>

放在<b>与</b>标签之间的文字将以粗体方式显示。

(2) 斜体标签 <i>

放在<i>与</i>标签之间的文字将以斜体方式显示。

(3) 下划线标签 <u>

放在<u>与</u>标签之间的文字将以下划线方式显示。实例 3-10-31html

<html>

<head>

<title>

字体的物理类型

</title>

</head>

<body>

<center>

<font color="#FF0000" size="+2">

<b>这些文字是粗体的</b>

</font>

<br><br>

<i>这些文字是斜体的</i>

<br><br>

<u>这些文字带有下划线</u>

</center>

</body>

</html>

显示

这些文字是粗体的

这些文字是斜体的

这些文字带有下划线

2、逻辑类型

逻辑类型是使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之间的文字受其控制。下面请看常用逻辑标签的实例实例 3-10-32htrml

<html>

<head>

<title>

字体的逻辑类型

</title>

</head>

<body>

<pre>

em： 标签：<em> 用于强调的文本，一般显示为斜体字</em>

strong： 标签：<strong>用于特别强调的文本，显示为粗体字</strong>

cite标签： <cite>用于引证和举例，通常是斜体字</cite>

code标签： <code>用来指出这是一组代码</code>

small标签： <small>规定文本以小号字显示</small>

big标签： <big>规定文本以大号字显示</big>

samp标签： <samp>显示一段计算机常用的字体，即宽度相等的字体</samp>

kbd标签： <kbd>由用户输入文本，通常显示为较粗的宽体字</kbd>

var标签： <var>用来表示变量，通常显示为斜体字</var>

dfn标签： <dfn>表示一个定义或说明，通常显示为斜体字</dfn>

sup标签： 12<sup>2</sup>=144

sub标签： 硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub> </pre> </body> </html>

第四章建立列表

在html页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。

列表分为两类，一是无序列表，一是有序列表，无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去。

**列表的主要标签**
标签	标签描述	属性	显示结果
<UL>	无序列表	disc，circle，square	●，○， ■
<OL>	有序列表	type，start	1，A，a，I，i
<DIR>	目录列表
<DL>	定义列表
<MENU>	菜单列表
<DL>/<DT>/<DD>	定义列表的标记
<LI>	列表项目的标记

4-1 无序列表 <UL>

无序列表使用的一对标签是<ul></ul>，无序列表指没有进行编号的列表, 每一个列表项前使用<LI>。<LI>的属性type有三个选项,这三个选项都必须小写:

disc： 实心园 <UL><LI type= disc></LI></UL>

circle：空心园 <UL><LI type= circle></LI></UL>

square：小方块 <UL><LI type= square></LI></UL>

<ul> 如果不使用其项目<li>的属性值，即默认情况下的<ul>会加"实心园"。

格式1：

<UL>

<LI>第一项

<LI>第二项

<LI>第三项

</UL>

第一项
第二项
第三项

格式2：

<ul>

<li type=disc>第一项

<li type=circle>第二项

<li type=square>第三项

</ul>

第一项
第二项
第三项

示例 5-1.html

<html>

<head>

<title>

无序列表

</title>

</head>

<body>

<ul>

<li> 默认的无序列表加"实心园"

<li>默认的无序列表"实心园"

</ul>

<ul>

<li type=square>无序列表square加方块

</ul>

<ul>

<li type=circle>无序列表circle加空心园

</ul>

</body>

</html>

显示结果

默认的无序列表加"实心园"
默认的无序列表"实心园"
默认的无序列表"实心园"

无序列表square加方块
无序列表square加方块
无序列表square加方块

无序列表circle加空心园
无序列表circle加空心园
无序列表circle加空心园

4-2 有序列表 <OL>

有序列表和无序列表的使用格式基本相同，它使用标签<ol></ol>，每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。

顺序编号的设置是由 <ol> 的两个属性 type 和 start 来完成的。start=编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如<li value="7">。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。为了使用这些属性，把它们放在<ol>或<li>的的初始标签中。

**有序列表type的属性**
type 类型	描述
type=1	表示列表项目用数字标号（1,2,3...）
type=A	表示列表项目用大写字母标号（A,B,C...）
type=a	表示列表项目用小写字母标号（a,b,c...）
type=I	表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ...）
type=i	表示列表项目用小写罗马数字标号（i,ii,iii...）

格式2

<ol>

<li>第1项

<li>第2项

<li>第3项

</ol>

实例：5-2.html

<html>

<head>

<title>

有序列表

</title>

</head>

<body>

<ol>

<li>默认的有序列表

</ol>

<ol type=a start=5>

<li>第1项

<li>第2项

<li>第3项

<li value= 20>第4项

</ol>

<ol type= I start=2>

<li>第1项

<li>第2项

<li>第3项

</ol>

</body>

</html>

显示结果

默认的有序列表
默认的有序列表
默认的有序列表

第1项
第2项
第3项
第4项

第1项
第2项
第3项

4-3 嵌套列表

将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫嵌套列表。无论是有序列表和无序列表的嵌套，浏览器都可以自动地分成排列。

实列：5-3.html

<HTML>

<HEAD>

<TITLE>

嵌套列表

</TITLE>

</HEAD>

<BODY>

<h3>目录</h3>

<ol type=a>

<li>这是以序号类型a开头第一行内容</li>

<li>这是以序号类型a开头第二行内容</li>

<ol type=A start=3>

<li>这是以序号A类型C开头第一行内容</li>

<li>这是以序号A类型C开头第二行内容</li>

<ol type=1 start=51>

<li>这是以序号数字51开头第一行内容</li>

<li>这是以序号数字51开头第二行内容</li>

<li>这是以序号数字51开头第三行内容</li>

</ol>

<li>这是以序号A类型C开头第三行内容</li>

</ol>

<li>这是以序号类型a开头第三行内容</li>

</ol>

<HR>

</BODY>

</HTML>

显示结果

这是以序号类型a开头第一行内容
这是以序号类型a开头第二行内容
1. 这是以序号A类型C开头第一行内容
2. 这是以序号A类型C开头第二行内容
  1. 这是以序号数字51开头第一行内容
  2. 这是以序号数字51开头第二行内容
  3. 这是以序号数字51开头第三行内容
3. 这是以序号A类型C开头第三行内容
这是以序号类型a开头第三行内容

4-4 定义列表的标记<DL>/<DT>/<DD>

定义列表的标记也叫描述性列表，定义列表默认为两个层次：

第一层为列表项标签 <DT> ；

第二层为注释项标签 <DD> 。

<DT>和<DD> 标签通常是成对使用的。也可以一个列表项对应于几个解释项，这种方式很少用。<DD>默认的注释是显示在另一行中,当使用 <dl compact="compact">后,注释项和列表项将显示在同一行。其格式为：

<dl>

<dt>第1项

<dd>注释1

<dt>第2项

<dd>注释2

<dt>第3项

<dd>注释3

</dl

实例：5-4.html

<html>

<head>

<title>

定义性列表

</title>

</head>

<body>

定义性列表

<P>

<dl>

<dt> WWW：

<dd> WWW是(World wide web)的缩写，也可简写web;

<dt> WWW：

<dd> WWW又叫万维网;

<dt> WWW：

<dd> internet提供的最常用的服务是WWW;

</dl>

</body>

</html>

显示结果

定义性列表

WWW：

WWW是(World wide web)的缩写，也可简写web;

WWW：

WWW又叫万维网;

WWW：

internet提供的最常用的服务是WWW;

4-5 目录列表<DIR>和菜单列表<MENU>

<dir> 为目录列表标签， <menu> 为菜单列表标签，它们的格式和无序列表<ul>是一样的， 例如：格式1 ：

<dir>

<li>第一项

<li>第二项

<li>第三项

</dir>

格式2：

<menu>

<li type=disc>第一项

<li type=circle>第二项

<li type=square>第三项

</menu>

实例：5-5.HTML

<html>

<head>

<title>

无序列表

</title>

</head>

<body>

<ul>

<li>默认的无序列表加"实心园"

<li>默认的无序列表"实心园"

</ul>

<dir>

<li>默认的目录列表加"实心园"

<li>默认的目录列表"实心园"

</dir>

<menu>

<li>默认的菜单列表加"实心园"

<li>默认的菜单列表"实心园"

</menu>

<dir>

<li type=square>目录列表square加方块

</dir>

<menu>

<li type=circle>菜单列表circle加空心园

</menu>

</body>

</html>

显示结果

默认的无序列表加"实心园"
默认的无序列表"实心园"
默认的无序列表"实心园"

默认的目录列表加"实心园"

默认的目录列表"实心园"

默认的菜单列表加"实心园"
默认的菜单列表"实心园"
默认的菜单列表"实心园"

目录列表square加方块

菜单列表circle加空心园
菜单列表circle加空心园
菜单列表circle加空心园

第五章图像的处理

图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有 jpeg，bmp，gif。其中

bmp 文件存储空间大，传输慢，不提倡用，常用的jpeg和gif格式的图像相比较，

jpeg 图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，

gif 图像仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点。因此使用图像美画页面可视情况而决定使用那种格式。

5-1 背景图像的设定

在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。

设置背景图像的格式：

<body background= "image-url"> 其中 "image-url" 指图像的位置。

实例：6-1.html

<html>

<head>

<title>

设置背景图像

</title>

</head>

<body background="image-url.gif">

<center>

<p> </p>

<p>

<font color="#006600" size="+6">

盼望着，盼望着，东风来了，春天脚步近了.

</font>

</p>

</center>

</body>

</html>

5-2 网页中插入图片标签 <img>

网页中插入图片用单标签<img>，当浏览器读取到<img>标签时，就会显示此标签所设定的图像。如果要对插入的图片进行修饰时，仅仅用这一个属性是不够的，还要配合其它属性来完成。

**插入图片标签<img>的属性**
属性	描述
src	图像的url的路径
alt	提示文字
width	宽度通常只设为图片的真实大小以免失真，改变图片大小最好用图像工具
height	高度通常只设为图片的真实大小以免失真，改变图片大小最好用图像工具
dynsrc	avi文件的url的路径
loop	设定avi文件循环播放的次数
loopdelay	设定avi文件循环播放延迟
start	设定avi文件的播放方式
lowsrc	设定低分辨率图片，若所加入的是一张很大的图片，可先显示图片。
usemap	映像地图
align	图像和文字之间的排列属性
border	边框
hspace	水平间距
vlign	垂直间距

<IMG> 的格式及一般属性设定：

<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

5-2-1 插入普通图片 实例：5-2-1.html

<html>

<head>

<title>

普通插入图片

</title>

</head>

<body>

<BODY>

<CENTER>

<H2>爱在深秋</H2>

<IMG src=http://userimage5.360doc.com/14/0325/14/313676_201403251418240019.jpg width=250>

</CENTER>

<WBR>

<p>秋雨无声无息地下着。<BR> 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……<BR> 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。<BR> 然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？<BR>

</p>

</WBR>

</body>

</html>

显示结果

爱在深秋

秋雨无声无息地下着。
飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……
黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。
然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？

5-2-2 设定上下左右空白位置 hspace/vspace

实例：5-2-2.html

<html>

<head>

<title>

设定图像与文本之间的距离

</title>

<body>

<img src="http://userimage5.360doc.com/14/0325/14/313676_201403251418240019.jpg" align="left" hspace="20" vspace="20" width=200>

<font size="+1">秋雨无声无息地下着。<BR> 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……<BR> 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？

</font><BR>

</body>

</html>

显示结果

秋雨无声无息地下着。
飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……
黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？

5-2-3 设定字画对齐方式

图像的对齐：

1) 单独占一行时，放在<p>…</p>中，用<p>的对齐属性进行设置。

2) 与文本在同一行时，用其自身的 align 属性（ top，middle，bottom ）设置图像与文本的 垂直对齐。其中： bottom 为默认值。

3) 图文混排时，可实现图像的左、右环绕文本，用 align 属性（left图像在左、文本在右,right）。

实例：5-2-3.html

<html>

<head>

<title>

控制图像相对于文字基准线的水平对齐方式

</title>

</head>

<body>

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251445450503.jpg " width=200 align="left">

此图像相对于文字基准线为靠上对齐的多行文字<br>试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？<br>我拚着千呼万唤；你能够出来么？ <br>这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。

<p> <hr color="#00ff00">

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251445450503.jpg " width=200 align="right"> 此图像相对于文字基准线为靠上的多行文字对齐<br>试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？<br>我拚着千呼万唤；你能够出来么？ <br>这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。

<p> <hr color="#00ff00">

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251445450503.jpg " width=200 align="top"> 此图像相对于文字基准线为顶部单行对齐

<p> <hr color="#00ff00">

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251445450503.jpg " width=200 align=bottom> 此图像相对于文字基准线为底线单行对齐</p> <p> <hr color="#00ff00">

<p>

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251445450503.jpg " width=200 align="middle"> 此图像相对于文字基准线为置中单行对齐

</p>

<p> </p>

<p>

<a href="#" onClick="window.history.back()">返回</a>

</p>

</body>

</html>

显示结果

此图像相对于文字基准线为靠上对齐的多行文字
试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？
我拚着千呼万唤；你能够出来么？
这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。

此图像相对于文字基准线为靠上的多行文字对齐
试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？
我拚着千呼万唤；你能够出来么？
这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。

此图像相对于文字基准线为顶部单行对齐

此图像相对于文字基准线为底线单行对齐

此图像相对于文字基准线为置中单行对齐

5-2-4 图片大小设定

实例：5-2-4.html

<html>

<head>

<title>

图像大小的设定

</title>

</head>

<body>

<center>

<p> 缩小图像

<p>

<img src="http://userimage5.360doc.com/14/0325/14/313676_201403251457280769.jpg " width="350" height="200">

<p>原图显示

<p>

<img src="http://userimage5.360doc.com/14/0325/14/313676_201403251457280769.jpg " width="400" height="236">

<p>放大图像

<p>

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251457280769.jpg " width="500" height="250">

</p>

</center>

</body>

</html>

显示结果

缩小图像

原图显示

放大图像

5-2-5 图像边框的设定

实例：5-2-5.html

<html>

<head>

<title>

设定图像的边框

</title>

</head>

<body>

<center>

<div align="center">

<pre>

<img src=" http://userimage5.360doc.com/14/0325/14/313676_201403251457280769.jpg " border="10" width="350" height="200">

</pre>

</div>

</body>

</html>

显示结果

5-3 用 <img> 标签插入 avi 文件

格式： <img dynsrc="avi文件地址">

**<img>标签插入avi文件的属性**
属性	描述
dynsrc	指定avi文件所在路径
loop	设定avi文件循环次数
loopdelay	设定avi文件循环延迟
start	设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi 文件时播放

实例：6-4.html

<html>

<head>

<title>

设定图像的边框

</title>

</head>

<body>

<center>

<p align="center">

<img dynsrc=http://imgt2......=21&gp=0.avi loop="-1" start="mouseover">

</p>

</center>

</body>

</html>

第六章建立超链接

HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。建立超链接的标签为<A>和</A>

格式为 ：<A HREF="资源地址" TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>

说明：标签 <A> 表示一个链接的开始， </A> 表示链接的结束；

属性 “HREF” 定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问

TARGET：该属性用于指定打开链接的目标窗口，其默认方式是原窗口。

**建立目标窗口的属性**
属性值	描述
_parent	在上一级窗口中打开，一般使用分桢的框架页会经常使用
_blank	在新窗口打开
_self	在同一个桢或窗口中打开，这项一般不用设置
_top	在浏览器的整个窗口中打开，忽略任何框架

TITLE：该属性用于指定指向链接时所显示的标题文字。

"超链接名称" 是要单击到链接的元素，元素可以包含文本，也可以包含图像。文本带下划线且与其它文字颜色不同，图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志 <img> 嵌套在 <A HREF="URL"></A> 之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状，单击这个元素可以访问指定的目标文件。

6-1 链接路径

每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resourc Locator) 中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个连接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此， 链接可以分以下三种： ■ 绝对路径： 如： http://www.sina.com.cn ■ 相对路径：如： news/index.html ■ 根路径： 如：d│/web/news/index.html

1、绝对路径 绝对路径：包含了标识 INTERNET 上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称其格式为：通讯协议：//服务器地址：通讯端口/文件位置....../文件名。 lnternet遵循一个重要的协议及HTTP(Hypertext Transfer Protocol)超文本传输协议，http是用于传输Web页的客户端/服务器协议。当浏览器发出Web页请求时,此协议将建立一个与服务器的链接.当链接畅通后,服务器将找到请求页,并将它发送给客户端,信息发送到客户端后,http将释放此链接.这使得此协议可以接受并服务大量的客户端请求. Web应用程序是指Web服务器上包含的许多静态的和动态的资源集合.Web服务器承但着为浏览器提供服务的责任. www.sina.com.cn就是资源所在的主机名为：通常情况下使用默认的端口号８０，资源在WWW服务器主机web文件夹下，资源的名称为：index.html.。例： http://www.163.net/myweb/book.htm（此网址为假设）表明采用 http 从名为 www.163.net 的服务器上的目录 myweb 中获得文件book.htm

2、相对路径 相对路经是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。 ■ 如果链接到同一目录下，则只需输入要链接文件的名称。 ■ 要链接到下级目录中的文件。只需先输入目录名，然后加"/"，再输入文件名。 ■ 要链接到上一级目录中文件，则先输入"../"，再输入文件名。

**相对路径的用法**
相对路径名	含义
herf="shouey.html"	shouey.html 是本地当前路径下的文件
herf="web/shouey.html"	shouey.html 是本地当前路径下称做 "web"子目录下的文件
herf="../shouey.html"	shouey.html 是本地当前目录的上一级子目录下的文件
herf="../../shouey.html"	shouey.html 是本地当前目录的上两级子目录下的文件

3、根路径 根路径目录地址同样可用于创建内部链接，但大多数情况下，不建议使用此种链接形式。

根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。如果根目录要写盘符，就在盘符后使用"│",而不用":" 这点与DOS的写法不同。如： /web/highight/shouey.html d│/web/highight/shouey.html

也许读者会问，链接本地机器上的文件时，应该使用相对路径还是根路径？在绝大多数情况下使用相对路径比较好，例如，用绝对路径定义了链接，当把文件夹改名或者移动之后，那么所有的链接都要失败，这样就必须对你的所有html文件的链接进行重新编排，而一旦将此文夹件移到网络服务器上时，需要重新改动的地方就更多了，那是一件很麻烦的事情。而使用相对路径，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。

6-2 超链接的应用

6-2-1书签链接 链接文档中的特定位置也叫书签链接，在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，这种效果就可以通过书签链接来实现，方法是选择一个目标定位点，用来创建一个定位标记，用 <a> 标签的属性 name 的值来确定定位标记名 <a > 。然后在网页的任何地方建立对这个目标标记的链接"标题"，在标题上建立的链接地址的名字要和定位标记名相同，前面还要加上"#"号， <a href= "#定位标记名"> 。单击标题就跳到要访问的内容。

书签链接可以在同一页面中链接，也可以在不同页面中链接，在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置

格式：

■ 在同一页面要使用链接的地址： <a href="#书签名称" target="窗口名称">超连链标题名称</a>

■ 在不同页面要使用链接的地址： <a href="URL地址#书签名称" target="窗口名称">超链接标题名称</a>

■ 链接到的目的地址： <a name="书签名称">目标超链接名称</a>

name 的属性值为该目标定位点的定位标记点名称，是给特定位置点(这个位置点也叫锚点)起个名称。

实例： 4-2-11html

<HTML>

<HEAD>

<TITLE>

唐诗欣赏

</TITLE>

</HEAD>

<BODY>

<a ><H2>唐诗欣赏</H2></a>

<a ><H2>李白</H2></a>

<A href="#T.2" target="_blank">清平調三首</A>

<br><A href="#T.1">長干行</A><br>

<A href="#T.3">月下獨酌</A>

<HR> <BR><BR>

<H3><A >清平調三首</A></H3> 雲想衣裳花想容，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。

<H3><A >長干行</A> </H3>

<PRE> 妾髮初覆額，<br>折花門前劇。<br>郎騎竹馬來，<br>遶床弄青梅。<br>同居長干里，<br>兩小無嫌猜。<br>十四為君婦，<br>羞顏未嘗開。<br>低頭向暗壁，<br>千喚不一回。<br>十五始展眉，<br>願同塵與灰。<br>常存抱柱信，<br>豈上望夫臺。<br>十六君遠行，<br>瞿塘灩澦堆。<br>五月不可觸，<br>猿鳴天上哀。<br>門前遲行跡，<br>一一生綠苔。<br>苔深不能掃，<br>落葉秋風早。<br>八月蝴蝶來，<br>雙飛西園草。<br>感此傷妾心，<br>坐愁紅顏老。<br>早晚下三巴，<br>預將書報家。<br>相迎不道遠，<br>直至長風沙。

</PRE>

<A href="#top">唐诗欣赏</a>

<BR><BR>

<H3><A >月下獨酌</A> </H3>

<PRE> 花間一壺酒，<br>獨酌無相親。<br>舉杯邀明月，<br>對影成三人。<br>月既不解飲，<br>影徒隨我身。<br>暫伴月將影，<br>行樂須及春。<br>我歌月裴回，<br>我舞影零亂。<br>醒時同交歡，<br>醉後各分散。<br>永結無情遊，<br>相期邈雲漢。

</PRE>

<p>

<a href="4-2-12.html#libai">李白蔑视权贵</a>

</p>

</BODY>

</HTML>

显示结果

唐诗欣赏

李白

清平調三首
長干行
月下獨酌

清平調三首

雲想衣裳花想容，
春風拂檻露華濃。
若非群玉山頭見，
會向瑤台月下逢。
一枝紅艷露凝香，
雲雨巫山枉斷腸。
借問漢宮誰得似？
可憐飛燕倚新妝。
名花傾國兩相歡，
常得君王帶笑看。
解釋春風無限恨，
沈香亭北倚闌干。

長干行

  妾髮初覆額，
折花門前劇。
郎騎竹馬來，
遶床弄青梅。
同居長干里，
兩小無嫌猜。
十四為君婦，
羞顏未嘗開。
低頭向暗壁，
千喚不一回。
十五始展眉，
願同塵與灰。
常存抱柱信，
豈上望夫臺。
十六君遠行，
瞿塘灩澦堆。
五月不可觸，
猿鳴天上哀。
門前遲行跡，
一一生綠苔。
苔深不能掃，
落葉秋風早。
八月蝴蝶來，
雙飛西園草。
感此傷妾心，
坐愁紅顏老。
早晚下三巴，
預將書報家。
相迎不道遠，
直至長風沙。

唐诗欣赏

月下獨酌

  花間一壺酒，
獨酌無相親。
舉杯邀明月，
對影成三人。
月既不解飲，
影徒隨我身。
暫伴月將影，
行樂須及春。
我歌月裴回，
我舞影零亂。
醒時同交歡，
醉後各分散。
永結無情遊，
相期邈雲漢。

李白蔑视权贵

实例 4-2-12html

<html>

<head>

<title>

李白

</title>

</head>

<body>

<center>

<a href="4-2-11.html#lb">

<h1 align="center">

<font color="#339933">

李白

</font>

</h1>

</a>

<font color="#339933" size="+2">李白（701~762），<br>字太白，号青莲居士。<br>祖籍陇西成纪（今甘肃省天水市附近的秦安县），<br>隋朝末年其先租因罪住在中亚细亚。<br>李白的家世和出生地至今还是个谜，<br>学术界说法不一。<br>一说李白就诞生在安西都护府所辖的碎叶城，<br>五岁时随父迁到绵州昌隆县青莲乡。<br>

<p>李白性情豪放，<br>喜爱纵横家的作风，<br>爱好任侠之事，轻视财货。<br>早年在蜀中度过。他的父亲是个富商。<br>李白二十五岁开始漫游全国，<br>走过湖北，江西，河南，山东等地.<br>

</p>

<p>

<A >李白蔑视权贵</A>，

<br>传说他喝醉酒，<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为这是很大的耻辱，<br>就摘取李白诗句激怒杨贵妃。<br>玄宗每次让李白做官，杨贵妃就加以阻止。<br>李白知道玄宗的亲信对他有意见，<br>于是恳求还家。<br>玄宗赐给他财物，放他开.<br>

</p>

<p>李白是我国唐代伟大的浪漫主义诗人，<br>被誉为“诗仙”。<br>他的诗豪迈瑰丽，诗里有突破现实的幻想。<br>也有对当时民生疾苦的反映和对政治黑暗的抨击。<br>他的散文具有清新明朗，<br>奔放流畅的特点。

</p>

</font>

</center>

</body>

</html>

显示结果

李白

李白（701~762），
字太白，号青莲居士。
祖籍陇西成纪（今甘肃省天水市附近的秦安县），
隋朝末年其先租因罪住在中亚细亚。
李白的家世和出生地至今还是个谜，
学术界说法不一。
一说李白就诞生在安西都护府所辖的碎叶城，
五岁时随父迁到绵州昌隆县青莲乡。

李白性情豪放，
喜爱纵横家的作风，
爱好任侠之事，轻视财货。
早年在蜀中度过。他的父亲是个富商。
李白二十五岁开始漫游全国，
走过湖北，江西，河南，山东等地.

李白蔑视权贵，
传说他喝醉酒，
曾在玄宗面前使高力士给他脱靴。
高力士认为这是很大的耻辱，
就摘取李白诗句激怒杨贵妃。
玄宗每次让李白做官，杨贵妃就加以阻止。
李白知道玄宗的亲信对他有意见，
于是恳求还家。
玄宗赐给他财物，放他开.

李白是我国唐代伟大的浪漫主义诗人，
被誉为“诗仙”。
他的诗豪迈瑰丽，诗里有突破现实的幻想。
也有对当时民生疾苦的反映和对政治黑暗的抨击。
他的散文具有清新明朗，
奔放流畅的特点。

6-2-2 在站点内部建立链接

所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。在前面介绍链接路径时，已经给大家介绍了内部链接概念，内部链接一般采用相对路径链接比较好。下面我们根据如图示，来看看相对路径的具体的链接方法：

**在站点内部建立链接**
当前页面	被链接页面	超链接代码
2-1.html 3-1.html		<a href="3-1.html">超链接元素</a>
3-1.html 1-1.html		<a href="asm/1-1.html">超链接元素</a>
sy.html 1-1.html		<a href="ssm/asm/1-1.html">超链接元素</a>
2-1.html sy.html		<a href="../sy.html">超链接元素</a>
1-1.html sy.html		<a href="../../sy.html">超链接元素</a>
sy.html 2-1.html		<a href="ssm/2-1.html">超链接元素</a>

6-2-3 外部链接

所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径，要有完整的URL地址，包括协议名，主机名，文件所在主机上的的位置的路径以及文件名。最常用的外部链接格式是：<a href="http://网址">,还有其他的格式如下表所示：

**URL外链部接格式**
服务 URL	格式	描述
WWW	http://"地址"	进入万维网站点
Ftp ftp://""		进入文件传输协议
Telnet telnet://""		启动Telnet方式
Gopher gopher://""		访问一个gopher服务器
News news://""		启动新闻讨论组
Email email://""		启动邮件

6-2-31 链接其它站点：

站点之间的页面和元素的链接是万维网交流信息的关键，这种链接用HTTP协议来建立网站之间的超链接。

格式： <A HREF="HTTP://"网址">

实例： 6-2-31.html

<HTML>

<HEAD>

<TITLE>

链接到 http://

</TITLE>

</HEAD>

<BODY>

<CENTER>

<h2>绝对路径链接</h2>

<HR>

<A HREF=" http://www.sina.com.cn " title="打开新浪首页">

<img src="../../imgelogo(3).gif/">

</A>

<BR><BR>

<A HREF=" http://www.tsinghua.edu.cn ">清华大学</A>

<BR><BR>

<A HREF=" http://www.pku.edu.cn ">北京大学</A>

<BR><BR>

<A HREF=" http://www.shisu.edu.cn " target=_blank>上海外国语学院</A>

<BR>

</CENTER>

</BODY>

</HTML>

显示结果

绝对路径链接

清华大学

北京大学

上海外国语学院

6-2-32 发送E-mail

在HTML页面中，可以建立E-mail链接。当浏览者单击链接后，系统会启动默认的本地邮件服务系统发送邮件。

基本语法： <a href=" mailto:E-mali 地址: subject=邮件主题">描述文字</a>

在实际应用中，用户还可以加入另外的两个参数 "?cc="E-mali地址" 和 "&body=?", 这分别表示在发送邮件的同时把邮件抄送给第三者和设定邮件主题内容。

**邮件的参数**
参数	描述
subject	电子邮件主题
cc	抄送收件人
body	主题内容
bcc	暗送收件人

如果希望同时写下多个参数，则参数之间使用 "&" 分隔符。

实例： 6-2-32.html

<html>

<head>

<title>

发送邮件

</title>

</head>

<body>

<p>

<a href=" mailto:zhoujr3071@yahoo.com.cn?cc=benbenmao@163.com&Subject =早安 &bcc=a@b.c &Body= 早安,笨笨猫祝你度过一个快乐的早晨！"> 向笨笨猫的好友发送邮件(抄送笨笨猫) </a>

</p>

</body>

</html>

显示结果

向笨笨猫的好友发送邮件(抄送笨笨猫)

单击"向笨笨猫的好友发送邮件(抄送笨笨猫)"后打开了系统的邮件服务软件Outlook Exqress发送邮件。

6-2-33 链接FTP

lnternet上资源丰富，通过 ftp 文件传输协议，就可以获得各种免费软件和其他文件，ftp协议是使计算机与计算机之间能够相互通信的语言，ftp使文件和文件夹能够在lnternet上公开传输，通过ftp可以访问某个网络或服务器，而不需要该计算机的账户和授权的密码就可通过ftp公开获得数据

语法格式：

实例：6-2-33.html

<html>

<head>

<title>

链接ftp主机

</title>

</head>

<body>

<p>

<a href=ftp://ftp.pku.edu.cn>北京大学ftp站点</a>

</p>

</body>

</html>

显示结果

北京大学ftp站点

6-2-4 图像的超链接

6-2-4.1 图像的超链接

图像的链接和文字的链接方法是一样的，都是用 <a> 标签来完成，只要将 <img> 标签放在 <a> 和 </a> 之间就可以了。用图像链接的图片上有蓝色的边框，这个边框颜色也可以在隔 <body> 标签中设定。

实例：6-2-41.html

<html>

<head>

<title>

使用图像为选取的对象

</title>

</head>

<body>

<p align="center"> </p>

<h1 align="center">

图片的超链接

</h1>

<P>

<center>

<a href=" http://www.sohu.com/ " target="_blank">

<img alt="搜狐网站" src="../../imge/logo[1].gif">

</a>

<p>

<a href=" http://www.baidu.com/">

<img alt="百度搜索" src="../../imge/logo[2].gif">

</a>

<a href=" http://www.sina.com.cn">

<img alt="新浪网站" src="../../imge/logo(3).gif">

</a>

</center>

</body>

</html>

显示结果

图片的超链接

6-2-4.2 图像的影像地图超链接

在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签 ：<img> <map> <area> 下面分别介绍这些标签的用法：

影像地图（Image Map）标签的使用格式：

<img src="图形文件名" usemap="#图的名称">

第七章 TABLE表格

表格在网站应用中非常广泛，可以方便灵活的排版，很多动态大型网站也都是借助表格排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。所以说要制作好网页，就要学好表格。

7-1 定义表格的基本语法

在html文档中，表格是通过 <table>，<th>，<tr>，<td> 标签来完成的，如下表所示：

**表格标记**
标签	描述
<table>...</table>	用于定义一个表格开始和结束
<caption> …</caption>	定义表格的标题。在表格中也可以不用此标签。
<th>...</th>	定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内
<tr>...</tr>	定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<td>...</td>	定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内

注：在一个最基本的表格中，必须包含一组<table>标签，一组标签<tr>和一组<td>标签或<th>。

实例：7-1. html

<HTML>

<HEAD>

<TITLE>

一个简单的表格

</TITLE>

</HEAD>

<BODY>

<center>

<table>

<caption >

表格标题

</caption >

<tr>

<td>第1行中的第1列</td>

<td>第1行中的第2列</td>

<td>第1行中的第3列</td>

</tr>

<tr>

<td>第2行中的第1列</td>

<td>第2行中的第2列</td>

<td>第2行中的第3列</td>

</tr>

</table>

</center>

</BODY>

</HTML>

显示结果

表格标题
第1行中的第1列	第1行中的第2列	第1行中的第3列
第2行中的第1列	第2行中的第2列	第2行中的第3列

7-2表格<table>标签属性

7-2（1) 表格 <table> 标签的常用属性 表格标签 <table> 有很多属性，最常用的属性有：

**<table>标签的属性**
属性	描述	说明
width	表格的宽度
height	表格的高度
align	表格在页面的水平摆放位置
background	表格的背景图片
bgcolor	表格的背景颜色
border	表格边框的宽度（以像素为单位）
bordercolor	表格边框颜色	当border>=1时起作用
bordercolorlight	表格边框明亮部分的颜色	当border>=1时起作用
bordercolordark	表格边框昏暗部分的颜色	当border>=1时起作用
cellspacing	单元格之间的间距
cellpadding	单元格内容与单元格边界之间的空白距离的大小

实例：7-2-1.html

<html>

<head>

<title>

无标题文档

</title>

</head>

<body>

<tr>

<td>第1行中的第1列</td>

<td>第1行中的第2列</td>

<td>第1行中的第3列</td>

</tr>

<tr>

<td>第2行中的第1列</td>

<td>第2行中的第2列</td>

<td>第2行中的第3列</td>

</tr>

</table>

</body>

</html>

显示结果

第1行中的第1列	第1行中的第2列	第1行中的第3列
第2行中的第1列	第2行中的第2列	第2行中的第3列

7-2（2）设置分隔线的显示状态 rules

语法格式： <table rules="值">

**分隔线的显示状态rules的值的设定**
rules的值	描述
all	显示所有分隔线
groups	只显示组与组的分隔线
rows	只显示行与行的分隔线
cols	只显示列与列的分隔线
none	所有分隔线都不显示

实例：7-2-3.html

<html>

<head>

<title>

无标题文档

</title>

</head>

<body>

<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400" height="60" align="center">

<TR>

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR>

<TD>笨笨猫</TD>

<TD>女</TD>

<TD>99</TD>

<TD>计算机</TD>

</TR>

</TABLE>

<p>

<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400" height="60" align="center">

<TR>

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR>

<TD>笨笨猫</TD>

<TD>女</TD>

<TD>99</TD>

<TD>计算机</TD>

</TR>

</TABLE>

</body>

</html>

显示结果

姓名	性别	年龄	专业
笨笨猫	女	99	计算机

姓名	性别	年龄	专业
笨笨猫	女	99	计算机

7-2（3）表格的边框显示状态 frame

表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态语法格式： <table frame="边框显示值">

**表格边框显示状态 frame 的值的设定**
frame的值	描述
box	显示整个表格边框
void	不显示表格边框
hsides	只显示表格的上下边框
vsides	只显示表格的左右边框
above	只显示表格的上边框
below	只显示表格的下边框
lhs	只显示表格的左边框
rhs	只显示表格的右边框

实例：7-2-2.html

<HTML>

<HEAD>

<TITLE>

表格边框的显示状态

</TITLE>

</HEAD>

<BODY >

<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="60">

<TR>

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR>

<TD>卡卡</TD>

<TD>男</TD>

<TD>50</TD>

<TD>计算机</TD>

</TR>

</TABLE>

</BODY>

</HTML>

显示结果

姓名	性别	年龄	专业
卡卡	男	50	计算机

7-3 表格行的设定

表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签 <tr>，行标签用它的属性值来修饰，属性都是可选的。

**<tr>标签的属性**
属性	描述
height	行高
align	行内容的水平对齐
valign	行内容的垂直对齐
bgcolor	行的背景颜色
bordercolor	行的边框颜色
bordercolorlight	行的亮边框颜色
bordercolordark	行的暗边框颜色

<TR> 的参数设定（常用）：

<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

实例：7-3.html

<HTML>

<HEAD>

<TITLE>

表格行的控制

</TITLE>

</HEAD>

<BODY>

<TABLE border=1 align="center" width="80%" height="100">

<TR ALIGN="CENTER">

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">

<TD>咚咚</TD>

<TD>男</TD>

<TD>18</TD>

<TD>学生</TD>

</tr>

<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom bordercolorlight="#E1F0FD" bordercolordark="#002346">

<TD>楠楠</TD>

<TD>女</TD>

<TD>17</TD>

<TD>学生</TD>

</TR>

</TABLE>

</BODY>

</HTML>

显示结果

姓名	性别	年龄	专业
咚咚	男	18	学生
楠楠	女	17	学生

7-4 单元格的设定

<th> 和 <td> 都是插入单元格的标签，这两个标签必须嵌套在 <tr> 标签内。是成对出现的。 <th> 用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<td>标签的属性都是一样的，属性设定如下：

**<th>和<td>的属性**
属性	描述
width/height	单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。
colspan	单元格向右打通的栏数
rowspan	单元格向下打通的列数
align	单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。
valign	单元格内字画等的摆放贴位置（垂直），可选值为：top, middle, bottom。
bgcolor	单元格的底色
bordercolor	单元格边框颜色
bordercolorlight	单元格边框向光部分的颜色
bordercolordark	单元格边框背光部分的颜色
background	单元格背景图片
nowrap	<td nowrap>禁止单元格内容自动换行。 TD元素noWrap属性的行为与TD元素的width属性有关，在设置了table元素的width后： ◆如未设置TD宽度，则noWrap属性起作用； ◆如设置了TD宽度，则noWrap属性不起作用。注：如果不设置table元素的width属性，nowrap不起作用。

<TD> 的参数设定格式：

例如： <td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

实例：7-4（1）.html

<HTML>

<HEAD>

<TITLE>单元格的设定</TITLE>

</HEAD>

<BODY>

<TABLE border=1 align="center" height="160" width="80%">

<TR>

<TH width=70 bgcolor="#FFCC00">姓名</TH>

<TH bgcolor="#FFCCFF">性别</TH>

<TH background="../../imge/b0024.gif">年龄</TH>

<TH background="../../imge/aki-5.gif">专业</TH>

</TR>

<TR>

<TD bordercolor=red align="left">笨笨猫</TD>

<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>

<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>

<TD bgcolor="#CCFFFF" align="right">学生</TD>

</TR>

</TABLE>

</BODY>

</HTML>

显示结果

姓名	性别	年龄	专业
笨笨猫	女	18	学生

实例：7-4（2）.html

<html>

<head>

<title>wrap属性研究</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body bgcolor="#FFFFFF" text="#000000">

<p>测试字符串：</p>

<p>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</p>

<p>单元格未设置nowrap属性的空表：</p>

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td> </td>

</tr>

</table>

<p>加入测试字符串：</p>

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td>

</tr>

</table>

<p>单元格设置了nowrap属性，未设置width属性：</p>

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td>

</tr>

</table>

<p>单元格设置了nowrap属性，也设置了width属性：</p>

<table width="200" border="1" cellspacing="0" cellpadding="0">

<tr>

<td width="120" nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td>

<td> </td>

</tr>

</table>

</body>

</html>

显示结果

测试字符串：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

单元格未设置nowrap属性的空表：

加入测试字符串：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

单元格设置了nowrap属性，未设置width属性：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

单元格设置了nowrap属性，也设置了width属性：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

7-5 设定跨多行多列单元格

要创建跨多行、多列的单元格，只需在 <TH> 或 <TD>中加入 ROWSPAN 或 COLSPAN 属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。

跨多列的语法： <th colspan=#> <td colspan=#> colspan 表示跨越的列数，例如 colspan=2 表示这一格的宽度为两个列的宽度。

跨多行的语法： <th rowspan=#> <td rowspan=#> rowspan 所要表示的意义是指跨越的行数，例如 rowspan=2 就表示这一格跨越表格两个行的高度。

实例：7-5.html

<html>

<head>

<title>跨多行跨多列的单元格</title>

</head>

<body>

<center>

<table border=10 width=80% align="center" height="60" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">

<TR ALIGN=center>

<TH colspan=3> 学生基本信息</TH>

</TR>

</table>

</center>

</body>

</html>

显示结果

学生基本信息

7-6-2 表格按列分组<colgroup>

html使用 <colgroup> 标签来将表格分组。

语法格式： <colgroup span="数值" align="参数">

说明： <colgroup> 标签有两个属性， span 和 align ，他们都是可选的。

span 属性的值是数字，表示该组包含的列数，默认值为1。

align 属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为 left，center，right 之一。它们表示单元格的内容是左对齐，水平居中还是右对齐。

实例：7-6-2.html

<html>

<head>

<title>表格按列分组</title>

</head>

<center>

<table border=10 width=80% height="120" align="center" bordercolorlight="#CCCCFF" bordercolordark="#9900FF">

<tr>

<th>姓名</th><th>性别</th><th>专业</th><th>分数</th>

</tr>

<colgroup span=2 align=center>

<colgroup align =left>

<colgroup align=right>

<tr>

<td>咚咚</td><td>男</td><td>计算机</td><td>79</td>

</tr>

<tr>

<td>喃喃</td><td>女</td><td>园林</td><td>90</td>

</tr>

<tr>

<td>依依</td><td>女</td><td>微波通信</td><td>76</td>

</tr>

</table>

</body>

</html>

显示结果

姓名	性别	专业	分数
咚咚	男	计算机	79
喃喃	女	园林	90
依依	女	微波通信	76

7-6-3 表格的行列分组

实例：7-6-3.html

<HTML>

<HEAD>

<TITLE>同时进行行列分组</TITLE>

</HEAD>

<BODY>

<CENTER>

<TABLE BORDER=10 WIDTH=80% height="120" align="center" bordercolor="#9900FF">

<COLGROUP SPAN=2 ALIGN=CENTER>

<COLGROUP ALIGN=LEFT>

<COLGROUP ALIGN=RIGHT>

<THEAD bgcolor="#FFFFCC">

<TR>

<TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>

</TR>

</THEAD>

<TBODY bgcolor="#FFCCFF">

<TR>

<TD>咚咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>

</TR>

<TR>

<TD>喃喃</TD><TD>女</TD><TD>园林</TD><TD>94</TD>

</TR>

<TR>

<TD>依依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

显示结果

姓名	性别	专业	分数
咚咚	男	计算机	85
喃喃	女	园林	94
依依	女	微波通信	87

7-7 表格的标题标签 <caption>

表格标题的位置，可由 ALIGN 属性和 VALIGN 属性来设置，

ALIGN 属性设置标题位于文档的 左，中，右。 VA

LIGN 属性设置标题位于 表格的上方和表格的下方。下面为表格标题位置的设置格式。

语法格式： <caption align="值" valign="值" >表格标题</caption>

<caption> 应放在 <table> 标签内，在表格行标签 <tr> 标签之前。

<caption> 标签的默认属性是标题位于表格的上方中间位置。

实例：7-7.html

<html>

<head>

<title>表格的标题标签</title>

</head>

<body>

<center>

<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">

<caption>学生信息表</caption>

<TR ALIGN=center>

<TH colspan=3> 学生基本信息</TH>

<TH colspan=2>成绩</TH>

</TR>

<TR ALIGN=center>

<TH>姓名</TH> <TH>性别</TH> <TH>专业</TH> <TH>课程</TH> <TH>分数</TH>

</TR>

<TR ALIGN=center>

<TD>咚咚</TD> <TD>男</TD> <TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD> <TD>68</TD>

</TR>

<TR ALIGN=center>

<TD>喃喃</TD> <TD>女</TD> <TD>89</TD>

</TR>

</body>

</html>

显示结果

学生信息表
学生基本信息			成绩
姓名	性别	专业	课程	分数
咚咚	男	计算机	程序设计	68
喃喃	女	计算机	程序设计	89

7-8 表格的嵌套

在html页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。

实例 7-8.html

<html>

<head>

<title>表格嵌套</title>

</head>

<body bgcolor="#555555" text="#FFFFFF">

<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">

<tr>

<td width="100" height="69">网页标志</td>

<td colspan="2"><div align="center">广告条</div></td>

</tr>

<tr>

<td height="330">

<table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td> </tr>

<tr>

<td>标题栏</td> </tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td height="90">内容六</td>

</tr>

</table>

</td>

<td width="275">

<table width="275" height="325" border="3" cellpadding="1" cellspacing="1">

<tr>

<td width="263">内容一</td>

</tr>

<tr>

<td>内容二</td>

</tr>

</table>

</td>

<td width="163">

<table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">

<tr>

<td width="136" height="94">内容三</td>

</tr>

<tr>

<td height="62">内容四</td>

</tr>

<tr>

<td height="160">内容五</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

显示结果

网页标志

广告条

标题栏

内容六

内容一

内容二

内容三

内容四

内容五

第八章网页的动态、多媒体效果

在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。

8-1 滚动字幕 <marquee>

<marquee> 标签可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。 <marquee> 标签是一个成对的标签。应用格式为： <marquee>...</marquee>

<marquee> 标签有很多属性，用来定义元素的移动方式:

**<marquee>的属性**
属性	描述
align	指定对齐方式：top，middle，bottom
bgcolor	设定文字卷动范围的背景颜色
loop	设定文字卷动次数，其值可以是正整数或 infinite 表示无限次默认为无限循环
height	设定字幕高度
width	设定字幕宽度
scrollamount	指定每次移动的速度，数值越大速度越快
scrolldelay	文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快
hspace	指定字幕左右空白区域的大小
vspace	指定字幕上下空白区域的大小
direction	设定文字的卷动方向，left 表示向左，right 表示向右，up 表示往上滚动
behavior	指定移动方式， scroll 表示滚动播出， slibe 表示滚动到一方后停止， alternate 表示滚动到一方后向相反方向滚动。

8-1 实例h8-1.html

<html>

<body>

<center>

<font face="字体2" size=6 color="#ff0000"> 滚动字幕 </font>

<br>

<marquee>啦啦啦~~~我会跑了</marquee>

<p>

<marquee height="200" direction="up" hspace="200">啦啦啦~~~我会往上跑了<br>啦啦啦~~~我会往上跑了</marquee>

<p>

<marquee direction="right">啦啦啦~~~我会往右跑了</marquee>

<p>

<marquee height="200" direction="down"><center>啦啦啦~~~我会往下跑了</center></marquee>

<p>

<marquee width="500" behavior="alternate">啦啦啦~~~我来回的跑</marquee>

<p>

<marquee behavior="slide">啦啦啦~~~我跑到目的地就该休息了</marquee>

<P>

<marquee scrollamount="2">啦啦啦~~~我累了，要慢慢的溜达</marquee>

<P>

<marquee scrolldelay="300">啦啦啦~~~我累了，我要走走停停</marquee>

<p>

<marquee scrollamount="20">哈哈~都没有我跑得快</marquee>

<p>

<marquee><img src="http://userimage5.360doc.com/14/0326/13/313676_201403261337520870.gif">啦啦啦~~图片也可以啊</marquee>

<p>

<marquee bgcolor="#FFFFCC" width="700" vspace="30"><font size="+3" color="#FF0000">啦啦啦~~滚动文字有背景了</font></marquee>

</center>

</body>

</html>

显示结果

滚动字幕
啦啦啦~~~我会跑了

啦啦啦~~~我会往上跑了
啦啦啦~~~我会往上跑了

啦啦啦~~~我会往右跑了

啦啦啦~~~我会往下跑了

啦啦啦~~~我来回的跑

啦啦啦~~~我跑到目的地就该休息了

啦啦啦~~~我累了，要慢慢的溜达

啦啦啦~~~我累了，我要走走停停

哈哈~都没有我跑得快

啦啦啦~~图片也可以啊

啦啦啦~~滚动文字有背景了

8-2 插入多媒体文件

在网页中可以用 <embed> 标签将多媒体文件插入，比如可以插入音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、mp3、AIFF、AU格式等。

另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。但要说明一点，虽然我们用代码标签插入了多媒体文件，但IE浏览器通常能自动播放某些格式的声音与影像，但具体能播放什么样格式的文件．取决于所用计算机的类型以及浏览器的配置。浏览器使用Hn7或n7协议获取多媒体文件，(可能得花很长时间，因为多媒体文件通常比较大)，浏览器既就决定如何播放。通常是调用称为括件的内置程序来播放的。

事实上．浏览器仅仅能显示几种文件格式。是括件扩展了浏览器的能力．有许多种不同的括件程序，每种都能赋予浏览器一种新的能力。有时，不得不分别下栽每个浏览器的多媒体插什程序。系统最小化的安装一般不包括声音与影像播放器。

另外在播放影音文件时，若是使用一小部分窗口播放，大多数的计算机还比较快。若是全屏幕播放．就需要专用的硬件或是性能好的计算机．对于IE，若无预先安装好的插件程序，它会提示你或是打开文件或是保存文件或是取消下载。若打开未知类型的文件，浏览器会试图使用外部的应用程序显示此文件．但这要取决于操作系统的配置。

<embed> 标签的使用格式： <EMBED SRC="音乐文件地址">

**<embed> 标签的常用属性**
属性	描述
SRC="FILENAME"	设定音乐文件的路径
AUTOSTART=TRUE/FALSE	是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE
LOOP=TRUE/FALSE	设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。
STARTIME="分:秒"	设定乐曲的开始播放时间，如20 秒后播放写为STARTIME=00:20
VOLUME=0-100	设定音量的大小。如果没设定的话，就用系统的音量。
WIDTH HEIGHT	设定播放控件面板的大小
HIDDEN=TRUE	隐藏播放控件面板
CONTROLS=CONSOLE/SMALLCONSOLE	设定播放控件面板的样子

实例 h8-2-1.html

<HTML>

<HEAD>

<TITLE>插入多媒体文件</TITLE>

</HEAD>

<body>

<H2 ALIGN="CENTER">网页中的多媒体</H2>

<HR>

<center>

<embed src="http://sc.111ttt.com/up/mp3/152785/73E89AE66183F84DC0CCD011E86D0E29.mp3" height=45 width=400 loop="false">

</center>

</BODY>

</HTML>

显示结果：见页首《网页中的多媒体》（放在页首方便关闭声音）

实例 h8-2-2.html

<HTML>

<HEAD>

<TITLE>插入多媒体文件</TITLE>

</HEAD>

<body>

<H2 ALIGN="CENTER">网页中的多媒体</H2>

<HR>

<center>

<embed src="../../imge/mmm.avi" width="400" height="500" loop="false">

</center>

</BODY>

</HTML>

实例 h8-2-3.html

<HTML>

<HEAD>

<TITLE>插入flash</TITLE>

</HEAD>

<body>

<H2 ALIGN="CENTER">网页中的多媒体</H2>

<HR>

<center>

<embed src="http://www.xcwhw.cn/fla/hc/1670.swf" height="500" width="550">

<embed src="http://www.xcwhw.cn/fla/hc/1679.swf" height="500" width="550" wmode="transparent">

</center>

</BODY>

</HTML>

显示结果

网页中的多媒体

实例 h8-2-4.html

<html>

<head>

<title>在图片上插入透明flash</title>

</head>

<body bgColor=lightblue>

<br><center>在图片上插入透明Flash动画</center><br>

<center>

<TABLE border=10 cellSpacing=2 borderColorLight=#00cc99 borderColorDark=#009933 cellPadding=2 width=450 background=http://userimage5.360doc.com/14/0325/14/313676_201403251418240019.jpg height=380>

<TBODY>

<TD>

<EMBED height=180 type=application/x-shockwave-flash width=200 src=http://vip.edmin.com.cn/files/4/yi3.swf quality="high" wmode="transparent"></EMBED>

</TD>

</TBODY>

</table>

</center>

</body>

</html>

注意长和宽的设定要根据图片的实际大小来设定

显示结果

在图片上插入透明Flash动画

8-3 嵌入多媒体文件

除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，这种方式将不调用媒体播放器

8-3-1 嵌入背景音乐

<bgsound> 标签用来设置网页的背景音乐。但只适用於 IE，其参数设定不多。格式如下： <BGSOUND src="your.mid" autostart=true loop=infinite>

src="your.mid" 设定 midi 档案及路径，可以是相对或绝对。声音文件可以是 wav，midi，mp3 等类型的文件

autostart=true 是否在音乐档传完之後，就自动播放音乐。 true 是， false 否 (内定值)。

loop=infinite 是否自动反覆播放。 LOOP=2 表示重复两次，I nfinite 表示重复多次。直到网页关闭为止。

实例 8-3-1.html

<HTML>

<HEAD>

<TITLE>背景声音</TITLE>

</HEAD>

<body>

<H4 ALIGN="CENTER" >网页的背景声音</H4>

<HR> <bgsound src="../../imge/小三和弦.mp3" LOOP="3">

</BODY>

</HTML>

背景音乐可以放在 <body>...</body> 或 <head>...</head> 之间

8-3-2 在网页中嵌入视屏文件

使用前面学过的标签 <img src="路径">，在此就不重述了。

8-4 点播音乐

将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：

<A HREF="音乐地址">乐曲名</A>

例如：

播放一段MIDI音乐： <A HREF="imge/一千零一夜.mid">MIDI音乐</A> MIDI音乐

播放一段AU格式音乐： <A HREF=http://www.111ttt.com/up/p12252141>邓丽君甜蜜蜜-mp3音乐</A> 邓丽君 -mp3音乐

显示结果

邓丽君甜蜜蜜-mp3音乐

把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！

第九章多视窗口框架

9-1 框架的含义和基本构成

框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。

而所有的框架标记要放在一个 html 文档中。html页面的文档体标签 <body> 被框架集标签 <frameset> 所取代，然后通过 <frameset> 的子窗口标签 <frame> 定义每一个子窗口和子窗口的页面属性。

语法格式：

<html>

<head>

</head>

<frameset>

<frame src="url地址1">

<frame src="url地址2">

......

<frameset>

</html>

Frame子框架的src属性的每个URL值指定了一个html文件（这个文件必须事先做好）地址，地址路径可使用绝对路径或相对路径，这个文件将载入相应的窗口中。框架结构可以根据框架集标签 <frameset> 的分割属性分为3种： 1. 左右分割窗口 2. 上下分割窗口 3. 嵌套分割窗口

9-2 框架集 <frameset> 控制

**<frameset>的属性**
属性	描述
border	设置边框粗细,默认是5象素.
bordercolor	设置边框颜色
frameborder	指定是否显示边框："0"代表不显示边框，"1"代表显示边框
cols	用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分
rows	用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分
framespacing="5"	表示框架与框架间的保留空白的距离
noresize	设定框架不能够调节，只要设定了前面的，后面的将继承

1. 左右分割窗口属性：cols

如果想要在水平方向将浏览器分割多个窗口，这需要使用到框架集的左右分割窗口属性 cols. 分割几个窗口，其 cols 的值就有几个，值的定义为宽度，可以是数字(单位为像素)，也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用 "*" 号表示，剩余值表示所有窗口设定之后的剩余部分，

当 "*" 只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，

当 "*" 出现一次以上时，表示按比例分割剩余的窗口空间。

cols 的默认值为一个窗口如：

<frameset cols="40%,2*,*"> 将窗口分为40%，40%，20%

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

<frameset cols="*,*,*"> 将窗口分为三等份

2. 上下分割窗口属性：rows

上下分割窗口的属性设置和左右窗口的属性设定是一样的，参照上面所述就可以了。

9-3 子窗口<frame>标签的设定

<frame> 是个单标签， <frame> 标签要放在框架集 frameset 中， <frameset> 设置了几个子窗口就必须对应几个 <frame> 标签，而且每一个<frame>标签内还必须设定一个网页文件 （src="*.html"，其常用属性有：

**<frame>常用属性**
属性	描述
src	指示加载的url文件的地址
bordercolor	设置边框颜色
frameborder	指示是否要边框,1显示边框，0不显示（不提倡用 yes 或 no）
border	设置边框粗细
name	指示框架名称,是连结标记的 target 所要的参数
noresize	指示不能调整窗口的大小,省略此项时就可调整,
scorlling	指示是否要滚动条,auto根据需要自动出现,Yes有,No无
marginwidth	设置内容与窗口左右边缘的距离，默认为1
marginheight	设置内容与窗口上下边缘的边距，默认为1
width	框窗的宽及高默认为width="100" height="100"
align	可选值为 left, right, top, middle, bottom

子窗口的排列遵循从左到右，从上到下的次序规则。

一、窗口的左右设定：

实例一 sl9-1.html 首先我们新建一个文件夹，然后做四个要放到子窗口中的页面，sl1.html、sl2.html、sl3.html、sl4.html。

<html>

<head> </head>

<frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl1.html">

<frame src="sl2.html">

<frame src="sl3.html">

</frameset> <noframes> </noframes>

</html>

二、窗口的上下设定

实例二 sl9-2.html

<html>

<head>

</head>

<frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl1.html"> <frame src="sl2.html">

<frame src="sl3.html" noresize="noresize">

</frameset><noframes></noframes>

</html>

三、窗口的嵌套设定

实例三 sl9-3.html

<html>

<head>

</head>

<frameset cols="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl1.html">

<frameset rows="300,500"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl2.html">

<frame src="sl3.html">

</frameset>

</frameset><noframes></noframes>

</html>

实例四 sl9-4.html

<html>

<head>

</head>

<frameset rows="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl1.html">

<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl2.html">

<frame src="sl3.html">

</frameset>

</frameset><noframes></noframes>

</html>

实例五 sl9-5.html

<html>

<head>

</head>

<frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl1.html">

<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">

<frame src="sl2.html">

<frame src="sl3.html">

</frameset>

<frame src="sl4.html">

</frameset><noframes></noframes>

</html>

大家看到上面的文件中还有一对 <noframes></noframes>标签，即使在做框架集网页时没有这对标签，文件在很多浏览器解析时也会自动生成<noframes>标签，这对标签的作用是当浏览者使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用的浏览器看不到框架时，他就会看到 <NOFRAMES>你的浏览器不支持框架网页</NOFRAMES>之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本。

9-4 窗口的名称和链接

如果在窗口中要做链接，就必须对每一个子窗口命名，以便于被用于窗口间的链接，窗口命名要有一定的规则，名称必须是单个英文单词，允许使用下划线，但不允许使用"—","句点"和空格等，名称必须以字母开头，不能使用数字，还不能使用网页脚本中保留的关键字，在窗口的链接中还要用到一个新的属性 "targe" ，用这个属性就可以将被链接的内容放置到想要放置的窗口内。

下面的实例就是窗口内的命名和链接方法

文件一中的片断代码格式为：

<a href="sl1.html" target="aa2">爱在深秋</a>

<a href="sl2.html" target="aa3">图像对文字的水平居中</a>

<a href="sl3.html" target="aa2">图像与文本之间的距离</a>

<a href="sl4.html" target="aa3">图像大小的设定</a>

<a href=" http://www.sina.com.cn " target="aa3">新浪网站</a>

文件二的片断代码格式为：

<frame src="ml.html" name="aa1">

<frame src="sl1.html" name="aa3">

<frame src="sl2.html" name="aa2" noresize="noresize">

文件一： ml.html

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<center>

<h2>目录</h2>

<hr>

<p><a href="sl1.html" target="aa2">爱在深秋</a></p>

<p><a href="sl2.html" target="aa3">图像对文字的水平居中</a></p>

<p><a href="sl3.html" target="aa2">图像与文本之间的距离</a></p>

<p><a href="sl4.html" target="aa3">图像大小的设定</a></p>

<p><a href=" http://www.sina.com.cn " target="aa3">新浪网站</a></p>

</center>

</body>

</html>

文件二： sl94.html

<html>

<head>

</head>

<frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#99CCFF">

<frame src="ml.html" name="aa1">

<frame src="sl1.html" name="aa3">

<frame src="sl2.html" name="aa2" noresize="noresize">

</frameset><noframes></noframes>

</html>

9-5 浮动窗口<iframe>

<iframe> 这标记只适用於IE浏览器。

它的作用是在浏览器窗口中可以嵌入一个框窗以显示另一个文件。它是一个围堵标记，但围著的字句只有在浏览器不支援 iframe 标记时才会显示，如<noframes> 一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好，若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。

<iframe> 的参数设定格式： <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">

**<iframe>属性的含义**
属性	含义
src	浮动窗框中的要显示的页面文件的路径，可以是相对或绝对
name	此框窗名称，这是连结标记的target 参数所要的，
align	可选值为 left, right, top, middle, bottom，作用不大
height	框窗的高，以 pixels 为单位。
width	框窗的宽，以 pixels 为单位。
marginwidth	该插入的文件与框边所保留的空间。
marginheight	该插入的文件与框边所保留的空间。
frameborder	使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）
scrolling	使用 Yes 表示容许卷动（内定）， No 则不容许卷动。

实例：sl95.html

<html>

<head>

<title>浮动框架</title>

</head>

<body bgcolor="#E1FFE1">

<center>

<iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true"> 这是一个浮动窗口 </iframe>

<p><a href="sl1.html" target="aa">爱在深秋</a></p>

<p><a href="sl2.html" target="aa">图像对文字的水平居中</a></p>

<p><a href="sl3.html" target="aa">图像与文本之间的距离</a></p>

<p><a href="sl4.html" target="aa">图像大小的设定</a></p>

<p><a href=" http://www.sina.com.cn " target="aa3">新浪网站</a></p>

</center>

</body>

</html>

显示结果

注意：Internet Explorer 5.5 支持浮动框架的内容透明。如果想要为浮动框架定义透明内容，则必须满足下列条件：

与 IFRAME 元素一起使用的 ALLOWTRANSPARENCY 标签属性必须设置为 true。

在 IFRAME 内容源文档，background-color 或 BODY 元素的 BGCOLOR 标签属性必须设置为 transparent。

第十章表单的设计

10-1 表单标记<form>

表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交 (submit) 操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。

表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交和按钮等，这些输入框，按钮叫做控件。表单很像容器，它能够容纳各种各样的控件。

一个表单用 <form> 。。。</form> 标志来创建。也即定义表单的开始和结束位置，在开始和结束标志之间的一切定义都属于表单的内容。 <form> 标志具有 action、method 和target属性。

action 的值是处理程序的程序名(包括网络路径:网址或相对路径)，如： <form action="用来接收表单信息的url">，如果这个属性是空值("")则当前文档的url将被使用。当用户提交表单时，服务器将执行网址里面的程序（一般是CGI程序）。

method 属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。

GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB（255个字节）以下。

POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。

target 属性用来指定目标窗口或目标帧。可选 当前窗口_self， 父级窗口_parent，顶层窗口_top， 空白窗口_blank。

表单标签的格式： <FORM action＝"url" method=get|post name="myform" target="_blank">... </FORM>

10-2 写入标记 <input>

在html语言中，标记 <input> 具有重要的地位，它能够将浏览器中的控件加载到html文档中，该标记是单个标记，没有结束标记。 <input type=""> 标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在 <form> </form> 标志对之间。 <input type=""> 标志中共提供了九种类型的输入区域，具体是哪一种类型由 type 属性来决定。请看下边列表：

**type属性值定义**
type属性取值	输入区域类型	控件的属性及说明
<input type="TEXT" size="" maxlength="">	单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数	(1)name 定义控件名称 (2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容 (3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。 (4)maxlength 表示该文本输入框允许用户输入的最大字符数。 (5)onchang 当文本改变时要执行的函数 (6)onselect 当控件被选中时要执行的函数 (7)onfocus 当文本接受焦点时要执行的函数
<input type="button">	普通按钮,当这个按钮被点击时,就会调用属性onclick指定的函数;在使用这个按钮时,一般配合使用value指定在它上面显示的文字,用onclick指定一个函数,一般为JavaScript的一个事件。	这三个按钮有下面共同的属性： (1)name 指定按钮名称 (2)value 指定按钮表面显示的文字 (3)onclick 指定单击按钮后要调用的函数 (4)onfocus 指定按钮接受焦点时要调用的函数
<input type="SUBMIT">	提交到服务器的按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址。
<input type="RESET">	重置按钮,单击该按钮可将表单内容全部清除,重新输入数据。
<input type="CHECKBOX" checked>	一个复选框,checked属性用来设置该复选框缺省时是否被选中,右边示例中使用了三个复选框	checkbox用于多选,有以下属性: (1) name 定义控件名称 (2) value 定义控件的值 (3) checked 设定控件初始状态是被选中的 (4) onclick 定义控件被选中时要执行的函数 (5) onfocus 定义控件为焦点时要执行的函数
<input type="HIDDEN">	隐藏区域,用户不能在其中输入,用来预设某些要传送的信息	hidden 隐藏控件,用于传递数据,对用户来说是不可见的;属性有: (1)name 控件名称, (2)value 控件默认值 (3)hidden隐藏控件的默认值会随表单一起发送给服务器,例如: <input type="Hidden" name="ss" value="688"> 控件的名称设置为ss,设置其数据为"688",当表单发送给服务器后,服务器就可以根据hidden的名称ss,读取value的值688;
<input type="IMAGE" src="URL">	使用图像来代替Submit按钮,图像的源文件名由src 属性指定,用户点击后,表单中的信息和点击位置的X、 Y坐标一起传送给服务器	(1)name 指定图像按钮名称 (2)src 指定图像的url地址
<input type="PASSWARD">	输入密码的区域,当用户输入密码时,区域内将会显示"*"号	password 口令控件表示该输入项的输入信息是密码,在文本输入框中显示"*",属性有: (1)name 定义控件名称 (2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容 (3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。 (4)maxlegnth 表示该文本输入框允许用户输入的最大字符数。
<input type="RADIO">	单选按钮类型,checked属性用来设置该单选框缺省时是否被选中,右边示例中使用了三个单选框	radio用于单选，有以下属性: (1) name 定义控件名称 (2) value 定义控件的值 (3) checked 设定控件初始状态是被选中的 (4) onclick 定义控件被选中时要执行的函数 (5) onfocus 定义控件为焦点时要执行的函数当为单选项时,所有按钮的name属性必需相同,如:都设置为my_radio。

以上类型的输入区域有一个公共的属性 name ，此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。服务器就是通过调用某一输入区域的名字的 value 值来获得该区域的数据的。而 value 属性是另一个公共属性，它可用来指定输入区域的缺省值。

应用格式： <input 属性1 属性2......>

常用属性：

1、 name 控件名称

2、 type 控件类型如： botton 普通按钮， texe 文本框等

3、 align 指定对齐方式，可取 top， bottom， middl

4、 size 指定控件的宽度

5、 value 用于设定输入默认值

6、 maxlength 在单行文本的时候允许输入的最大字符数

7、 src 插入图像的地址

8、 event 指定激发的事件

实例：10-2.html

<html>

<head>

<title><input>的控件</title>

</head>

<body>

<center>

<h2><font color="#339933"><input>控件的使用</font></h2>

</center>

<pre>

<form action="" method="post" target="_parent">

单行的文本输入区域：<INPUT class=nine name=T1>

普通按钮：<INPUT class=nine name=B1 type=submit value=Submit>

提交按钮：<INPUT class=nine name=B1 type=submit value=Submit>

重置按钮：<INPUT name=B1 type=reset value=Reset>

复选框：你喜欢哪些教程：

<INPUT name=C1 type=checkbox value=ON>Html入门

<INPUT CHECKED name=C2 type=checkbox value=ON>动态Html

<INPUT name=C3 type=checkbox value=ON>ASP

图像来代替Submit按钮：

<INPUT border=0 height=20 name=I2 src="../../imge/nnn.gif" type=image width=65>

密码的区域：

<INPUT class=nine name=p1 type=password> </P>

单选按钮:你的休闲爱好是什么：

<INPUT CHECKED name=R1 type=radio value=V1>音乐

<INPUT name=R1 type=radio value=V2>体育

<INPUT name=R1 type=radio value=V3>旅游

</form>

</pre>

<a href="#" onClick="window.history.back()"><FONT size=4>返回</FONT></A>

</SUB>

</pre>

</body>

</html>

显示结果

<input>控件的使用

            
     
     
      
      
                单行的文本输入区域：
      
        
                普通按钮：
      
       
                提交按钮：
      
       
                重置按钮：
      
       
                复选框：你喜欢哪些教程：
                     
      
      Html入门 
                     
      
      动态Html  
                 
      
      ASP  
                图像来代替Submit按钮：
                     
      
      
                    密码的区域：
                     
      
       
      
      
                单选按钮:你的休闲爱好是什么：
                     
      
      音乐 
                     
      
      体育
                     
      
      旅游

10-3 菜单下拉列表框 <select></select><option>

<select> </select> 标志对用来创建一个菜单下拉列表框。此标志对用于 <form> </form>标志对之间。 <select>具有 multiple、 name 和 size 属性。

multiple 属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选的了；

name 是此列表框的名字，它与上边讲的 name 属性作用是一样的；

size 属性用来设置列表的高度，缺省时值为1，若没有设置(加入) multiple 属性，显示的将是一个弹出式的列表框。

<option> 标志用来指定列表框中的一个选项，它放在 <select> </select> 标志对之间。此标志具有 selected 和 value 属性，

selected 用来指定默认的选项，

value 属性用来给 <option> 指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用 <select>区域的名字的 value属性来获得该区域选中的数据项的。

实例：10-3-1.html

<html>

<head>

<title>下拉列表框</title>

</head>

<body>

<form action="" method="post">

<p>请选择最喜欢的男歌星: <select name="gx1" size="1">

<option value="ldh">刘德华

<option value="zhxy" selected>张学友

<option value="gfch">郭富城

<option value="lm">黎明

</select>

</form>

</body>

</html>

显示结果

请选择最喜欢的男歌星:

实例：10-3-2.html

<html>

<head>

<title>复选的列表框</title>

</head>

<body>

<form action="" method="post">

<p>请选择最喜欢的女歌星: <select name="gx2" multiple size="4">

<option value="zhmy">张曼玉

<option value="wf" selected>王菲

<option value="tzh">田震

<option value="ny">那英

</select>

</form>

</body>

</html>

显示结果

请选择最喜欢的女歌星:

10-4 多行的文本框. <textarea></textarea>

<textarea></textarea>用来创建一个可以输入多行的文本框，此标志对用于 <form></form>标志对之间。 <textarea>具有以下属性：

(1) onchange 指定控件改变时要调用的函数

(2) onfocus 当控件接受焦点时要执行的函数

(3) onblur 当控件失去焦点时要执行的函数

(4) onselect 当控件内容被选中时要执行的函数

(5) name 这文字区块的名称，作识别之用，将会传及 CGI。

(6) cols 这文字区块的宽度。

(7) rows 这文字区块的列数，即其高度。

(8) wrap 属性定义输入内容大于文本域时显示的方式， 可选值如下：

* 默认值是 文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；

*Off，用来 避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动；

*Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；

*Physical， 让文本换行，当数据被提交处理时换行符也将被一起提交处理。

这里列与行是以字符数为单位的。

实例：10-4.html

<html>

<head>

<title>多行的文本框</title>

</head>

<body>

<form action="" method="post">

<p>您的意见对我很重要: <textarea name="yj" clos="20" rows="5"> 请将意见输入此区域 </textarea>

</form>

</body>