1 Web前端开发技术与实践 第1章：概述 阮晓龙 /rxl@ 河南中医学院管理信息工程学科河南中医学院网络信息中心2015.9
2 本章主要内容 Web基础Web是如何工作的为什么要学习Web前端开发 河南中医学院/阮晓龙//
3 1.Web基础 1.1基本概念 Web直译是蜘蛛网和网的意思，现广泛译作网络、互联网等技术领域。
关于Web，常见的定义描述方式主要有以下三种。
定义一：表现形式定义二：环球网定义三：网页 河南中医学院/阮晓龙//
4 1.Web基础 1.1基本概念 定义一：表现形式 超文本（HyperText） 超文本，超级文本的简称。
一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互的方式进行搜索。
超媒体（UltraMedia） 超媒体，超级媒体的简称。
超媒体是一种采用非线性网状结构对块状多媒体信息（包括文本、图像、视频等）进行组织和管理的技术。
超文本传输协议（HyperTextTransferProtocol，HTTP） 超文本传输协议，用于Web服务器传输超文本到本地浏览器的传输协议。
河南中医学院/阮晓龙//
5 1.Web基础 1.1基本概念 定义二：环球网 Web又引申为“环球网”，在不同的领域，有不同的含义。
对普通的用户来讲，Web仅仅是互联网的使用环境、氛围、内容等。
对网站制作、设计、开发工程师来讲，它是一系列技术的复合总称（网站的前端开发、后台程序、美工、数据库等技术概括性的总称）。
河南中医学院/阮晓龙//
6 1.Web基础 1.1基本概念 定义三：网页 网页，是网站中的一个页面，通常是HTML（HyperTextMarkupLanguage）格式（文件扩展名为.html、.htm、.asp、.aspx、.php、.jsp等），使用图像文档来提供图画。
需要透过浏览器来进行阅读。
河南中医学院/阮晓龙//
7 1.Web基础 1.2 定义 是在全球范围，由采用TCP/IP协议族的众多计算机网相互连接而成的最大的开放式计算机网络，是世界范围内网络和网关的集合体，使用通用的TCP/IP协议簇进行相互通信，是一个开放的网络系统。
河南中医学院/阮晓龙//
8 1.Web基础 1.2 起源 是全球最大的计算机网络，起源于美国国防部高级研究计划局DARPA（DefenseadvancedResearchProjectsAgency）建立的用于支持军事研究的计算机试验网，该网于1969年投入使用。
从60年代开始，ARPA就开始向美国国内大学的计算机系和一些私人有限公司提供经费，以促进基于分组交换技术的计算机网络的研究。
河南中医学院/阮晓龙//
9 1.Web基础 1.2 在中国 截至2015年6月，中国网民规模达6.68亿，半年共计新增网民1894万人。
互联网普及率为48.8%，较2014年底提升了0.9个百分点。
河南中医学院/阮晓龙// 10
1.Web基础 1.2 截至2015年6月，中国手机网民规模达5.94亿，较2014年底增加3679万人。
网民中使用手机上网人群占比由2014年底的85.8%提升至88.9%。
河南中医学院/阮晓龙// 11
1.Web基础 1.2 截至2015年6月，中国网民中农村网民占比27.9%，规模达1.86亿，较2014年底增加800万人。
河南中医学院/阮晓龙// 12
1.Web基础 1.2 截至2015年6月，中国网民通过台式电脑和笔记本电脑接入互联网的比例分别为68.4%和42.5%；手机上网使用率为88.9%，较2014年底提高3.1个百分点；平板电脑上网的比例为33.7%，较2014年底下降了1.1个百分点；网络电视使用率为16.0%。
河南中医学院/阮晓龙// 13
1.Web基础 1.2 截至2015年6月，我国IPv4地址数量为3.36亿，拥有IPv6地址19338块/32。
我国域名总数为2231万个，其中“.CN”域名总数为1225万个，占我国域名总数比例为54.9%，“.中国”域名总数为26万个。
我国网站总数为357万个，其中CN下网站数为163万个。
河南中医学院/阮晓龙//
1.Web基础 14 1.2 河南中医学院/阮晓龙//
1.Web基础 15 1.2 河南中医学院/阮晓龙//
1.Web基础 16 1.2 河南中医学院/阮晓龙//
1.Web基础 Web协议主要有以下三种。
HTTPHTTPSFTP 河南中医学院/阮晓龙// 17 1.3Web协议 18
1.Web基础 1.3Web协议 HTTP HTTP（HyperTextTransferProtocol，超文本传输协议），详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。
HTTP是互联网上应用最为广泛的一种网络协议。
所有的Web文件都必须遵守这个标准。
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
河南中医学院/阮晓龙// 19
1.Web基础 1.3Web协议 HTTPS HTTPS（HyperTextTransferProtocoloverSecureSocketLayer），是以安全为目标的HTTP通道，是安全的HTTP。
在HTTP传输中加入SSL层，HTTPS的安全基础是SSL，因此加密详细内容就需要SSL，用于安全的HTTP数据传输。
河南中医学院/阮晓龙// 20
1.Web基础 1.3Web协议 FTP FTP（FileTransferProtocol,文件传输协议），是TCP/IP协议组中的协议之
一，是网络上两台计算机传送文件的协议，也是在TCP/IP网络和上最早使用的协议之
一。
FTP协议属于网络协议组的应用层。
FTP客户机可以给服务器发出命令来下载文件、上载文件、创建或改变服务器上的目录等。
河南中医学院/阮晓龙// 21
1.Web基础 1.4URL和域名 URL URL（UniformResourceLocator，统一资源定位符）是资源标识符最常见的形式。
URL描述了一台特定服务器上某资源的特定位置，可以明确说明如何从一个精确、固定的位置获取资源。
河南中医学院/阮晓龙//
1.Web基础 URL 完整的URL通常有以下四部分组成。
协议（方案，scheme）服务器名称（或IP地址）路径文件名 22 1.4URL和域名 河南中医学院/阮晓龙// 23
1.Web基础 1.4URL和域名 域名 域名（DomainName），是由一串用点分隔的名字组成的上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。
域名的目的是便于记忆服务器的地址（例如网站地址，电子邮件地址，文件服务资源地址等）。
河南中医学院/阮晓龙// 24
1.Web基础 1.5服务器 服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。
在网络环境下，根据服务器提供的服务类型不同，分为文件服务器、数据库服务器、应用程序服务器、Web（网站）服务器等。
根据服务器在网络中应用的层次（或服务器的档次来），依据整个服务器的综合性能，特别是所采用的一些服务器专用技术来衡量的，将服务器可分为：入门级服务器、工作组级服务器、部门级服务器、企业级服务器。
河南中医学院/阮晓龙// 25
1.Web基础 1.6Web标准 Web标准不是某一个标准，而是一系列标准的集合。
Web标准定义网页主要由三个部分组成。
结构表现行为 对应的标准也分三方面。
结构化标准语言，主要包括XHTML、XML和HTML5。
表现标准语言，主要包括CSS。
行为标准，主要包括对象模型（如W3CDOM）、ECMAScript等。
河南中医学院/阮晓龙// 26
1.Web基础 1.6Web标准 结构化标准语言 可扩展标记语言（XML） XML来源于标准通用标记语言，可扩展标记语言和标准通用标记语言都是能定义其他语言的语言。
XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
可扩展超文本标记语言（XHTML） 目前推荐遵循的是W3C于2000年1月26日推荐的XHTML1.0。
XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还没有足够的环境。
因此在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。
简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
河南中医学院/阮晓龙// 27
1.Web基础 1.6Web标准 表现标准语言 层叠样式表（CSS）目前推荐遵循的是万维网联盟（W3C）于1998年5月12日推荐CSS2。
W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。
纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
河南中医学院/阮晓龙// 28
1.Web基础 1.6Web标准 行为标准 文档对象模型（DOM） DOM是一种与浏览器与平台的语言接口，使得可以访问页面其他的标准组件。
简单的说，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，来访问站点中的数据、脚本和表现层对象。
ECMAScript ECMAScript是ECMA（EuropeanComputerManufacturersAssociation）制定的标准脚本语言（JavaScript）。
目前推荐遵循的是ECMAScript262。
河南中医学院/阮晓龙// 29
2.Web是如何工作的 2.1什么是网页 网页是构成网站的基本元素，是承载各种网站应用的平台。
文字和图片是构成一个网页的最基本的元素。
文字是网页的内容，图片使网页表现地美观，除此之外，网页的元素还包括动画、音视频、程序等。
河南中医学院/阮晓龙// 30
2.Web是如何工作的 2.1什么是网页 网页实际上是一个纯文本文件。
网页通过各式各样的标记对页面上的文字、图片、表格、音视频等元素进行描述，而浏览器通过对这些标记进行解释并生成页面，把网页通过一定的格式展现出来。
在网页文件中存放的是图片的链接位置，而图片文件、网页文件是互相独立存放的，甚至可以不在同一台计算机上，因此在查看源文件时是无法看到图片、音视频、动画等内容。
河南中医学院/阮晓龙// 31
2.Web是如何工作的 2.1什么是网页 网页可以分为静态网页和动态网页。
静态页面 静态网页是指没有后台数据库、不含开发程序和不可交互的网页。
静态网页制作完成后，页面的内容和显示效果确定了，除非修改页面代码，因此静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
纯粹HTML格式的网页通常被称为静态网页，静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、动画、客户端脚本和ActiveX控件及程序等。
河南中医学院/阮晓龙// 32
2.Web是如何工作的 2.1什么是网页 网页可以分为静态网页和动态网页。
动态态页面 动态网页一般以数据库技术为基础，可以与后台数据库进行交互与数据传递，可以大大降低网站维护的工作量。
采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等。
动态网页以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀。
河南中医学院/阮晓龙// 33
2.Web是如何工作的 2.2什么是网站 关于网站的定义较多，常见的定义有以下三种。
定义
一 网站（Website）开始是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。
定义
二 因特网上一块固定的面向全世界发布消息的地方，由域名（网站地址）和网站空间构成，通常包括主页和其他具有超链接文件的页面。
定义
三 网站是一个逻辑上的概念，是由一系列的内容组合而成的。
网站包含的内容有：网站的域名、提供网站服务的服务器或者网站空间、网页、网页内容所涉及的图片视频等文件、网页之间的关系。
河南中医学院/阮晓龙// 34
2.Web是如何工作的 2.3网页和网站的关系 网站是一个整体，网页是一个个体，一个网站是由多个网页构建而成。
简单来说，网站是由网页集合而成的，通过浏览器所看到的页面就是网页。
河南中医学院/阮晓龙// 35
2.Web是如何工作的 2.3网页和网站的关系 具体来说，网页是一个html文件，浏览器是用来解析这份文件的，网站是由许多html文件集合而成。
网站是有域名、网站存放空间的内容集合，网站所包含的内容有网页、程序、图片、视频、音频等内容和内容之间的链接关系，一个网站可能有很多网页，也可以只有一个网页。
网页是网站内容的重要组成部分。
河南中医学院/阮晓龙// 36 网页和网站的关系 河南中医学院/阮晓龙// 37
2.Web是如何工作的 2.4浏览器是怎么工作的 浏览器主要功能 浏览器的主要功能是将用户选择的Web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。
河南中医学院/阮晓龙// 38 Web浏览器 河南中医学院/阮晓龙//
2.Web是如何工作的 浏览器的主要组件包括以下七个方面。
用户界面浏览器引擎渲染引擎网络UI后端JS解析器数据存储 39 2.4浏览器是怎么工作的 河南中医学院/阮晓龙// 浏览器的主要组件 40
2.Web是如何工作的 2.4浏览器是怎么工作的 用户界面 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎 用来查询及操作渲染引擎的接口。
渲染引擎 用来显示请求的内容，例如：请求内容为html，它负责解析html及css，并将解析的结果显示出来。
河南中医学院/阮晓龙// 41
2.Web是如何工作的 2.4浏览器是怎么工作的 网络 用来完成网络调用，例如：http请求具有平台无关的接口，可以在不同平台上工作。
UI后端 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
河南中医学院/阮晓龙// 42
2.Web是如何工作的 2.4浏览器是怎么工作的 JS解释器 用来解释执行JS代码。
数据存储 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，这是一种轻量级完整的客户端存储技术。
河南中医学院/阮晓龙// 43
2.Web是如何工作的 2.5访问网站的过程 从输入一个网站域名到访问网站的过程一般包括以下5个步骤。
输入网址。
通过域名服务器查找用户输入网址的域名指向的IP地址。
通过获取的IP地址请求Web服务器。
Web服务器接收请求，并返回请求数据信息。
客户端浏览器接收到请求数据后，将信息组织成可以查看的网页内 容。
河南中医学院/阮晓龙// 44 网站访问过程 河南中医学院/阮晓龙// 45
2.Web是如何工作的 2.6网站是怎么开发的 网站开发技术分为前端技术和后端技术。
Web前端技术 在Web前端开发中有HTML、CSS、JavaScript等技术。
Web后端技术 在Web后端开发中有CGI、PHP、JSP、Python、ASP.NET、Ruby等开发技术。
河南中医学院/阮晓龙// 46
2.Web是如何工作的 2.6网站是怎么开发的 网站的主要开发技术 HTML 用于静态页面开发，是网站开发的基础。
CSS 层叠样式表，对网页中的对象位置和样式进行精确控制。
JavaScript 前端编程语言，用于给HTML网页增加动态和交互功能。
PHP HTML内嵌式语言，一种在服务器端执行的嵌入HTML文档的脚本语言。
河南中医学院/阮晓龙// 47
2.Web是如何工作的 2.6网站是怎么开发的 网站的主要开发技术 PHP HTML内嵌式语言，一种在服务器端执行的嵌入HTML文档的脚本语言。
JSP JSP（JavaServerPages）是一种动态页面技术，它的主要目的是将表示逻辑从Servlet中分离出来。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。
河南中医学院/阮晓龙// 48
2.Web是如何工作的 2.6网站是怎么开发的 网站的主要开发技术 Python Python是一种面向对象、解释型计算机程序设计语言。
Python是纯粹的自由软件，源代码和解释器CPython遵循GPL(GNUGeneralPublicLicense)协议。
Python语法简洁清晰，强制用空白符作为语句缩进。
ASP.NET ASP.NET是.NETFrameWork的一部分，是微软公司的技术，是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术。
河南中医学院/阮晓龙// 49
2.Web是如何工作的 2.6网站是怎么开发的 开发网站需要哪些人 网站开发是一个系统的工程，需要多种人员协调配合，共同完成。
通常网站开发过程中的人员角色如下所述。
项目经理内容编辑网站结构规划美术设计主页制作软件程序开发系统管理文档管理质量检测 河南中医学院/阮晓龙// 50
2.Web是如何工作的 2.6网站是怎么开发的 网站项目开发流程 需求分析 当拿到一个网站项目时，必须进行需求分析。
分析网站的风格、网站的类型、网站的版块、网站的域名及空间等。
规划静态内容 重新确定其需求分析，并根据用户需求分析，规划出网站的内容板块草图。
设计阶段 根据网站草图，由美工制作成效果图。
河南中医学院/阮晓龙// 51
2.Web是如何工作的 2.6网站是怎么开发的 网站项目开发流程 开发阶段 根据页面结构和设计，前端和后台可以同时进行。
前端开发工程师根据设计效果负责制作静态页面。
程序开发工程师根据其页面结构和设计，设计数据库，并网站支撑系统和软件的开发。
测试和发布 对网站进行系统测试，并根据测试解决错误。
在完成测试后，通过服务器将网站发布。
河南中医学院/阮晓龙// 52
2.Web是如何工作的 2.6网站是怎么开发的 网站建设中除了开发，还需要做的工作。
网站测试 对制作好的网站进行兼容性测试、功能测试、性能测试、安全测试等。
网站发布 对制作完成的网站通过互联网进行发布，包括申请域名、部署实施等。
网站维护 网站发布并正式运行后，需要对内容持续进行更新，对网站中出现的错误持续进行修订和完善，提升网站的安全及性能等。
河南中医学院/阮晓龙// 53
3.为什么学习Web前端开发 Web技术已经成为一门广泛应用的技术。
除了日常的网站访问和信息浏览，Web已经成为各种设备的有 机组成部分。
例如交换机、路由器、服务器的管理，都可以通过Web的方式进行管理，并且这种惯例方式得到了越来越多的应用。
各种信息技术都在向Web化靠拢。
河南中医学院/阮晓龙// 54
3.为什么学习Web前端开发 学习Web前端开发技术，具有一定的优势，具体如下所述。
前端开发入门门槛低，但需求量大，尤其是有经验的前端开发人员。
前端开发可在短期内积累足够的经验，而后端开发想要积累同等程度的经 验需要时间长。
前端开发技术变化慢，而后端开发技术更新很快，各种框架、架构模式变 更迅速，相比较而言，学习成本低。
前端开发技术发展越来越成熟，且适用范围更广。
比如HTML5可以替代原生APP，JavaScript能够用于数据库操作（MongoDB等NoSQL支持JS语法），NodeJS能够让JavaScript在服务器端运行等。
河南中医学院/阮晓龙// 55
3.为什么学习Web前端开发 3.1什么是Web前端开发 Web前端开发是指利用HTML、CSS、JavaScript、DOM等各种Web技术进行产品的界面开发。
Web前端开发的工作目标是制作标准优化的代码，并增加交互动态功能，同时结合后台开发技术实现整体应用目标，通过技术改善用户体验。
河南中医学院/阮晓龙// 56
3.为什么学习Web前端开发3.2Web前端工程师的工作内容 Web前端工程师的工作内容，主要有以下几点。
为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性； 负责产品整体前端框架的搭建；参与产品的前端开发，与后端工程师协作，高质高效完成产品的数 据交互、动态信息展现；使用JS或AS编写封装良好的前端交互组件，维护及优化网站前端 页面性能；研究和探索创新的开发思路和最新的前端技术。
河南中医学院/阮晓龙// 57
3.为什么学习Web前端开发3.3Web前端工程师的职业前景 Web前端工程师目前已经成为业界普遍任何的工作岗位，有较大的市场需求，在职业发展中也逐步形成职业发展体系。
Web前端工程师的职业方向大致有两种。
资深Web前端工程师 Web前端工程师通过不断的学习、提高和经验积累，逐步走向资深Web前端工程师，这是最基本的职业发展。
在国外，很多工程师都能够把自己的专业做到极致，在一个专业领域不断学习和积累。
Web架构师 Web前端工程师通过积累和对产品、项目的深入理解，以及对技术的进一步研究和理解，将能够更好的规划和设计Web架构的应用服务和大型网站，并逐步成长为Web架构师。
河南中医学院/阮晓龙// 58
3.为什么学习Web前端开发 3.4需要学习那些内容 Web前端开发一般需要学习以下内容。
HTML HTML（超文本标记语言）是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML。
CSS CSS（层叠样式表）用来描述网页内容如何显示，是能够真正做到网页表现与内容分离的一种样式设计语言。
JavaScript JavaScript是应用最为广泛的脚本语言，在网页中，可以用来添加互动和行为 河南中医学院/阮晓龙// 59
3.为什么学习Web前端开发 3.4需要学习那些内容 程序编程语言 目前大多数网站都是动态网站，虽然Web前端工程师不需要进行大量的动态网站程序开发，但是却经常性的需要和程序开发人员进行配合和业务衔接，因此掌握一定的动态网站开发语言对于工作来讲非常必要。
河南中医学院/阮晓龙// 60
3.为什么学习Web前端开发 3.5需要购买哪些设备 Web前端开发工作需要一定的设备来开展工作，初学者也需要一定的条件方能开展学习工作。
通常需要的设备有以下几种。
性能稳定的计算机额外的内存大一些的显示器移动设备 河南中医学院/阮晓龙// 61
3.为什么学习Web前端开发 3.6除了技术，还需要学什么 Web前端开发出了学习最基础和最核心的技术外，还需要掌握和具备其他技术和能力。
计算机专业知识，包括编译原理、计算机网络、操作系统、算法原理、软件工程、软件测试原理等专业计算机知识，这些知识能够帮助开发者更好的理解和掌握Web前端开发技术，并帮助开发人员更快速的学习。
知识管理、总结分享的能力。
河南中医学院/阮晓龙// 62
3.为什么学习Web前端开发 3.6除了技术，还需要学什么 Web前端开发出了学习最基础和最核心的技术外，还需要掌握和具备其他技术和能力。
沟通技巧、团队协作开发、需求管理、项目管理的能力。
代码模块化开发的基本方法和技术。
代码版本管理的技术。
交互设计、可用性、可访问性的原理和技术。
河南中医学院/阮晓龙// 63 河南中医学院/阮晓龙// 河南中医学院/阮晓龙// 64 Thanks.