【任务1-2】 网页制作入门

需求分析

HTML、CSS和JavaScript是网页制作的基本应用技术，也是本书学习的重点，要想学好这些技术，首先需要对它们有一个整体的认识。下面，将针对HTML、CSS和JavaScript语言的发展历史、流行版本、开发工具、运行平台等内容进行详细讲解。

知识储备

1.HTML简介

HTML（Hyper Text Markup Language，超文本标记语言），主要用来对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

HTML之所以被称为超文本标记语言，不仅是因为它通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。

下面，通过传智播客网站的一段源代码和相应的网页结构来简单地认识 HTML，具体如图1-8和图1-9所示。

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

HTML语言发展至今，经历了6个版本，这个过程中新增了许多HTML标记，同时也淘汰了一些标记，其具体历程如下。

• 超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布。

• HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。

• HTML 3.2——1997年1月14日，W3C推荐标准。

• HTML 4.0——1997年12月18日，W3C推荐标准。

• HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准。

• HTML5.0——2014年10月29日最终制定完成，并公开发布。

目前最新的HTML版本是HTML5，但是由于各个浏览器对其支持不统一，所以还没有得到广泛应用，如今互联网上大多数的网站采用的还是HTML4.01版本。

初期为了能更广泛地被大家接受，HTML 在语法上很宽松，如标记不区分大小写，可以不闭合等。对于传统的计算机来说，还有能力兼容松散的语法，但对于其他的设备，如手机、打印机等，兼容的难度就比较大。这并不符合标准的发展趋势，所以在2000年底，W3C组织发行了XHTML。

XHTML是更严谨纯净的HTML版本，目的是为了实现HTML向XML的过渡，它的可扩展性和灵活性将能适应未来网络应用更多的需求。虽然XML数据转换的能力强大，完全可以替代HTML，但是面对互联网上成千上万基于HTML编写的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的语法规则对其进行扩展，得到了XHTML。

目前，国际上网站设计行业推崇的Web标准就是基于XHTML的（即通常所说的DIV+CSS）。本书所讲解的HTML语言其实就是XHTML版本，只是由于人们的习惯，仍然称其为HTML。

2.CSS简介

CSS通常被称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。如图1-10所示，图中文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的。

1996年12月W3C发布了第一个有关样式的标准CSS1，又在1998年5月发布了CSS2。目前最新的版本是CSS3，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS2，也就是本书所讲解的版本。

CSS非常灵活，它既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以．css为扩展名。如图1-11所示的代码片段，CSS采用的是内嵌方式，虽然与HTML在同一个文件中，但CSS集中写在HTML文档的头部，也是符合结构与表现相分离的要求。

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

3.JavaScript简介

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

JavaScript代码可以嵌入在HTML中，也可以创建．js外部文件。通过JavaScrit可以实现网页中常见的下拉菜单、TAB 栏、焦点图轮播等动态效果。图1-12所示的“TAB 栏”就是通过JavaScript实现的，当用户将鼠标分别移到“公告”“规则”“论坛”等文字上时，对应的内容将会切换。

JavaScript语言的前身是LiveScript语言，最初由Netscape（网景公司）的Brendan Eich （瑞登• 艾克）设计，后来 Netscape 为了营销考虑，与 Sun 微系统达成协议，将其改名为JavaScript。为了取得技术优势，Microsoft（微软）公司推出了Jscript，它与JavaScript一样，可以在浏览器上运行。为了互用性，Ecma 国际创建了 ECMA-262标准（ECMAScript），目前流行使用的JavaScript、Jscript可以认为是ECMAScript的扩展。

4．常见浏览器介绍

一个制作好的网页文件必须要使用浏览器打开才能看到网页所呈现的效果，换句话说，浏览器是网页运行的平台。

目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，图1-13所示为一些常见浏览器的图标。基于某些因素，这些浏览器不能完全采用统一的Web标准，或者说不同的浏览器对同一个 CSS 样式有不同的解析。这样就导致了同样的页面在不同浏览器下的显示效果可能不同，图1-14所示为不同浏览器对HTML中列表标记的解析结果。

不同用户使用的浏览器不同，因此制作网页时，通常需要保证该网页兼容所有的主流浏览器。在这里，向读者介绍一下几种常见的浏览器，具体如下。

（1）IE浏览器

IE浏览器的全称是Internet Explorer，由微软公司推出，直接绑定在Windows操作系统中，无需下载安装。IE有6.0、7.0、8.0、9.0、10.0、11.0等版本，目前最新的是IE 11.0。但是由于各种原因，一些用户仍然在使用低版本的浏览器，如 IE6、IE7等，所以在制作网页时，也要考虑低版本浏览器的兼容问题。

对于其他的一些浏览器，如360安全浏览器、搜狗浏览器、遨游浏览器等大都是基于IE内核的，只要IE浏览器兼容，这些基于IE内核的浏览器也都没有问题。

（2）火狐浏览器

Mozilla Firefox，中文通常称其为“火狐”，是一个开源网页浏览器，使用Gecko引擎（非ie内核），可以在多种操作系统（如Windows、Mac和linux）上运行。Firebug是火狐浏览器下的一款开发插件，属于火狐强力推荐的插件之一，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发HTML、CSS、JavaScript等的得力助手。

实际工作中，调试网页的兼容性问题主要依靠Firebug插件，读者可在火狐浏览器菜单栏的【工具】→【附加组件】选项中下载Firebug插件，安装完成后使用快捷键F12可以直接调出Firebug界面，如图1-15所示。

由于火狐浏览器对Web标准的执行比较严格，而且使用Firebug调试网页非常方便，所以在实际的网页制作过程中火狐浏览器是最常用的浏览器。本书涉及的案例将全部在火狐浏览器中运行。

（3）谷歌浏览器

Google Chrome（谷歌浏览器）是由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单有效的使用界面。

IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还包括苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE、火狐和谷歌浏览器，就能满足绝大多数用户的需求。