新jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 姚敦红 杨凌 张志美 李晓黎 等编著 第3章.pptVIP

右击【例1-27】中图片弹出的右键菜单 3．在script标签中使用async属性 async属性是HTML5的新属性。在script标签中使用async属性可以指定异步执行指定的脚本。也就是在加载网页的同时执行指定的脚本。如果不指定async属性，则需要等到加载完前面的网页内容，才能开始执行脚本；执行完脚本才能加载后面的网页内容。 【例1-28】 演示一个传统的执行JavaScript脚本的例子。 !DOCTYPE html html body !-- HTML文件的A部分内容 -- script type=text/javascript src=demo.js/script !-- HTML文件的B部分内容 -- /body /html 【例1-28】的时序图 【例1-29】 使用async属性异步执行JavaScript脚本的例子。 !DOCTYPE html html body !-- HTML文件的A部分内容 -- script type=text/javascript src=demo_async.js async=async/script !-- HTML文件的B部分内容 -- /body /html 【例1-29】的时序图 4．details标签 details标签用于描述文档或文档某个部分的细节。 【例1-30】 使用details标签描述文档细节的例子。 !DOCTYPE HTML html body details summary数据库文档说明./summary p本文档用于描述数据库结构.由开发部数据库小组维护。最后修改于2012-10-15/p /details /body /html 浏览【例1-15】的结果 查看details 标签定义的描述文档 1.3.5 全新的表单设计 HTML5支持HTML4中定义的所有标准输入控件，而且新增了下面的新输入控件，从而使HTML5实现了全新的表单设计。关于HTML5表单设计的具体情况将在第3章中介绍。 1.3.6 强大的绘图和多媒体功能 HTML4几乎没有绘图的功能，通常只能显示已有的图片；而HTML5则集成了强大的绘图功能。在HTML5中可以通过下面的方法进行绘图： ? 使用Canvas API动态地绘制各种效果精美的图形； ? 绘制可伸缩矢量图形（SVG）。 借助HTML5的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第6章介绍使用Canvas API画图的方法；并在第7章介绍绘制可伸缩矢量图形（SVG）的方法。 HTML4在播放音频和视频时都需要借flash等第3方插件。而HTML5新增了audio和video元素，可以不依赖任何插件地播放音频和视频，以后用户就不需要安装和升级flash插件了，这当然更方便了。本书将在第8章介绍播放音频和视频大方法。 1.3.7 打造桌面应用的一系列新功能 在传统的Web应用程序中，数据存储和数据处理都有服务器端脚本（例如ASP、ASP.NET和PHP等）完成，客户端的HTML语言只负责显示数据，几乎没有处理能力。传统Web应用程序的工作原理如图1-26所示。 1．Web通信 在HTML4中，出于安全考虑，一般不允许一个浏览器的不同框架、不同标签页、不同窗口之间的应用程序互相通信，以防止恶意攻击。如果要实现跨域通信只能通过Web服务器作为中介。但在桌面应用中，经常需要进行跨通信。HTML5提供了这种跨域通信的消息机制。具体情况将在第9章中介绍。 2．本地存储 HTML4的存储能力很弱，只能使用Cookie存储很少量的数据，比如用户名和密码。HTML5扩充了文件存储的能力，可以存储多达5MB的数据。而且还支持WebSQL和IndexedDB等轻量级数据库，大大增强了数据存储和数据检索能力。具体情况将在第10章中介绍。 3．离线应用 传统Web应用程序对Web服务器的依赖程度非常高，离开Web服务器几乎什么都做不了。而使用HTML5可以开发支持离线的 Web 应用程序，在连接不上Web服务器时，可以切换到离线模式；等到可以连接Web服务器时，再进行数据同步，把离线模式下完成的工作提交到Web服务器。具体情况将在第11章中介绍。 1.3.8 获取地理位置信息 越来越多的Web应用需要获取地理位置信息，例如在显示地图时标注自己的当前位置。在HTML4中，获取用户的地理位置信息需要借助第3方地址数据库或专业的开发包（例如，Google Gears API）。HTML5新增了Geolocation API规范，可以通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了很大的方便。具体情况将在第12章中介绍。