您的位置: 首页 > 技术文档 > 网页制作 > 揭秘HTML5和CSS3
Firebug 必须掌握的技巧 回到列表 再谈float菜单局中
 揭秘HTML5和CSS3

作者:空雁 时间: 2009-12-21 文档类型:合作网站提供 来自:Taobao.com UED Team

第 1 页 揭秘HTML5和CSS3 [1]
第 2 页 揭秘HTML5和CSS3 [2]

互联网的发展总是在不断地催生新技术的产生,而HTML5和CSS3是最近一直被讨论的热门话题,对于每个互联网开发者尤其是前端开发者而言,都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢?我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5CSS3》,PPT在这里:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5草案的前身名为Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些:

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio,在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码,还有兼容各个浏览器,而HTML5只需要通过引入一个标签就可以,就像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素,如果你要用HTML表示一个文件的上传进度条,在 HTML5中你可以用progress这个元素来表示,它有一个value属性描述了已经完成了多少任务,还有一个属性max描述了这个任务一共需要多少,还可以通过DOM接口得到这个进度条的position属性(只读),也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试,http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO,从整个页面源代码来看,非常简洁。当然HTML5也对一些元素新增了一些属性,如input和textarea的placeholder属性,相当于输入框的输入提示,script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”,如class, id, tabindex, title,HTML5也新增了一些全局属性,如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持,如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素,如font, center, strike等,这些本应该是CSS来做的,所以还是很好理解的,也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym,而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉,如link的rev属性,td的scope属性;HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等,强大的约束属性,如required表示必填,文件上传的accept属性,以及一些表单重复元素模型的支持,HTML5在提交表单的时候还可以设置提交的方式为XML提交方式,这样服务器端接收到的数据将是XML格式,HTML5的表单被定义为“Web Forms 2.0”,目前opera9.5+对Web Forms 2.0的支持较为完美。

点此查看Web Forms 2.0 DEMO,需要Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是继承自HTMLDocument的接口,当然HTML5在DOM上也有一些值得注意的新成员,如:支持 getElementsByClassName,可以根据class类名选择元素,getSelection()将会返回当前选中的对象,在选择器上面有两个方法querySelector和querySelectorAll可以根据 css选择符来获取要查询的元素,相当于YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢?

  • Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们自己的用户界面,如可以播放或暂停媒体内容。
  • Canvas: Canvas是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。Canvas是一个神奇的东西,它给我的第一感觉就像是在用Photoshop一样,它的每一个方法跟Photoshop 是那么地相似,通过canvas.getContext(’2d’)就可以得到这个canvas的API,你可以通过fillStyle设置其填充颜色或是通过strokeStyle设置其描边颜色,甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都已经有应用,如Firefox的实时下载状态统计,甚至还可以用canvas来编写Web Game。
  • Drag&Drop: 在指示设备的视觉媒体中,”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标移动(mousemove)的事件,而”Drop”则是鼠标释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口,同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。
  • Web Workers: 让Javascript多线程,可以在后台做很多工作而不会阻断当前的浏览器操作。
  • Geolocation: 地理位置定位,运行navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器会提示是否要共享你的地理位置,如果选择共享,则会回调success函数,success函数有一个参数是position对象,这个position对象有一个coords对象,coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度),这样就可以知道你的具体位置了,这个功能在一些手机如Iphone上已经有广泛的应用了。
  • Application Cache: 这是HTML5对于离线应用的支持,通过在html元素上加一个属性manifest,浏览器会提示你是否要将数据缓存到客户端,如果用户选择了允许,则会按照指定的manifest文件列表缓存需要的文件,当你的网络不可用时,你还是可以使用这个应用的。对于离线应用,Google也开发了Google Gears浏览器扩展,不过最后Google转投HTML5可能也是看到了HTML5存储和离线应用的这种优势。
  • Storage: Webkit已经实现了database storage,你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储,如sessionStorage和localStorage,可以通过setItem和getItem来存储与获取值,相对于Cookie的存储来说,存储的容量要大很多。
  • X-Document Messaging: 浏览器因为安全和隐私的原因,阻止了不同域之间文档的通信,虽然这是一个安全限制,但是对于那些没有危害的不同域的文档通信带来了很多问题,但是HTML5可以实现这种跨文档通信,让我们可以不用管源域是来自哪里,同时可以防止脚本攻击。

HTML5让你心动了吗?那么HTML5什么时候会成为标准呢?据说要等到2022年,这有一个很有意思的网站http://ishtml5readyyet.com/告诉你还有多少天HTML5会真正到来。

点击查看HTML5 DEMO,需要Firefox3.5+/Safari4.0+

出处:Taobao.com UED Team
责任编辑:bluehearts

上一页 下一页 揭秘HTML5和CSS3 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
CSS3新特性一览
混乱的标记语言XHTML2/HTML5
CSS3:文字阴影知多少
用CSS3将你的设计带入下个高度
如何在 IE 中使用 HTML5 元素
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2