1.2 网页制作技术入门

HTML、CSS和JavaScript是网页制作的标准语言，要想学好、学会网页制作技术，首先需要对它们有一个整体的认识。本节将对这些网页制作的相关技术进行简单介绍。

1.2.1 HTML

HTML主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标签，例如段落标签、标题标签、超链接标签、图片标签等，网页中需要定义什么内容，就用相应的HTML标签描述即可。

HTML之所以称为超文本标签（标记）语言，是因为它不仅通过标签描述网页内容，而且文本中包含了超链接。通过超链接将网站、网页和各种网页元素链接起来，构成了丰富多彩的网站。下面通过一段网页的源代码截图来简单地认识HTML，具体如图1-7所示。

通过图1-7可以看出，网页内容是通过HTML指定的文本符号（图中带有“<>”的符号，被称为标签）描述的，网页文件其实是一个纯文本文件。

作为一种描述网页内容的语言，HTML的历史可以追溯到20世纪90年代初期。1989年HTML首次应用到网页编辑后，便迅速崛起成为网页编辑主流语言。到了1993年HTML首次以因特网草案的形式发布，众多不同的HTML版本开始在全球陆续使用，这些初具雏形的版本可以看作是HTML 1.0版。在后续的十几年中，HTML飞速发展，从2.0版（1995年）到3.2版（1997年）和4.0版（1997年），再到1999年的4.01版，HTML功能得到了极大的丰富。与此同时，W3C也掌握了对HTML的控制权。

由于HTML的4.01版本相对于4.0版本没有什么本质差别，只是提高了兼容性并删减了一些过时的标签，业界普遍认为HTML已经到了发展的瓶颈期，对Web标准的研究也开始转向了XML和XHTML。但是有较多的网站仍然是使用HTML制作的，因此一部分人成立了WHATWG（网页超文本应用技术工作小组），致力于HTML的研究。

2006年，W3C又重新介入HTML的研究，并于2008年发布了HTML5的工作草案。由于HTML5具备较强的解决实际问题的能力，因此得到各大浏览器厂商的支持，HTML5的规范也得到了持续完善。2014年10月底，W3C宣布HTML5正式定稿，网页进入了HTML5开发的新时代。本书所讲解的HTML语言就是最新的HTML5版本。

1.2.2 CSS

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

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

CSS的发展历史不像HTML那样曲折。1996年12月W3C发布了第一个有关样式的标准CSS1，随后CSS不断更新和强化功能，在1998年5月发布了CSS2。CSS的最新版本CSS3于1999年开始制订，W3C在2001年5月23日完成了CSS3的工作草案。CSS3的语法是建立在CSS原始版本基础上的，因此旧版本的CSS属性在CSS3版本中依然适用。

CSS3中增加了很多新样式，例如圆角效果、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@font-face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）等，这些新属性会在后面的章节中逐一讲解。

1.2.3 JavaScript

JavaScript是网页中的一种脚本语言，其前身叫作LiveScript，由网景公司开发。后来在Sun公司推出著名的Java语言之后，网景公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。

作为一门独立的网页脚本编程语言，JavaScript应用领域很广，但最主流的应用是在Web上创建网页特效或验证信息。图1-9为用户注册页面，图1-10为使用JavaScript脚本语言对用户输入的内容进行验证。如果用户在注册信息文本框中输入的信息不符合注册要求，或“确认密码”文本框与“密码”文本框中输入的信息不完全相同，就会弹出相应的提示信息。

1.2.4 网页的展示平台——浏览器

浏览器是网页运行的平台，常用的浏览器有IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器和欧朋（Opera）浏览器等，其中IE、火狐和谷歌是目前互联网上的三大浏览器，三大浏览器的图标如图1-11所示。对于一般的网站而言，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，即可满足绝大多数用户的需求。下面对这3种常用的浏览器进行详细讲解。

1.IE浏览器

