Web前端开发技术与实践

第1章:概述阮晓龙13938213680/rxl@hactcm.
edu.
cnhttp://web.
51xueweb.
cn河南中医学院管理信息工程学科河南中医学院网络信息中心2015.
91河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn本章主要内容Web基础Web是如何工作的为什么要学习Web前端开发2河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础Web直译是蜘蛛网和网的意思,现广泛译作网络、互联网等技术领域.
关于Web,常见的定义描述方式主要有以下三种.
定义一:表现形式定义二:环球网定义三:网页31.
1基本概念河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础定义一:表现形式超文本(HyperText)超文本,超级文本的简称.
一种全局性的信息结构,它将文档中的不同部分通过关键字建立链接,使信息得以用交互的方式进行搜索.
超媒体(UltraMedia)超媒体,超级媒体的简称.
超媒体是一种采用非线性网状结构对块状多媒体信息(包括文本、图像、视频等)进行组织和管理的技术.
超文本传输协议(HyperTextTransferProtocol,HTTP)超文本传输协议,用于Web服务器传输超文本到本地浏览器的传输协议.
41.
1基本概念河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础定义二:环球网Web又引申为"环球网",在不同的领域,有不同的含义.
对普通的用户来讲,Web仅仅是互联网的使用环境、氛围、内容等.
对网站制作、设计、开发工程师来讲,它是一系列技术的复合总称(网站的前端开发、后台程序、美工、数据库等技术概括性的总称).
51.
1基本概念河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础定义三:网页网页,是网站中的一个页面,通常是HTML(HyperTextMarkupLanguage)格式(文件扩展名为.
html、.
htm、.
asp、.
aspx、.
php、.
jsp等),使用图像文档来提供图画.
需要透过浏览器来进行阅读.
61.
1基本概念河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础Internet定义Internet是在全球范围,由采用TCP/IP协议族的众多计算机网相互连接而成的最大的开放式计算机网络,是世界范围内网络和网关的集合体,使用通用的TCP/IP协议簇进行相互通信,是一个开放的网络系统.
71.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础Internet起源Internet是全球最大的计算机网络,起源于美国国防部高级研究计划局DARPA(DefenseadvancedResearchProjectsAgency)建立的用于支持军事研究的计算机试验网ARPAnet,该网于1969年投入使用.
从60年代开始,ARPA就开始向美国国内大学的计算机系和一些私人有限公司提供经费,以促进基于分组交换技术的计算机网络的研究.
81.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础Internet在中国截至2015年6月,中国网民规模达6.
68亿,半年共计新增网民1894万人.
互联网普及率为48.
8%,较2014年底提升了0.
9个百分点.
91.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础截至2015年6月,中国手机网民规模达5.
94亿,较2014年底增加3679万人.
网民中使用手机上网人群占比由2014年底的85.
8%提升至88.
9%.
101.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础截至2015年6月,中国网民中农村网民占比27.
9%,规模达1.
86亿,较2014年底增加800万人.
111.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础截至2015年6月,中国网民通过台式电脑和笔记本电脑接入互联网的比例分别为68.
4%和42.
5%;手机上网使用率为88.
9%,较2014年底提高3.
1个百分点;平板电脑上网的比例为33.
7%,较2014年底下降了1.
1个百分点;网络电视使用率为16.
0%.
121.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础截至2015年6月,我国IPv4地址数量为3.
36亿,拥有IPv6地址19338块/32.
我国域名总数为2231万个,其中".
CN"域名总数为1225万个,占我国域名总数比例为54.
9%,".
中国"域名总数为26万个.
我国网站总数为357万个,其中CN下网站数为163万个.

