移动Web前端应用开发-全套PPT课件.pptx

第一章HTML5基础知识;1.1HTML5概述-知识点预览;万维网是WorldWideWeb字母的缩写，也可简写为Web、WWW、3W，它的功能是通过浏览器访问服务端中的页面；在这个访问的过程中，服务端的页面称为“资源”，浏览器通过资源统一标识的URL（UniformResourceIdentifier）地址来识别并解析页面。

在整个浏览器打开并解析页面的过程中，还有一个非常重要的概念，就是如何将页面从服务端传输到客户端，而它则是由超文本传输协议（HypertextTransferProtocol）来完成的。

;HTML是HyperTextMarkupLanguage的缩写，其功能是定义页面文档的格式，它是一种规范、一种标准，通过这种规范与标准告诉浏览器如何去显页面中的内容。

有一点需要说明的是，不同的浏览器，它的这种标准是不完全相同的，因此会导致同一页面在不同浏览器中出现不一样的页面效果。

虽然万维网与HTML存在密不可分的关系，但它们之前的关系也是非常明确的，那就是前者是整个Web系统执行过程的统称，而后者仅是这个统称中的一部分，它是页面编写的一种标准，按此标准构建的页面在前者执行的Web系统中浏览、执行、解析。

;HTML这种超文本语言规范，随着版本的迭代而不断发展和完善，直到2014年10月28日，HTML5草案的确定，给整个Web页的开发指定了一个新的方向。

通常情况下，HTML早期的版本在每隔2年后，都会有一个新版本的更迭，只是最后一个版本——HTML5来的晚了些，详细的版本时间轴如图1-3所示。

;在HTML版本不断升级变更时，暴露了一些问题，例如，它的语法非常松散，对于开发者来讲是一件好事，可对于早期的计算机系统，特别对移动端系统来讲，解析起来非常麻烦，因此，产生了语法更严格的XHTML语言。

XHTML的语法非常严格，它的最初目标就是要取代HTML，并在2000年推出了1.0的推荐标准，后面由于各浏览器厂商并不都认可这种语法，因此，它版本的更新非常慢，详细的版本时间轴。

;（1）各大浏览器厂商的大力支持

HTML5毕竟只是一个超级文本的标准，这一标准的执行离不开浏览器的支持，而各大浏览器厂商对HTML5的支持却是空前的，因为它们也非常希望能够借助一些新技术的诞生，不断扩大原有的市场份额。

???2）移动优先的原则

当前的Web终端多而无序，但它有一个非常明显的特征，就是移动端优先，特别是2010年以后，各大企业加大了对移动端技术研发的投入和支持力度，使得传统意义上的Web开发的实质就是移动端开发。

HTML5是顺应这一趋势的，大量新增的移动端元素和属性及API为它支持移动端开发提供了强大的技术保障。

（3）支持游戏的开发

近年来，基于页面的游戏越来越受到用户的喜爱，传统意义上的本地APP的游戏应用，由于安装与更新上的局限性，使得企业逐渐放弃对它的开发，改而转向Web方式的开发，并有慢慢替代本地趋势。

HTML5对游戏的开发也提供了大量的API支持，包括新增的Canvas元素、CSS3中的3D动画效果，第三方的游戏引挚，是目前Web游戏开发常用方式。

;相对于客户端和服务端的开发环境搭建而言，Web前端页面开发的环境构建要方便许多，针对它的工具也是很多，目前最为主要的包括下面几款工具：

（1）AdobeDreamweaver

AdobeDreamweaver，简称“DW”，中文名称梦想编织者，它是美国MACROMEDIA公司开发的网页编辑器，它的特点是集网页制作和管理网站于一身，并且可以做到所见即所得，近来的版本也更加贴近移动端市场，可以非常方便地制作出跨越平台限制和跨越浏览器的动态页面。

目前常用的版本是AdobeDreamweaverCC。

它的搭建非常简单，在官网下载开发工具包，解压后，点击可执行文件，按照界面提示，点击“下一步”，最后，安装成功后打开的主界面如图1-5所示。

;需要说明的是，AdobeDreamweaverCC在安装过程中，需要进行用户注册，注册成功后，就可以进行30天试用或直接输入激活码进行使用。

（2）WebStorm

与AdobeDreamweaverCC工具不同，WebStorm是jetbrains公司旗下一款JavaScript开发工具，也是一款功能非常强大的前端开发利器，它的强大之处在于它的开发过程中的代码提示效果，因此，被广大的程序开发人员称为“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”。

目前常用的版本是WebStorm10.0.3。

WebStorm的环境构建也非常方便，不需要安装，直接在官网中下载应用包，点击可执行文件，就进入了主界面开发环境中，效果如图1-6所示。

;需要说明的是，WebSto