第1章  了 解 网 页
15年前，“网上冲浪”还是一个很时尚的名词，但随着互联网的飞速发展，时至今日，使用网络已经成为人们生活中的一部分。Web 1.0时代，人们只是在网页上浏览信息，而在现在所处的Web 2.0时代里，人们可以在网页上和朋友讨论话题、听音乐、看电影、进行电子商务的操作。《纽约时报》专栏作家托马斯?弗里曼在他的《世界是平的》一书中说到：“2000年世界进入了一个新纪元：全球化3.0。世界从小缩成微小，竞赛场地铲平了。”
本章将介绍一些与互联网相关的常用技术解释，以及制作网页时通常需要涉及的领域和考虑的问题等。本章的知识点很多但并不难理解，读者千万不要被那些可怕的名词或代码给吓住。虽然HTML（Hypertext Marked Language，超文本标记语言）标签很多，但是在到规律后也就千篇一律了。好比去大卖场买菜，第一次进去真的很无奈，因为根本分不清蔬菜的种类，至少在笔者眼里，感觉都是绿的“草”。但是多去几次后就可以很轻松地做这件事了。事实上，学习HTML不会比买菜难。本章的知识点如下。
? 网页的概念和分类：了解网页的概念，区别静态网页和动态网页的不同。
? 设计网页的原则和工具：了解开发网页的常用工具。
? 网页浏览器的工作原理：知道网页浏览器的工作原理，并了解3种常用的浏览器。
? HTML、XML（The Extensible Markup Language，可扩展标识语言）和XHTML（The Extensible Hypertext Markup Language，可扩展超文本标识语言）的概念，区别这3个概念的异同点。
? HTML应用：通过本章最后的实例，演示一个简单的HTML页面的开发步骤。
1.1  什么是网页
21世纪是信息化的时代，互联网使用者可以在Internet上通过网页浏览信息，如新闻、图片等；也可以通过互联网发布信息，如招聘信息、各种广告；或者是追赶潮流，加入现今十分流行的博客一族。然而这些都离不开互联网的这扇窗户——网页。本节将介绍网页的相关知识。
1.1.1  网页的概述
网页其实是在这个世界的某一个地方某一台计算机上的一个文件，通过互联网，也就是Internet将两个不同的地址相连，把人们的信息传达到网络世界的各个角落。人们通过互联网，可以在世界的任何一个地方互相交流沟通。
什么是互联网？互联网是一种概念，一个虚拟的东西。人们可以通过浏览器浏览新浪、百度等页面，但不会有人说“浏览互联网”。互联网指的正是把所有网页链接在一起的巨大信息交流形式，它基于很多的协议来体现出它的表现形式。1989年欧洲粒子物理实验室的科学家们提出了一个分类互联网信息的
协议。这个协议极大地推动了互联网
的发展和普及，后来它有了一个十分响亮的名字WWW（World Wide Web），中文又称万维网（Wan Wei Wang）。可以认为，从20世纪90年代开始，互联网进入了Web 1.0的时代。
早期的Web 1.0时代，大部分网页只有文字、图像信息可以浏览，这个时候最典型的互联网标志就是门户网站，如新浪、搜狐。从2001年开始，人们认为互联网开始进入Web 2.0时代，这时的网页可以包含动画、音频、视频，也可以在网页中进行交流、上传文件，使用完全交互式的程序。互联网开始更注重个人化的网络服务，任何使用网络的人，都可以参与到网页的制作中。
笼统地说，网页主要由结构、表现和行为3部分组成。对应的标准也分为3类，其中大部分都是由W3C（World Wide Web协会）所制定，这其中就包括HTML和CSS（Cascading Style Sheets，即层叠样式表）。对于初学者来说，了解网页的制作，一定要分清楚HTML和CSS的不同作用。
例如，使用<table>，这是一个表格标签，意思是“将在这里放入一个表格”。那么这个表格该如何表现在浏览者的面前呢？如它的颜、边框粗细等。而CSS的出现为设计者解决了这些问题，如    图1.1和图1.2所示为不同样式的表格。
图1.1  粗边框的表格                            图1.2  细边框的表格
图1.1和图1.2都是有着一个3×3表格的页面。这样的描述，如同HTML语言所表达的含义，体现出页面上的内容，而在浏览器中最后的显示效果是完全不同外表的两个表格。图1.1表格的边框较粗，黑；图1.2表格边框较细，红。这是因为它们使用了不同的CSS样式表。
所以通俗地说，HTML表现了页面的结构，而CSS修饰了页面中的这些内容。如果把制作网页比作一个人在设计一间屋子，那么HTML语言的作用是用来明确这个屋子内要放入哪些家具，或者是床、书柜、椅子等。而CSS的作用就是改变这些家具的样式，对应的如床的样式、书柜的样式、椅子的样式等。
1.1.2  静态网页
在网站设计中，纯粹的HTML格式网页通常被称为“静态网页”，早期的网站一般都是由静态网页组成的。静态网页的特点是这个网页不论何时何地浏览，都将显示相同的形式和内容，且仅能供浏览，无法与网站进行互动。也就是说，无法提供信息给网站，让网站响应使用者的需求。
【本节示例参考：资料光盘\第1章\1-1  静态页面.html】
【实例1-1】一个静态页面的代码展示如下：
程序1.1  静态页面.html
01  <html>
02  <head>
03      <title>静态页面</title>
04  </head>
05  <body>
06      <h1>这是一个静态页面</h1>
07      <h3>您只能浏览，不能进行交互。</h3>
08  </body>
09  </html>
【运行程序】浏览该页面，结
果如图1.3所示，它只能浏览而不能被交互。
图1.3  静态页面示例
【深入学习】静态页面使用HTML编写，通常扩展名为.htm、.html、.shtml、.xml等。静态网页只能单纯地在网页中展示文字与图片，听起来似乎功能简单，但它是所有网页的基础要素，其重要性不言而喻。
在静态网页中，整个网页的主要结构与网页的显示控制都必须利用HTML实现。在HTML格式的网页上，可以出现各种动态的效果，如.GIF格式的动画、Flash、滚动字幕等。这些“动态效果”只是视觉上的，而动态网页是不同的概念。
1.1.3  动态网页
动态网页是与静态网页相对应的，指网页的内容可以根据某种条件的改变而自动改变。如腾讯公司的Qzone空间里，常常会有一些使用者嵌入一个小小的计数器功能，当有人单击设计者的网页时，计数器的值会自动增加。这个计数器就是动态的。再比如，目前网络流行的论坛、社区网，其中用户的注册页面，当用户输入正确的用户名和密码后会成功登录，如果输入的用户名或密码错误，页面会提示用户错误信息。这也是典型的动态页面。
同时，与静态网页的后缀不同，动态网页是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动
态网页网址中有一个标志性的符号“?”。一个典型的动态网页的URL（Uniform Resource Locator，即统一资源定位器）形式为：www.sina/ip/index.asp?id=1。那么，动态网页与网页上的各种动画、滚动字幕等视觉上的动态效果为什么不是一个概念呢？
动态网页可以是纯文字内容的，也可以是包含各种动画的内容。这些只是网页具体内容的表现形式，并不是动态技术生成的页面，它不能根据用户的要求来更新页面。而一个网页，无论是否具有动态效果，除非是采用动态网站技术生成的网页，才可以称为动态网页。
在了解了动态网页的概念之后，下面通过一个动态网页的例子来说明动态页面是如何和用户互动的。如图1.4所示是一个动态页面的第一个页面。当填入一个已注册用户，如用户名为appleing，密码为1234567时，系统检查到用户名和密码是正确的，即跳转到用户页面，如图1.5所示为一个用户页面。
图1.4  userLogin.jsp 页面                            图1.5  用户页面
图1.5所示的页面可以显示该用户使用的功能，包括用户邮件服务和用户短消息服务。这种针对使用者的设计是动态页面典型的功能标志。而如果用户输入错误的用户名和密码，如用户名为bupt，密码为bupt，则系统会检查到用户名和密码是错误的，会跳出错误信息，显示登录失败。如图1.6所示为登录失败的页面。
图1.6  登录报错页面
以上是
一个典型的动态页面的例子，用户输入不同的信息，则页面显示不同的结果。动态页面比静态页面显得更智能、更人性化，自然也是互联网发展的趋势。而理解HTML页面是学习动态页面的必备基础知识。
1.1.4  开发动态页面和静态页面的联系
早期的动态网页主要采用CGI（Common Gateway Interface）技术，是HTTP服务器与用户或其他机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上，可以使用多种不同的程序语言（如Visual Basic、Delphi或C/C++等）编写适合的CGI程序。
当用户在页面上留言，输入一段信息，接着单击“确定”按钮时，都是工作在客户端。而接下来浏览器会将用户的信息传递到CGI程序，于是CGI程序在服务器上按照预定的方法进行处理。虽然CGI技术已经应用很长时间，而且功能比较强大，但由于其有编程困难、效率低下、修改复杂等缺点而逐渐被新技术取代。目前常用的新技术有3种，这3种技术在制作网页上各有特，但都在发展中。在互联网领域中，这3种技术的格局像三国分立的局面一样，都占有市场的一席之地，它们就是PHP脚本语言、ASP脚本语言和JSP脚本语言。
1．PHP脚本语言
PHP即Hypertext Preprocessor（超文本预处理器），是目前在Internet上应用较为广泛的脚本语言，其语法借鉴了C、Java、Perl等语言。PHP对编程能力的要求不高，只需少量的编程知识就可以使用PHP建立一个交互的Web站点。
PHP与HTML语言具有非常好的兼容性，因此它与HTML可以结合使用从而更好地实现页面控制，即直接在脚本代码中加入HTML标签，或者在HTML标签中加入脚本代码。PHP提供了标准的数据库接口使得连接数据库比较方便，另外还具有扩展性强、可以进行面向对象编程等特点。
2．ASP脚本语言
ASP即Active Server Pages，是微软开发的一种语言，它本身没有专门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应用程序。ASP的工作方式是在Web服务器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。正因为如此，ASP要比一般的脚本语言安全得多。
ASP可以包含HTML标签，也可以直接存取数据库及使用可扩充的ActiveX控件，因此ASP的程序编写比HTML更方便且更有灵活性。但ASP技术基本上是局限于微软的操作系统平台之上，主要工作环境是微软的IIS应用程序结构，而且ActiveX对象具有平台特性，所以ASP技术跨平台性不是很好，即实现在跨平台Web服务器上工作不是很容易。
3．JSP脚本语言
JSP即Java Server Pages，它是由Sun Microsystem推出的，是以Java Servlet和整个Java体系的Web开发技术为基础。JSP和ASP在技术方面有许多相似之处，不过ASP一般只应
用于微软的平台上，而JSP则可以在大多数的服务器上运行，而且采用JSP技术开发的应用程序比采用ASP开发的应用程序更具有可维护性和可管理性，所以，JSP被业界认为是未来最有发展前途的动态网站技术。
这3种技术目前是制作动态页面的主流，而且在未来一段时间内，PHP、ASP、JSP也会在竞争中共存。对微软服务器较熟悉的程序员采用ASP技术更容易得心应手。对于Linux的爱好者来说，采用PHP技术是比较合适的选择。对可维护性和可管理性要求较高的设计者，适合使用JSP技术，尤其是在构建大型网站的应用中。
事实上，动态页面的设计是离不开HTML的，每一个动态网页开发者都必须掌握HTML语言。在实际应用的网页中，动态网站中包含大量的HTML代码，合理结合静态页面和动态页面可以使网页设计更加灵活。
此外，设计者应明白，动态网站不一定比静态网页更好，动态网站的交互性可能带来安全隐患，而且动态网站的信息均是从数据库中读取，当负荷过大时可能造成网站崩溃。或者动态网站对于搜索引擎不是很友好，在一些搜索页面中不容易被查，这样会影响网站的推广。
因此，无论是从HTML在网页设计中的基础地位还是其优点来说，熟练掌握HTML对于网页设计是很重要的基础。在这个基础上再向动态页面设计的道路前进时，会更容易掌握动态页面的使用技术。
1.2  开发网页的工具
如果说制作网页的设计者是一个画家，那么开发程序的工具就相当于画家手中的画笔和颜料。这些工具能为设计者编写、调试、运行代码时提供一个方便的环境。在开发网页时也有属于它的开发工具和为这种语言量身定做的开发工具，如记事本、Dreamweaver等工具可以用来开发PHP、ASP和JSP中的任何一种程序。
1.2.1  HTML页面的开发工具
HTML语言作为一种语义派生出来的语言，最常见的有3种开发工具，分别是记事本、Dreamweaver和Frontpage。
1．记事本
记事本是Windows系统自带的简单的文本编辑软件，但由于大部分代码都是纯文本的，所以记事本可以编写任何网页。不过对于稍大型的网页需要编辑大量代码时，记事本就显得不那么适合了，但对于初学者来说，记事本是较好的练习工具。
2．Dreamweaver开发工具
Dreamweaver是MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器，它是一款专业网页设计师的视觉化网页开发工具，利用它可以制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
目前行的php开发工具有
Dreamweaver最大的特点是所见即所得。可以使用它的网站地图快速制作网站雏形，设计、更新和重组网页。此外，Dreamweaver可以自动生成源代码，大大提高了网页开发
人员的工作效率。但是Dreamweaver也有其自身的缺点，在一些复杂的网页中，难以精确达到与浏览器完全一致的显示效果。同时其产生的代码效率比较低。
Dreamweaver是一款可视化编辑工具，如图1.7所示为Dreamweaver工作状态的操作界面。Dreamweaver不仅支持静态页面的编写，而且还支持PHP、ASP、JSP等动态网页的编写与调试。对于网页设计初学者来说，Dreamweaver是一款比较好的入门软件，即使对HTML不太熟悉，也能做出漂亮的网页。
Dreamweaver的工作界面是分割成一块块的窗口，这些工具窗口可以按照用户自定义的样式自由设定。从图1.7中可以看到，最引人注意的两个工作区域分别是代码区和预览区。
3．Frontpage开发工具
Frontpage是微软公司发布的一款入门级网页制作工具，是微软Office组件的一部分。相比于Dreamweaver，Dreamweaver的直观性和高效性是Frontpage无法比拟的，而且在功能拓展方面Frontpage也少于Dreamweaver。因此，2006年Frontpage停止了发售，但并不能因此否认这是一款失败的制作软件，因为它依然受到众多用户的欢迎。如图1.8所示为Frontpage的操作界面。
由于Dreamweaver的适用性目前已经超过了Frontpage，因此在大多数情况下，设计人员的第一选择已经是Dreamweaver。
图1.7  Dreamweaver的操作界面                  图1.8  Frontpage的操作界面
1.2.2  动态页面的开发工具
动态页面的开发工具根据开发语言的不同而不同。本节主要介绍常见的3种开发语言：PHP、ASP、JSP的开发工具。
1．PHP开发工具
PHP作为一种开放型的语言，其开发工具并没有标准的规定，可以用很多工具进行开发（包括记事本），也可以用ZDE等工具进行开发，只要语法正确即可。比较好的是ZDE和PHPED开发工具。
ZDE（Zend Development Environment）是ZEND公司推出的一款集成开发平台。ZDE是用Java语言编写的，其同样具有多平台性。
PHPED是由NUSPHERE公司推出的，它提供的功能最全，同样具有语法加亮、函数补全和工程管理等功能。除此之外，还有自动代码补全、可视化的数据库管理、常见HTML标签集、支持插件等功能。同时它还内置DAV、CVS、FTP、WEBSERVER、DEBUGGER、JS代码列表。
2．ASP开发工具
Visual InterDev是Microsoft公司所开发的ASP开发工具，是一款可视化工具，可以对ASP代码进行颜识别、自动代码提示。Visual InterDev是为程序员设计的网页开发工具，而Microsoft Frontpage是针对非程序员的编辑工具。Microsoft Frontpage是Microsoft Office中的一部分，Visual InterDev则是Microsoft Visual Tools中的一部分，其外观和工作模式均与其他Microsoft可视开发工具类似，如Microsoft Visual C++。
3．JSP开发工具
MyEclipse+Struts是比较

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。