• HTML5的新特性

    　　一、HTML5新特性

    　　1、视频

    　　在HTML5之前，网络上的视频大多都是使用Flash插件进行播放的，保险现在也仍然有很多。HTML5规定了一种通过video元素包含视频的标注方法。

    　　视频格式的支持：

    格式IEFirefoxOperaChromeSafari
    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 文件

    　　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>
    属性值描述
    autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
    controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
    height pixels 设置视频播放器的高度。
    loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
    preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
    src url 要播放的视频的 URL。
    width pixels 设置视频播放器的宽度。

    　　关于视频的javascript控制与事件。大体上有play()，pause()，load()三种方法，事件和属性详细参见HTML5 视频/DOM。

    　　2、音频

    　　和视频相同，之前也没有网页直接播放音频的标准，都是使用的插件。现在可以直接使用audio标签来加载音频文件了。

    　　音频格式的支持：

     IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
    Ogg Vorbis   √ √ √  
    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>
    属性值描述
    autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
    controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
    loop loop 如果出现该属性，则每当音频结束时重新开始播放。
    preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
    src url 要播放的音频的 URL。

    　　事件与控制和视频的相同。

    　　3、拖放

    　　拖放（Drag 和 drop）是 HTML5 标准的组成部分，抓取对象以后拖到另一个位置。在 HTML5 中，任何元素都能够拖放。

    　　示例如下：

    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;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>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

    　　看起来很复杂，但是分步分析要简单一下。

    　　拖放一般情况下都需要借助javascript来辅助处理，一个拖放的步骤如下：

    　　第一步：设置对象为可拖放的。

    　　<img draggable="true" />

    　　第二步：什么被拖动了

    　　分别调用ondragstart 和 setData()，ondragstart是当拖动开始时执行的方法，上面的例子在拖动开始时调动drag(event)方法，传递进去一个event参数，这个event参数中包含被拖动的元素，也即本元素。

    　　第三步：拖动时触发什么操作

    　　调用event.dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

    　　在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

    　　第四步：放到何处

    　　ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()。

    <div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

    　　这里定义了放置时触发什么事件（用于放置内容），被拖动到上面时触发什么事件（用于执行上面的preventDefault()方法）

    　　第五步：进行放置

    　　当放置被拖数据时，会发生 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")

    　　把被拖元素追加到放置元素（目标元素）中

    　　其中event.target返回的是触发事件的目标，也即触发事件的元素。

    　　4、画布

    　　HTML5中又一个强大的功能，canvas 元素，用于在网页上绘制图形。

    　　HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。利用画布和javascript可以制作一些简单的HTML5游戏。

    　　使用方法：

    <canvas id="myCanvas" width="200" height="100"></canvas>

    　　canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

    <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>

    　　首先获取canvas对象，然后使用对象的getContext方法获取一个context对象，可以是2d的也可以是3d的。

    　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    　　坐标原点是左上角。

     　　5、SVG矢量图形

    　　一个直接画矢量图的方法出现在了HTML5中，他就是SVG元素。

    　　HTML5 支持内联 SVG。

    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    • SVG 用于定义用于网络的基于矢量的图形
    • SVG 使用 XML 格式定义图形
    • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    • SVG 是万维网联盟的标准

    　　与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

    • SVG 图像可通过文本编辑器来创建和修改
    • SVG 图像可被搜索、索引、脚本化或压缩
    • SVG 是可伸缩的
    • SVG 图像可在任何的分辨率下被高质量地打印
    • SVG 可在图像质量不下降的情况下被放大

    　　直接内联SVG：

    <!DOCTYPE html>
<html>
<body>

<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:lime;stroke:purple;stroke-5;fill-rule:evenodd;" />
</svg>

</body>
</html>

    　　更多更强大的功能参考：SVG教程

    　　插播：SVG与canvas的区别：

    　　Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

    　　SVG 是一种使用 XML 描述 2D 图形的语言。

    　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

    　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

    　　Canvas 通过 JavaScript 来绘制 2D 图形。

    　　Canvas 是逐像素进行渲染的。

    　　在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

    Canvas

    SVG
    依赖分辨率 不依赖分辨率
    不支持事件处理器 支持事件处理器
    弱的文本渲染能力 最适合带有大型渲染区域的应用程序（比如谷歌地图）
    能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
    最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用

    　　6、地理定位

    　　在移动网站上很有用，通过网页获取位置展示内容等等。

    　　HTML5 Geolocation API 用于获得用户的地理位置。

    　　示例：

    <!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;    
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }
</script>
</body>
</html>
    • 检测是否支持地理定位
    • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
    • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
    • getCurrentPosition() 方法的第二个参数用于处理错误，它规定当获取用户位置失败时运行的函数，参数为getCurrentPosition对象中传递过去的error对象
    • showPosition() 函数中对象position获得并显示经度和纬度

    　　position对象的成员有：

    属性描述
    coords.latitude 十进制数的纬度
    coords.longitude 十进制数的经度
    coords.accuracy 位置精度
    coords.altitude 海拔，海平面以上以米计
    coords.altitudeAccuracy 位置的海拔精度
    coords.heading 方向，从正北开始以度计
    coords.speed 速度，以米/每秒计
    timestamp 响应的日期/时间

    　　其他有趣的方法：

    　　watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

    　　clearWatch() - 停止 watchPosition() 方法

    　　下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

    <!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;    
  }
