HTML 5

发表于

新的文档类型，字符集和页面结构


HTML 不再需要 SGML 来定义它的文档类型，文档类型在 HTML 里会更加简单的被定义。现在甚至在头部定义字符集会更加的简单。



例如：

<!doctype html>



<meta charset="UTF-8">






Page Structure页面结构


在 HTML 3中，我们需要使用 table 来制定页面的结构。在 HTML 4中，定义页面结构演化为使用 <div>。HTML 5引入了一组完全新的元素来定义页面结构。


下图展示了使用 HTML 4 的页面结构：




HTML 4


<body>
 <div id="header">…</div>
 <div id="nav">…</div>
 <div class="article">
 <div class="section">  … </div>
</div>
<div id="aside">…</div>
 <div id="footer">…</div>
 </body>












现在，在 HTML 5中，你可以使用如下来进行定义：




HTML 5






<body>
  <header>…</header>
<nav>…</nav>
<article>
 <section>  … </section>
 </article>
  <aside>…</aside>
  <footer>…</footer>
</body> 




首先，当我看到新的标记时，我认为棒极了。但是随后我会担心这些新的标记在 HTML 4浏览器中将会如何工作。不论如何，我不想要在这里岔开话题。因此我将给出以下链接来帮助你解决问题：


http://www.zeldman.com/superfriends/guide/


其它新的元素


除以下涉及到的元素外，其余的将在 HTML 5中有详细介绍。




  • <canvas>


    提供使用 JavaScript 的画布。用户能够使用 JavaScript 在画布上进行绘制，你也可以跟踪绘制。


  • <video>


    使用简单的元素在你的页面中添加视频。


  • <audio>


    使用简单的元素在你的页面中添加声音片段。


  • <progress>


    在你的页面中添加一个过程条。当你在上传或下载时可以从你的页面中使用它。


  • <meter>


    标签定义度量（单位）。仅用于已知最大和最小值的度量。


  • <input> 元素虽然已经存在，但是它却添加了一些类型。



    • tel


    • search


    • url


    • email


    • datetime


    • date


    • month


    • week


    • time


    • datetime-local


    • number


    • range


    • color








不再使用的元素


由于以下元素将不再被使用或者可以在 CSS 中使用，因此将从 HTML 5中移除。




  • acronym


  • applet


  • basefont


  • big


  • center


  • dir


  • font


  • frame


  • frameset


  • isindex


  • noframes


  • noscript


  • s


  • strike


  • tt


  • u


HTML 5新特性


出来添加一些新的元素外，HTML 5在浏览器方面也添加了一线功能，例如在离线模式下继续工作，多线程的 JavaScript 等等。


离线模式


在 HTML
5中，你能够指定你页面所需要的资源，浏览器将会 cache 住他们，因此在没有网络的环境中用户依然能够继续使用。AJAX
页面加载完之后便不能进行资源的请求，在此出现之前这并不是一个问题。然而目前绚丽的 Web
页面技术中的加载都是使用异步进行资源的添加。因此离线模式就变的困难了，但是在 HTML 5中，将改变这一格局。


本地数据库


.HTML
5中包含了一个本地数据库，能够通过你的 session
进行持久化。这一优点能够使你获取需要的数据并放到本地数据库中。在此之后服务器将会进行数据的获取和更新。有时，来自本地数据库的数据和服务器是同步
的。这减少了服务器的负荷，提高应用程序的响应能力。


SON的融入


JSON 或者 JavaScript 这样简单对象标记是一种流行的非正式的 XML，这是在 JSON
存在之前的标准。直到 HTML 4，你需要包含库来编码和解码 JSON 对象。 现在，HTML 5 中 JavaScript
引擎哭构建支持编码和解码 JSON 对象。


不同窗口间的消息交互


另一个添加到
HTML 5的实用功能是在同一个站点的两个文档中执行消息传送。在 blogging tool
中也许就是一个好的使用。在一个窗口中，你创建一个你的 post，在另外一个窗口中你不需要任何页面的刷新就能够看见 post 后的样子。


站点交互 XHR(XMLHTTPRequest)


AJAX
中一个惊奇的应用能不仅能从服务器中异步获取数据，而且能使用 XMLHTTPRequest 从另一个站点得到资源。这在 HTML
4中需要包含另外的库来执行类似的动作。


多线程的 JavaScript


大多数 web 应用程序都使用
JavaScript进行编写，因为它是唯一可以使用的客服端编程语言。HTML 5允许 JavaScript
成为多线程的语言，因此执行起来将更加有效。然而这只解决了一部分问题。一旦它加载完，多线程就将提高 JavaScript
的处理时间，但是当你增加 JavaScript 脚本数目时，页面将花更多时间进行加载。为了解决这个问题，在 <script>
元素中引入了名为 async 的属性。它将告诉浏览器这个脚本在页面加载的时候不需要，这样就能在页面加载后获取异步事件。其使用如下：



<script async src="jquery.js"></script>



后续


这只是一个对 HTML 5提供的功能做一个简略介绍。其中的一些功能在某些浏览器中已经可以使用，但是要所有的浏览器都兼容还需要花一些时间。


 


 


 


By Arpan Dhandhania


译者：Vanessa