第一章HTML概述与基本结构
目前大部分的网页都是用HTML配合其它语言写成的。本章使用html语言来制作网页，而现在的很多网页制作工具软件，比如FrontPage、DreamWave,.net等，可自动生成一些固定格式的网页元素，在学习本章的过程中，不要一味去死记这些标识内容，我们学习这html语言的主要目的不是要大家完全使用html语言来制作一个完整的网页，而是掌握其基本语法格式后应用到动态程序中去。在学习过程中，我们要结合动态程序asp.net的方法来应用这些标识。
如果用html完全编写网页，那是过时了；如果不懂html语言那是学网页的无知，更谈不上灵活运用动态程序asp.net,php等。
一、HTML的概述
HTML（HyperTextMarkupLanguage的缩写），即超文本链接标记语言。它是在互联网发布超文本文件(通常所说的网页)的通用语言。所谓超文本，就是它可以加入图片、声音、动画、影视等内容，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML标记，这些标记并不是一种程序语言，它只是一种排版网页中资料显示位置的标记语言。每个标记的符号都是一条命令、它告诉浏览器如何显示文本。这些标记均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标记符号用“<标记名字属性>”来表示。
二、HTML的基本结构：
一个HTML文档是由一系列的元素和标记组成。元素名不区分大小写，HTML用标记来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
下面是一个最基本的html文档的代码:1－1.html
<HTML>---------------------------------------- 开始标记
<HEAD>-------------------------------------- 头部标记
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>--------------------------------------
<BODY>---------------------------------------- 文件主体
<CENTER>|
<H1>欢迎光临我的主页</H1>
<BR>
<HR>
<FONTSIZE=7COLOR=red>|
这是我第一次做主页|
</FONT>|
</CENTER>|
</BODY>
</HTML>---------------------------------------结尾标记
（1）<HTML></HTML>在文档的最外层，文档中的所有文本和html标记都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。
（2）<HEAD></HEAD>是HTML文档的头部标记,在浏览器窗口中，头部信息是不被显示在正文中的,在此标记中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。该标记可以省略。
（3）<title></title>是嵌套在<HEAD>头部标记中的，标记之间的文本是文档标题，它被显示在浏览器窗口的标题栏。该标记可以省略。
（4）<BODY></BODY>标记一般不能省略，标记之间的文本是正文，是在浏览器要显示的页面内容。
上面的这几对标记在文档中都是唯一的，HEAD标记和BODY标记是嵌套在HTML标记中的。
三、HTML的标记与属性:
对于刚刚接触超文本的读者，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标记，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。属性是标志里的参数的选项。
HTML的标记分单标记和成对标记两种。成对标记是由首标记<标记名>和尾标记</标记名>组成的，成对标记的作用域只作用于这对标记中的文档。单独标记的格式<标记名>，单独标记在相应的位置插入元素就可以了，大多数标记都有自己的一些属性,属性要写在始标记内，属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：
<标记名字属性1属性2属性3…>内容</标记名字>
属性值可以不用加双引号，但是为了适应XHTML规则，提倡全部对属性值加双引号。如：
<fontcolor="#ff00ff"face="宋体"size="30">字体设置</font>
第二章HTML主体标记及属性、颜色的设定
为了使网页绚丽多姿，吸引更多的浏览者阅读，可以给网页添加更多的标记及属性，这是为了对网页中的元素进行修饰、布局。下面就来逐一介绍这些标记。
一、html的主体标记<body>
在<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。
<body>标记有自己的属性，设置<body>标记内的属性，可控制整个页面的显示方式。
<body>标记的属性
属性描述:
link 设定页面默认的链接颜色
alink 设定鼠标正在单击时的链接颜色
vlink 设定访问后链接文字的颜色
background 设定页面背景图像
bgcolor 设定页面背景颜色
leftmargin 设定页面的左边距
topmargin 设定页面的上边距
bgproperties 设定页面背景图像为固定，不随页面的滚动而滚动
text 设定页面文字的颜色
格式：
<body text="#000000" link="#000000" alink="#000000" vlink="#000000" background="gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed">
实例：2-1.html
<html>
<head>
<title>bady的属性实例</title>
</head>
<bodybgcolor="#FFFFE7"text="#ff0000"link="#3300FF"alink="#FF00FF"vlink="#9900FF">
<center>
<h2>
设定不同的链接颜色
</h2>
<p>测试body标记</p>
<a href="http://www.baidu.com/">各种链接颜色</a>
<br/>
</center>
</body>
</html>
实例说明：
<body>的属性设定了页面的背景颜色，文字的颜色，链接的颜色为#3300ff，单击的链接颜色为#ff00ff，单击过后的颜色为#9900ff。
对于上面的属性在后面的章节中还会介绍，在这里就不逐一引用了，我们的学习目的主要是掌握标记及属性的使用方法。
二、颜色的设定
颜色值是一个关键字或一个RGB格式的数字。在网页中用得很多，在此就先介绍一下。
颜色是由"red""green""blue"三原色组合而成的，在HTML中对颜色的定义是用十六进位的，对于三原色HTML分别给予两个十六进位去定义。例如：
白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff
红色的组成是red=ff,green=00,blue=00,RGB值即为ff0000
黑色的组成是red=00,green=00,blue=00,RGB值即为000000
应用时常在每个RGB值之前加上“#“符号，如：bgcolor="#336699"用英文名字表示颜色时直接写名字。如bgcolor="green"。
第三章 文字版面的编辑
3-1换行标记
换行标记是个单标记，也叫空标记，不包含任和内容，在html文件中的任何位置只要使用了
标记，该标记之后的内容将显示在下一行。
请看下面的例子：3-1
<html>
<body>
无换行标记：白日依山尽，黄河入海流。
<br>
有换行标记：<br>
白日依山尽，<br>
黄河入海流。
</body>
</html>
3-2换段落标记<p>及属性：
由<p>标记所标识的文字，表明是同一个段落的文字。两个段落间的间距等于连续加了两个换行符，也就是要隔一行空白行。
格式：
<P>
<PALIGN=参数>
其中,ALIGN是<p>标记的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左，中，右位置的对齐方式。
实例:3-2
<html>
<body>
<p>
这是<br />
第一段。
</p>
<p>第二段。</p>
<p align="center"> 第三段。</p>
</body>
</html>
3-3原样显示文字标记<pre>
要保留原始文字排版的格式,就可以通过<pre>标记来实现，方法是把制作好的文字排版内容前后分别加上始标记<pre>和尾标记</pre>。
实例:3-3
<HTML>
<BODY>
<PRE>
白日依山尽，
黄河入海流。
</PRE>
</BODY>
</HTML>
3-4居中对齐标记<center>
在页面中使用<center>标记进行居中显示,<center>是成对标记,在需要居中的内容部分开头处加<center>,结尾处加</center>。
实例：3-4
<html>
<head>
<title>居中对齐标记</title>
</head>
<body>
<center>
<p>《送孟浩然之广陵》<p/>
故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧山尽，惟见长江天际流。
</center>
</body>
</html>
3-5水平分隔线标记
<hr>标记是单独使用的标记，是水平线标记。通过设置<hr>标记的属性值，可以控制水平分隔线的样式。
<hr>标记的属性
属性 参数 功能 单位 默认值
size 设置水平分隔线的粗细 pixel(像素） 2
width 设置水平分隔线的宽度 pixel(像素）、% 100%
align Left center right 设置水平分隔线的对齐方式 center
color 设置水平分隔线的颜色 black
noshade 取消水平分隔线的3d阴影
实例：3-5
<html>
<head>
<title>测试水平分隔线标记</title>
</head>
<body>
<center>
春晓
<hr size="1" width="20%" align="center" noshade color="red">
春眠不觉晓，<br >
处处闻啼鸟。<br>
夜来风雨声，<br>
花落知多少？
</center>
</body>
</html>
3-6特殊字符
在HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如"<"等，为防止代码混淆，必须用一些代码来表示它们。
HTML几种常见特殊字符及其代码表
特殊或专用字符 字符代码 特殊或专用字符 字符代码
< < © ©
> > × ×
& & ® ®
" " 空格
实例：3-6
<html>
<head>
<title>特殊字符</title>
</head>
<body>
<center />
<这是我的e家>
<p></p>
Copyright © 2008 中国e家
</body>
</html>
3-7注释标记
在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。
注释标记的格式有如下：
实例:3-7
<html>
<body>
<!--body标记是主体内容-->
<赋得古原草送别>
<pre>
<! pre代表原样显示排版格式>
离离原上草，
一岁一枯荣。
野火烧不尽，
春风吹又生。
</pre>
</body>
</html>
3-8字体属性
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>
</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-2
<html>
<body>
<font face="黑体" size="6" color="red">盼望着，盼望着，东风来了，春天脚步近了。</font>
</body>
</html>
3-10-3特定文字样式标记
在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。
(1)粗体标记<b>：放在<b>与</b>标记之间的文字将以粗体方式显示。
(2)斜体标记<i>：放在<i>与</i>标记之间的文字将以斜体方式显示。
(3)下划线标记<u>：放在<u>与</u>标记之间的文字将以下划线方式显示。
实例3-10-3
<html>
<body>
<center>
<font color="#FF0000" size="+2"><b>这些文字是粗体的</b></font><br />
<br>
<i>这些文字是斜体的</i>
<br>
<u>这些文字带有下划线</u>
</center>
</body>
</html>
第四章 建立超链接
HTML文件中最重要的应用之一就是超链接，超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画。
建立超链接的标记为: <A>…</A>
格式为：<A HREF="URL" TARGET="窗口名称" TITLE="标题文字">显示内容</A>
上述语法格式包含<A>标记的以下基本属性：
（1）HREF：该属性是必选项，用于指定目标端点的URL地址，可以包含一个或多个参数。具体地，如果是与站点以外页面链接的情况，就为URL；如果是与站点内页面链接，则为文件名。
（2）TARGET：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。如果省略该属性，则目标文档将取代包含该超链接的文档。TARGET属性的取值既可以是窗口或框架的名称，也可以用“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中；用“_parent”指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中；用“_self”指定将链接的目标文件加载到链接所在的同一框架或窗口中，这是默认值；用“_top”指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。
（3）TITLE：该属性也是可选项，用于指定指向超链接时所显示的标题文字
4-1 链接路径
路径是指从站点根文件夹或当前文件夹到目标文件所经过的路线，可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型：
（1）绝对路径：也称为绝对URL，它给出目标文件的完整URL地址，包括传输协议在内。如果要链接的文件位于外部服务器上，则必须使用绝对路径。
（2）相对路径：也称为相对URL，是指以当前文档所在位置为起点到目标文档所经过的路径。若要将当前文档与处在同一文件夹中的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。
（3）根相对路径：是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。
4-2 超链接的应用
1. 超链接的形式
按照目标端点的不同，可以将超链接分为以下几种常见形式。
文件超链接：这种链接的目标端点是一个文件，当然包括各种文件，如页面文件，它可以位于当前网页所在的服务器上，此时可称为“站点内页面的链接”，也可以位于其他服务器，此时可称为“与站点外页面的链接”。
书签超链接：这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。
E-mail链接：通过这种链接可以启动电子邮件客户端程序(如Outlook或FoxMail等)，并允许访问者向指定的地址发送邮件。
图像超链接：这种链接是在图像上建立若干个区域称为“链接区”，通过它可以跳转到其他目标端点去。
2．常见链接的创建
(1) 创建文件链接
在HTML语言中，可以使用<A>标记来创建超链接，基本语法格式如下：
<A HREF = "字符串" TARGET = "字符串" TITLE = "字符串">文本</A>
(2) 创建书签链接
创建书签链接时，要在页面的某处设置一个位置标记(即所谓书签)，并给该位置指定一个名称，以便在同一页面或其他页面中引用。通过创建书签链接，可以使超链接指向当前页面或其他页面中的指定位置。若要创建书签链接，首先在页面中为需要跳转的位置命名，即在该位置上放置一个A标记并通过NAME属性为该位置指定一个名称，一般不要在<A>和</A>标记之间放置任何文字。例如，可以使用A标记在test.htm页面顶部创建一个书签：
<P><A NAME = "top"></A></P>
创建书签后，可以使用A标记来创建指向该书签的超链接。例如，要在同一个页面中跳转到名为“top”的书签处，可以使用以下HTML代码：
<P><A HREF = "#top">返回顶部</A></P>
若要在其他页面中跳转到该书签，则使用以下HTML代码：
<P><A HREF = "test.htm#top">跳转到test.htm页的顶部</A></P>
(3) 创建邮件链接
使用A标记创建邮件链接，该标记的HREF属性应由三个部分组成：第一部分是电子邮件协议名称mailto，第二部分是电子邮件地址，第三部分是可选的邮件主题，其形式为“subject=主题”。第一部分与第二部分之间用冒号(:)分隔，第二部分与第三部分之间用问号(?)分隔。例如：
<A HREF = "mailto:tzsimple@163.com?subject=关于动态网站设计">给我写信</A>
当访问者在浏览器窗口中单击邮件链接时，将会自动启动电子邮件客户端程序(例如Outlook Express或FoxMail等)，并将指定的主题填入“主题”栏中。
(4) 创建图像超链接
图像的超链接与文本超链接差不多，就是将<A HREF=…>…</A>标记放在图片两端即可。例如语句：
<A HREF=Default.htm><img src="dysb.jpg" /></A>
当单击dysb.jpg图片时将转向Default.htm网页。
3．示例
超链接主要形式的示例(注：下面的“…”代表热点，即一般用鼠标指向时，鼠标指针变手形的区域)。
(1) 创建指向本地页面的链接
<A HREF="filename.html">…</A> (链接到本地磁盘上同一目录下的页面)
<A HREF="../../filename.html">…</A> (链接到本地磁盘上不同目录下的页面)
(2) 创建指向其他服务器的页面链接
<A HREF="http://server/path/filename.html">…</A>
(链接到Internet上其他服务器上的页面)
(3) 创建一个指向页面特定部分的链接
<A HREF="#fragment">…</A> (链接到本页面内的某指定位置)
<A HREF="http://server/path/filename.html #fragment">…</A>(链接到其他服务器上页面的某指定位置)
(4) 创建一个指向电子邮件的链接
<A HREF="mailto:username@domain">…</A>
第五章 建立列表
在html也面中，合理的使用列表标记可以起到提纲和格式排序文件的作用。
列表分为两类，一是无序列表，一是有序列表，无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标记，在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去。
5-1 无序列表****<UL>
无序列表使用的一对标记是<ul></ul>，无序列表指没有进行编号的列表,每一个列表项前使用<LI>。<LI>的属性type有三个选项,这三个选项都必须小写:
disc实心园
circle空心园
square小方块
<ul>如果不使用其项目<li>的属性值,即默认情况下的<ul>会加"实心园"。
格式:
<ul>
<li type=disc>第一项
<li type=circle>第二项
<li type=square>第三项
<li>第四项
</ul>
示例 5-1
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表加"实心园"
<li type="square">无序列表square加方块
<li type="circle">无序列表circle加空心园
</ul>
</body>
</html>
5-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=1 表示列表项目用数字标号（1,2,3...）
type=A 表示列表项目用大写字母标号（A,B,C...）
type=a 表示列表项目用小写字母标号（a,b,c...）
type=I 表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ...）
type=i 表示列表项目用小写罗马数字标号（i,ii,iii...）
格式1
<ol type=编号类型 start=value>
<li>第1项
<li>第2项
</ol>
<ol>
<li>第1项
<li>第2项
</ol>
实例：5-2.html
<html>
<body>
<ol>
<li>默认的有序列表
<li>默认的有序列表
</ol>
<ol type="a" start="5">
<li>第1项
<li>第2项
<li value="20">第4项
</ol>
</body>
</html>
第六章 图像的处理
浏览器可以显示的图像格式有jpeg，bmp，gif，png。其中bmp文件存储容量大，不提倡用，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，文件容量比gif大，gif图像仅包括265色彩，虽然质量上没有jpeg图像高，但文件容量小，下载速度最快、支持动画效果及背景色透明等特点。PNG图像是网络图像中的通用格式，也是Fireworks软件的基本格式。它用一种无损压缩的方法，最多可支持32位颜色，但它不支持动画，如果没有相应的插件，有的浏览器可能不支持这种格式。因此使用图像美画页面可视情况而决定使用那种格式。
6-1网页中插入图片标记<img>
网页中插入图片用单标记<img>，如果要对插入的图片进行修饰时，还要配合其它属性来完成。
<IMG> 的格式及一般属性设定：
<img src="logo.gif" width=100 height=100 border=2 align="top" alt="Logo">
图片标记<img>的属性：
Src： 图像的url的路径
Alt： 提示文字
Width： 宽度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
Height： 高度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
Align； 图像和文字之间的排列属性
Border: 边框
6-2图像的超链接
6-3-1 图像的超链接
图像的链接和文字的链接方法是一样的，都是用<a>标记来完成，只要将<img>标记放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在<body>标记中设定。
实例：6-3-1
<html>
<body>
<a href="http://www.baidu.com/">
<img alt="百度搜索" src="../../imge/logo[2].gif"></a><p />
</body>
</html>
6-3用<img>标记插入avi文件
格式：<img dynsrc="avi文件地址">
<img>标记插入avi文件的属性
属性：描 述
Dynsrc：指定avi文件所在路径
Loop：设定avi文件循环次数
Loopdelay：设定avi文件循环延迟
Start：设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）
实例：6-３.html
<html>
<body>
<p align="center">
<img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover">
</p>
</body>
</html>
第七章TABLE表格
表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格
7-1定义表格的基本语法
在html文档中，表格是通过<table>,<th>,<tr>,<td>标记来完成的，如下表所示：
| 标签 | 描述 |
|---|---|
| <table>...</table> | 用于定义一个表格开始和结束 |
| <th>...</th> | 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标记，<th>标记必须放在<tr>标记内 |
| <tr>...</tr> | 定义一行标记，一组行标记内可以建立多组由<td>或<th>标记所定义的单元格 |
| <td>...</td> | 定义单元格标记，一组<td>标记将将建立一个单元格，<td>标记必须放在<tr>标记内 |
在一个最基本的表格中，必须包含一组<table>标记，一组标记<tr>和一组<td>标记或<th>。
7-2表格属性
（1) <table>标记的属性
表格标记<table>有很多属性，最常用的属性有：
width：表格的宽度
height：表格的高度
align：表格在页面的水平摆放位置
background：表格的背景图片
bgcolor：表格的背景颜色
border：表格边框的宽度（以像素为单位）
bordercolor：表格边框颜色
bordercolorlight：表格边框明亮部分的颜色
bordercolordark：表格边框昏暗部分的颜色
cellspacing：单元格之间的间距
cellpadding：单元格内容与单元格边界之间的空白距离的大小
（2) <tr>标记的属性
表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标记<tr>，行标记用它的属性值来修饰，属性都是可选的。<tr>标记的属性如下：
align：行内容的水平对齐
valign：行内容的垂直对齐
bgcolor：行的背景颜色
bordercolo：行的边框颜色
bordercolorlight：行的亮边框颜色
bordercolordark：行的暗边框颜色
<TR> 的参数设定（常用）：
实例：7-2-1.html
<HTML>
<HEAD>
<TITLE>表格的控制</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="80%" height="150">
<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>
（3) <td>标记的属性
<th>和<td>都是插入单元格的标记，这两个标记必须嵌套在<tr>标记内。是成对出现的。<th>用于表头标记，表头标记一般位于首行或首列，标记之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标记<td>就是该单元格中的具体数据内容,<th>和<td>标记的属性都是一样的，属性设定如下：
width/height：单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。
colspan：单元格向右打通的栏数
rowspan：单元格向下打通的列数
align：单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。
valign：单元格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
bgcolor：单元格的底色
bordercolor：单元格边框颜色
bordercolorlight：单元格边框向光部分的颜色
bordercolordark：单元格边框背光部分的颜色
background：单元格背景图片
（4) 设定跨多行多列单元格
要创建跨多行、多列的单元格，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。
跨多列的语法： <th colspan=#><td colspan=#>
colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。
跨多行的语法： <th rowspan=#><td rowspan=#>
rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。
7-3表格的标题标记<caption>
表格标题的位置，可由ALIGN属性和VALIGN属性来设置，ALIGN属性设置标题位于文档的左，中，右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。
语法格式：
<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="2">学生基本信息</th>
<th colspan="2"> 成 绩 </th>
</tr>
<tr align="center">
<th>姓 名 </th>
<th> 专 业 </th>
<th> 课 程 </th>
<th> 分 数 </th>
</tr>
<tr align="center">
<td> 蓉蓉 </td>
<td rowspan="2"> 计算机 </td>
<td rowspan="2"> 程序设计 </td>
<td>88 </td>
</tr>
<tr align="center">
<td> 喃 喃 </td>
<td> 89 </td>
</tr>
</body>
</html>
7-4表格的嵌套
在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>标记有很多属性，用来定义元素的移动方式:
align：指定对齐方式top,middle,bottom
scroll：单向运动
slide：如幻灯片,一格格的，效果是文字一接触左边就停止。
alternate：左右往返运动
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>
</center>
</body>
</html>
8-2 插入多媒体文件
在网页中可以用<embed>标记将多媒体文件插入，比如可以插入音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、mp3、AIFF、AU格式等；视频有avi，swf等。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。但要说明一点，虽然我们用代码标记插入了多媒体文件，但IE浏览器通常能自动播放某些格式的声音与影像，但具体能播放什么样格式的文件。取决于所用计算机的类型以及浏览器的配置。浏览器仅仅能播放几种文件格式，通常是调用称为插件的内置程序来播放的。是插件扩展了浏览器的能力。有时，不得不分别下载每个浏览器的多媒体插件程序，比如使用下载Adobe Flash Player播放swf动画。
<embed>标记的使用格式：
<EMBED SRC="文件地址">
常用属性如下：
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：设定播放控件面板的样子
实例 8-2-1
<html>
<head>
<title>插入flash</title>
</head>
<body bgcolor=maroon>
<h2 align="CENTER">网页中的多媒体</h2>
<hr>
<center>
<embed src="dh.swf" height="500" width="550"><!--插入flash-->
<embed src="dh.swf" height="500" width="550" wmode="transparent"><!--插入透明flash-->
</center>
</body>
</html>
8-3嵌入多媒体文件
除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，这种方式将不调用媒体播放器
8-3-1 嵌入背景音乐
<bgsound>标记用来设置网页的背景音乐。但只适用于IE，其参数设定不多。格式如下：
<BGSOUND src="your.mid" autostart=true loop=infinite>
autostart=true，表示是否在音乐文件传完之后，就自动播放音乐。true是，false否 (内定值)。
loop=infinite，表示是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复多次。直到网页关闭为止。
<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="路径">,在此就不重述了。
第九章 多视窗口框架
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文件（这个文件必须事先做好）地址，地址路径可使用绝对路径或相对路径，这个文件将载入相应的窗口中。
9-2 框架集<frameset>标记
<frameset>的属性:
border：设置边框粗细,默认是5象素.
bordercolor：设置边框颜色
frameborder：指定是否显示边框 ："0"代表不显示边框，"1"代表显示边框
cols：用"象素数" 和 "%"分割左右窗口,""表示剩余部分
rows：用"象素数" 和 "%"分割上下窗口,""表示剩余部分
framespacing="5"：表示框架与框架间的保留空白的距离
noresize：设定框架不能够调节，只要设定了前面的，后面的将继承
- 左右分割窗口属性：cols
如果想要在水平方向将浏览器分割多个窗口，这需要使用到框架集的左右分割窗口属性cols。分割几个窗口其cols的值就有几个，值的定义为宽度，可以是数字(单位为像素)，也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用""号表示，剩余值表示所有窗口设定之后的剩余部分，当""只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当"*"出现一次以上时，表示按比例分割剩余的窗口空间。cols的默认值为一个窗口。
如：
<frameset cols="40%,2*,*"> 将窗口分为40%，40%，20%
<frameset cols="100,200,*">
<frameset cols="100,*,*"> 将100像素以外的窗口平均分配
<frameset cols="*,*,*"> 将窗口分为三等份
- 上下分割窗口属性：rows
上下分割窗口的属性设置和左右窗口的属性设定是一样的，参照上面所述就可以了。
第十章 表单的设计
表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。
表单中主要包括下列元素：
button——普通按钮
radio ——单选按钮
checkbox——复选框
select ——下拉式菜单
text ——单行文本框
textarea——多行文本框
submit——提交按钮
reset—— 重填按钮
用HTML设计表单常用的标记是：<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等标记。
1、<form>表单标记
该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
其中action：用于设定处理表单数据程序url的地址，采用电子邮件方式时，用action="mailto:你的邮件地址"。
method：用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB（255个字节）以下。POST方式传送的数据比较大，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。
name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。
target：指定输入数据结果显示在那个窗口，这需要与<frame>标记配合使用。
2、<input>表单输入标记
此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。
name：设定当前变量名称。
type：决定了输入数据的类型。其选项较多，各项的意义是：
type=text：表示输入单行文本；
typet=textarea：表示输入多行文本；
type=password:表示输入数据为密码，用星号表示；
type－checkbox：表示复选框；
type－radio：表示单选框；
type一submit：表示提交按钮，数据将被送到服务器；
tyPe－reset：表示清除表单数据，以便重新输入；
type－file：表示插入一个文件；
type－hidden：表示隐藏按钮；
type＝image：表示插入一个图像；
type一button：表示普通按钮；
value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
src：是针对type=image的情况来说的，设定图像文件的地址；
checked：表示选择框中，此项被默认选中；
maxlength：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
onclick：表示在按下输入时调用指定的子程序；
onselect：表示当前项被选择时调用指定的子程序。
3、<select>下拉菜单标记
用<select>标记可以在表间中插入一个下拉菜单，它需与<option>标记联用，因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：
<select
name=nametext
size=n
multiple>
其中name：设定下拉式菜单的名称；
size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size="1"）；
multiple：设定为可以进行多选。
4、<option>选项标记
该标记为下拉菜单中一个选项，语法很简单：
<option
selected
value=value>
其中selected：表示当前项被默认选中；
value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。
5、<textarea>多行文本输入标记
这是一个建立多行文本输入框的专用标记，其语法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。
第十一章 XHTML和DHTML
1 什么是XHTML
简单点说，XHTML就是严谨而准确的HTML。如果说HTML是汉语，那么XHTML就是标准普通话。
复杂点说：XHTML是HTML的“升级规范”产品，其中"X"是代表可扩展的，是单词"extensible"的缩写。事实上它也属于HTML家族，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。X代表“可以扩展的”。
在我们已经熟悉了使用HTML来开发网站之后，本文就介绍XHTML区别于HTML的一些规则。以方便读者由HTML转向XHTML。现在W3C推荐大家使用XHTML来代替HTML。
2 XHTML区别于HTML的规则如下：
1.XHTML文件的开始要声明DTD。
我们制作的网页如果使用XHTML的规则，当然要使用XHTML的DTD。XHTML1.0提供了三种DTD声明可供选择：
（1）过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（2）严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（3）框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
在vs2008的html中声明过渡的DTD，如果您想了解更多关于DTD的内容需要学习XML，本教程中不做过多讨论。
2.你需要为你的<html>标签添加一个命名空间。
在<html>标签里添加如下属性：xmlns="http://www.w3.org/1999/xhtml"。这个叫做命名空间属性，属于XML范畴，我们这里仍然不做过多的讨论。
XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是“http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。后面的lang="gb2312",指定你的文档用简体中文。
3.所有的标签和标签的属性都必须小写，属性值可以大写。
4.属性值必须用引号括起来。单引号双引号均可。
5.所有的标签都必须被关闭，空标签也不例外。
关闭空标签的方法如下：
HTML中的
要写成<br />。注意，后面加了一个空格”“和一个反斜杠”/“。
6.如果你使用的是strict.dtd。也就是最严格的XHTML，那么许多定义外观的属性都将不被允许。
例如你为图片添加链接的同时想去掉边框。不可以再使用<img src="..."border="0">，而是必须通过CSS来实现。我们推荐您在使用strict.dtd时，舍弃所有的定义外观属性，而完全使用CSS来定义页面外观.
7.每个图片都应该提供alt文本。
第十二章 其它技术
1、网页跳转
方案一
<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="0.1;url=http://www.dreamershop.com">
<title></title>
</head>
<body>
</body>
</html>
方案二
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在进入</title>
</head>
<body>
<form name="loading">
<p align="center">
<font color="#0066ff" size="2">正在进入，请稍等</font>
<font color="#0066ff" size="2" face="Arial">...</font>
<input type="text" name="chart" size="46" style="font-family: Arial; font-weight: bolder;
color: #0066ff; background-color: #fef4d9; padding: 0px; border-style: none;">
<input type="text" name="percent" size="47" style="color: #0066ff; text-align: center;
border-width: medium; border-style: none;">
<script>
var bar=0
var line="||"
var amount="||"
count()
function count()
{
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",100);}
else
{window.location = "http://www.dreamershop.com";}
}
</script>
</p>
</form>
<p align="center">
如果您的浏览器不支持跳转,<a style="text-decoration: none" href="http://www.dreamershop.com"><font
color="#FF0000">请点这里</font></a>.</p>
</body>
</html>
