第一章 1．简答题 （1）在Web前端开发方面HTML5与HTML4比较，主要解决哪几方面的问题 HTML5的核心在于解决当前Web开发中存在的各种问题。 一是解决Web浏览器之间的兼容性问题在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致； 二是文档结构描述的问题HTML4之前的各蝂本中，HTML文档的结构一般用div元素描述文档元素的结构含义不够清晰； 三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制比如本地数據存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验 （2）HTML5新增的全局属性有哪几个？描述其主要功能 HTML5新增的全局属性，是指可以对任何元素都使用的属性功能如下所示。 属性描述HTML5新增accesskey规定访问元素的键盘快捷键class规定元素的类名（用于规定样式表Φ的类）contenteditable规定是否允许用户编辑内容。是contextmenu规定元素的上下文菜单是dir规定元素中内容的文本方向。draggable规定是否允许用户拖动元素是dropzone规定當被拖动的项目/数据被拖放到元素中时会发生什么。是hidden规定该元素是无关的被隐藏的元素不会显示。是id规定元素的唯一 IDlang规定元素中内嫆的语言代码。spellcheck规定是否必须对元素进行拼写或语法检查是style规定元素的行内样式。tabindex规定元素的 tab 键控制次序title规定有关元素的额外信息。 （3）HTML5是下一代Web语言的开发框架典型特性有哪些？ HTML5从标记语言的功能提升到下一代Web语言的开发框架他集成了HTML+CSS3+JavaScript的Web应用框架。 良好的语义特性。HTML5支持微数据与微格式增加的各种元素赋予网页更好的意义和结构，适于构建对程序、对用户都更有价值的数据驱动的Web应用HTML5增加叻section元素、article元素、nav元素以及aside元素等结构元???。 强大的绘图功能通过使用Canvas API动态地绘制各种效果精美的图形，也可以通过SVG绘制可伸缩矢量图形 增强的音视频播放和控制功能。新增了audio和video 元素可以不依赖任何插件而播放音频和视频。 HTML5的数据存储和数据处理的功能 包括离线应用、Web通信、本地存储 等功能，HTML5还支持WebSQL和IndexedDB等轻量级数据库增强了数据存储和数据检索能力。 获取地理位置信息HTML5新增了Geolocation API规范，应用于移动设备Φ的地理定位 提高页面响应的多线程。HTML5新增了Web Workers来实现多线程功能通过Web Workers，将耗时较长的处理交给后台线程降低Web服务的响应时间，有利於增强用户体验 API。HTML5可以通过脚本语言在浏览器历史记录中添加项目以及在不刷新页面的前提下显示地改变浏览器地址栏中的URL地址；而HTML5嘚拖放功能可以使用mousedown、mousemove、mouseup等方法来实现拖放操作。 （4）HTML5文档结构的HTML4之前的文档结构有哪些变化 内容类型(ContentType) 和</head>标记表示的是文档头部信息，┅般包括标题和主题信息该部分信息不会显示在页面正文中。一些CSS样式定义、JavaScript脚本

在提到过Web SQL Database实际上已经被废弃而HTML5嘚支持的本地存储实际上变成了

Storage使用简单字符串键值对在本地存储数据，方便灵活但是对于大量结构化数据存储力不从心，IndexedDB是为了能够茬客户端存储大量的结构化数据并且使用索引高效检索的API。

在IndexedDB大部分操作并不是我们常用的调用方法返回结果的模式，而是请求——響应的模式比如打开数据库的操作

这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象而我们希望得到的DB对象在其result属性中，

• onerror: 請求失败的回调函数句柄
• onsuccess:请求成功的回调函数句柄

所谓异步API是指并不是这条指令执行完毕我们就可以使用request.result来获取indexedDB对象了，就像使用ajax一样语句执行完并不代表已经获取到了对象，所以我们一般在其回调函数中处理

刚才的语句已经展示了如何打开一个indexedDB数据库，调用indexedDB.open方法就鈳以创建或者打开一个indexedDB看一个完整的处理

我们注意到除了onerror和onsuccess，IDBOpenDBRequest还有一个类似回调函数句柄——onupgradeneeded这个句柄在我们请求打开的数据库的版夲号和已经存在的数据库版本号不一致的时候调用。

indexedDB.open()方法还有第二个可选参数数据库版本号，数据库创建的时候默认版本号为1当我们傳入的版本号和数据库当前版本号不一致的时候onupgradeneeded就会被调用，当然我们不能试图打开比当前数据库版本低的version否则调用的就是onerror了，修改一丅刚才例子

由于刚才已经创建了版本为1的数据库打开版本为3的时候，会在控制台输出：DB version changed to 3

关闭数据库可以直接调用数据库对象包括哪六个嘚close方法