</script>
</body>
</html>

    　　获取地理位置的功能可以与Google Map结合使用，制作一些地图类的网页。关于与地图API结合使用，参考网络。

    　　7、HTML5存储

    　　用于在客户端存储数据，因为HTTP是无状态链接，可以把一些内容放在本地存储中。

    　　HTML5 提供了两种在客户端存储数据的新方法：

    　　localStorage - 没有时间限制的数据存储，sessionStorage - 针对一个 session 的数据存储。

    　　之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

    　　在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

    　　对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

    　　HTML5 使用 JavaScript 来存储和访问数据。

    　　localStorage 方法：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。如何创建和访问 localStorage：

    <!DOCTYPE HTML>
<html>
<body>

<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> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>

</body>
</html>

    　　sessionStorage 方法

    　　sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。如何创建并访问一个 sessionStorage：

    <!DOCTYPE HTML>
<html>
<body>

<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> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

</body>
</html>

    　　8、应用缓存

    　　鉴于HTML强大的功能，可以做一些WEB应用，但是如果应用比较大，每次打开都需要很长时间，这个时候就需要用到应用缓存了。

    　　使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

    　　HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

    　　应用程序缓存为应用带来三个优势：

    　　离线浏览 - 用户可在应用离线时使用它们

    　　速度 - 已缓存资源加载得更快

    　　减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    　　以下是一个可以离线浏览的网页的示例：

    <!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>
</body>
</html>

     　　使用说明：

    　　如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性，每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。manifest 文件的建议的文件扩展名是：".appcache"。

    　　注意：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

    　　manifest 文件：

    　　manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

    　　manifest 文件可分为三个部分：

    　　CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

    　　NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

    　　FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

    　　（1）、CACHE MANIFEST：第一行，CACHE MANIFEST，是必需的：

    CACHE MANIFEST
/theme.css
/logo.gif
/main.js

    　　上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

    　　（2）、NETWORK

    　　下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：

    NETWORK:
login.asp

    　　可以使用星号来指示所有其他资源/文件都需要因特网连接。

    　　（3）、FALLBACK

    　　下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

    FALLBACK:
/html5/ /404.html

    　　第一个 URI 是资源，第二个是替补。

    　　那么如何更新缓存呢？

    　　一旦应用被缓存，它就会保持缓存直到发生下列情况：

    　　用户清空浏览器缓存

    　　manifest 文件被修改（参阅下面的提示）

    　　由程序来更新应用缓存

    　　完整的示例：

    CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

    　　重要提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

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

    　　浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

    　　9、Web Workers

    　　当网页在执行javascript时，您的网页可能会暂时失去响应，但是如果是个非常耗时间的javascript呢，网页失去响应可能会被用户以为浏览器崩溃了，这就得不偿失了，在应用软件中我们可以使用多线程解决这个问题，在HTML5中也引入了类似的功能，叫做Web Workers。

    　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

    　　使用方法：首先需要创建一个JS脚本，用于在后台执行：

    var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

    　　以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

    　　然后就是页面中的部分了：

    <!DOCTYPE html>
<html>
<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("/example/html5/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>

    　　先判断浏览器是否支持worker，然后再判断worker是否已创建，没有创建则创建一个worker，内容是我们的js脚本。

    　　为worker对象添加onmessage事件监听器，当worker对象使用postMessage(?)方法传递一个对象时，就会触发onmessage事件。

    　　在onmessage事件监听器中，通过读取event.data来读取postMessage传递的值。

    　　停止worker时使用w.terminate()，释放资源。

    　　由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：window 对象，document 对象，parent 对象。

    　　10、HTML5 服务器发送事件(Server-Sent Events)

    　　Server-Sent 事件指的是网页自动获取来自服务器的更新。

    　　以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

    　　示例：

    <!DOCTYPE html>
<html>
<body>
<h1>获取服务端更新数据</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br>";
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
  }
</script>

</body>
</html>

    　　先检查是否支持SSE，支持再做处理。

    　　服务器端代码示例：

    　　为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

    　　服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

    <?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}

";
flush();
?>
    <%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

    　　把报头 "Content-Type" 设置为 "text/event-stream"

    　　规定不对页面进行缓存

    　　输出发送日期（始终以 "data: " 开头）

    　　向网页刷新输出数据

    　　在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

    事件描述
    onopen 当通往服务器的连接被打开时
    onmessage 当接收到消息时
    onerror 当错误发生时
    onclose 当连接关闭时

    　　以上可以看作是HTTP的SOCKET通信，更多详细内容参考WebSocket。

    　　11、新的语义元素与表单元素

    　　参考w3cschool的语义元素与w3school的表单元素。
  • 相关阅读:
    Java 源码刨析
    qemu-guest-agent详解
    Java 源码刨析
    NTP服务解析
    virsh常见命令笔记
    Ansible之playbook
    ansible模块详解
    HashMap详解
    Mysql-Incorrect string value
    web开发中前后端传值
  • 原文地址：https://www.cnblogs.com/guangshan/p/4202454.html
Copyright © 2020-2023  润新知