html5.docx
《html5.docx》由会员分享,可在线阅读,更多相关《html5.docx(16页珍藏版)》请在冰豆网上搜索。
![html5.docx](https://file1.bdocx.com/fileroot1/2023-6/11/c23645ac-8bbb-4d5a-8ac3-5190c030f6b6/c23645ac-8bbb-4d5a-8ac3-5190c030f6b61.gif)
html5
HTML5技术简介
一、HTML5概述
1.简介
HTML5是下一代的HTML。
HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
2.HTML5的发展背景
随着浏览器厂商对互联网浏览器思路的改进,从而诞生了HTML标准的原型,通过这几年的发展HTML标准已经到第五代。
近期用HTML5取代Flash或Shockwave的呼声越来越高。
虽然HTML5将会对互联网的很多方面做出改进,使网站具备更丰富的功能、让互联网访问变得更加安全和高效。
但距离HTML5成为标准还有很长的差距,目前包含IE在内的主流浏览器对HTML5的支持还不是完美,不过值得我们期待的是,新一代的IE9、Chrome6、Firefox4等浏览器都已经开始全面的扩展对HTML5的支持。
3.发展历程
HTML5最早在2004年由WHATWG(WebHyperTextApplicationTechnologyWorkingGroup)提出,并创立了HTML5规范,同时开始针对Web应用开发新功能。
2006年W3c(WorldWideWebConsortium万维网联盟)针对HTML5开始与WHATWG合作,并于2008年发布了第一份HTML5的工作草案。
2011年Adobe宣布停止开发移动设备Falsh播放器。
各大浏览器厂商也因为HTML5的优越特性,开始对旗下产品升级支持HTML5的新功能。
二、HTML5的特性
4.HTML5的设计理念
1、兼容性。
HTML5对HTML不是颠覆性的革新,而是对HTML的一个平滑的过度。
2、实用性。
HTML5是针对实际问题而提出的规范,具有很强的实用性。
3、互通性。
HTML5能与所有的浏览器、服务器或其它互联网工具完美兼容
5.新特性
1、新的文档类型
HTML5的文档类型非常简单只需
DOCTYPEhtml>声明即可。
2、语义化的标记
简单易记的语言标签,写法上较之前更为简洁。
在HTML5中,空标签(如:
br、img和input)并不需要闭合标签。
3、表单增强
HTML5为表单提供了几个新的属性、input类型和标签。
例如:
color,email,date,month,week,time,datetime,datetime-local,number,range,search,tel,和url等,使用这些标签将大大简化开发复杂度,比如使用date标签,我们将不再需要利用外包js就可以选择日期。
4、无需插件支持的视频/音频
HTML5新增加了
ogg,mpeg,webM。
ogg,mp3,wav。
5、画布功能
HTML5中增加了
在页面中插入
6、HTML5拖放
拖放是一种常见的特性。
HTML5标准中增加了拖放特性,任何元素都可以拖放。
页面中增加了拖放可以提高用户的体验。
7、稳健的数据存储
除了常规的页面存储,HTML5 规范还定义了离线存储规范,当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。
这个特性现在被大多数主流浏览器所支持。
你可以通过提供一个 manifest 文件来定义哪些文件需要被缓存,哪些需要在离线的时候有折衷方案替代。
当用户访问这个页面,支持的浏览器将会猎取一个 manifest 版本。
它将下载并缓存所有的涉及到的文件,并且当 manifest 相对于用户上次的浏览的版本有变化,它将会再次下载并缓存所有的文件。
6.优点
1、网络标准
HTML5是由W3C推荐出来的,它的开发是通过谷歌、苹果,微软等几百家公司一起酝酿的技术,这个技术最大的好处在于它是一个公开的技术。
换句话说,每一个公开的标准都可以根据W3C的资料库找寻根源。
另一方面,W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。
2、多设备跨平台
HTML5是可以进行跨平台的使用。
如果你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到AppStore或GooglePlay上,所以它的跨平台性非常强大。
3、自适应网页设计。
4、提高可用性和改进用户的友好体验。
5、表现和内容分离
HTML5在所有可能的方面都努力做到了表现和内容的分离。
三、HTML5的标签
7.HTML5视频
标签
支持的视频格式
Oggmpegwebm
标签属性
属性
值
描述
autoplay
autoplay
如果出现该属性,则视频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
src
url
要播放的视频的URL。
width
pixels
设置视频播放器的宽度。
8.HTML5音频
标签
支持的音频格式
Oggmp3wav
标签属性
属性
值
描述
autoplay
autoplay
如果出现该属性,则音频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
loop
loop
如果出现该属性,则每当音频结束时重新开始播放。
preload
preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
src
url
要播放的视频的URL。
9.HTML5拖放
设置拖放的步骤:
1设置元素可拖放,把draggable属性设置为true
2拖动什么,在拖动开始事件ondragstart中设置被拖动的数据
3放到何处。
ondragover事件规定在何处放置被拖动的数据。
4进行放置-ondrop
当放置被拖数据时,会发生drop事件。
代码示例
DOCTYPEHTML>
functionallowDrop(ev)
{
ev.preventDefault();
}
functiondrag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev)
{
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
ondragover="allowDrop(event)">