自己收集的HTML 5 的一些简单知识点
本帖最后由 梦幻的彼岸 于 2018-1-12 13:20 编辑自己在网上收集到的关于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 元素支持三种视频格式：
格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.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> 标签的属性
属性值描述
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。
二.音频
Web 上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。
音频格式当前，audio 元素支持三种音频格式：
IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis √√√
MP3√ √√
Wav √√ √
如何工作如需在 HTML5 中播放音频，您所有需要的是：<audio src="song.ogg" controls="controls"></audio>control 属性供添加播放、暂停和音量控件。<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：实例<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>亲自试一试上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：实例<audio controls="controls"><source src="song.ogg" type="audio/ogg"><source src="song.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>亲自试一试
Internet ExplorerInternet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。
<audio> 标签的属性
属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。
preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcurl要播放的音频的 URL。
三. 介绍关于html5的拖放
拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例下面的例子是一个简单的拖放实例：实例<!DOCTYPE HTML><html><head><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="div1"ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" /></body></html>亲自试一试它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true" />
拖动什么 - ondragstart 和 setData()然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragoverondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()
进行放置 - ondrop当放置被拖数据时，会发生 drop 事件。在上面的例子中，ondrop 属性调用了一个函数，drop(event)：function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}代码解释：
[*]调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
[*]通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
[*]被拖数据是被拖元素的 id ("drag1")
[*]把被拖元素追加到放置元素（目标元素）中
四. 介绍应用缓存
应用程序缓存（Application Cache）？HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：
[*]离线浏览 - 用户可在应用离线时使用它们
[*]速度 - 已缓存资源加载得更快
[*]减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
HTML5 Cache Manifest 实例下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：实例<!DOCTYPE HTML><html manifest="demo.appcache"><body>The content of the document......</body></html>亲自试一试
Cache Manifest 基础如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：<!DOCTYPE HTML><html manifest="demo.appcache">...</html>每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。manifest 文件的建议的文件扩展名是：".appcache"。请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：
[*]CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
[*]NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
[*]FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST第一行，CACHE MANIFEST，是必需的：CACHE MANIFEST/theme.css/logo.gif/main.js上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。NETWORK下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：NETWORK:login.asp可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK:*FALLBACK下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：FALLBACK:/html5/ /404.html注释：第一个 URI 是资源，第二个是替补。
更新缓存一旦应用被缓存，它就会保持缓存直到发生下列情况：
[*]用户清空浏览器缓存
[*]manifest 文件被修改（参阅下面的提示）
[*]由程序来更新应用缓存
实例 - 完整的 Manifest 文件CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释请留心缓存的内容。一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
五. 介绍 HTM5服务发送事件
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
浏览器支持所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
接收 Server-Sent 事件通知EventSource 对象用于接收服务器发送事件通知：实例var source=new EventSource("demo_sse.php");source.onmessage=function(event){document.getElementById("result").innerHTML+=event.data + "<br />";};亲自试一试例子解释：
[*]创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
[*]每接收到一次更新，就会发生 onmessage 事件
[*]当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
检测 Server-Sent 事件支持在上面的 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：if(typeof(EventSource)!=="undefined"){// Yes! Server-sent events support!// Some code.....}else{// Sorry! No server-sent events support..}
服务器端代码实例为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。PHP 代码 (demo_sse.php)：<?phpheader('Content-Type: text/event-stream');header('Cache-Control: no-cache');$time = date('r');echo "data: The server time is: {$time}\n\n";flush();?>ASP 代码 (VB) (demo_sse.asp):<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%>代码解释：
[*]把报头 "Content-Type" 设置为 "text/event-stream"
[*]规定不对页面进行缓存
[*]输出发送日期（始终以 "data: " 开头）
[*]向网页刷新输出数据
EventSource 对象在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：
事件描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当错误发生
六.介绍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 对象：
[*]window 对象
[*]document 对象
[*]parent 对象
有待更新完善望期待。嘻嘻 收藏一下。。有点厉害 能不能改下舒服的颜色，看的眼睛好痛 多谢楼主的热心分享 笑话，你以为你写这么详细我就看懂了？{:301_1000:} 谢谢哥们，你太给力了 学到不少知识，谢谢分享 不错，长见识了。 这个看年看 儒雅绅士 发表于 2018-1-10 15:40
能不能改下舒服的颜色，看的眼睛好痛
嘻嘻 抱歉了 这回颜色如何
页:
[1]