下载掌阅APP，畅读海量书库
立即打开
说到网页大家并不陌生，我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。网页可以看作承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。本节将详细介绍与网页相关的内容。
为了使初学者更好地认识网页，首先来看一下淘宝网网站。打开谷歌浏览器，在地址栏中输入淘宝网网址，按“Enter”键，此时浏览器中显示的页面即为淘宝网首页，如图1-1所示。
从图1-1可以看到，网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。除了这些元素，网页中还可以包含音频、视频和动画等。
为了让初学者快速了解网页的构成，下面来看一下网页的源代码。按“F12”快捷键，浏览器中弹出的窗口显示了当前网页的源代码，具体如图1-2所示。
图1-2所示的淘宝网首页部分源代码是一个纯文本文件，仅包含一些特殊的符号和文本。而浏览网页时看到的图片、视频等，则是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。
除了首页外，淘宝网还包含多个子页面。例如，单击淘宝网首页的导航，会跳转到其他子页面，如聚划算、淘抢购、天猫超市等。多个页面通过链接集合在一起就形成了网站，在网站中，网页与网页之间可以通过链接互相访问。
图1-1 淘宝网首页
图1-2 淘宝网首页部分源代码
网页有静态和动态之分。所谓静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。而动态网页显示的内容则会随着用户操作和时间的不同而变化，这是因为动态网页可以与服务器数据库进行实时的数据交换。
现在大部分网站是由静态网页和动态网页混合而成的，两者各有特色，用户在开发网站时可根据需求酌情采用。本书讲解的HTML和CSS就是一种静态网页搭建技术。
对于从事网页制作工作的人员来说，有必要了解一些与互联网相关的名词，例如常见的Internet、WWW、URL等，具体介绍如下。
Internet就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。简单地说，互联网就是将世界范围内不同国家、不同地区的众多计算机连接起来形成的网络平台。
互联网实现了全球信息资源的共享，形成了一个能够共同参与、相互交流的互动平台。通过互联网，远在千里之外的朋友可以相互发送邮件、共同完成一项工作、共同娱乐。因此，互联网最大的成功之处并不在于技术层面，而在于对人类生活的影响，可以说互联网的出现是人类通信技术史上的一次革命。
WWW（英文World Wide Web的缩写）中文译为“万维网”。但WWW不是网络，也不代表Internet，它只是Internet提供的一种服务——网页浏览服务，我们上网时通过浏览器阅读网页信息就是在使用WWW服务。WWW是Internet最主要的服务，许多网络功能（例如网上聊天、网上购物等）都基于WWW服务。
URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。URL其实就是Web地址，俗称“网址”。在万维网上的所有文件（HTML、CSS、图片、音乐、视频等）都有唯一的URL，只要知道文件的URL，就能够对该文件进行访问。URL可以是“本地磁盘”，也可以是局域网上的某一台计算机，还可以是Internet上的站点，如https://www.baidu.com就是百度搜索的URL，如图1-3所示。
图1-3 百度搜索的URL
DNS（英文Domain Name System的缩写）是域名解析系统。在Internet上域名与IP地址之间是一一对应的，域名（例如淘宝网域名taobao.com）虽然便于用户记忆，但计算机只认识IP地址（如：100.4.5.6），将好记的域名转换成IP的过程被称为域名解析。DNS就是进行域名解析的系统。
HTTP（英文Hypertext Transfer Protocol的缩写）中文译为超文本传送协议。HTTP是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTP是非常可靠的协议，具有强大的自检能力，所有用户请求的文件到达客户端时，一定是准确无误的。
由于HTTP传输的数据都是未加密的，因此使用HTTP传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，网景（Netspace）公司设计了SSL（Secure Sockets Layer，安全套接字层）协议，该协议用于对HTTP传输的数据进行加密，从而就诞生了HTTPS。
简单来说，HTTPS是由SSL+HTTP构建的可进行加密传输、身份认证的网络协议，要比HTTP安全。
Web本意是蜘蛛网和网的意思。对于普通用户来说，Web仅仅是一种环境——互联网的使用环境、内容等。而对于网站制作者来说，Web是一系列技术的复合总称，包括网站的前台布局、后台程序、数据库开发等。
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际著名的标准化组织。W3C最重要的工作是发展Web规范，自1994年成立以来，已经发布了200多项影响深远的Web技术标准和实施指南，例如超文本标签（标记）语言（HTML）、可扩展标签（标记）语言（XML）等。这些规范有效促进了Web技术的兼容，对互联网的发展和应用起到了支撑作用。
由于不同的浏览器对同一个网页文件进行解析后的效果可能不一致，为了让用户能够看到正常显示的网页，Web开发者常常为需要兼容多个版本的浏览器而苦恼。当使用新的硬件（如移动电话）和软件（如浏览器）浏览网页时，这种网页无法正常显示的情况会变得更严重。为了使Web更好地发展，在开发新的应用程序时，浏览器开发商和站点开发商共同遵守标准就显得尤为重要。为此，W3C与其他标准化组织共同制定了一系列的Web标准。Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构、表现和行为3个方面，具体解释如下。
结构用于对网页中用到的信息进行分类和整理。在结构中用到的技术主要包括HTML、XML和XHTML。
· HTML（英文Hyper Text Markup Language的缩写）中文译为超文本标签（标记）语言，设计HTML的目的是创建结构化的文档以及提供文档的语义。目前最新版本的超文本标签语言是HTML5。
· XML是一种可扩展标签（标记）语言。XML的产生最初是为了弥补HTML的不足，其具有强大的扩展性（例如定义标签），可用于数据的转换和描述。
· XHTML是可扩展超文本标签（标记）语言。XHTML是基于XML的标签语言，是在HTML4.0的基础上，用XML的规则对其进行扩展建立起来的，用以实现HTML向XML的过渡，目前已逐渐被HTML5所取代。
网页焦点图的结构如图1-4所示，该结构使用HTML5搭建，4张图片按照从上到下的次序罗列，没有任何布局样式。
图1-4 网页焦点图的结构
表现是指网页展示给访问者的外在样式，一般包括网页的版式、颜色、字体大小等。在网页制作中，通常使用CSS来设置网页的样式。
CSS（英文Cascading Style Sheet的缩写）中文译为层叠样式表。CSS标准建立的目的是以CSS为基础进行网页布局，控制网页的样式。网页焦点图的样式如图1-5所示，是焦点图模块加入CSS后的效果，只显示第一张图片，将剩余的图片隐藏。
在网页中可以使用CSS对文字和图片以及模块的背景和布局进行相应的设置。后期如果需要更改样式，只需要调整CSS代码即可。
图1-5 网页焦点图的样式
行为是指网页模型的定义及交互效果的实现，包括ECMAScript、BOM、DOM三个部分，具体介绍如下。
· ECMAScript：是JavaScript的核心，由ECMA（European Computer Manufacturers Association）国际联合浏览器厂商制定。ECMAScript规定了JavaScript的语法规则和核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法标准。
· BOM：即浏览器对象模型。通过BOM可以操作浏览器窗口。例如，弹出框、控制浏览器导航条跳转等。
· DOM：即文档对象模型。DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。也就是通过DOM即可对页面中的各种元素进行操作。例如，元素的大小、颜色、位置等。
图1-6 网页焦点图的行为
网页焦点图的行为如图1-6所示，是焦点图模块加入JavaScript后的效果。每隔一段时间，焦点图就会自动切换，并且当用户的鼠标指针移动到按钮上时，会显示对应的图片，鼠标指针移开后又会按照默认的设置自动轮播，这就是网页的一种行为。