第一章 WEB开发基础
本章概要：
本章主要阐述了进行WEB开发所需要必备的技术储备(XHTML/JavaScript/CSS)。
XHTML、CSS、JavaScript是DHTML的基本组成部分，它们以成为现代网页设计中必不可少的关键要素。但是由于种种原因，真正精通XHTML/JavaScript/CSS却绝非易事。在使用与开发网站时，会遇到形形色色的问题，而解决方案又五花八门，往往让使用者感觉头晕目眩，本章将带着你从头至尾的了解与学习现代B/S开发的基础。
知识结构：
第一节 WEB开发技术简介
1. WEB技术概述
u 什么是网页
网页(Web Page)实际是一个文件，存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的，称为Web服务器。网页经由网址来识别与存取，当在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到使用者的计算机，然后再通过浏览器解释网页的内容，再展示到用户的面前。
图1-1 WEB页面工作机制
网页的两个最基本的元素是文字与图片。可以简单的理解为：文字，就是网页的内容;图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。在WEB应用中，存在两种页面：静态页面和动态页面。
u 静态页面
静态网页：是单向服务，如常见的新闻网页等。在这种服务中，WEB页面只能向用户显示预先编辑好的信息，用户只能查看页面不能有其他行为，以常见的HTML网页（文件后缀为.html或.htm）为主。
u 动态页面
动态网页：与静态网页相对应，动态网页提供的服务是双向的，它即可以向用户传递信息，也能够接受用户反馈，并根据反馈做出响应，常见的网页类型如.php、.asp、.aspx等。动态网页的应用非常广泛，如聊天室、论坛、电子商务应用等。
通常看到网页，都是以htm或html后缀结尾的文件，简称HTML文件，除此之外，还有例如以CGI、ASP、PHP、JSP甚至其他更多为后缀的网页类型，也代表了不同的网页开发技术。
2. 开发技术介绍
u HTML
HTML全称：HTML是Hypertext Marked Language的英文缩写,即超文本标记语言。是一种用来制作超文本文档的简单标记语言(制作网页的最基本的语言)，它是以标签为标记，每个标签都表示一种意义。通过浏览器软件可以让HTML代码还原（如：FireFox, IE等），浏览器从上至自下解读。如果标签写错，则忽略。不区分大小写。HTML文件必须使用html或htm为文件名后缀。
HTML编写的超文本文档(文件)称为HTML文档(网页),它能独立于各种操作系统平台(如UNIX,WINDOWS等,并且可以通知浏览器显示什么.自1990年以来HTML就一直被用作互联网的信息表示语言,用于描述网页的格式设计以及它与互联网上其它网页间的连结信息。
u DHTML
DHTML全称：DHTML是Dynamic Hyper Text Markup Language的英文缩写，即动态超文本标记语言。功能和HTML一样，只不过是结合了javascript、css等技术。确切地说，DHTML只是一种制作网页的概念，实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。
u XHTML
XHTML全称：XHTML是The Extensible HyperText Markup Language的英文缩写，即可扩展标识语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。XHTML恰恰就是HTML 4.0的重新组织，确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。 它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。
u PHP
PHP(Hypertext Preprocessor,超文本预处理器)，其优势在于其运行效率比一般的CGI程序要高，而且完全免费，任何人都可以从PHP官方部点http://www.php.net自由下载。PHP最大的特点就是和JSP一样是跨平台的，可以运行在Unix、Linux、Windows这三大平台上，并且在全世界有着广泛的用户群，性能高效安全性高，不过其OOP方面比ASP.NET和JSP要相差很多，并且由于其是Open Source软件所以商业文档与支持是没有的，所有的一切文档与支持都要靠开源世界来提供。
u JSP
JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件 (*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。
Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。
JSP与Java Servlet一样，是在服务器端执行的，通常返回该客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。
1． JSP技术的强势
（1）一次编写，到处运行。在这一点上Java比PHP更出色，除了系统之外，代码不用做任何更改。
（2）系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。相比PHP的局限性是现而易见的。
2． JSP技术的弱势
（1） 与ASP一样，Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能，为了极度的伸缩能力，所以极大的增加了产品的复杂性。
（2） Java的运行速度是用class常驻内存来完成的，所以它在一些情况下所使用的内存比起用户数量来说确实是“最低性能价格比”了。从另一方面，它还需要硬盘空间来储存一系列的.java文件和.class文件，以及对应的版本文件。
u ASP.NET
ASP.NET是Microsoft.NET的一部分，作为战略产品，不仅仅是 Active Server Page (ASP) 的下一个版本；它还提供了一个统一的 Web 开发模型，其中包括开发人员生成企业级 Web 应用程序所需的各种服务。ASP.NET 的语法在很大程度上与 ASP 兼容，同时它还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。可以通过在现有 ASP 应用程序中逐渐添加 ASP.NET 功能，随时增强 ASP 应用程序的功能。
ASP.NET 是一个已编译的、基于 .NET 的环境，可以用任何与 .NET 兼容的语言（包括 Visual Basic .NET、C# 和 JScript .NET.）创作应用程序。另外，任何 ASP.NET 应用程序都可以使用整个 .NET Framework。开发人员可以方便地获得这些技术的优点，其中包括托管的公共语言运行库环境、类型安全、继承等等
ASP.NET 可以无缝地与 WYSIWYG HTML 编辑器和其他编程工具（包括 Microsoft Visual Studio .NET）一起工作。这不仅使得 Web 开发更加方便，而且还能提供这些工具必须提供的所有优点，包括开发人员可以用来将服务器控件拖放到 Web 页的 GUI 和完全集成的调试支持。
微软为ASP.net设计了这样一些策略：易于写出结构清晰的代码、代码易于重用和共享、可用编译类语言编写等等，目的是让程序员更容易开发出Web应用，满足计算向Web转移的战略需要。
ASP.NET提供了稳定的性能、优秀的升级性、更快速的开发、更简便的管理、全新的语言以及网络服务。贯穿整个ASP.NET的主题就是系统帮用户做了大部分不重要的琐碎的工作。
对于一个程序，速度是一件非常令人渴望的东西。一旦代码开始工作，接下来你就得尽可能地让它运作得快些快些再快些。在ASP中你只有尽可能精简你的代码，以至于不得不将它们移植到一个仅有很少一点性能的部件中。而现在，ASP.NET会妥善地解决这一问题。在ASP.NET里，你将会拥有一个“Data-Bounds” (数据约束)，这意味着它会与数据源连接，并会自动装入数据，使控制工作简单易行。
ASP.NET支持多种语言，支持编译类语言，支持比如VB、VC++、C#等，它比这些编译类语言运行速度快，更适合编写大型应用。快速发展的分布式应用也需要更快速、更模块化、更易操作、更多平台支持和重复利用性更强的开发，需要一种新的技术来适应不同的系统，网络应用和网站需要提供一种更加强大的可升级的服务。ASP.NET能够适应上面的要求。
对于今天的Web程序员来说，最大的挑战就是不断变化的浏览器兼容性以及它们不断升级的复杂性。在保证页面能在所有浏览器下工作的同时，又得尽量使用每个浏览器的最新属性来建立更具交互性的页面，这简直就是一场恶梦。更加可怕的是，需要对不同的用户设备建立不同的网页。
最简单的解决办法就是动态地对不同的用户生成不同的输出，或者就是对不同的用户写多个页面。大多数开发者都会选择第一种方法。但是，这就意味着用户的每次点击都会让服务器判断应该向用户显示什么。而通过ASP.NET，我们可以看到一个新的服务控制的概念，它封装了一些普通的任务，提供了一种清晰的编程模块，有助于管理和处理不同的用户类型。简单地说，ASP.NET把这些过程自动化了。
3. XHTML的组成结构
u HTML的基本组成结构
头部：写法就是<head>头部的内容</head>。
眼睛：写法就是<title>标题</title>这些应放在<head>和</head>之间。也就是<head><title>标题</title></head>。
身体：写法也就是，<body>页面内容</body>。
最后，别忘了把这些部分组成一体----网页，所以咱们就用<html></html>把他们给包起来。好了，咱们来大体看看网页的结构：
<html>
<head>
<title> 标题</title>
</head>
<body>
页面内容
</body>
</html>
u 标签及标签的存在形式
l 以<>开头,以</>结束。
l 无结束标记。
u html的注释
〈！――注释语言――〉作用：
对html代码进行说明，遇到浏览器不支持的代码时可以屏蔽掉，而不出错。
u HEAD标签中存放的内容
HEAD标签中存放的主要内容是HTML的标题和首部
l TITLE网页的标题:
用法：<title>网页标题</title>
l META:
用法1：
关键字搜索
<meta name=”keywords” content=”关键字1，关键字2，关键字3……”>
用法2：
设置语言的字符信息
<meta
http-equiv=”content-type” content=”text/html” ;charset=”gb2312”>
用法3：
自动刷新
<meta http-equiv=”refresh” content=”秒数” url=”链接地址”>
例:
<meta http-equiv=”refresh” content=”10” url=”index.html>
4. BODY标签中的内部细则
u 背景颜色:
l 其中属性:
Bgcolor 网页背景颜色
Text 非链接文字颜色
Link 可链接文字颜色
Alink 被激活文字颜色
Vlink 访问过的文字颜色
topmargin 内容距离网页顶部的距离
leftmargin 内容距离网页左部的距离
background 网页的背景图片
bgsound 网页的背景音乐
l 常用颜色列表：
|
颜色 |
英文表示 |
十六进制 |
颜色 |
英文表示 |
十六进制 |
|
黑色 |
Black |
#000000 |
白色 |
White |
#ffffff |
|
银灰色 |
Silver |
#c0c0c0 |
灰色 |
gray |
#808080 |
|
鸭绿色 |
Teal |
#008080 |
纯红色 |
Red |
#ff0000 |
|
纯蓝色 |
Blue |
#0000ff |
暗红色 |
Maroon |
#800000 |
|
海军蓝 |
Navy |
#000080 |
橄榄绿 |
olive |
#808000 |
|
翠绿色 |
Lime |
#00ff00 |
绿色 |
Green |
#008000 |
|
樱桃红 |
Fuchsia |
#ff00ff |
紫色 |
Purple |
#800080 |
|
纯黄色 |
Yellow |
#ffff00 |
浅绿色 |
Aqua |
#00ffff |
第二节 XHTML的具体标签
关于超级链接标签:<a>
l 标签用法演示与用法：
用法1:
<a href=”链接地址” title=”提示文字”>链接文字</a>
用法2:
设置书签（锚点）<a name=”a1”>链接文字或文字段落</a>
用法3：
链接到本网页书签<a href=”#a1”>链接文字</a>
用法4：
链接到其他网页书签<a href=”index.html#a1”>链接文字</a>
用法5：
打开新窗口<a href=”链接地址” target=”_blank”>链接文字</a>
说明：target为窗口属性而_blank为新窗口。
2. 标题标签:<h>
l 标签用法演示：
l 标签代码：
<h1>这是一个测试h标签</h1>
<h2>这是一个测试h标签</h2>
<h3>这是一个测试h标签</h3>
<h4>这是一个测试h标签</h4>
<h5>这是一个测试h标签</h5>
3. 关于图像标签：<img>
l 标签用法演示：
l 属性说明：
Src 图象的 URL，关于url就是指的是图像在网上的地址。
Alt 在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。
Align使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右，上边、中间、底端。
4. 关于表格标签：<table>
l 标签用法演示：
<table align=”center” width=”400” border=1 cellpadding=”5” cellspacing=”3”>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
l 属性说明：
ALIGN对齐方式,值为left,right,center
WIDTH表格宽度，值为像素或百分比
HEIGHT表格高度，值为像素或百分比,可省略
BORDER边框宽度,值为像素
CELLPADDING单元格边距,默认值为0像素
CELLSPACING单元格间距,默认值为2像素
l <table>与</table>之间的元素:
<tr>表示一行
<td>在<tr>之间,表示一个单元格
<th>表示本单元格中的内容为标题
l <td>属性:
align水平对齐方式
vlign垂直对齐方式,值为top,middle,buttom
rowspan合并单元格后跨行数
colspan合并单元格后跨列数
bgcolor单元格背景色
background单元格背景图片
l Colspan属性实例：
<table
border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th>
<th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
l Rowspan属性实例：
<table
border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th>
<td>A</td></tr>
<tr><th>Drink</th>
<td>B</td></tr>
<tr><th>Sweet</th>
<td>C</td></tr>
</table>
5. 关于框架标签：<frameset>
框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果，这个技巧在运用上问题比较多，用的好的话，有助于网友快速且有条理的浏览网页。
文件的个数等于窗口的个数加一。
l 实现代码：
<frameset frameborder=”5” framespacing=”10” scrolling=”no” noresize marginhight=”2” marginwidth=”2”>
<frame src=”a.htm” name=”1”>
<frameset rows=”100,*,200”>
<frame src=”b.htm” name=”2”>
<Frame src=”c.htm” name=”3”>
</Frameset >
</frameset>
< noframe >请选择支持框架功能的浏览器来进行观看</noframe>
各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？.没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>卷标给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>卷标告诉计算机说：『喂！我要开始分割了！』此时，<BODY>是派不上用场的。现在开始动手割割看啰！我们先将画面分成左右两边：
在<FRAMESET>中，我们要告诉计算机到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随窗口大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。
然后，再将右边的框窗再割成上下两个画面。如下图：
看见了没？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 点的语法中）被另一组<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！（乱七八糟了对不对？）
6. 关于序列卷标标签(项目符号及编号)：<ul>
序列卷标基本上可分为两种，一种是「无序条列」，一种是「有序条列」。所谓「无序条列」当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序卷标，在各条列前面均有一符号以示区隔。至于「有序条列」就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。
无序列表卷标：
|
原始码 |
呈现结果 |
|
<UL> <LI>姓名：吴弘凯 <LI>生日：1973/6/16 <LI>星座：双子座 </UL> |
l 姓名：吴弘凯 l 生日：1973/6/16 l 星座：双子座 |
有序列表卷标：
|
原始码 |
呈现结果 |
|
<OL> <LI>姓名：吴弘凯 <LI>生日：1973/6/16 <LI>星座：双子座 </OL> |
姓名：吴弘凯 生日：1973/6/16 星座：双子座 |
指定序列起始的数目
|
原始码 |
呈现结果 |
|
<OL START="8"> <LI>姓名：吴弘凯 <LI>生日：1973/6/16 <LI>星座：双子座 </OL> |
姓名：吴弘凯 生日：1973/6/16 星座：双子座 |
7. 关于水平线标签：<hr>
l 标签用法演示：
<hr size=”20” width=”500或50%” align=”center” noshade color=”red”>
l 属性说明：
Size是水平线的高度。
Width是水平线的宽度。
Align是控制水平线的对齐属性，主要有：left、center、right。
Noshade是去掉水平线的阴影。
Color是设定水平线的颜色。
8. 关于表单标签：<input>
最基本的留言版应该大家都用过吧！没错这就是一个表单运用很好的例子。表单提供了一个管道让读者发表心声，让网站不再只是设计者的天下，而是能够让更多网友共同参与的地方。另外在商业用途上，表单也扮演着相当吃重的角色，藉由这些表单配合相关程序，使得公司能够在网络上发展电子商务，所以说表单可以说是网页实用化、商务化相当重要的一环喔！
l 表单的用途
对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程序或是ASP程序来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！
l 表单元素
表单主元素：<form>……</form>
用法：<form action=2.asp method=post>
属性：action用哪一个asp程序来处理数据
method用什么方式将数据提交到服务器，有两个值post或get
各个控件元素通用格式：<input type=类型 name=名字>
l 复选框
用法：
<input type=”checkbox” name=”名字” value=”值” checked>
type=”checkbox”表示这是一个复选框
value提交到服务器的处理的值
checked默认就被选中
l 单选框
用法：
<input type=”radio” name=”名字” value=”值” checked>
各属性和复选框一样，要设置多个单选框时，要取相同的名字（name），取不同的值（value）
l 按钮
用法：
<input type=”button” name=”名字” value=”值”>
value值为标签的名称，即按钮上的文字
提交按钮：<input type=submit value=提交>
作用：将表单中的内容传给action指定的程序
清除按钮：<input type=reset value=重设>
作用：将各控件恢复到原始状态
l 单行文本框
用法：
<input type=”text” name=”名字” value=”默认值” size=”数值”>
value文本框中默认文字
maxlength文本框中文字的最大长度
size文本框的大小
另类文本框——密码框：
用法：<input type=password name=”名字”>
l 隐藏项
用法：
<input type=hiddle name=”名字” value=”值”>
作用：
不显示到页面上，该value值会作为附加值提交
l 下拉菜单
用法：
<select name=”名字” size=”数值” multiple>
<option value=”值” selected >……</option>
<option value=”值”>……</option>
<option value=”值”>……</option>
<option value=”值”>……</option>
</select>
size选择框显示的行数
multiple表示可多重选择
selected默认选中项
l 多行文本框
用法：
<textarea rows=”行数” cols=”列数” wrap=”换行方式”>
默认文字
</textarea>
rows显示的行数
cols显示的列数
wrap换行的方式，如果取值为off则不换行
9. 关于排版卷标
网页的排版部份也是很重要的一环，有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔！
l 文字置左、置中、置右
1. 使用方法：老实说，刚刚我们学过的分段卷标<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
|
原始码 |
呈现结果 |
|
<p align="left">文字靠左</p> |
文字靠左 |
|
<p align="center">文字置中</p> |
文字置中 |
|
<p align="right">文字靠右</p> |
文字靠右 |
l 置中卷标
1.使用方法：<center>这是置中</center>
2. 卷标解说：这个卷标是最常用到的卷标了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！ 使用范例：
|
原始码 |
呈现结果 |
|
<center>这是最中间</center> |
这是最中间 |
l 向右缩排卷标
使用方法：<blockquote>要缩排的文字</blockquote>
卷标解说：利用<blockquote></blockquote>这个卷标可以将其包起来的文字，全部往右缩排。而且加一组卷标，往右缩排一单位，加两组卷标，往右缩排两单位，依此类推。
l 保存原始格式卷标
使用方法：<pre>文字内容</pre>
卷标解说：利用<pre></pre>这个卷标可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的卷标之一。使用范例：
|
原始码 |
呈现结果 |
|
<pre> |
文 字
格 式
|