html5的检测,html检查

怎样检测浏览器是否支持HTML5中的某一元素

指的是结构元素对吧，比如

创新互联建站专注于郊区企业网站建设,成都响应式网站建设公司,商城网站建设。郊区网站建设公司,为郊区等地区提供建站服务。全流程按需网站开发，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

等标签，最简单的方法是直接写出来，然后查看显示效果，如果浏览器显示效果当中，这些元素被显示成了行元素，那么就是不支持（默认支持的都是块元素）。

另外，有一个网站专门用于检测各类HTML5的东西。(百度“Can

I

use”即可找到这个网站)如图：（有详细的浏览器支持说明，细化到版本号）

html5 检测 是否安装

在全局对象上检测

!doctype html

html lang="zh_CN"

head

meta charset="UTF-8"

meta author="suifengtec"

titleapplicationCache Test/title

script

window.onload = function() {

if (window.applicationCache) {

document.write("Yes, your browser can use offline web applications.");

} else {

document.write("No, your browser cannot use offline web applications.");

}

}

/script

/head

body

/body

/html

在创建的元素上检测

!doctype html

html lang="zh_CN"

head

meta charset="UTF-8"

meta author="suifengtec"

titleSimple Square/title

script type="text/javascript"

window.onload = drawSquare;

function drawSquare () {

var canvas = document.getElementById('Simple.Square');

if (canvas.getContext) {

var context = canvas.getContext('2d');

context.fillStyle = "rgb(13, 118, 208)";

context.fillRect(2, 2, 98, 98);

} else {

alert("Canvas API requires an HTML5 compliant browser.");

}

}

/script

/head

body

canvas id="Simple.Square" width="100" height="100"/canvas

/body

/html

检测某HTML5方法是否返回期望的值

!doctype html

html lang="zh_CN"

head

meta charset="UTF-8"

meta author="suifengtec"

titleVideo Test/title

script

function videoCheck() {

return !!document.createElement("video").canPlayType;

}

function h264Check() {

if (!videoCheck) {

document.write("not");

return;

}

var video = document.createElement("video");

if (!video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {

document.write("not");

}

return;

}

document.write("Your browser does ");

h264Check();

document.write(" support H.264 video.");

/script

/head

body

/body

/html

检测HTML5元素是否能保留值

!doctype html

html lang="zh_CN"

head

meta charset="UTF-8"

meta author="suifengtec"

titleRange Input Test/title

script

function rangeCheck() {

var i = document.createElement("input");

i.setAttribute("type", "range");

if (i.type == "text") {

document.write("not");

}

return;

}

document.write("Your browser does ");

rangeCheck();

document.write(" support the codeinput type=range/code input type.");

/script

/head

body

/body

/html

怎么检测浏览器是否支持html5

HTML5是个新生的东西，在浏览器的兼容上还存在一定的局限性，对此我们在使时就遇到了很大问题，那么我们可以通过下面这个简单的方法来检测浏览器是否支持HTML5，从而提示用户更新浏览器或者是使用对html5支持较好的浏览器，代码如下：

!DOCTYPE html

html

head

meta charset="utf-8"

title检测浏览器是否支持html5/title

style type="text/css"

.myCanvas{

width:200px;

height:200px;

border:1px solid #000;

}

/style

/head

body

canvas class="myCanvas"

该浏览器不支持HTML5的画布标记

/canvas

/body

/html

原理：canvas是个画布，支持HTML5的浏览器就会生成一个矩形框，不支持的的话就会出现“该浏览器不支持HTML5的画布标记”这句话

网页怎样检测浏览器是否支持html5？

有以下两种方法可以判断浏览器是否支持html5：

方法一：

script   

function checkhHtml5() {    

if (typeof(Worker) !== "undefined") {   alert("支持HTML5");   }   else {   alert("不支持HTML5");   }  }  

/script

方法二：

canvas id="Canvas"/canvas 

script

if (!document.getElementById("Canvas").getContext){

alert("不支持html5");   

}else{

alert("支持html5");  

} 

/script

怎么检测浏览器是否支持HTML5？

利用HTML5新标签对象的方法来进行检测，比如Canvas对象的getContext()、Video对象的canPlayType等。如果浏览器支持HTML5，则返回相应的期望值（返回函数体，布尔值为true），否则无法获得期望值（返回undefined，布尔值为false）。

Canvas对象的getContext

// 方法一

/**

* [supportHtml5 言成科技HTML5学堂]

* @return {[type]} [description]

*/

function supportCanvas() {

return (typeof document.createElement('canvas').getContext === "function");

}

console.log(supportCanvas());

Video对象的canPlayType

// 方法二

/*

* [supportsVideo 言成科技HTML5学堂]

* @return {[type]} [description]

*/

function supportVideo() {

return !!document.createElement('video').canPlayType;

}

console.log(supportVideo());