null第1章 了解网页第1章 了解网页15年前，“网上冲浪”还是一个很时髦的词；时至今日，网络已经成为人们生活中不可或缺的一部分。在Web 1.0时代，人们只知道在网页中浏览信息；而Web 2.0时代，人们却可以在网页上和朋友聊天、听音乐、看电影或进行电子商务操作。《纽约时报》专栏作家托马斯·弗里曼在他的畅销 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 《世界是平的》中说到：“2000年世界进入了一个新纪元：全球化3.0。世界从小缩成微小，竞赛场地铲平了。” 本章将介绍一些与互联网相关的术语，以及网页制作涉及的技术和需要考虑的问题。本章的知识点很多但却不难理解，读者千万不要被那些可怕的名词或代码给吓住。虽然HTML（Hypertext Marked Language，超文本标记语言）的标签很多，但在找到规律后也就非常简单了。1.1 什么是网页1.1 什么是网页21世纪是信息化时代，互联网使用者可以在Internet上浏览信息（如新闻、图片等），也可以通过互联网发布信息（如招聘信息、广告等），或者是追赶潮流成为一名博客达人。 这些都离不开网页。在下面的章节里，我们将陆续介绍网页的一些基础知识。1.1.1 网页概述1.1.1 网页概述网页其实是这个世界某个地方某台电脑上的一个文件，通过互联网两个不同的地址实现相连，因此这个文件被传递到了世界的各个角落。 什么是互联网？互联网是一个概念，指的是把所有网页链接在一起的一种信息交流形式。它基于很多的 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 来实现这种信息互通。 1989年，欧洲粒子物理实验室的科学家们提出了一个分类互联网信息的协议。这个协议在后来极大地推动了互联网的发展和普及。后来，它有了一个十分响亮的名字WWW（World Wide Web），中文称为万维网（Wan Wei Wang）。可以认为，从20世纪90年代开始，互联网进入了Web 1.0的时代。1.1.2 静态网页1.1.2 静态网页在网站设计中，纯粹的HTML格式网页通常被称为“静态网页”。早期的网站一般都是由静态网页组成的。静态网页的特点是这个网页不论何时何地浏览，都将显示相同的形式和内容，且用户仅能浏览，无法与网站进行互动。也就是说，无法提供信息给网站，让网站响应使用者的需求。图1.3就是一个静态页面，它只能浏览而不能实现交互。1.1.3 动态网页1.1.3 动态网页动态网页是与静态网页相对应的，指的是网页内容可随着某个条件的改变而发生改变。如腾讯的Qzone空间里，有些使用者爱嵌入一个小计数器，每当有人点击该网页，计数器的值就会自动增加。那么，这个计数器就是动态的。再比如，论坛或社区的登陆页面，当用户输入正确的用户名和密码后就会成功登录，如果输入错误，则会提示用户错误信息。这也是典型的动态页面。 动态网页与静态网页的后缀不同，通常以.asp、.jsp、.php、.perl、.cgi为后缀，并且在动态网页网址中一般有一个标志性的符号“?”。一个典型的动态网页的URL形式为：http://www.sina.cn/ip/index.asp?id=1 。null那么，网页上动画和滚动字幕等视觉上的动态效果，是不是也可以称为动态网页呢？动态网页可以是纯文字内容，也可以包含各种动画内容。但这些动画内容只是网页具体内容的 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 现形式，而不是由动态技术生成的页面，也就是说，它不能根据用户的要求自动更新页面。所以说，一个网页，只有在采用了动态网站技术后，才可以被称之为动态网页。如图1.4和图1.5就是常见的动态页面。 1.1.4 开发动态页面和静态页面的联系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脚本语言 2．ASP脚本语言 3. JSP脚本语言1.2 开发网页的工具1.2 开发网页的工具如果说制作网页的设计者是一个画家，那么开发程序的工具就相当于画家手中的画笔和颜料。这些工具能为设计者编写代码、调试、运行时提供一个方便的环境。在开发网页时也有通用属于它的开发工具、为每种语言量身定做的开发工具。如记事本、Dreamweaver等工具可以用来开发PHP、ASP和JSP中的任何一种程序。1.2.1 HTML页面的开发工具1.2.1 HTML页面的开发工具HTML语言作为一种语义派生出来的语言，最常见的有3种开发工具。分别是记事本、Dreamweaver和Frontpage。 1．记事本 记事本是Windows系统自带的简单的文本编辑软件，但由于大部分代码都是纯文本的，所以记事本可以编写任何网页。不过对于稍大型的网页，因为需要编辑大量代码，记事本就显得不是那么适合了。但对于初学者来说，记事本是相对较好的练习工具。null2．Dreamweaver Dreamweaver是MACROMEDIA公司开发的一款集网页制作和管理网站于一身的网页编辑器。利用它可以制作出跨平台和浏览器的动感网页。 3．Frontpage Frontpage是微软公司发布的一款入门级网页制作工具，是Office组件的一部分。在直观性和高效性方面，它比不上Dreamweaver，在功能拓展方面也要逊于Dreamweaver。因此2006年Frontpage停止了发售。nullDreamweaver和Frontpage的主界面分别如图1.7和图1.8所示。 1.2.2 动态页面的开发工具1.2.2 动态页面的开发工具动态页面的开发工具，根据开发语言的不同而有好几种。本节主要介绍最常见的 3 种开发语言：PHP、JSP 和 ASP。 1．PHP PHP作为一种开放型语言，并没有设定标准的开发工具，也就是说，可以用很多工具对其进行开发（包括记事本），也可以用ZDE等工具进行开发，只要语法正确就可以了。比较好的是 ZDE 和 PHPED 开发工具。null2．ASP Visual Interdev是Microsoft公司所开发的ASP开发工具，是一款可视化工具，可以对ASP代码进行颜色识别和自动代码提示。 Visual InterDev是专为程序员设计的网页开发工具，而Microsoft FrontPage则是针对非程序员的编辑工具。 FrontPage是Microsoft Office中的一部分，Visual InterDev则是Microsoft Visual Tools的一部分，其外观和工作模式均与其他Microsoft可视开发工具类似，如Microsoft Visual C++。 null3．JSP MyEclipse+Struts是比较流行的JSP开发工具。 Struts最早是Apache Jakarta项目的组成部分，项目的创立者希望通过研究，改进和提高JavaServer Pages、Servlet、标签库以及面向对象的技术水准。 Struts这个名字的原意是建筑和旧式飞机中使用的支持金属架。这里之所以叫“Struts”，是为了提醒人们记住那些支撑房屋、建筑、桥梁的基础结构。 1.3 使用网页浏览器1.3 使用网页浏览器网页浏览器是显示网页服务器或档案系统内的文件，并使用户与这些文件进行互动的一种软件。它用来显示万维网或局域网内的文字、影像及其他资讯。1.3.1 网页浏览器的工作原理1.3.1 网页浏览器的工作原理Windows系统自带的是IE浏览器。对于网页设计者来说，了解浏览器的工作原理可以令自己的设计更准确和出色。 用户是如何使用浏览器浏览网页的呢？WWW 采用的是B/S（Browser/Server）的结构，即浏览器和服务器结构。用户工作界面通过浏览器实现，主要的事务逻辑则在服务器端（Server）实现，只有很少一些事务逻辑在前端（Browser）实现。这样就大大简化了客户端的电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本。用户只要安装浏览器即可浏览页面，而不需要知道服务器端使用的什么操作系统以及是如何处理浏览器发出的请求的。null浏览器的工作原理可以分以下几步来理解： （1）浏览器通过HTML表单或超链接请求指向一个应用程序的URL。 （2）服务器收到用户的请求。 （3）服务器执行设计者创建的指定应用程序。 （4）应用程序执行所需要的操作，通常是基于用户输入的内容。 （5）应用程序把结果格式化为网络服务器和浏览器能够理解的文档，通常是HTML网页。 （6）网络服务器把结果返回到浏览器中。如图1.9所示为浏览器的工作原理流程图。如图1.9所示为浏览器的工作原理流程图。1.3.2 常用的两种浏览器1.3.2 常用的两种浏览器互联网上最常用的两款浏览器是Internet Explorer和Mozilla Firefox，它们基于不同的内核，各有特色，难分伯仲。 Internet Explorer简称IE 或 MSIE，由微软公司推出，使用最为广泛。2005年4月，其市场占有率约为85%。目前在所有版本的Windows操作系统中都默认IE为网页浏览器。nullMozilla Firefox 是由 Mozilla公司开发的一个自由的，开放源码的浏览器。它完全支持W3C的各项国际标准，其特点是轻便、安全和分栏浏览，有Windows，Linux等多个平台版本。而且，第三方的扩展非常多，可以极大地提高浏览乐趣。此外，由于是开源组织在维护Firefox，所以它对bug的修正极为迅速，新功能的实现也都基于用户的要求。由于Firefox本身品质优秀，所以吸引了许多人义务为它宣传。因此，它的市场占有率一直在不断提高，逐渐撼动到IE的垄断地位。如图1.11所示为Firefox浏览器。null IE 浏览器和 Firefox 浏览器的主界面分别如图1.10和图1.11所示。 1.4 HTML、XML和XHTML语言1.4 HTML、XML和XHTML语言最初只有研究人员才能使用HTML。但随着网页浏览器越来越多样化，设计人员开始向页面中放置不同形式的文件，如图像、音频等。于是，HTML语言增加了许多标签，变得越来越丰富。但结果就是HTML 的使用规则越来越混乱。这时，就需要有新的规则来约束网页的定义，使同样内容的网页在不同浏览器中显示出一样的效果。XML在这个方向发挥着重要的作用。1.4.1 超文本标记语言HTML1.4.1 超文本标记语言HTMLHTML是一种用来制作超文本文档的简单标记语言。用其编写的超文本文档称为HTML文档，能运行在各种操作系统平台（如Unix，Windows等）上。 自1990年以来，HTML一直都是WWW的信息表示语言，用于描述Homepage的格式设计和它其他Homepage 的连结信息。使用HTML语言描述的文件，需要通过浏览器显示效果，是一种最为基础的语言。 所谓超文本，因为它可以加入图片、声音、动画、影视等内容，并可以从一个文件跳转到另一个文件，与世界各地主机上的文件连接。HTML的作用是用来展示页面的表现形式，如页面的布局、页面的颜色、页面中的内容等。 所谓标记，是因为它采用了一系列指令符号来控制输出效果，这些指令符号用“<标签名字属性>”来表示。1.4.2 可扩展标识语言XML1.4.2 可扩展标识语言XMLHTML的焦点主要集中在信息应如何显示上，而不是信息的内容和结构。所以在新规则中引入了XML。XML和HTML的作用不一样，区别也很大。 XML目前推荐遵循的是W3C于2000年10月6日发布的XML 1.0。和HTML一样，它同样来源于SGML，但却是一种能定义其他语言的语言。它最初的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，但后来逐渐用于网络数据的转换和描述。目前，在网站信息传递过程中常见的RSS就是典型的XML应用。 如果说HTML是用来设计页面的布局和视觉效果的，XML就是用来描述页面的数据形式和结构的。null需要注意的是，XML并不是标记语言，所以它不是HTML的升级。它更大的用途是对HTML的部分功能进行补充。所以说，仅仅使用XML是无法来写出页面的。 下面就是一段典型的XML文档代码：1.4.3 可扩展超文本标识语言XHTML1.4.3 可扩展超文本标识语言XHTMLXHTML是2000年由W3C公司发行的，不需要编译就可以由浏览器直接执行（属于浏览器解释型语言），是一种增强了的HTML。它的可扩展性和灵活性能适应未来网络应用的更多需求，是基于XML的应用。可以说XHTML就是HTML的一个升级版本，它们之间的区别很小，在使用中很难分清它们之间的界线。 XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此开发者在HTML 4.0的基础上，用XML的规则对其进行了一些扩展，由此得到了XHTML。简单地说，XHTML的出现就是为了实现HTML向XML的过渡。 正因为如此，XHTML文档要求必须使用小写，因为XML是大小写敏感的。例如，