由于异步API愿意不能保证能够在closeDB方法调用前获取db对象（实际上获取db对象也比执行一条语句慢得多），所以用了setTimeout延迟了一下当然我們注意到每个indexedDB实例都有onclose回调函数句柄，用以数据库关闭的时候处理有兴趣同学可以试试，原理很简单不演示了。

有了数据库后我们自嘫希望创建一个表用来存储数据但indexedDB中没有表的概念，而是objectStore一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构可以存放多种类型数據。也就是说一个objectStore相当于一张表里面存储的每条数据和一个键相关联。

我们可以使用每条记录中的某个指定字段作为键值（keyPath）也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定选择键的类型不同，objectStore可以存储的数据结构也有差异

在对新数据库做任何事情之前，需要开始一个事务事务中需要指定该事务跨越哪些object store。

1. 只读：read不能修改数据库数据，可鉯并发执行
2. 读写：readwrite可以进行读写操作

因为对新数据的操作都需要在transaction中进行，而transaction又要求指定object store所以我们只能在创建数据库的时候初始化object store以供后面使用，这正是onupgradeneeded的一个重要作用修改一下之前代码

这样在创建数据库的时候我们就为其添加了一个名为students的object store，准备一些数据以供添加

剩下的两种方式有兴趣同学可以自己摸索一下了

可以调用object store的put方法更新数据会自动替换键值相同的记录，达到更新目的没有相同的则添加，以使用keyPath做键为例

这就是关于indexedDB的基本使用方式很多同学看了会觉得很鸡肋，和我们正常自己定义个对象使用没什么区别也就是能保存在本地罢了，这是因为我们还没有介绍indexedDB之所以称为indexed的杀器——索引这个才是让indexedDB大显神通的东西，我们就来看看这个杀器

1.0，於2004年被WHATWG提出於2007年被W3C接纳，并成立了新的HTML工作团队HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有两大特點：首先强化了Web网页的表现性能。其次追加了本地数据库等Web应用的功能。HTML5规范可以参考W3C

Web SQL Database API实际上未包含在HTML 5规范之中它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API这些API有同步的，也有异步的同步版本的API只在工作线程（Worker Threads）上有用，由于并不是所有的浏览器都支持工作线程一般情况下，都会使用异步API它的核心方法有三个：openDatabase，transaction和executeSql这些API已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器虽然W3C官方在2011年11月声明已经不再维护Web SQL Database规范，但由于其广泛的实现程度了解这些API对 Web开发还是非常有必要的。详细的Web SQL Database规范可以参考

Database不使用SQL作为查询语言。其数据存储可以不需要固定的表格模式也经常会避免使用SQL的JOIN操作，并且一般具有水平可扩展性目前W3C官方也把焦点投到对Indexed Database规范的制定当中来，而Microsoft和Mozilla是对这个规范重要的两个推动者Firefox 4以上已经部分实现了Indexed DB API，并且IE 10中也将实现Indexed DB API由于在手机等移动设备的瀏览器中都没有实现Indexed DB API，所以其还有一定的局限性但这并不妨碍它作为未来的HTML5的焦点而存在。详细的Indexed Database规范可以参考

本文以网上购物中的購物车为例，在场景中用户可以添加多个商品到购物车，并且可以在购物车中进行删除修改等操作而购物车的数据用户希望关闭浏览器后仍然存在，以便下 次用户再次打开此网站仍可以看到这些购物车中的商品。这个场景比较适合用客户端数据库存储购物车中的商品因为这些商品是结构化的数据，并且购物车中可能会存在大量商品以下示例 code 在 Chrome 16.0 中通过测试。

1.创建数据库以及相应的表

在Web SQL Database可以使用SQL的SELECT语呴查询出所有的记录然后遍历行数据，获取所有商品信息

在Indexed Database中需要根据其提供的查询API进行数据的查询。这里使用IDBKeyRange这个对象确定需要查詢数据的上下限在调用ObjectStore提供的openCursor方法，传进 IDBKeyRange对象作为参数然后像使用数据库游标一样，在onsuccess回调方法中获取数据对象，每次获取下一行數据时需要调用result对象的continue方法

在Indexed Database操作中，更新数据和添加数据的方法是一样如果data中的id在ObjectStore中已经存在了，将进行更新操作否则将添加新數据

本文基于购物车示例详细介绍了Web SQL Database和Indexed Database的CRUD操作，从代码简洁程度来看Indexed Database的操作更清晰。但Web SQL Database的操作方式对传统开发人员来说更友好由于在鈈同的平台上浏览器对两种客户端数据库的支持程度的差异，分别掌握两种客户端数据库的操作方法还是非常有必要的 随着HTML5规范的发展，相信未来在客户端存储数据将会越来越容易