正在加载图片...
第1章Web开发新时代 7· 这就是我们今天看到的局面：一种格式，两个版本。WHATWG的网站上有这个规范， 而W3C的网站上也有一份。但是，这两份成果也是有区别的。W3C最终要制定一个具体的 规范，而WHATWG还在不断地迭代，将开发一项简单的HTML或Web技术作为工作的核 心目标。 1.3编写第一个HTML5页面 尽管主流浏览器的最新版本都对HTML5提供了很好的支持，但HTML5毕竞是全新的， 因此在执行HTML5页面之前，必须先搭建支持HTML5的浏览器环境，并检查浏览器是否 支持HTML标记。 1.3.1搭建上机练习环境 目前，Microsoft的IEE9+)浏览器，以及Mozlilla的Firefox与Google的Chrome浏览 器等都可以很好地支持HTML5。本书的示例主要运行在Chrome浏览器上。 1.3.2检测浏览器是否支持 安装相应的浏览器以后，为了能进一步了解浏览器支持HTML5新标签的情况，还可以 在引入新的标签前，通过编写JavaScript代码来检测浏览器是否支持该标签。 浏览器在加载Web页面时会构造一个文本对象模型Document Object Model,DOM),然 后通过该文本对象模型来表示页面中的各个HTML元素，这些元素被表示为不同的DOM对 象。全部的DOM对象都共享一些公共或特殊属性，如HTML5的某些特性。如果在支持该 属性的浏览器中打开页面，就可以很快检测出这些DOM对象是否支持这些特性。 下面以加入画布标记为例，说明如何检测浏览器对canvas标签的支持。 【例1-1】在Dreamweaver中新建一个HTML页面，保存为index.html,.代码如下： <IDOCTYPE html> <htmb <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #myCanvas{ background:red; width:200px; height:100px, } </style> </head> <body> <canvas id-"myCanvas">该浏览器不支持HTML5的画布标记！</canvas> </body> </html>第 1 章 Web 开发新时代 • 7 • 这就是我们今天看到的局面：一种格式，两个版本。WHATWG 的网站上有这个规范， 而 W3C 的网站上也有一份。但是，这两份成果也是有区别的。W3C 最终要制定一个具体的 规范，而 WHATWG 还在不断地迭代，将开发一项简单的 HTML 或 Web 技术作为工作的核 心目标。 1.3 编写第一个 HTML5 页面 尽管主流浏览器的最新版本都对 HTML5 提供了很好的支持，但 HTML5 毕竟是全新的， 因此在执行 HTML5 页面之前，必须先搭建支持 HTML5 的浏览器环境，并检查浏览器是否 支持 HTML 标记。 1.3.1 搭建上机练习环境 目前，Microsoft 的 IE(IE9+)浏览器，以及 Mozlilla 的 Firefox 与 Google 的 Chrome 浏览 器等都可以很好地支持 HTML5。本书的示例主要运行在 Chrome 浏览器上。 1.3.2 检测浏览器是否支持 安装相应的浏览器以后，为了能进一步了解浏览器支持 HTML5 新标签的情况，还可以 在引入新的标签前，通过编写 JavaScript 代码来检测浏览器是否支持该标签。 浏览器在加载 Web 页面时会构造一个文本对象模型(Document Object Model，DOM)，然 后通过该文本对象模型来表示页面中的各个 HTML 元素，这些元素被表示为不同的 DOM 对 象。全部的 DOM 对象都共享一些公共或特殊属性，如 HTML5 的某些特性。如果在支持该 属性的浏览器中打开页面，就可以很快检测出这些 DOM 对象是否支持这些特性。 下面以加入画布标记为例，说明如何检测浏览器对 canvas 标签的支持。 【例 1-1】 在 Dreamweaver 中新建一个 HTML 页面，保存为 index.html，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #myCanvas { background: red; width: 200px; height: 100px; } </style> </head> <body> <canvas id="myCanvas">该浏览器不支持 HTML5 的画布标记！</canvas> </body> </html>