HTML5技术

Web实现飞跃的踏板:揭秘HTML 5和CSS3

字号+ 作者: 来源:IT168    2014-11-17 18:29 我要评论( )

互联网的发展总是在不断地催生新技术的产生,而HTML 5和CSS 3是最近一直被讨论的热门话题,关于HTML 5与Flash之间的唇枪舌战一直不断,而CSS 3的新功能也让人们备受期待。那么HTML 5和CSS3究竟有哪些让我们眼前一亮的东西呢? HTML 5草案的前身名为Web Appli

互联网的发展总是在不断地催生新技术的产生,而HTML 5和CSS 3是最近一直被讨论的热门话题,关于HTML 5与Flash之间的唇枪舌战一直不断,而CSS 3的新功能也让人们备受期待。那么HTML 5和CSS3究竟有哪些让我们眼前一亮的东西呢?

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

    HTML 5新增和移除的元素HTML 5新增了很多多媒体和交互性元素如video, audio,在HTML 4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码,还有兼容各个浏览器,而HTML 5只需要通过引入一个标签就可以,就像img标签一样方便。在页面布局和内容实现方面HTML 5新增了很多结构化标签元素以及块级及语义元素,如果你要用HTML表示一个文件的上传进度条,在HTML 5中你可以用progress这个元素来表示,它有一个value属性描述了已经完成了多少任务,还有一个属性max描述了这个任务一共需要多少,还可以通过DOM接口得到这个进度条的position属性(只读),也就是任务完成的百分比。

\

    Youtube在HTML 5技术上已经做了一个尝试,从整个页面源代码来看,非常简洁。当然HTML 5也对一些元素新增了一些属性,如input和textarea的placeholder属性,相当于输入框的输入提示,script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”,如class, id, tabindex, title,HTML 5也新增了一些全局属性,如contenteditable, contextmenu, hidden等属性。HTML 5还增加了对于微数据的支持,如HTML5新增的item, itempro, subject等属性。

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

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

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


HTML 5的Javascript API,HTML 5在Javascript上面新增了哪些API呢?

    Video/Audio: HTML 5为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多线程,可以在后台做很多工作而不会阻断当前的浏览器操作。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • 调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注 - QISHUANG

    调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加

    2017-04-18 10:02

  • 计算机网络——DNS协议的学习与实现 - 学数学的程序猿

    计算机网络——DNS协议的学习与实现 - 学数学的程序猿

    2017-04-16 10:00

  • 前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛

    前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代

    2017-04-12 14:00

网友点评
t