HTML5+CSS3基础开发教程第01章__初识HTML5

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

3. 适应当前Web应用发展潮流。
HTML5应用界面友好，功能强大，是今后Web发展的主流方向。
1.3 HTML5的开发环境
HTML5对开发环境依赖较小，各种文本编辑器及集成开发工具都可用于HTML5应用开发。常用的开发工具包括如下几种： 1. 文本编辑器：UltraEdit，NotePad++，EditPlus。 2. 集成开发工具：Dreamweaver，Visual Studio，FrontPage， Eclipse。
第1章初识HTML5
1.1 HTML发展史 1.2 为什么要学习HTML5 1.3 HTML5的开发环境
1.4 HTML5支持检测
1.1 HTML发展史
HTML标签 HTML2.0 HTML4.01 XHTML1.0/2.0
1991年Tim Berners-Lee编写，包括20个HTML标签
IETF推出
1.4 HTML5支持检测
HTML5开发的应用要想正常运行，需要浏览器提供相应支持。虽然目前主流浏览器已经提供了对HTML5元素的支持，但是支持性并不全面。 HTML5支持性检测有如下几种方法： 1. 判断元素的DOM对象是否可被浏览器正确识别。例如，以检测 canvas元素为例，创建一个html页面testHTML5.html，并输入以下代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=gb2312" /> <title></title> </head> <body>
来自百度文库
图1-3 浏览器不支持canvas元素的getContext方法
图1-4 浏览器支持canvas元素的getContext方法
3. 检测全局对象是否拥有特定属性。例如以检测全局对象navigator的 geolocation属性为例，创建一个HTML页面testHTML5_3.html，输入如下代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=gb2312" /> <title></title> <script> function checkNavigatorSupport() { alert(navigator.geolocation); } </script> </head>
</head> <body onload="checkCanvasSupport()"> <canvas id="canvas1" style="background-color:#0000FF"> 如果浏览器不支持HTML5的<canvas>元素，则会显示此句话。 </canvas> </body> </html> 在此页面中，我们通过编写JavaScript代码获取canvas元素的DOM对象，并调用alert方法显示canvas元素的getContext()方法。保存后，使用IE6.0浏览器打开此页面，得到结果如图1-3所示。使用Chrome浏览器打开此页面，得到结果如图1-4所示。
图1-1 浏览器不支持HTML5的canvas元素 canvas元素
图1-2 浏览器支持HTML5的
2. 若指定元素拥有特定方法，调用该方法并检查返回值。仍以canvas元素为例，该元素使用方法getContext()获取该元素上下文。创建一个HTML页面testHTML5_2.html，并输入如下代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=gb2312" /> <title></title> <script> function checkCanvasSupport() { var canvas = document.getElementById('canvas1'); alert(canvas.getContext); } </script>
<canvas id="canvas1" style="background-color:#0000FF"> 如果浏览器不支持HTML5的<canvas>元素，则会显示此句话。 </canvas> </body> </html> 在此页面中，我们使用了canvas元素创建一个画布，如果浏览器支持该元素，则会显示出一块背景颜色为蓝色的画布；如果浏览器不支持该元素，则会直接显示中间的语句。保存后，使用IE6.0浏览器打开此页面，得到结果如图1-1所示。使用Chrome浏览器打开此页面，得到结果如图1-2所示。
1999年W3C推出HTML4.01版本
HTML4.01版本基础上衍变而来
HTML5
2009年W3C推出HTML5取代原有HTML版本
1.2 为什么要学习HTML5
1. 标签丰富，功能强大。
通过HTML5可以轻松实现页面中的音频、视频、动画等效果。
2. 支持移动互联网的Web应用需求。
HTML5开发应用，可以轻松运行于手机、平板电脑等移动设备。