HTML5新特性概览-优快云博客

本文链接：https://blog.youkuaiyun.com/amber_leaf/article/details/53157854

Html5的新特性

什么是HTML5?

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持，最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。 -

HTML5的新规则

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

根据以上的规则就顺其自然的出现了下面的HTML5的新特性：

用于绘画的 canvas 元素

使用 JavaScript 在网页上绘制图像；画布是一个矩形区域，您可以控制其每一像素；canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 <!-- 使用canvas标签-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">                  
<script type="text/javascript"> 
/*JavaScript 使用 id 来寻找 canvas 元素： */       
var c=document.getElementById("myCanvas");
/*创建 context 对象：*/     
var cxt=c.getContext("2d");  
/*调用方法*/
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

用于媒介回放的 video 和 audio 元素

-直到现在，仍然不存在一项旨在网页上显示视频(音频）的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video （audio）元素来包含视频的标准方法。

<video width="320" height="240" controls="controls">
<!-- video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式-->
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!--audio的使用方法类似-->

其中video目前支持三种视频格式：Ogg,MPEG4,WebM
audio目前支持三种音频格式：Ogg Vorbis,MP3,Wav

另外HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。还可以支持内联 SVG达到绘图。

对本地离线存储的更好的支持
- HTML5 提供了两种在客户端存储数据的新方法：
  - localStorage - 没有时间限制的数据存储
  - sessionStorage - 针对一个 session 的数据存储
  之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用

 <!-- 关闭页面计数器还是保持原样-->
 <script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

<!-- 关闭页面再次打开会清零-->
 <script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：
—离线浏览 - 用户可在应用离线时使用它们
—速度 - 已缓存资源加载得更快
—减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存，请在文档的 html 标签中包含 manifest 属性，manifest 文件的建议的文件扩展名是：”.appcache”，manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）

由程序来更新应用缓存一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

新的特殊内容元素，比如 article、footer、header、nav、section
header元素是一种具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题(如h1至h6，或者hgroup元素标签)，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。同一个页面中，每一个内容区块都可以有自己的header元素。

<div id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
<div>

在HTML5中，我们可以不使用div，而用更加语义化的

  <footer></footer>

新的表单控件，比如 calendar、date、time、email、url、search

email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。

url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。

HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

search 类型用于搜索域，比如站点搜索或 Google 搜索，search 域显示为常规的文本域。