上一篇文章：
全面介绍HTML的语法！轻松写出网页
文章目录
- Video
- Audio
- Drag & Drop
- Web Storage
- localStorage
- sessionStorage
- Application Cache
- Web Worker
- Server-sent Event
- Canvas
- SVG
Video
<video width="320" height="240" controls="controls" autoplay="autoplay"> <source src="./video/movie.ogg" type="video/ogg" /> <source src="./video/movie.mp4" type="video/mp4" /> <source src="./video/movie.webm" type="video/webm" /> <object data="./video/movie.mp4" width="320" height="240"> <embed width="320" height="240" src="./video/movie.swf" /> </object> </video>
- controls: 控件（播放器控制条
- autoplay: 自动播放
<source>: 用于定义<video>元素的媒体资源。
可以提供多个 <source> 元素以支持不同的视频格式。浏览器将选择第一个支持的格式进行播放。
- src: 路径
- type: 文件格式
<object>: 用于在 <video> 元素不受支持时提供替代内容。这里提供了一个 Flash 视频（SWF 格式）的备用方案.
<embed> 元素是 <object> 的一种替代方式，这里用于嵌入 Flash 视频。
Audio
<audio controls="controls"> <source src="./audio/song.ogg" type="audio/ogg"> <source src="./audio/song.mp3" type="audio/mpeg"> <embed height="100" width="100" src="./audio/song.mp3" /> </audio>
Drag & Drop
下面的代码实现了拖拽图片的功能.
<style type="text/css"> #div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;} </style> <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> <p>请把 W3School 的图片拖放到矩形中：</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <br /> <img id="drag1" src="./img/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
CSS样式:
- padding:10px; 设置元素的内边距
- border:1px solid #aaaaaa; 设置元素的边框为1像素实线，颜色为灰色。
"div1"内的属性:
- ondrop: 将块放置后执行的函数
- ondragover: 松开拖拽时执行的函数
"drag1"内的属性:
- draggable: 设置可拖拽
- ondragstart: 开始拖拽时执行的函数
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)); // 将被拖动元素追加到放置的目标元素中 }
event 对象: 事件对象. 这个对象提供了有关拖放操作的详细信息，例如鼠标位置、拖动的元素、拖动的目标等。
dataTransfer 对象： dataTransfer 是 event 对象的一个属性，它用于在拖放操作的源元素和目标元素之间传递数据。
target对象: target 是事件对象 (event) 的一个属性，它表示触发事件的 DOM(Document Object Model,文档对象模型) 元素。在拖放操作中，target 属性通常用于确定拖动的元素或放置目标的身份。
Web Storage
localStorage vs sessionStorage
localStorage 和 sessionStorage 都是 Web Storage API 提供的客户端存储解决方案，它们允许开发者在用户的浏览器中存储键值对的数据。然而，它们之间有一些关键的区别：
-
生命周期：
localStorage的数据存储在浏览器中，不会随着窗口或标签页的关闭而失效。除非用户清除浏览器缓存或通过代码删除，否则数据将一直保留。sessionStorage的数据仅在当前会话期间有效。如果用户关闭了当前标签页或浏览器窗口，sessionStorage中的数据将被清除。
-
作用域：
localStorage的数据在同一个域（domain）下的所有窗口和标签页之间共享。sessionStorage的数据仅在同一个窗口或标签页中共享，不同窗口或标签页之间不共享。
-
存储大小：
localStorage允许存储更大的数据量，通常支持至少 5MB 的存储空间。sessionStorage也有一定的存储空间，但通常比localStorage小。
localStorage
<script> function clickCounter() { if(typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。"; } else { document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">请点击这里！</button></p> <div id="result"></div> <p>请点击按钮使计数器递增。</p> <p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>
sessionStorage
<script> function clickCounter() { if(typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; } else { document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">请点击这里</button></p> <div id="result"></div> <p>请点击按钮使计数器递增。</p> <p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
Application Cache
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
每个指定了 manifest 的页面在用户对其访问时都会被缓存
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest文件以.appcache结尾
manifest 文件有三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
一个栗子:
CACHE MANIFEST
# 2012-02-21 v1.0.0
theme.css
logo.gif
main.js
NETWORK:
login.asp
FALLBACK:
offline.html
复制<!DOCTYPE html> <html manifest="./demo.appcache"> <head> <meta charset="UTF-8"/> <script> function getDateTime() { var d = new Date(); document.getElementById('timePara').innerHTML = d; } </script> </head> <body> <p id="timePara"> <button onclick="getDateTime()">获得日期和事件</button> </p> <p><img src="./img/w3school_banner.gif"/></p> <p>请打开这个页面，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。 </p> </body> </html>
Web Worker
Web Worker 是在浏览器中运行在后台线程的 JavaScript 脚本, 不会影响页面的性能.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title></title></head> <body> <p>计数: <output id="result"></output></p> <button onclick="startWorker()">开始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("../js/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>
onmessage用来监听Web Worker发来的消息, 并在function函数中作处理.
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
Server-sent Event
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新
<div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ..."; } </script>
Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> <p>把图片加载到Canvas上</p> <img id="scream" width="224" height="162" src="./img/eg_flower.png" alt="The Scream"> <p>Canvas:</p> <canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); }; </script>
canvas.getContext("2d");: 获取 2D 渲染上下文（context），存储在变量 ctx 中。
SVG
Scalable Vector Graphics, 可伸缩向量图
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /> </svg>
style:
-
填充为红色（fill:red），
-
边框为蓝色（stroke:blue），
-
边框宽度为3像素（stroke-width:3），
-
填充规则为 “evenodd”。
evenodd: 填充规则是基于奇偶规则的。
在一个复杂路径中，形成的区域被看作是从路径起点射出一条射线，然后统计这条射线与路径交叉的次数。如果次数是奇数，则点在路径内部；如果次数是偶数，则点在路径外部。
evenodd规则的填充方式是将路径内部的点进行填充。具体来说，
evenodd规则的填充方式是：从路径的起点射出一条射线，当射线与路径相交时，计数加一；当射线穿出路径时，计数减一。根据计数的奇偶性，决定点的填充。)
