1.1 揭秘Web前端

1.1.1 Web是什么

在中文里，Web被翻译成“网页”。在互联网发展得如火如荼的今天，大家都已经对网页不陌生了，看新闻、“刷”微博、上淘宝等都是在浏览网页。接下来，我们以“明日学院”的官方网站为例，初步感受一下网页的内部组成结构。打开任意一个浏览器（建议使用最新的谷歌浏览器，即Google Chrome），在地址栏中输入明日学院的网址，按回车键，浏览器中将显示图1-1所示内容。

从图1-1中我们可以发现，网页主要由文字、图片和链接等内容构成。那么，这些内容具体都是如何构成的呢？接下来，继续深入网页的核心——网页源代码。具体操作：单击鼠标右键，在弹出的快捷菜单中单击类似【查看网页源代码】的命令，浏览器将显示图1-2所示的内容，该页面显示的内容就是当前页面的源代码。

图1-2显示的内容就是明日学院官网主页的源代码，正是这些代码，组成了页面的各种元素。而这个页面本身，是一个纯文本文件。网页中文字、图片等内容，是浏览器读取这些纯文本文件而显示出来的。

除了主页之外，一个网站通常包含多个子页面，如明日学院官方网站包含“课程”“读书”和“社区”等子页面。网站实际上就是多个网页的集合，网页与网页之间通过超链接互相连接。比如，当用户单击明日学院官网主页菜单栏中的“课程”时，就会跳转到“课程”页面，如图1-3所示。

1.1.2 网页核心技术

HTML5、CSS3和JavaScript是制作网页会用到的主要技术。我们要想学会制作网页，最好能够掌握这3种技术。

本节将对HTML5、CSS3和JavaScript技术的发展历史、流行版本等内容进行概括式介绍。

1.HTML5概述

HTML5定义了一个简易的文件交换标准，它旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件显示。由于使用HTML5语言编写的文件具有极高的适应性，所以特别适用于网页源代码的编写。

（1）什么是HTML5。

HTML5是纯文本类型的语言，使用HTML5编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器打开它，查看其中的HTML5源代码，例如Windows的“记事本”程序；也可以在用浏览器打开网页时，通过使用相应的“查看”→“源文件”命令查看网页的HTML5代码。使用HTML5编写的文件可以直接由浏览器解释执行，无需编译。当我们用浏览器打开网页时，浏览器读取网页的HTML5代码，分析其语法结构，然后根据解释执行的结果显示网页内容。

下面让我们通过明日学院网站的一段源代码（见图1-4）和对应的网页结构（见图1-5）来简单认识一下HTML5。

从图1-4可以看出，网页内容是通过HTML5标签（图中带有“< >”的符号）描述的，网页文件其实是一个纯文本文件。这段代码对应的网页效果如图1-5所示，图中的文字都带有超链接。

（2）HTML5发展历程。

HTML5的历史可以追溯到很久以前。1993年HTML1.0首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的飞速发展，从2.0版，到3.2版和4.0版，再到1999年的4.01版，一直到现在正逐步普及的HTML5。随着HTML的发展，W3C掌握了HTML5规范的控制权。

在快速发布了这几个版本之后，业界普遍认为HTML已经“无路可走”了，对Web标准的焦点也开始转移到了XML和XHTML上，HTML被放在次要位置。不过在此期间，HTML展现了顽强的生命力，主要的网站内容还是基于HTML的。为能支持新的Web应用，同时克服现有的缺点，HTML迫切需要添加新功能，制定新规范。

为了将 Web 平台提升到一个新的高度，一群人在2004年成立了 Web 超文本应用技术工作组（Web Hypertext Application Technology Working Group,WHATWG），他们创立了HTML5规范，同时开始专门针对Web应用开发新功能——这被WHATWG认为是HTML中最薄弱的环节。“Web 2.0”这个新词也就是在那个时候被发明的。Web 2.0实至名归，开创了Web的第二个时代，旧的静态网站逐渐让位于具有更多特性的动态网站和社交网站——这其中的新功能真的是数不胜数。

2006年，W3C又重新介入HTML，并于2008年发布了HTML5的工作草案。2009年，XHTML2工作组停止工作。又过了一年，因为HTML5能解决非常实际的问题，所以在规范还没有具体定下来的情况下，各大浏览器厂家就已经按捺不住了，开始对旗下产品进行升级以支持HTML5的新功能。这样，得益于浏览器的实验性反馈，HTML5规范也得到了持续的完善，HTML5以这种方式迅速融入了对Web平台的实质性改进。

2.CSS3概述

（1）什么是CSS3。

CSS3（层叠样式表）通常被称为CSS3样式表，主要用于设置HTML5页面的文本格式（字体、大小和对齐方式等）、图片的外形（宽高、边框样式、边框等）以及版面的布局等外观显示样式。CSS3以 HTML5为基础，提供了丰富的功能，如字体、颜色、背景的控制等，而且还可以针对不同的浏览器设置不同的样式，如图1-6所示。

（2）CSS3发展历程。

1996年12月，W3C发布了第一个有关样式的标准CSS1，又在1998年5月发布了CSS2。截至撰稿日，最新的版本是CSS3。CSS3非常灵活，既可以嵌入HTML文件，也可以是一个独立文件（如果是独立文件，则必须以.css为扩展名）。

如今大多数网页都是遵照Web标准开发的，即用HTML5编写网页结构和内容，而相关版面布局、文本和图片的显示样式都使用CSS3控制。HTML5与CSS3的关系就像人的骨骼与衣服，通过更改CSS3样式，可以轻松控制网页的表现形式。

3.JavaScript概述

（1）什么是JavaScript。

JavaScript是网页设计的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，HTML5用于搭建页面结构并编写内容，CSS3用于设置页面样式，而JavaScript则用于为页面添加动态效果。

JavaScript代码可以嵌入到HTML5中，也可以作为扩展名为js的独立文件。通过JavaScript可以实现网页中一些常见的特效。以图1-7所示的图片特效为例，当用户将鼠标指针滑动到“Java 企业门户网站”的图片上时，将会出现对应的介绍文字。

（2）JavaScript发展历程。

JavaScript语言的前身是LiveScript语言，最初由Netscape（网景通信公司）的布兰登·艾克（Brendan Eich）设计，后来Netscape与Sun公司达成协议，将其改名为JavaScript。为了统一规范，Ecma国际（Ecma International）创建了ECMA-262标准（ECMAScript），目前使用的JavaScript可以认为是ECMAScript的扩展语言。