1.1 Web前端开发相关概念

Web开发分为前端（Front-end）和后端（Back-end）两部分，后端指的是程序、数据库和服务器层面的开发，而前端则指的是直接与用户接触的网页，比如布局、特效、交互等。

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

前端开发的主要工作是把UI（User Interface，用户界面）的设计图按照W3C标准做成HTML页面，用CSS进行布局，并且用javascript脚本语言实现页面上的前端互动。互动效果包括弹出层、页签切换、图片滚动、Ajax异步互动等。

1.1.1 浏览器

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标签语言的一个应用）内容，并让用户与这些文件交互的一种软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为HTML格式。目前常见的网页浏览器有QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。

但是并非所有浏览器都支持HTML5，同一浏览器不同的版本对HTML5的支持情况也不同。本书为了介绍Web前端开发的最新技术，使用的测试浏览器为Firefox48版本，如图1-1所示，读者可根据具体情况安装相应浏览器。

图1-1 浏览器

1.1.2 URL

URL（Uniform Resource Locator，统一资源定位符）是对可以从互联网上得到资源位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。每个页面都应具有唯一的一个URL。基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。完整的、带有授权部分的普通统一资源标志符语法看上去如下：

协议：//用户名：密码@子域名.域名.顶级域名：端口号/目录/文件名.文件后缀？参数=值#标志

如：http：//portal.sias.edu.cn/seeyon/main.do？method=main

上面地址看似语法很复杂，用户在浏览页面的时候一般不需要输入如此复杂的URL。用户在访问页面时一般只需输入网站的域名，通过超链接就可以达到该网站的其他页面。

1.1.3 WWW

WWW是环球信息网的缩写（亦作“Web”“WWW”“W3”，英文全称为“World Wide Web”），中文名字为“万维网”，“环球网”等，常简称为Web。分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URL）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过单击链接来获得资源。

1.1.4 网站

网站（Website）是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。用户可以通过浏览器来访问网站，获取需要的资讯或者享受网络服务。

因特网上的网站有很多，按照网站主体性质的不同分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其他非盈利机构网站以及其他类型等；按照网站功能划分有产品（服务）查询展示型网站、品牌宣传型网站、企业涉外商务网站、网上购物型网站、企业门户综合信息网站、行业协会信息门户、B2B交易服务型网站、沟通交流平台、政府门户信息网站等。那么这些各式各样的网站又是如何制作的呢？本书将为大家介绍相关技术和实现方法。

1.1.5 Web标准

Web开发应用遵循的标准就是Web标准。Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于Web的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。其官方网站为：http：//www.w3.org。

Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。

结构、表现和行为对应于3种常用的技术，即HTML、CSS和JavaScript。

●HTML用来决定网页的结构和内容。

●CSS用来设计网页的表现形式。

●JavaScript用来控制网页的行为。