第一章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示例
--------------------------------------
---------------------------------------- 文件主体
|
欢迎光临我的主页
|
这是我第一次做主页|
|
|
---------------------------------------结尾标记
（1）在文档的最外层，文档中的所有文本和html标记都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。
（2）
（3）
（4）标记一般不能省略，标记之间的文本是正文，是在浏览器要显示的页面内容。
上面的这几对标记在文档中都是唯一的，HEAD标记和BODY标记是嵌套在HTML标记中的。
三、HTML的标记与属性:
对于刚刚接触超文本的读者，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标记，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。属性是标志里的参数的选项。
HTML的标记分单标记和成对标记两种。成对标记是由首标记<标记名>和尾标记组成的，成对标记的作用域只作用于这对标记中的文档。单独标记的格式<标记名>，单独标记在相应的位置插入元素就可以了，大多数标记都有自己的一些属性,属性要写在始标记内，属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：
<标记名字属性1属性2属性3…>内容
属性值可以不用加双引号，但是为了适应XHTML规则，提倡全部对属性值加双引号。如：
字体设置
第二章HTML主体标记及属性、颜色的设定
为了使网页绚丽多姿，吸引更多的浏览者阅读，可以给网页添加更多的标记及属性，这是为了对网页中的元素进行修饰、布局。下面就来逐一介绍这些标记。
一、html的主体标记
在
和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。标记有自己的属性，设置标记内的属性，可控制整个页面的显示方式。
标记的属性
属性描述:
link 设定页面默认的链接颜色
alink 设定鼠标正在单击时的链接颜色
vlink 设定访问后链接文字的颜色
background 设定页面背景图像
bgcolor 设定页面背景颜色
leftmargin 设定页面的左边距
topmargin 设定页面的上边距
bgproperties 设定页面背景图像为固定，不随页面的滚动而滚动
text 设定页面文字的颜色
格式：
实例：2-1.html
bady的属性实例
设定不同的链接颜色
测试body标记
各种链接颜色
实例说明：
对于上面的属性在后面的章节中还会介绍，在这里就不逐一引用了，我们的学习目的主要是掌握标记及属性的使用方法。
二、颜色的设定
颜色值是一个关键字或一个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
无换行标记：白日依山尽，黄河入海流。
有换行标记：
白日依山尽，
黄河入海流。
3-2换段落标记
及属性：
由
标记所标识的文字，表明是同一个段落的文字。两个段落间的间距等于连续加了两个换行符，也就是要隔一行空白行。
格式：
其中,ALIGN是
标记的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左，中，右位置的对齐方式。
实例:3-2
这是
第一段。
第二段。
第三段。
3-3原样显示文字标记
要保留原始文字排版的格式,就可以通过
标记来实现，方法是把制作好的文字排版内容前后分别加上始标记和尾标记。
实例:3-33-4居中对齐标记
在页面中使用
标记进行居中显示, 是成对标记,在需要居中的内容部分开头处加 ,结尾处加 。
实例：3-4居中对齐标记 《送孟浩然之广陵》
故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧山尽，惟见长江天际流。3-5水平分隔线标记
标记是单独使用的标记，是水平线标记。通过设置
标记的属性值，可以控制水平分隔线的样式。
标记的属性 属性 参数 功能 单位 默认值 size 设置水平分隔线的粗细 pixel(像素） 2 width 设置水平分隔线的宽度 pixel(像素）、% 100% align Left center right 设置水平分隔线的对齐方式 center color 设置水平分隔线的颜色 black noshade 取消水平分隔线的3d阴影实例：3-5
测试水平分隔线标记 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少？3-6特殊字符
在HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如"<"等，为防止代码混淆，必须用一些代码来表示它们。
HTML几种常见特殊字符及其代码表 特殊或专用字符 字符代码 特殊或专用字符 字符代码 < < © © > > × × & & ® ® " " 空格实例：3-6
特殊字符 <这是我的e家> Copyright © 2008 中国e家 3-7注释标记
在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。
注释标记的格式有如下：
实例:3-7<赋得古原草送别>离离原上草， 一岁一枯荣。 野火烧不尽， 春风吹又生。3-8字体属性
3-10-1标题文字标记标记用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。 标题标记的格式： 说明： 标记是成对出现的， 标记共分为六级，在 ...
之间的文字就是第一级标题，是最大最粗的标题；...
之间的文字是最后一级，是最小最细的标题文字。 align属性用于设置标题的对齐方式，其参数为 left（左）， enter（中)， right (右）。标记本身具有换行的作用，标题总是从新的一行开始。 实例 3-10-1html
设定各级标题 一级标题。
二级标题。
三级标题。
3-10-2文字格式控制标记
标记用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。 FONT标记的属性 属性 使用功能 默认值 face 设置文字使用的字体 宋体 size 设置文字的大小 3 color 设置文字的颜色 黑色 格式： 说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体。size属性的取值为1~7。也可以用"+"或"-"来设定字号的相对值。color属性的值为：rgb颜色"#nnnnnn"或颜色的名称。实例：3-10-2
盼望着，盼望着，东风来了，春天脚步近了。3-10-3特定文字样式标记
在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。
(1)粗体标记：放在与标记之间的文字将以粗体方式显示。
(2)斜体标记：放在与标记之间的文字将以斜体方式显示。
(3)下划线标记：放在与标记之间的文字将以下划线方式显示。
实例3-10-3这些文字是粗体的
这些文字是斜体的
这些文字带有下划线第四章 建立超链接
HTML文件中最重要的应用之一就是超链接，超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画。
建立超链接的标记为: … 格式为：显示内容上述语法格式包含标记的以下基本属性：
（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语言中，可以使用标记来创建超链接，基本语法格式如下：
文本(2) 创建书签链接
创建书签链接时，要在页面的某处设置一个位置标记(即所谓书签)，并给该位置指定一个名称，以便在同一页面或其他页面中引用。通过创建书签链接，可以使超链接指向当前页面或其他页面中的指定位置。若要创建书签链接，首先在页面中为需要跳转的位置命名，即在该位置上放置一个A标记并通过NAME属性为该位置指定一个名称，一般不要在和标记之间放置任何文字。例如，可以使用A标记在test.htm页面顶部创建一个书签：
创建书签后，可以使用A标记来创建指向该书签的超链接。例如，要在同一个页面中跳转到名为“top”的书签处，可以使用以下HTML代码：
若要在其他页面中跳转到该书签，则使用以下HTML代码：
(3) 创建邮件链接
使用A标记创建邮件链接，该标记的HREF属性应由三个部分组成：第一部分是电子邮件协议名称mailto，第二部分是电子邮件地址，第三部分是可选的邮件主题，其形式为“subject=主题”。第一部分与第二部分之间用冒号(:)分隔，第二部分与第三部分之间用问号(?)分隔。例如：
给我写信当访问者在浏览器窗口中单击邮件链接时，将会自动启动电子邮件客户端程序(例如Outlook Express或FoxMail等)，并将指定的主题填入“主题”栏中。
(4) 创建图像超链接
图像的超链接与文本超链接差不多，就是将…标记放在图片两端即可。例如语句：
当单击dysb.jpg图片时将转向Default.htm网页。
3．示例
超链接主要形式的示例(注：下面的“…”代表热点，即一般用鼠标指向时，鼠标指针变手形的区域)。
(1) 创建指向本地页面的链接
… (链接到本地磁盘上同一目录下的页面) … (链接到本地磁盘上不同目录下的页面)(2) 创建指向其他服务器的页面链接
…(链接到Internet上其他服务器上的页面)
(3) 创建一个指向页面特定部分的链接
… (链接到本页面内的某指定位置) …(链接到其他服务器上页面的某指定位置)(4) 创建一个指向电子邮件的链接
…第五章 建立列表
在html也面中，合理的使用列表标记可以起到提纲和格式排序文件的作用。
列表分为两类，一是无序列表，一是有序列表，无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标记，在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去。
5-1 无序列表****
无序列表使用的一对标记是
，无序列表指没有进行编号的列表,每一个列表项前使用
。 的属性type有三个选项,这三个选项都必须小写:
disc实心园
circle空心园
square小方块
如果不使用其项目
- 的属性值,即默认情况下的
会加"实心园"。
格式:
- 第一项
- 第二项
- 第三项
- 第四项
示例 5-1
无序列表
- 默认的无序列表加"实心园"
- 无序列表square加方块
- 无序列表circle加空心园
5-2 有序列表
有序列表和无序列表的使用格式基本相同，它使用标记
，每一个列表项前使用
- 。
列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。
顺序编号的设置是由
的两个属性type和start来完成的。start=编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在
- 标记中设定value＝"n"改变列表行项目的特定编号，例如
- 。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。为了使用这些属性，把它们放在
或
- 的的初始标记中。
有序列表type的属性：
type=1 表示列表项目用数字标号（1,2,3...） type=A 表示列表项目用大写字母标号（A,B,C...） type=a 表示列表项目用小写字母标号（a,b,c...） type=I 表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ...） type=i 表示列表项目用小写罗马数字标号（i,ii,iii...）格式1
- 第1项
- 第2项
- 第1项
- 第2项
实例：5-2.html
- 默认的有序列表
- 默认的有序列表
- 第1项
- 第2项
- 第4项
第六章 图像的处理
浏览器可以显示的图像格式有jpeg，bmp，gif，png。其中bmp文件存储容量大，不提倡用，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，文件容量比gif大，gif图像仅包括265色彩，虽然质量上没有jpeg图像高，但文件容量小，下载速度最快、支持动画效果及背景色透明等特点。PNG图像是网络图像中的通用格式，也是Fireworks软件的基本格式。它用一种无损压缩的方法，最多可支持32位颜色，但它不支持动画，如果没有相应的插件，有的浏览器可能不支持这种格式。因此使用图像美画页面可视情况而决定使用那种格式。
6-1网页中插入图片标记
网页中插入图片用单标记
，如果要对插入的图片进行修饰时，还要配合其它属性来完成。
的格式及一般属性设定：
图片标记
的属性：
Src： 图像的url的路径
Alt： 提示文字
Width： 宽度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
Height： 高度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
Align； 图像和文字之间的排列属性
Border: 边框6-2图像的超链接
6-3-1 图像的超链接
图像的链接和文字的链接方法是一样的，都是用标记来完成，只要将
标记中设定。标记放在和只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在
实例：6-3-1
6-3用
标记插入avi文件
格式：
标记插入avi文件的属性
属性：描 述
Dynsrc：指定avi文件所在路径
Loop：设定avi文件循环次数
Loopdelay：设定avi文件循环延迟
Start：设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）实例：6-３.html
![]()
第七章TABLE表格
表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格
7-1定义表格的基本语法
在html文档中，表格是通过
,
, , 标记来完成的，如下表所示：
标签 描述 ...
用于定义一个表格开始和结束 ... 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标记， 标记必须放在 标记内 ... 定义一行标记，一组行标记内可以建立多组由 或 标记所定义的单元格 ... 定义单元格标记，一组 标记将将建立一个单元格， 标记必须放在 标记内 在一个最基本的表格中，必须包含一组
标记，一组标记
和一组 标记或 。 7-2表格属性
（1)
标记的属性
表格标记
有很多属性，最常用的属性有：
width：表格的宽度
height：表格的高度
align：表格在页面的水平摆放位置
background：表格的背景图片
bgcolor：表格的背景颜色
border：表格边框的宽度（以像素为单位）
bordercolor：表格边框颜色
bordercolorlight：表格边框明亮部分的颜色
bordercolordark：表格边框昏暗部分的颜色
cellspacing：单元格之间的间距
cellpadding：单元格内容与单元格边界之间的空白距离的大小（2)
标记的属性 表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标记
，行标记用它的属性值来修饰，属性都是可选的。 标记的属性如下： align：行内容的水平对齐
valign：行内容的垂直对齐
bgcolor：行的背景颜色
bordercolo：行的边框颜色
bordercolorlight：行的亮边框颜色
bordercolordark：行的暗边框颜色的参数设定（常用）： 实例：7-2-1.html
表格的控制
姓 名 性 别 年 龄 专 业 咚 咚 男 18 学 生 楠 楠 女 17 学 生 （3)
标记的属性 和 都是插入单元格的标记，这两个标记必须嵌套在 标记内。是成对出现的。 用于表头标记，表头标记一般位于首行或首列，标记之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标记 就是该单元格中的具体数据内容, 和 标记的属性都是一样的，属性设定如下：
width/height：单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。
colspan：单元格向右打通的栏数
rowspan：单元格向下打通的列数
align：单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。
valign：单元格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
bgcolor：单元格的底色
bordercolor：单元格边框颜色
bordercolorlight：单元格边框向光部分的颜色
bordercolordark：单元格边框背光部分的颜色
background：单元格背景图片（4) 设定跨多行多列单元格
要创建跨多行、多列的单元格，只需在
或 中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。 跨多列的语法：
colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。跨多行的语法：
rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。7-3表格的标题标记
表格标题的位置，可由ALIGN属性和VALIGN属性来设置，ALIGN属性设置标题位于文档的左，中，右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。
语法格式：
表格标题 应放在 标记内，在表格行标记
标记之前。 标记的默认属性是标题位于表格的上方中间位置。 实例：7-7.html
表格的标题标记
学生信息表 学生基本信息 成 绩 姓 名 专 业 课 程 分 数 蓉蓉 计算机 程序设计 88 喃 喃 89 7-4表格的嵌套
在html页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。
实例7-8.html
表格嵌套
网页标志
标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 内容六
内容一 内容二
内容三 内容四 内容五 第八章网页的动态、多媒体效果
在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。
8-1 滚动字幕
滚动字幕
8-2 插入多媒体文件
在网页中可以用
实例 8-2-1
插入flash 网页中的多媒体
8-3嵌入多媒体文件
除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，这种方式将不调用媒体播放器
8-3-1 嵌入背景音乐
标记用来设置网页的背景音乐。但只适用于IE，其参数设定不多。格式如下： autostart=true，表示是否在音乐文件传完之后，就自动播放音乐。true是，false否 (内定值)。
loop=infinite，表示是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复多次。直到网页关闭为止。
实例 8-3-1.html
背景声音 网页的背景声音
背景音乐可以放在
或之间8-3-2 在网页中嵌入视屏文件使用前面学过的标记
,在此就不重述了。
第九章 多视窗口框架
9-1 框架的含义和基本构成
框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。
被框架集标记
而所有的框架标记 要放在一个 html 文档中。html页面的文档体标记