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