什么是HTML5

2017-04-24 21:39:56
admin
1550
最后编辑:admin 于 2018-05-21 09:07:23

   Html5开始大热标志性的事件是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,即超文本标记语言(HTML)第五次重大修改。HTML 5草案的前身名为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进一步增强了互动性,并有效减少了开发成本。

标准网址:https://www.w3.org/TR/html5/

HTML5标准:https://www.w3.org/TR/html5/
HTML5开发指南:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5
HTML5元素参看:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
浏览器支持情况:http://caniuse.com/

定稿时间:2014年10月28日

    二、HTML5 有哪些特质

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

    A. 语义特性(Class:Semantic)

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

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

    基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APPCache,以及本地存储功能。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效果,能让搜索引擎更容易的分析你的页面。

    E.新的 “menu” 和 “figure” 标记

    新的”menu”标记可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。类似的,新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然,你可以用样式表来控制文字和图像,但使用HTML5内置的这个标记更适合。

    F. 新的 “audio” 和 “video” 标记

    新的”audio” 和 “video” 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称,它们是用来嵌入音频和视频文件的。

    除此之外还有一些新的多媒体的标记和属性,例如”track”,它是用来提供跟踪视频的文字信息的。有了这些标记,HTML5使Web2.0特征变得越来越友好。问题在于,在HTML5还未被广泛的接受之前,Web2.0还是老的Web2.0。

    G. 全新的表单设计

    新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改,它们有很多的新属性(以及一些修改)。如果你经常的开发表单,你应该花时间更详细的研究一下。

    H. 不再使用 “b” 和 “font” 标记

    对我个人来说,这是一个让我不太理解的改动。我并不认为去除 “b” 和 “font”标记会带来多大的好处。我知道,官方的指导说这些标记可以通过CCS来做更好的处理,但这样一来,为了在文章一两个地方出现的这种标记,你就需要在独立的css和文本两个地方来实现这一的功能,岂不笨拙。也许我们以后会习惯这种方法。

    i. 不再使用 “frame”, “center”, “big” 标记

    事实上,我已经记不清曾经何时用过这些标记了,所以,我并不为去除这些标记感到悲哀。相同的原因,有更好的标记能实现它们的功能——这很好,任何作废的标记从标准中剔除都是受欢迎的。

    四、早期试行者:

    体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器(Apple 开发的开源浏览器内核),如 Chrome 和 Safari,Firefox 不太流畅,即使现在Firefox 9官方声称完美支持HTML5,但是实际应用中,我们发现还是相对于Chrome和Safari欠缺许多。

    W3C在2011年上半年正式推出了HTML5的初步标准,随之而来是谨慎的Mircosoft 发布了完美支持HTML5的IE9.

    当然,介于目前浏览器市场玲琅满目,目前除了主流的浏览器的最新版本之外,之前的版本都在或多或少的拒绝HTML5。

    五、其他Html 5开发相关站点:

    RUL: http://phonegap.com/

    PhoneGap是一个开源的、基于JavaScript语言、用于快速和简便开发手机应用程序的开发框架,用来构建跨平台的使用HTML,CSS和JavaScript的移动应用程序。我们将会放出phoneGap的详细介绍。它是最普及的HTML5 to App的工具。

    RUL: http://jsdo.it

    JSDO.IT是一个js 代码分享的网站,强调社区参与和协作,它可以让程序员,开发者在站内分享自己写的程序代码和作品,也可以在站内相互交流,共享JS代码相关的内容,是通过社交网络或社区为基础来建立的代码分享功能的网站。其界面流畅,带有自动更新的预览面板,可接受开源JS库。另外,它还有一个独特的性能,即可在智能手机中打开浏览器查看的“智能手机预览”命令。这个工具需要用户注册并登陆才能使用。

    RUL: http://html5boilerplate.com/

    HTML 5 Boilerplate 是一个HTML / CSS / js模板,是实现跨浏览器正常化、性能优化,稳定的可选功能如跨域Ajax和Flash的最佳实践。

    此网站由业界众多专业资深前辈共同发起的一个开源开发模板站点,来帮助大家快速使用HTML5技术开发网站,同时兼容其他各种旧版本的浏览器浏览体验。HTML5 Boilerplate并不是一套框架,他仅仅是一套模板。大家可以把他当作自己的新项目模板,在此基础上建立自己的项目。这一网站志在建立一套简单的模板帮助大家快速的进行开发,一般来说下载了这套模板后,便可以在其上进行修改,测试,查看兼容性浏览等。


    • 在线客服
    • 关注微信
    • 联系电话
      • 欢迎咨询
      • 欢迎加入QQ群 303257430
    • 公众号:源宝网络
      • 联系电话及微信号 18902328227