首页 > 网页教程 > HTML > 正文

新手入门:HTML5是什么?

2011-12-27 15:06:35   来源:DamnDigital

Html 5开始大热标志性的事件是Apple 前CEO Steve Jobs 公开炮轰Flash,并指出Flash在移动终端的不利因素,而且Html5将获得胜利。顿时it界,数字营销界,数字媒体界等相关领域的人开始一窝蜂的议论,追捧,打击,HTML 5成了当仁不让的明星(就在不久前Adobe宣布停止对Mobile端flash的开发与更新)。但是很多人,都在问:HTML5是什么?如何鉴定HTML5产品?

我们这次的《知识普及》栏目就来看看初步的探索下HTML5。

 一、什么是HTML,以及HTML 5

1. HTML

HTML是超文本标记语言的英文缩写,这是一种标记语言,不需要进行编译,直接由浏览器执行。

语言就必须有一个语法的规则,如果没有规则,谁知道应该把一个HTML元素以怎样的形式展现给用户呢?目前HTML语言的标准是由 W3C(World Wide Web Consortium)负责制定的。依照规则,无论是何种浏览器,对于相同的HTML代码,应当展现给用户相同的效果。

目前HTML语言最新版本为4(HTML 4),此外还有一个可扩展超文本标记语言(XHTML)作为其扩展版本,提供更为丰富的功能和更严谨的语法规范。

2. HTML 5

HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出,於2007年被W3C接纳,并成立了新的HTML工作团队。2008年1月22日,W3C发布了最新的HTML5工作草案,HTML工作组包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等数百个开发上。HTML5中增加了许多新特性,例如嵌入音频、视频和图片的函数、客户端存 储数据、交互式文档等,通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则,HTML5进一步增强了互动性,并有效减少了开发成本。

二、HTML5 有哪些特质

我们来看看W3.org列举出来的8个Class技术描述:

A. 语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

B. 本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一) 和API说明文档。

C. 设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation 功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联

D. 连接特性(Class: CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。

E. 网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

F. 三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

G. 性能与集成特性(Class: Performance & Integration)

没有用户会永远等待你的Loading——HML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。

H. CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

Apple 官方对HTML5的各个特性做了详细并且动态的展示:http://www.apple.com/html5/showcase 

三、Html 5与Html 4的区别

A.简化的语法

更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写,这就行了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。

B. 一个替代Flash的新”canvas”标记

对于Web用户来说,Flash既是一个惊喜,也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说,用新的 “canvas” 标记生成视频的技术已经到来。

目前, “canvas” 标记并不能提供所有的Flash具有的功能,但假以时日,Flash必将从web上淘汰。我们拭目以待,因为很多人还并不认同这种观点。

C. 新的 “header” 和 “footer” 标记

HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现,它们是专门为标志网站的这些部分设计的。在开发网站时,你不在需要用”div”标记来标注网页的这些部分。

D. 新的 “section” 和 “article” 标记

跟”header” 和 “footer”标记类似,HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。
据推测,除了让代码更有组织外,它也能改善SEO效果,能让搜索引擎更容易的分析你的页面。


栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享

建站教程 网站运营 实用工具 网页模板 网页素材

CSS酷站 网上购物 设计团队 设计博客
教程排行榜
神奇的HTML5动画效果演示网站
十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
25个超炫的HTML5+CSS3网页应用案例欣赏
十三个网站案例让你提前体验HTML5和CSS3的魅力
15个采用HTML5实现的网站界面设计欣赏
体验HTML5 Canvas对象的强大 五款在线绘图应用示例
16个颇具创意的HTML5网站设计
网页设计师必收藏的十五个HTML5资源
HTML的电子邮件链接标签mailto用法详解
21款效果惊艳基于HTML5的应用程序欣赏
采用HTML5搭建的多个网站尝鲜试用
如何用HTML5制作网页?
HTML5的一些的趣味小应用
HTML中的文本框textarea标签
HTML标签的语义化概念、意义和实践
新手入门:HTML5是什么?
下载排行榜
带标题显示拉洋片式的jQuery滑动幻灯特效插件
带标题和数字导航的JS焦点幻灯特效代码
基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码
支持幻灯、相册、滚动、TAB选项卡等效果的...
半透明立体质感的宽屏flash+xml焦点幻灯代码
31款简单实用的CSS+JS下拉菜单脚本
适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码
简洁效果多图切换flash幻灯焦点图代码
基于jQuery实现的瀑布流布局列表特效代码
3D立体效果金字塔环形旋转的flash+xml相册代码
透明质感上下滑动带小图预览5屏JS焦点图幻...
兼容firefox和IE的QQ、淘宝旺旺在线客服代码
自带多种幻灯效果支持缩略图导航的jquery画...
能自动弹出对话信息框的QQ在线客服代码
6屏幻灯上下滑动式带缩略图和文字介绍的fla...
很好看的带缓冲效果CSS下拉菜单导航代码