• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例1-1 检测浏览器是否支持HTML 5

实例1-1 检测浏览器是否支持HTML 5

1.功能说明

在HTML页面中插入一段HTML 5画布标记,当浏览器支持该标记时,将出现一个矩形;反之,则在页面中显示“该浏览器不支持HTML 5的画布标记!”的提示。

2.实现代码

在Dreamweaver CS5中新建个HTML页面l-l.html,加入代码如代码清单1-1所示。

代码清单1-1 检测浏览器是否支持HTML 5

	<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1. 0Transitiona1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http;//www.w3•org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>检测浏览器是否支持HTML 5</title>
	</head>
	<body style="font-size;13px">
	<canvas id="myCanvas" width="200" height="100" style="border;2px solid#CCC; background-color;#EEE">
	  该浏览器不支持HTML 5的画布标记!
	  </canvas>
	</body>
	</html>

3.页面效果

将页面文件1-l.html在IE 8浏览器中执行。由于IE 8浏览器暂不支持HTML 5的画布标记,因此将显示如图1-1所示的页面效果。

图1-1 IE 8浏览器不支持HTML 5的画布标记

将页面文件1-l.html在Chrome浏览器中执行。由于该浏览器支持HTML 5的画布标记,因此将显示如图1-2所示的页面效果。

4.源码分析

虽然是同样一个页面,但由于不同的浏览器对HTML 5标记的支持情况不同,其显示的页面效果也各异。因此,在编写HTML 5新标记时,有必要先检测浏览器是否支持该标记。

接下来,我们利用HTML 5结构编写一个简单的程序,从中体会HTML 5的代码简洁所在。

图1-2 Chrome浏览器支持HTML 5的画布标记

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101