UI设计师-前端基础-HTML5_HTML5与CSS3、JavaScript的结合使用.docxVIP

PAGE1

PAGE1

HTML5的新特性

HTML5作为HTML的最新版本，引入了许多新特性，以适应现代Web开发的需求。这些特性包括对多媒体的支持、数据存储、离线应用、2D和3D绘图、动画和游戏功能等。下面，我们将深入探讨一些关键特性。

1对多媒体的支持

HTML5提供了video和audio元素，使得在网页中嵌入音频和视频文件变得简单，无需依赖于Flash等插件。

1.11video标签

HTML5中的video标签可以用于在网页中嵌入视频文件。下面是一个简单的示例：

!DOCTYPEhtml

html

head

titleHTML5Video/title

/head

body

videowidth=320height=240controls

sourcesrc=myvideo.webmtype=video/webm

sourcesrc=myvideo.mp4type=video/mp4

sourcesrc=myvideo.oggtype=video/ogg

你的浏览器不支持HTML5video标签.

/video

/body

/html

1.22audio标签

同样，HTML5的audio标签用于在网页中嵌入音频文件。示例如下：

!DOCTYPEhtml

html

head

titleHTML5Audio/title

/head

body

audiocontrols

sourcesrc=horse.oggtype=audio/ogg

sourcesrc=horse.mp3type=audio/mpeg

你的浏览器不支持HTML5audio标签.

/audio

/body

/html

2数据存储

HTML5引入了WebStorageAPI，包括localStorage和sessionStorage，用于在客户端存储数据。

2.11localStorage

localStorage用于持久化存储数据，下面是一个简单的示例：

//存储数据

localStorage.setItem(name,John);

localStorage.setItem(age,30);

//读取数据

varname=localStorage.getItem(name);

varage=localStorage.getItem(age);

//删除数据

localStorage.removeItem(age);

2.22sessionStorage

sessionStorage用于存储会话数据，数据在当前浏览器窗口关闭后会被删除。示例如下：

//存储数据

sessionStorage.setItem(name,John);

//读取数据

varname=sessionStorage.getItem(name);

//删除数据

sessionStorage.removeItem(name);

3离线应用

HTML5的离线应用通过ApplicationCache(AppCache)API实现。AppCache允许指定一组缓存文件，即使在浏览器离线时，也能使用这些文件。

3.11AppCache示例

在HTML文档的头部插入以下代码：

!DOCTYPEhtml

htmlmanifest=app.appcache

head

title离线应用示例/title

/head

body

h1这是离线应用的页面/h1

scriptsrc=script.js/script

/body

/html

然后，在script.js中，可以监听AppCache的事件，如下所示：

window.applicationCache.addEventListener(checking,function(event){

console.log(Checkingforupdatedcontent…);

},false);

window.applicationCache.addEventListener(cached,function(event){

console.log(Contentupdated.Pageisnowavailableoffline!);

},false);

在app.appcache文件中，指定需要缓存的文件列表：

CACHEMANIFEST

#Version1

#