自己在网上收集到的关于HTLM5的知识 希望能帮到需要的伙伴们 首先先介绍下什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
注意:浏览器支持最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。一.视频： Web 上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。 视频格式当前，video 元素支持三种视频格式：
格式
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
No
MPEG 4
9.0+
No
No
5.0+
3.0+
WebM
No
4.0+
10.6+
6.0+
No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 如何工作如需在 HTML5 中显示视频，您所有需要的是：<video src="movie.ogg" controls="controls"></video>TIYcontrol 属性供添加播放、暂停和音量控件。包含宽度和高度属性也是不错的主意。<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：实例<video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video>TIY上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：实例<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>TIY Internet ExplorerInternet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。 <video> 标签的属性
六.介绍web worker
web worker 是运行在后台的 JavaScript，不会影响页面的性能。 什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 浏览器支持所有主流浏览器均支持 web worker，除了 Internet Explorer。 HTML5 Web Workers 实例下面的例子创建了一个简单的 web worker，在后台计数：计数：启动 Worker 停止 Worker亲自试一试 检测 Web Worker 支持在创建 web worker 之前，请检测用户的浏览器是否支持它：if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... }else { // Sorry! No Web Worker support.. } 创建 web worker 文件现在，让我们在一个外部 JavaScript 中创建我们的 web worker。在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：var i=0;function timedCount(){i=i+1;postMessage(i);setTimeout("timedCount()",500);}timedCount();以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。 创建 Web Worker 对象我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器：w.onmessage=function(event){document.getElementById("result").innerHTML=event.data;};当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。 终止 Web Worker当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：w.terminate(); 完整的 Web Worker 实例代码我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：实例<!DOCTYPE html><html><body><p>Count numbers: <output id="result"></output></p><button>Start Worker</button><button>Stop Worker</button><br /><br /><script>var w;function startWorker(){if(typeof(Worker)!=="undefined"){ if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; };}else{document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";}}function stopWorker(){w.terminate();}</script></body></html>亲自试一试 Web Workers 和 DOM由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
发表于 2018-1-10 14:44
|
发表于 2018-1-12 13:20