IE浏览器的全称为“Internet Explorer”，是微软公司推出的一款网页浏览器。因此IE浏览器一般直接绑定在Windows操作系统中，无须下载安装。IE浏览器有6.0、7.0、8.0、9.0、10.0、11.0等版本，但是由于各种因素，一些用户仍然在使用低版本的浏览器如IE7、IE8等，所以在制作网页时，应考虑兼容哪些版本的浏览器。

浏览器最重要或者说最核心的部分是“Rendering Engine”，翻译为中文是“渲染引擎”，不过一般习惯将之称为“浏览器内核”。IE浏览器使用Trident作为内核，俗称为“IE内核”，国内的大多数浏览器都使用IE内核，例如百度浏览器、世界之窗浏览器等。

2.火狐浏览器

火狐浏览器的英文名称为“Mozilla Firefox”（简称Firefox），是一个自由并开源的网页浏览器。Firefox使用Gecko内核，该内核可以在多种操作系统如Windows、MacOS和Linux上运行。

说到火狐浏览器，就不得不提到它的开发插件Firebug（见图1-12）。Firebug一直是火狐浏览器中一款必不可少的开发插件，主要用来调试浏览器的兼容性。它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发HTML、CSS、JavaScript等的得力助手。

在老版本的火狐浏览器中，使用者可以在火狐浏览器菜单栏中的“工具→附加组件”选项中下载Firebug插件，安装完成后按“F12”键可以直接调出Firebug界面，如图1-13所示。

但是在新版本的火狐浏览器中（如57.0.2.6549版本），Firebug已经结束了其作为火狐浏览器插件的身份，被整合到火狐浏览器内置的“Web开发者”工具中。使用者可以在火狐浏览器菜单栏中选择“打开菜单→Web开发者”选项，如图1-14所示。此时下拉菜单会切换到图1-15所示的菜单面板，选择“查看器”选项，即可查看页面各个模块，如图1-16所示。

3.谷歌浏览器

谷歌浏览器的英文名称为“Chrome”，是由谷歌公司开发的网页浏览器。谷歌浏览器基于其他开源代码，目的是提升浏览器稳定性、速度和安全性，并创造出简单有效的使用界面。早期谷歌浏览器使用WebKit内核，但2013年4月之后，新版本的谷歌浏览器开始使用Blink内核。在目前的浏览器市场，谷歌浏览器凭借其卓越的性能占据浏览器市场的半壁江山，图1-17为2019年10月国内浏览器市场份额图。

从图1-17可以看出，在国内市场，谷歌浏览器占据很大市场份额，应用非常广泛。因此本书涉及的案例将全部在谷歌浏览器中运行演示。

多学一招：什么是浏览器内核

在1.2.4节中，频繁提到了浏览器的内核，什么是浏览器的内核呢？浏览器内核是浏览器最核心的部分，负责解释网页语法并渲染网页（也就是显示网页效果），是渲染引擎（标准叫法）的通俗叫法。渲染引擎决定了浏览器如何显示网页的内容和页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同内核的浏览器里的渲染（显示）效果也可能不同。目前常见的浏览器内核有Trident、Gecko、WebKit、Presto、Blink共5种，具体介绍如下。

· Trident内核：代表浏览器是IE浏览器，因此Trident内核又被称为IE内核。Trident内核只能用于Windows平台，并且不是开源的。

· Gecko内核：代表浏览器是Firefox浏览器。Gecko内核是开源的，其最大优势是可以跨平台。

· WebKit内核：代表浏览器是Safari以及老版本的谷歌浏览器，是开源的。

· Presto内核：代表浏览器是Opera浏览器。Presto内核是世界公认的渲染速度最快的引擎，但是在2013年之后，Opera宣布加入谷歌阵营，弃用了该内核。

· Blink内核：由谷歌和Opera开发，于2013年4月发布，现在Chrome内核是Blink。

而国内的一些浏览器大多采用双内核，例如360浏览器、猎豹浏览器采用Trident（兼容模式）+WebKit（高速模式）。

注意：

谷歌浏览器使用的内核其实是Chromium内核，但该内核是WebKit内核的一个分支，因此可以归类到WebKit内核。