131.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础141.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础151.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础161.
2Internet河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础Web协议主要有以下三种.
HTTPHTTPSFTP171.
3Web协议河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础HTTPHTTP(HyperTextTransferProtocol,超文本传输协议),详细规定了浏览器和万维网服务器之间互相通信的规则,通过因特网传送万维网文档的数据传送协议.
HTTP是互联网上应用最为广泛的一种网络协议.
所有的Web文件都必须遵守这个标准.
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法.
181.
3Web协议河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础HTTPSHTTPS(HyperTextTransferProtocoloverSecureSocketLayer),是以安全为目标的HTTP通道,是安全的HTTP.
在HTTP传输中加入SSL层,HTTPS的安全基础是SSL,因此加密详细内容就需要SSL,用于安全的HTTP数据传输.
191.
3Web协议河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础FTPFTP(FileTransferProtocol,文件传输协议),是TCP/IP协议组中的协议之一,是Internet网络上两台计算机传送文件的协议,也是在TCP/IP网络和Internet上最早使用的协议之一.
FTP协议属于网络协议组的应用层.
FTP客户机可以给服务器发出命令来下载文件、上载文件、创建或改变服务器上的目录等.
201.
3Web协议河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础URLURL(UniformResourceLocator,统一资源定位符)是资源标识符最常见的形式.
URL描述了一台特定服务器上某资源的特定位置,可以明确说明如何从一个精确、固定的位置获取资源.
211.
4URL和域名河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础URL完整的URL通常有以下四部分组成.
协议(方案,scheme)服务器名称(或IP地址)路径文件名221.
4URL和域名河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础域名域名(DomainName),是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的方位(有时也指地理位置,地理上的域名,指代有行政自主权的一个地方区域).
域名的目的是便于记忆服务器的地址(例如网站地址,电子邮件地址,文件服务资源地址等).
231.
4URL和域名河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础服务器的构成包括处理器、硬盘、内存、系统总线等,和通用的计算机架构类似,但需要提供高可靠的服务,因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高.
在网络环境下,根据服务器提供的服务类型不同,分为文件服务器、数据库服务器、应用程序服务器、Web(网站)服务器等.
根据服务器在网络中应用的层次(或服务器的档次来),依据整个服务器的综合性能,特别是所采用的一些服务器专用技术来衡量的,将服务器可分为:入门级服务器、工作组级服务器、部门级服务器、企业级服务器.
241.
5服务器河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础Web标准不是某一个标准,而是一系列标准的集合.
Web标准定义网页主要由三个部分组成.
结构表现行为对应的标准也分三方面.
结构化标准语言,主要包括XHTML、XML和HTML5.
表现标准语言,主要包括CSS.
行为标准,主要包括对象模型(如W3CDOM)、ECMAScript等.
251.
6Web标准河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础结构化标准语言可扩展标记语言(XML)XML来源于标准通用标记语言,可扩展标记语言和标准通用标记语言都是能定义其他语言的语言.
XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述.
可扩展超文本标记语言(XHTML)目前推荐遵循的是W3C于2000年1月26日推荐的XHTML1.
0.
XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还没有足够的环境.
因此在HTML4.
0的基础上,用XML的规则对其进行扩展,得到了XHTML.
简单的说,建立XHTML的目的就是实现HTML向XML的过渡.
261.
6Web标准河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础表现标准语言层叠样式表(CSS)目前推荐遵循的是万维网联盟(W3C)于1998年5月12日推荐CSS2.
W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言.
纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易.
271.
6Web标准河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn1.
Web基础行为标准文档对象模型(DOM)DOM是一种与浏览器与平台的语言接口,使得可以访问页面其他的标准组件.
简单的说,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予Web设计师和开发者一个标准的方法,来访问站点中的数据、脚本和表现层对象.
ECMAScriptECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的标准脚本语言(JavaScript).
目前推荐遵循的是ECMAScript262.
281.
6Web标准河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网页是构成网站的基本元素,是承载各种网站应用的平台.
文字和图片是构成一个网页的最基本的元素.
文字是网页的内容,图片使网页表现地美观,除此之外,网页的元素还包括动画、音视频、程序等.
292.
1什么是网页河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网页实际上是一个纯文本文件.
网页通过各式各样的标记对页面上的文字、图片、表格、音视频等元素进行描述,而浏览器通过对这些标记进行解释并生成页面,把网页通过一定的格式展现出来.
在网页文件中存放的是图片的链接位置,而图片文件、网页文件是互相独立存放的,甚至可以不在同一台计算机上,因此在查看源文件时是无法看到图片、音视频、动画等内容.
302.
1什么是网页河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网页可以分为静态网页和动态网页.
静态页面静态网页是指没有后台数据库、不含开发程序和不可交互的网页.
静态网页制作完成后,页面的内容和显示效果确定了,除非修改页面代码,因此静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站.
纯粹HTML格式的网页通常被称为静态网页,静态网页是标准的HTML文件,它的文件扩展名是.
htm、.
html,可以包含文本、图像、声音、动画、客户端脚本和ActiveX控件及程序等.
312.
1什么是网页河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网页可以分为静态网页和动态网页.
动态态页面动态网页一般以数据库技术为基础,可以与后台数据库进行交互与数据传递,可以大大降低网站维护的工作量.
采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等.
动态网页以.
aspx、.
asp、.
jsp、.
php、.
perl、.
cgi等形式为后缀.
322.
1什么是网页河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的关于网站的定义较多,常见的定义有以下三种.
定义一网站(Website)开始是指在因特网上根据一定的规则,使用HTML等工具制作的用于展示特定内容相关网页的集合.
定义二因特网上一块固定的面向全世界发布消息的地方,由域名(网站地址)和网站空间构成,通常包括主页和其他具有超链接文件的页面.
定义三网站是一个逻辑上的概念,是由一系列的内容组合而成的.
网站包含的内容有:网站的域名、提供网站服务的服务器或者网站空间、网页、网页内容所涉及的图片视频等文件、网页之间的关系.
332.
2什么是网站河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站是一个整体,网页是一个个体,一个网站是由多个网页构建而成.
简单来说,网站是由网页集合而成的,通过浏览器所看到的页面就是网页.
342.
3网页和网站的关系河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的具体来说,网页是一个html文件,浏览器是用来解析这份文件的,网站是由许多html文件集合而成.
网站是有域名、网站存放空间的内容集合,网站所包含的内容有网页、程序、图片、视频、音频等内容和内容之间的链接关系,一个网站可能有很多网页,也可以只有一个网页.
网页是网站内容的重要组成部分.
352.
3网页和网站的关系河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn36网页和网站的关系河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的浏览器主要功能浏览器的主要功能是将用户选择的Web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中.
372.
4浏览器是怎么工作的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn38Web浏览器河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的浏览器的主要组件包括以下七个方面.
用户界面浏览器引擎渲染引擎网络UI后端JS解析器数据存储392.
4浏览器是怎么工作的浏览器的主要组件河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的用户界面包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分.
浏览器引擎用来查询及操作渲染引擎的接口.
渲染引擎用来显示请求的内容,例如:请求内容为html,它负责解析html及css,并将解析的结果显示出来.

