知识普及：天煞的HTML5到底是个什么东西
openkk 12年前
<p> HTML5开始大热标志性的事件是苹果前 CEO Steve Jobs 公开炮轰 Adobe Flash，并指出 Flash 在移动终端的不利因素，而且 HTML5 将获得胜利。顿时 IT 界、数字营销界、数字媒体界等相关领域的人开始一窝蜂地议论、追捧、打击，HTML5成了当仁不让的明星（就在不久前 Adobe 宣布停止对 Mobile 端 Flash 的开发与更新）。但是很多人都在问：HTML5是什么？如何鉴定 HTML5 产品？</p> <p> <a href="/misc/goto?guid=4958322401791821614" target="_blank">DamnDigital</a> 近日制作了一篇由浅入深的知识普及帖，详细介绍了 HTML5 的方方面面，包括什么是 HTML5？HTML5有哪些特质？HTML5/4有什么区别？谁先试水 HTML5 的？HTML5相关站点有哪些？HTML5的经典案例何处寻？</p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/784b2efd675e7a5c27b53969f15a72d9.jpg" width="550" height="351" /></a></p> <p> <strong>一、什么是 HTML，以及 HTML5</strong></p> <p> <strong>1. HTML</strong></p> <p> HTML 是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。</p> <p> 语言就必须有一个语法的规则，如果没有规则，谁知道应该把一个 HTML 元素以怎样的形式展现给用户呢？目前 HTML 语言的标准是由 W3C（World Wide Web Consortium）负责制定的。依照规则，无论是何种浏览器，对于相同的 HTML 代码，应当展现给用户相同的效果。</p> <p> 目前 HTML 语言最新版本为4(HTML4)，此外还有一个可扩展超文本标记语言（XHTML）作为其扩展版本，提供更为丰富的功能和更严谨的语法规范。</p> <p> <strong>2. HTML5</strong></p> <p> 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进一步增强了互动性，并有效减少了开发成本。 </p> <p> <strong>二、HTML5 有哪些特质</strong></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/673700580f71d5871e4d6637f6a162a9.jpg" width="550" height="206" /></a></p> <p> <strong>我们来看看 W3.org 列举出来的 8 个 Class 技术描述：</strong></p> <p> <strong>A. 语义特性（Class：Semantic）</strong></p> <p> HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对 RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的 Web。</p> <p> <strong>B. 本地存储特性（Class：OFFLINE & STORAGE）</strong></p> <p> 基于 HTML5 开发的网页 APP 拥有更短的启动时间，更快的联网速度，这些全得益于 HTML5 APP Cache，以及本地存储功能。Indexed DB（HTML5本地存储最重要的技术之一） 和 API 说明文档。</p> <p> <strong>C. 设备兼容特性 (Class：DEVICE ACCESS)</strong></p> <p> 从 Geolocation 功能的 API 文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接 口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与 microphones 及摄像头相联</p> <p> <strong>D. 连接特性（Class：CONNECTIVITY）</strong></p> <p> 更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技 术，Server-Sent Event 和 WebSockets 就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。</p> <p> <strong>E. 网页多媒体特性(Class：MULTIMEDIA)</strong></p> <p> 支持网页端的 Audio、Video 等多媒体功能， 与网站自带的 APPS、摄像头、影音功能相得益彰。</p> <p> <strong>F. 三维、图形及特效特性（Class：3D, Graphics & Effects）</strong></p> <p> 基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。</p> <p> <strong>G. 性能与集成特性（Class：Performance & Integration）</strong></p> <p> 没有用户会永远等待你的 Loading——HML5会通过 XMLHttpRequest2 等技术，帮助您的 Web 应用和网站在多样化的环境中更快速的工作。</p> <p> <strong>H. CSS3 特性(Class：CSS3)</strong></p> <p> 在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的 Web 排版，Web 的开放字体格式（WOFF）也提供了更高的灵活性和控制性。</p> <p> Apple 官方对 HTML5 的各个特性做了详细并且动态的展示：<a href="/misc/goto?guid=4958322402597568936" target="_blank">http://www.apple.com/HTML5/showcase </a></p> <p> <strong>三、HTML5与 HTML4 的区别</strong></p> <p> <strong>A.简化的语法</strong></p> <p> 更简单的 doctype 声明是 HTML5 里众多新特征之一。现在你只需要写，这就行了。HTML5的语法兼容 HTML4 和 XHTML1，但不兼容 SGML。</p> <p> <strong>B. 一个替代 Flash 的新”canvas”标记</strong></p> <p> 对于 Web 用户来说，Flash 既是一个惊喜，也是一种痛苦。有很多的 Web 开发人员对 HTML5 对 Flash 产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的 Flash 视频的人来说，用新的 “canvas” 标记生成视频的技术已经到来。</p> <p> 目前， “canvas” 标记并不能提供所有的 Flash 具有的功能，但假以时日，Flash 必将从 web 上淘汰。我们拭目以待，因为很多人还并不认同这种观点。 </p> <p> <strong>C. 新的 “header” 和 “footer” 标记</strong></p> <p> HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现，它们是专门为标志网站的这些部分设计的。在开发网站时，你不在需要用”div”标记来标注网页的这些部分。</p> <p> <strong>D. 新的 “section” 和 “article” 标记</strong></p> <p> 跟”header” 和 “footer”标记类似，HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。</p> <p> 据推测，除了让代码更有组织外，它也能改善 SEO 效果，能让搜索引擎更容易的分析你的页面。</p> <p> <strong>E.新的 “menu” 和 “figure” 标记</strong></p> <p> 新的”menu”标记可以被用作普通的菜单，也可以用在工具条和右键菜单上，虽然这些东西在页面上并不常用。类似的，新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然，你可以用样式表来控制文字和图像，但使用 HTML5 内置的这个标记更适合。</p> <p> <strong>F. 新的 “audio” 和 “video” 标记</strong></p> <p> 新的”audio” 和 “video” 标记可能是 HTML5 中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。</p> <p> 除此之外还有一些新的多媒体的标记和属性，例如”track”，它是用来提供跟踪视频的文字信息的。有了这些标记，HTML5使 Web2.0 特征变得越来越友好。问题在于，在 HTML5 还未被广泛的接受之前，Web2.0还是老的 Web2.0。 </p> <p> <strong>G. 全新的表单设计</strong></p> <p> 新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改，它们有很多的新属性(以及一些修改)。如果你经常的开发表单，你应该花时间更详细的研究一下。</p> <p> <strong>H. 不再使用 “b” 和 “font” 标记</strong></p> <p> 对我个人来说，这是一个让我不太理解的改动。我并不认为去除 “b” 和 “font”标记会带来多大的好处。我知道，官方的指导说这些标记可以通过 CCS 来做更好的处理，但这样一来，为了在文章一两个地方出现的这种标记，你就需要在独立的 css 和文本两个地方来实现这一的功能，岂不笨拙。也许我们以后会习惯这种方法。 </p> <p> <strong>i. 不再使用 “frame”， “center”， “big” 标记</strong></p> <p> 事实上，我已经记不清曾经何时用过这些标记了，所以，我并不为去除这些标记感到悲哀。相同的原因，有更好的标记能实现它们的功能——这很好，任何作废的标记从标准中剔除都是受欢迎的。</p> <p> <strong>四、早期试行者：</strong></p> <p> 体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器（Apple 开发的开源浏览器内核），如 Chrome 和 Safari，Firefox 不太流畅，即使现在 Firefox 9 官方声称完美支持 HTML5，但是实际应用中，我们发现还是相对于 Chrome 和 Safari 欠缺许多。</p> <p> W3C 在 2011 年上半年正式推出了 HTML5 的初步标准，随之而来是谨慎的 Mircosoft 发布了完美支持 HTML5 的 IE9.</p> <p> 当然，介于目前浏览器市场玲琅满目，目前除了主流的浏览器的最新版本之外，之前的版本都在或多或少的拒绝 HTML5。</p> <p> <strong>五、其他 HTML5 开发相关站点：</strong></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/31207161babdad01eb7aa9040060f212.jpg" width="550" height="144" /></a></p> <p> URL：<a href="/misc/goto?guid=4958199139955699999" target="_blank">http://phonegap.com/</a></p> <p> PhoneGap 是一个开源的、基于 JavaScript 语言、用于快速和简便开发手机应用程序的开发框架，用来构建跨平台的使用 HTML，CSS 和 JavaScript 的移动应用程序。我们将会放出 phoneGap 的详细介绍。它是最普及的 HTML5 to App 的工具。</p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/f49e7d29aec4b320f23af5a8770011d1.jpg" width="550" height="240" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322404133338017" target="_blank">http://jsdo.it</a></p> <p> JSDO.IT 是一个 js 代码分享的网站，强调社区参与和协作，它可以让程序员，开发者在站内分享自己写的程序代码和作品，也可以在站内相互交流，共享 JS 代码相关的内容，是通过社交网络或社区为基础来建立的代码分享功能的网站。其界面流畅，带有自动更新的预览面板，可接受开源 JS 库。另外，它还有一个独特的性能，即可在智能手机中打开浏览器查看的“智能手机预览”命令。这个工具需要用户注册并登陆才能使用。</p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/b45529006c4174f4fb76c907231e40dd.jpg" width="550" height="236" /></a></p> <p> URL：<a href="/misc/goto?guid=4958191193409561768" target="_blank">http://HTML5boilerplate.com/</a></p> <p> HTML5 Boilerplate 是一个 HTML / CSS / js 模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域 Ajax 和 Flash 的最佳实践。</p> <p> 此网站由业界众多专业资深前辈共同发起的一个开源开发模板站点，来帮助大家快速使用 HTML5 技术开发网站，同时兼容其他各种旧版本的浏览器浏览体验。HTML5 Boilerplate 并不是一套框架，他仅仅是一套模板。大家可以把他当作自己的新项目模板，在此基础上建立自己的项目。这一网站志在建立一套简单的模板帮助大家快速的进行开 发，一般来说下载了这套模板后，便可以在其上进行修改，测试，查看兼容性浏览等。</p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/a0b4b893b7db4aec94ee233539221f2e.jpg" width="550" height="326" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322405658074671" target="_blank">http://proHTML5.com/</a></p> <p> 所有程序员开发者，或是对 HTML5 有过些许了解的人都听说过有一本程序员编程手册《PRO HTML5 PROGRAMMING》，而此网站是此书的线上官方站点，除了提供书中所提及的关于目前 HTML5 提供新特性讲解的部分内容，包括使用实例讲解 API 的调用方法等等，同时还提供更多线上编程方面的指导学习资料，以及学习实践工具。值得收藏。</p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/4d5a8c006ec3bda36cf40b8350027988.jpg" width="550" height="226" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322406456687672" target="_blank">http://www.beautyoftheweb.com/</a></p> <p> 在 beautyoftheweb 网站上，可以下载到 40 种语言的 IE9 RC 版（开发者体验版），通过 Bautyoftheweb，开发人员和爱好者即可有规律地对 IE9 平台上的 HTML5 实现效果进行预览，目前，此网站上的 IE9 RC 版可以直接下载，同时还可以看线上指导视频，就算非开发者，程序员也能通过视频，领略到 HTML5 在 IE9 平台上带来的良好体验感受。目前所有 RC 版下载都是免费得，比较开放，透明。可以说，这是微软为了宣传 IE9 而进行推广的一个网站。</p> <p> <strong>六、基于 HTML5 的优秀作品</strong></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/d32db711b90f4b2aba09a99953981cdc.jpg" width="550" height="313" /></a></p> <p align="left"><a href="/misc/goto?guid=4958322407262055131" target="_blank">North Kingdom:ROME & “3 Dreams of Black” 及其背后的故事(长文多图杀猫瞎眼)</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/44308edc2f26d02b951d4365efb1ecb0.jpg" width="550" height="384" /></a></p> <p align="left"><a href="/misc/goto?guid=4958322408062245890" target="_blank">North Kingdom 联手 Forsman&Bodenfors：Volvo Cross Country Travels</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/4e572adc20598ae440b2c9cdeebaca06.jpg" width="550" height="317" /></a></p> <p align="left"><a href="/misc/goto?guid=4958322408867818228" target="_blank">创意互动:我们来玩玩有趣的图像立体化 WOOOOOW</a></p> <p align="center"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/e54d4218913766839f7692dfe837e01a.jpg" width="550" height="317" /></a></p> <p align="left"><a href="/misc/goto?guid=4958322409658907709" target="_blank">[V]以 HTML5 制成的纪录片——One Millionth Tower 重新认识城市及小区发展</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/b1df12e16cb3e11b999184d502fdcde5.jpg" width="550" height="307" /></a></p> <p align="left"><a href="/misc/goto?guid=4958322410451361730" target="_blank">[V]WebGL:点击鼠标开始奇幻太空之旅</a></p> <p align="left"> </p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/7bc9b40900770080dc90f94090793eef.jpg" width="550" height="267" /></a></p> <p align="left"><a href="/misc/goto?guid=4958322411247434376" target="_blank">WebGL 实验作品：Surface</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/03f9e0b9eef4813c16d153907c2a5f9e.jpg" width="550" height="322" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322412037486537" target="_blank">http://www.smartusa.com/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/5822606a1964ec35598767c2c9a86c09.jpg" width="550" height="323" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322412842674533" target="_blank">http://www.ds5.citroen.co.uk/uk/style-and-sophistication</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/45d873302d539f24d81cc3b7d04055a7.jpg" width="550" height="321" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322413646359850" target="_blank">http://www.bleepradio.gr/program</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/b11e890e2ec60ab0c8373c82ca6a652b.jpg" width="550" height="321" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322414442551935" target="_blank">http://pickupamerica.org/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/2d5dae1a2451adf2919a4f8e7172e155.jpg" width="550" height="321" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322415232542688" target="_blank">http://www.muchbeta.com/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/ffb39d7fd303610235ca204ca2b3b1fd.jpg" width="550" height="253" /></a></p> <p> URL：<a href="/misc/goto?guid=4958200583569065001" target="_blank">http://beta.rallyinteractive.com/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/488b7a71e7d92781d34626855807e5be.jpg" width="550" height="248" /></a></p> <p> URL： <a href="/misc/goto?guid=4958318330328312356" target="_blank">http://www.beetle.com/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/7e5b0946abd653f5f4acc310ed549cc3.jpg" width="550" height="268" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322417482082012" target="_blank">http://labs.dinahmoe.com/plink</a></p> <p align="center"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/a76b47513dc8f6df90f0c9f675f45f6e.jpg" width="550" height="312" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322418275424782" target="_blank">http://beta.theexpressiveweb.com/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/42096932159bf561c17129371c7a2e51.jpg" width="550" height="300" /></a></p> <p> URL：<a href="/misc/goto?guid=4958200576914440544" target="_blank">http://www.hyundai-veloster.eu/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/d8f330ddc9561a7285ec8dec10fd2a76.jpg" width="550" height="270" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322419792869098" target="_blank">http://experimentgame.com/</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/fc9ccb2748b2bdf22dd04549d82cacbb.jpg" width="550" height="249" /></a></p> <p> URL：<a href="/misc/goto?guid=4958322420582466586" target="_blank">http://www.diesel.com/island</a></p> <p style="text-align:center;"><a target="_blank"><img alt="知识普及：天煞的HTML5到底是个什么东西" src="https://simg.open-open.com/show/4c0f1a163202ad5cad942968152b63e7.jpg" width="550" height="272" /></a></p> <p> URL：<a href="/misc/goto?guid=4958187488305287525" target="_blank">http://www.thisshell.com/</a></p> <p> 参考资料：</p> <p> （1）<a href="/misc/goto?guid=4958322422107111960" target="_blank">Wiki-HTML5 </a></p> <p> （2）<a href="/misc/goto?guid=4958322422896729416" target="_blank">W3C </a></p> <p> （3）<a href="/misc/goto?guid=4958322423694057058" target="_blank">W3C HTML5 logo</a></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958322424481673243" target="_blank">驱动之家</a> </div>