和

就是不同的标签。此外，XHTML中要求标签必须有始有终。 当然从页面设计者的角度来说，无论HTML还是XHTML的代码写法都是正确的。为了更严谨的写法，使用XHTML的写法要求未尝不可。1.5 编写一个简单的页面1.5 编写一个简单的页面本节通过一个实例展示了一个页面的完整代码。这里涉及到一个重要概念——网页超链接。每个单独页面都如同书中的一页，把所有的页面链接在一起就成了网站，就像是把所有的书页装订在一起就成了书。 在图1.13中，单击“这是我的第一个网页,我喜欢HTML!您可以单击这里”链接，页面将会自动跳转到搜狐主页。1.6 小结1.6 小结本章是HTML的入门部分，主要内容有： 首先介绍了网页、静态网页和动态网页的概念，以及常用的网页开发工具，读者通过这部分内容可以了解HTML页面的内容形式和开发工具。 然后，介绍了网页浏览器的工作原理和常见的浏览器，并介绍了HTML、XML和XHTML之间的联系，XML是语言规范更严谨的HTML，XHTML是HTML到XML的过渡。 最后，通过一个HTML页面的例子，展示了一个页面从创建到最终成型显示在浏览器中的过程。 在接下来的章节中，将为读者揭开HTML的神秘面纱，学习HTML语言的使用技术。