402.
4浏览器是怎么工作的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网络用来完成网络调用,例如:http请求具有平台无关的接口,可以在不同平台上工作.
UI后端用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口.
412.
4浏览器是怎么工作的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的JS解释器用来解释执行JS代码.
数据存储属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了webdatabase技术,这是一种轻量级完整的客户端存储技术.
422.
4浏览器是怎么工作的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的从输入一个网站域名到访问网站的过程一般包括以下5个步骤.
输入网址.
通过域名服务器查找用户输入网址的域名指向的IP地址.
通过获取的IP地址请求Web服务器.
Web服务器接收请求,并返回请求数据信息.
客户端浏览器接收到请求数据后,将信息组织成可以查看的网页内容.
432.
5访问网站的过程河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn44网站访问过程河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站开发技术分为前端技术和后端技术.
Web前端技术在Web前端开发中有HTML、CSS、JavaScript等技术.
Web后端技术在Web后端开发中有CGI、PHP、JSP、Python、ASP.
NET、Ruby等开发技术.
452.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站的主要开发技术HTML用于静态页面开发,是网站开发的基础.
CSS层叠样式表,对网页中的对象位置和样式进行精确控制.
JavaScript前端编程语言,用于给HTML网页增加动态和交互功能.
PHPHTML内嵌式语言,一种在服务器端执行的嵌入HTML文档的脚本语言.
462.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站的主要开发技术PHPHTML内嵌式语言,一种在服务器端执行的嵌入HTML文档的脚本语言.
JSPJSP(JavaServerPages)是一种动态页面技术,它的主要目的是将表示逻辑从Servlet中分离出来.
JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑.

472.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站的主要开发技术PythonPython是一种面向对象、解释型计算机程序设计语言.
Python是纯粹的自由软件,源代码和解释器CPython遵循GPL(GNUGeneralPublicLicense)协议.
Python语法简洁清晰,强制用空白符作为语句缩进.
ASP.
NETASP.
NET是.
NETFrameWork的一部分,是微软公司的技术,是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术.
482.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的开发网站需要哪些人网站开发是一个系统的工程,需要多种人员协调配合,共同完成.
通常网站开发过程中的人员角色如下所述.
项目经理内容编辑网站结构规划美术设计主页制作软件程序开发系统管理文档管理质量检测492.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站项目开发流程需求分析当拿到一个网站项目时,必须进行需求分析.
分析网站的风格、网站的类型、网站的版块、网站的域名及空间等.
规划静态内容重新确定其需求分析,并根据用户需求分析,规划出网站的内容板块草图.
设计阶段根据网站草图,由美工制作成效果图.
502.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站项目开发流程开发阶段根据页面结构和设计,前端和后台可以同时进行.
前端开发工程师根据设计效果负责制作静态页面.
程序开发工程师根据其页面结构和设计,设计数据库,并网站支撑系统和软件的开发.
测试和发布对网站进行系统测试,并根据测试解决错误.
在完成测试后,通过服务器将网站发布.
512.
6网站是怎么开发的河南中医学院/阮晓龙/13938213680/http://web.
51xueweb.
cn2.
Web是如何工作的网站建设中除了开发,还需要做的工作.
网站测试对制作好的网站进行兼容性测试、功能测试、性能测试、安全测试等.