HTML5易漏知识点锦集

本文通过对w3schoolHTML5基础教程，整理出比较常见的却又容易遗忘或者忽略的HTML5相关知识点。本文的标题顺序与w3school中的HTML5基础教程标题顺序保持一致。适合翻阅和复习。

1.HTML 5 视频

（1）视频格式
当前，video 元素支持三种视频格式：

（2）一种兼容的做法
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>

（3）HTML5 - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件：

2.HTML 5 音频

（1）音频格式
当前，audio 元素支持三种音频格式：

（2）一种兼容的做法
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>

（3）<audio> 标签的属性

3.HTML 5 拖放

（1）设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

（2）拖动什么 - ondragstart 和 setData()
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev){

    ev.dataTransfer.setData("Text",ev.target.id);

}

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

event.preventDefault()

（4）进行放置 - ondrop

function drop(ev){

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

4.HTML 5 Canvas

具体属性和方法调用查看：HTML 5 Canvas 参考手册
（1）创建 Canvas 元素

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

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

<script type="text/javascript">

    // 拿到canvas（必须）

    var c=document.getElementById("myCanvas");

    // 创建画布（必须）

    var cxt=c.getContext("2d");

    // 开始绘制

    cxt.fillStyle="#FF0000";

        // 在画布上绘制 150x75 的矩形，从左上角开始 (0,0)

    cxt.fillRect(0,0,150,75);

</script>

5.HTML5 内联 SVG

具体属性和方法调用查看：SVG 参考手册
（1）什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用XML 格式定义图形
SVG 是万维网联盟的标准

（2）SVG 的优势

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

（3）把 SVG 直接嵌入 HTML 页面
实例：

<!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-width:5;fill-rule:evenodd;" />

</svg>

</body>

</html>

6.HTML5 地理定位

（1）HTML5 - 使用地理定位
实例：

<script>

var x=document.getElementById("demo");

function getLocation() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(showPosition);

  }

  else {

      x.innerHTML="Geolocation is not supported by this browser.";}

  }

function showPosition(position) {

  x.innerHTML="Latitude: " + position.coords.latitude +

  "<br />Longitude: " + position.coords.longitude;

}

</script>

（2）getCurrentPosition() 方法 - 返回数据

7.HTML 5 Web 存储

（1）localStorage 方法（没有时间限制的数据存储）
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>

（2）sessionStorage 方法（针对一个 session 的数据存储）

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>

8.HTML 5 应用程序缓存

（1）Cache Manifest 基础
如需启用应用程序缓存，请在文档的标签中包含 manifest 属性：

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

（2）Manifest 文件

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

9.HTML 5 Web Workers

（1）什么是 Web Worker？
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
（2）检测 Web Worker 支持

if(typeof(Worker)!=="undefined") {

  // Yes! Web worker support!

  // Some code.....

}

else {

  // Sorry! No Web Worker support..

}

（3）创建 Web Worker 对象

if(typeof(w)=="undefined") {

  w=new Worker("demo_workers.js");

}

（4）终止 Web Worker
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

10.HTML 5 服务器发送事件

（1）Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
（2）接收 Server-Sent 事件通知

var source=new EventSource("demo_sse.php");

    source.onmessage=function(event){

        document.getElementById("result").innerHTML+=event.data + "<br />";

    };

11.HTML5 Input 类型

HTML5 新的 Input 类型：

12.HTML5 表单元素

HTML5 的新的表单元素：

13.HTML5 表单属性

HTML5 的新的表单属性：