《HTML5 Canvas游戏开发实战》——1.1 HTML5介绍

简介:

本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第1章,第1.1节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

1.1 HTML5介绍

自HTML5问世以来,越来越多的人开始关注它,打开搜索网页输入关键字“HTML5”,会发现与之相关的信息铺天盖地。可是,也有不少人谈及的HTML5只是古老的 DHTML 或Ajax,并非真正的HTML5。那么,到底什么是HTML5呢?下面我们就来认识一下,了解它具有哪些新特性。
1.1.1 什么是HTML5
HTML是Hyper Text Markup Language的简称,它是一种用于描述网页文档的标记语言,而HTML5则是这种标记语言的新标准。我们生活在一个网络信息时代,如何改良作为网页标记语言的HTML,自然成为开发者关注的重点内容之一。
自1993年6月HTML的第一版草案发布,到1999年12月24日HTML 4.01的发布,HTML一直在不断更新。但是HTML4并没有给HTML带来太大的突破,随着网络的迅速发展,它渐渐满足不了网络应用的需求了。2000年1月26日,可扩展超文本置标语言(eXtensible Hyper Text Markup Language),即XHTML出现了。XHTML的表现方式与HTML类似,不过语法上更加严格。因为XHTML更加注重页面规范和可用性,所以W3C执意发展XHTML。但是因为种种原因XHTML的进展非常缓慢,最主要是因为XHTML2不兼容以往任何一个版本的HTML。在这种情况下,HTML5出现了。
HTML5草案的前身名为 Web Applications 1.0,于2004年由WHATWG 提出,2007年W3C 接纳了这种标准,并成立了新的HTML工作团队。HTML5的第一份正式草案于2008年1月22日公布。HTML5是W3C与WHATWG合作的结果,它成为 HTML、XHTML 以及 HTML DOM 的新标准。
1.1.2 HTML5的新特性
HTML5有很多令人心动的特性和新功能,比如,强化了Web网页的表现性能,增加了本地数据库等 Web 应用的功能,以及图像操作等。
HTML5在图像上引入了Canvas标签,通过Canvas,用户可以动态生成各种图形图像、图表以及动画,而不再依赖于Flash、silverlight等插件了。
另外,HTML5在地理位置操作上引入了Geolocation API,其特点在于:
本身不去获取用户的位置,而是通过第三方接口来获取,例如IP、GPS、WIFI等方式。
用户可以随时开启和关闭,在被程序调用时也会首先征得用户同意,保证了用户的隐私。
同时,HTML5还在数据储存上增加了本地数据库,可以使用WebSQL来储存数据,并且引入了web storage API实现了离线缓存功能,以此替代了cookies,使得数据保存空间更大、更安全。
下面我们简单地举几个例子,来说明一下HTML5的优越之处。

  1. 使用video标签播放动画
    代码清单1-1中的HTML代码实现了播放动画功能。

image

  1. 使用audio标签播放音频
    代码清单1-2中的HTML代码可以实现音频播放功能。

image

  1. 使用Canvas标签绘制图形
    代码清单1-3中的HTML代码可以实现绘制一个矩形的操作。

image

  1. 轻松取得当前的位置
    代码清单1-4中的JavaScript代码可以获取当前位置的纬度和经度。

image

  1. 将大量的数据保存在客户端
    代码清单1-5中的JavaScript代码使用LocalStorage来保存大量的数据。

image
image

  1. form的强化
    代码清单1-6中是form的几个比较常用的功能。

image

  1. 全新的标签属性
    在HTML5中取消了一些过时的HTML4标记,其中包括纯粹显示效果的标记,如,它们已经被CSS取代了。HTML5 吸取了针对XHTML2的一些建议,加强了一些用来改善文档结构的功能,如引入新的HTML 标签 header、footer、dialog、aside、figure 等,使开发者能够更加容易地创建文档,以前开发者在实现这些功能时一般都是使用div。另外,它还取消了一部分旧标签,如字体设置font、居中设置center等。一小部分标签的含义也有所改变,如粗体样式b 和斜体样式i标签虽然仍然保留,但它们的意义已经和以前有所不同,现在这些标签的意义只是为了将一段文字标识出来。

以上就是HTML5的一些新特性。需要注意的是,虽然HTML5已被W3C接纳,但现在还只是草案,在正式版发布之前,它的样式仍可能会有所变更。

相关文章
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
776 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
移动开发 JavaScript 前端开发
HTML5最新经典俄罗斯方块游戏插件
HTML5最新经典俄罗斯方块游戏插件
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
596 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
230 29
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
583 22
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
209 1
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
258 5
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
164 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
213 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
本文介绍了Twaver HTML5中的HTML节点(HTMLNode),这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点,以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素,以及如何自定义告警显示样式。
183 1
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)