web前端开发HTML5基础（码动未来）

web前端开发HTML5基础（码动未来）

HTML5是万维网的核心语言，是未来Web发展的方向，同时也是HTML4.0.1的一个升级版本，它与HTML有着密不可分的关系。因此，掌握HTML5的基础知识，是进一步学习HTML知识的必要条件。万维网是World Wide Web字母的缩写，也可简写为Web、WWW、3W，它的功能是通过浏览器访问服务端中的页面；在这个访问的过程中，服务端的页面称为“资源”，浏览器通过资源统一标识的URL（Uniform Resource Identifier）地址来识别并解析页面。在整个浏览器打开并解析页面的过程中，还有一个非常重要的概念，就是如何将页面从服务端传输到客户端，而它则是由超文本传输协议（Hypertext Transfer Protocol）来完成的。整个过程如图1所示。

图1HTML是HyperText Markup Language的缩写，其功能是定义页面文档的格式，它是一种规范、一种标准，通过这种规范与标准告诉浏览器如何去显页面中的内容。有一点需要说明的是，不同的浏览器，它的这种标准是不完全相同的，因此会导致同一页面在不同浏览器中出现不一样的页面效果。虽然万维网与HTML存在密不可分的关系，但它们之前的关系也是非常明确的，那就是前者是整个Web系统执行过程的统称，而后者仅是这个统称中的一部分，它是页面编写的一种标准，按此标准构建的页面在前者执行的Web系统中浏览、执行、解析。它们间的关系如图2所示。

图2HTML这种超文本语言规范，随着版本的迭代而不断发展和完善，直到2014年10月28日，HTML5草案的确定，给整个Web页的开发指定了一个新的方向。通常情况下，HTML早期的版本在每隔2年后，都会有一个新版本的更迭，只是最后一个版本——HTML 5来的晚了些，详细的版本时间轴如图3所示。

图3（1）在HTML版本不断升级变更时，暴露了一些问题，例如，它的语法非常松散，对于开发者来讲是一件好事，可对于早期的计算机系统，特别对移动端系统来讲，解析起来非常麻烦，因此，产生了语法更严格的XHTML语言。（2）XHTML的语法非常严格，它的最初目标就是要取代HTML，并在2000年推出了1.0的推荐标准，后面由于各浏览器厂商并不都认可这种语法，因此，它版本的更新非常慢，详细的版本时间轴如图4所示。

图4（3）需要说明的是，XHTML语言在更新至2.0版本之后，后续的版本全部基于HTML5草案，它最常见的版本是基于HTML4.0.1的XHTML1.0。从目前互联网发展的整体形势来看，HTML5是HTML版本中最为重要的一次变动，而不仅仅是一次简单的版本更新，它将代表和引领着未来Web开发的方向，之所以这样讲，是因为HTML5有以下几个明显的特点。（1）各大浏览器厂商的大力支持HTML5毕竟只是一个超级文本的标准，这一标准的执行离不开浏览器的支持，而各大浏览器厂商对HTML5的支持却是空前的，因为它们也非常希望能够借助一些新技术的诞生，不断扩大原有的市场份额。（2）移动优先的原则当前的Web终端多而无序，但它有一个非常明显的特征，就是移动端优先，特别是2010年以后，各大企业加大了对移动端技术研发的投入和支持力度，使得传统意义上的Web开发的实质就是移动端开发。HTML5是顺应这一趋势的，大量新增的移动端元素和属性及API为它支持移动端开发提供了强大的技术保障。（3）支持游戏的开发近年来，基于页面的游戏越来越受到用户的喜爱，传统意义上的本地APP的游戏应用，由于安装与更新上的局限性，使得企业逐渐放弃对它的开发，改而转向Web方式的开发，并有慢慢替代本地趋势。HTML5对游戏的开发也提供了大量的API支持，包括新增的Canvas元素、CSS3中的3D动画效果，第三方的游戏引挚，是目前Web游戏开发常用方式。相对于客户端和服务端的开发环境搭建而言，Web前端页面开发的环境构建要方便许多，针对它的工具也是很多，目前最为主要的包括下面几款工具：（1）Adobe DreamweaverAdobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，它是美国MACROMEDIA公司开发的网页编辑器，它的特点是集网页制作和管理网站于一身，并且可以做到所见即所得，近来的版本也更加贴近移动端市场，可以非常方便地制作出跨越平台限制和跨越浏览器的动态页面。目前常用的版本是Adobe Dreamweaver CC。它的搭建非常简单，在官网下载开发工具包，解压后，点击可执行文件，按照界面提示，点击“下一步”，最后，安装成功后打开的主界面如图5所示。

图5需要说明的是，Adobe Dreamweaver CC在安装过程中，需要进行用户注册，注册成功后，就可以进行30天试用或直接输入激活码进行使用。（2）WebStorm与Adobe Dreamweaver CC工具不同，WebStorm是jetbrains公司旗下一款JavaScript 开发工具，也是一款功能非常强大的前端开发利器，它的强大之处在于它的开发过程中的代码提示效果，因此，被广大的程序开发人员称为“最强大的HTML5编辑器”、“最智能的JavaScript IDE”。目前常用的版本是WebStorm 10.0.3。WebStorm的环境构建也非常方便，不需要安装，直接在官网中下载应用包，点击可执行文件，就进入了主界面开发环境中，效果如图6所示。

图6需要说明的是，WebStorm开发工具在安装后，需要进行版本的汉化和破解，相应的方面，在安装包中有详细的说明。（3）Sublime Text与前面介绍的两款Web页面相比，Sublime Text开发工具要轻巧许多，无论是体积或功能，它是一个代码编辑器，也是HTML和散文先进的文本编辑器，漂亮的用户界面和非凡的代码书写功能是它的一个最为明显的特点。目前常用的版本是Sublime Text 3。它的安装也是非常简便，只需要下载安装包，点击可执行文件即可，它的开发主界面如图7所示。

图7需要说明的是Sublime Text开发工具虽然轻巧，但它的许多功能的使用都必须依赖于插件，因此，找到相应插件才能实现对应的功能。

QQ技术交流群:815302226

更多内容请添加微信：madongweikai，或扫描下方二维码添加