【任务1-1】 了解Web基本概念

需求分析

Web，中文译为“网页”。说到网页，其实大家并不陌生，上网时浏览新闻、查询信息、翻看图片等都是在浏览网页。但是，对于初学者来说，学习网页制作首先需要了解与网页相关的基本概念。下面，本节将针对与Web相关的概念进行详细讲解。

知识储备

1．认识网页

为了使初学者更好地认识网页，我们首先来看一下传智播客的官方网站。打开 Internet Explorer浏览器，在地址栏输入传智播客的网址http://www.itcast.cn，按回车键，这时浏览器中显示的页面即为传智播客官方网站的首页，如图1-1所示。

从图1-1中可以看到，网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

为了快速了解网页是如何形成的，接下来查看一下网页的源代码。在浏览器的菜单栏中选择【查看】→【源文件】选项，弹出的窗口中便会显示当前网页的源代码，具体内容如图1-2所示。

图1-2中显示的即为传智播客官方网站首页的源文件，它是一个纯文本文件。而我们浏览网页时看到的图片、视频等，其实是这些纯文本组成的代码被浏览器渲染后的效果。

在一个系统的网站中，除了首页之外，通常还包含多个子页面，例如传智播客官方网站包含“UI设计培训”“PHP培训”等子页面。其实，网站就是多个网页的集合，网页与网页之间通过超链接互相访问。例如，当用户单击传智播客官方网站首页导航栏中的“UI 设计培训”时，网页就会跳转到UI设计学院页面，如图1-3所示。

网站由网页构成，网页有静态和动态之分。所谓静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。而动态网页显示的内容则会随着用户操作和时间的不同而变化，这是因为动态网页可以和服务器数据库进行实时的数据交换，例如传智播客的技术论坛。

现在互联网上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千秋，用户在开发网站时可根据需求酌情采用。

2．网页相关名词

对于从事网页制作的人员来说，与互联网相关的一些专业术语是必须要了解的，例如，常见的Internet、www、http等，具体如下。

（1）Internet网络

所谓Internet网络就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。简单来说，互联网就是将世界范围内不同国家、不同地区的众多计算机连接起来形成的结果。

互联网实现了全球信息资源的共享，形成了一个能够共同参与、相互交流的互动平台。通过互联网，远在千里之外的朋友可以相互发送邮件、共同完成一项工作、共同娱乐。因此，互联网最大的成功之处并不在于技术层面，而在于对人类生活的影响，可以说互联网的出现是人类通信技术史上的一次革命。

（2）WWW

WWW（World Wide Web，万维网）不是网络，也不代表Internet，它只是Internet提供的一种服务——即网页浏览服务，我们上网时通过浏览器阅读网页信息就是在使用 WWW 服务。WWW 是Internet上最主要的服务，其他许多网络功能，如网上聊天、网上购物等，都是基于WWW服务的。

（3）URL

URL（Uniform Resource Locator，统一资源定位符）其实就是Web地址，俗称“网址”。在万维网上的所有文件（HTML、CSS、图片、音乐、视频等）都有唯一的URL，只要知道资源的URL，就能够对其进行访问。URL可以是“本地磁盘”，也可以是局域网上的某一台计算机，更多的是Internet上的站点，比如http://www.itcast.cn就是传智播客的网址，如图1-4所示。

（4）DNS

DNS（Domain Name System，域名解析系统）。在Internet上，域名与IP地址之间是一一对应的，域名（例如传智播客的域名www.itcast.cn）虽然便于人们记忆，但计算机只认识IP地址，将好记的域名转换成IP的过程被称为域名解析。DNS就是进行域名解析的系统。

（5）HTTP

HTTP（Hypertext transfer protocol，超文本传输协议）。它是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTP是非常可靠的协议，它具有强大的自检能力，所有用户请求的文件到达客户端时，一定是准确无误的。

（6）Web

Web本意是蜘蛛网和网的意思。对于普通用户来说，Web仅仅只是一种环境——互联网的使用环境、氛围、内容等。而对于网站设计、制作者来说，它是一系列技术的复合总称（包括网站的前台布局、后台程序、美工、数据库开发等），我们称它为网页。

（7）W3C组织

W3C（World Wide Web Consortium，万维网联盟）。万维网联盟是国际最著名的标准化组织。W3C最重要的工作是发展Web规范，自1994年成立以来，已经发布了200多项影响深远的Web技术标准及实施指南，如超文本标记语言（HTML）、可扩展标记语言（XML）等。这些规范有效地促进了Web技术的兼容，对互联网的发展和应用起到了基础性和根本性的支撑作用。

3.Web标准

由于不同的浏览器对同一个网页文件解析出来的效果可能不一致，为了让用户能够看到正常显示的网页，Web 开发者常常需要为多版本的开发而艰苦工作，当新的硬件（例如移动电话）和软件（例如微浏览器）出现时，这种情况会变得更加严重。为了使Web更好地发展，在开发新的应用程序时，浏览器开发商和站点开发商共同遵守标准，就显得很重要，为此W3C与其他标准化组织共同制定了一系列的Web标准。

Web 标准并不是某一个标准，而是一系列标准的集合，主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面，具体如下：

（1）结构标准

结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分，具体区别如下：

• XML（The Extensible Markup Language）是一种可扩展标记语言。XML 最初的目的是为了弥补 HTML 的不足，它具有强大的扩展性，可用于数据的转换和描述。

• XHTML（The Extensible HyperText Markup Language）是可扩展超文本标识语言。XHTML是基于XML的标识语言，是在HTML4.0的基础上，用XML的规则对其进行扩展建立起来的，实现了HTML向XML的过渡。

图1-5所示，是将传智播客网站焦点图模块去掉CSS样式，只剩下XHTML语言描述的网页结构。此时，三个图片和对应的三段描述文本从上到下依次罗列，不带任何修饰样式，得到了单纯的HTML结构。

（2）表现标准

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS，具体介绍如下。

CSS（Cascading Style Sheet）是层叠样式表。CSS标准建立的目的是以CSS为基础进行网页布局，控制网页的表现。CSS布局与XHTML结构语言相结合，可以实现表现与结构的分离，使网站的访问及维护更加容易。

图1-6所示是将传智播客网站焦点图模块加入CSS后的效果，在网页中使用CSS对文字和图片以及模块的背景和布局都做了相应的设置。后期如果需要更改图片大小、文字样式等只需要调整CSS即可。

（3）行为标准

行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分，其具体区别如下。

• DOM（Document Object Model）是文档对象模型。文档对象模型是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

• ECMAScript（European Computer Manufacturers Association,ECMA）是以JavaScript为基础制定的标准脚本语言。JavaScript是一种基于对象和事件驱动，并具有相对安全性的客户端脚本语言，广泛用于Web开发，常用来给HTML网页添加动态功能，如响应用户的各种操作。

图1-7所示为传智播客网站焦点图模块加入Javascript后的效果。每隔一段时间，左边的三张焦点图就会自动切换，并且当用户的鼠标移到右边的文本描述时，左边会出现相应的图片，鼠标移开后又会按照默认的设置自动轮播，这就是网页的一种行为。