html5介绍

WebView介绍

webView 是一个可以显示网页的控件，

webView加载内容
loadUrl()方法webView加载页面，可以是url = "http://192.168.1.33:8080/" 或 本地页面"file:///android_asset/index.html" webView1.loadUrl(url);

webView的常用设置
当webView对象构造生成时，便会生成一个默认的webset对象，里面包含了默认的设置，可以用webSet = webView.getSettings();取得webset的引用，并对其进行修改。

由此可见：webViewClient的作用就是获得我们webview页面返回来的信息，进而决定是否给与处理。

在webView中打开新连接
    用setWebViewClient方法设置webView客户端，用于接收webView发出的请求，通常的用法是覆盖其中的方法，自己处理相关的事件，如：shouldOverrideUrlLoading(WebView view, String url)；在自身webView中打开新的超链接。

webView中后退键和前进的处理
     覆盖Activity中onKeyDown（）方法，监听后退按键，并检测当前webView是否可以后退。如果可以后退，调用webView.goBack()方法。同理前进用 webView.goForward()方法。

webView页面刷新
webView页面需要刷新时，调用reload()方法即可。

webView页面加载事件
当页面开始加载时和页面加载完成时如果要处理事件，只需覆盖webViewClient对象的 onPageStra

webView页面加载进度
为webView设置一个浏览器客户端webView.setWebChromeClient(new WebChromeClient())，并覆盖onProgressChanged方法，就可以获得当前网页的加载进度

webView中页面的优化
  当点击页面时，隐藏地址栏和工具按钮，当点击menu按键时，显示地址栏和工具按钮。
1、为webView设置onTouch监听，但要注意 返回值要为false，将此事件继续向下传递。否则会出现问题如超链接不起作用。
   2、覆盖Activity中的onPrepareOptionsMenu方法，此方法在每次点击menu键时，都会执行，在此处显示地址栏和工具按钮。
*发现一个bug，当点击webView时，有时候不会触发onTouch事件，由于之前：webView.getSettings().setBuiltInZoomControls(true);//设置出现缩放工具 ，而这个缩放工具，也是响应onTouch事件的，所以会覆盖掉我们自己设置的onTouhc监听。
     解决办法：不使用webView提供的缩放工具，自己定义按钮，可以用 webView.setInitialScale(50);来设置网页的缩放比例。

java和javaScript相互调用

java代码调用javaScript代码
  确保当前已经加载html页面，然后用webView.loadUrl("javascript:callFromJava()");即可调用页面中的callFromJava方法。

javaScript代码调用java代码
  首先要为webView添加javaScript接口对象webView.addJavascriptInterface(Object ,String);然后，就可以在网页中以这个String为名字，来调用这个对象，这个对象中的方法，

javascript中控制台和alert、confirm、prompt方法的实现
要实现控制台打印和这几个方法只需覆盖WebChromeClient中的相关方法即可。如控制台对应的方法是：onConsoleMessage（）；alert()对应的是onJsAlert()方法；confirm()对应的是onJsConfirm()方法；prompt()对应的是onJsPrompt()方法

Html5：

用于媒介播放的 video 和 audio 元素

对本地离线存储的更好的支持
用于绘画的 canvas 元素

新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

支持音频播放

audio 元素能够播放声音文件或者音频流。 当前，audio 元素支持三种音频格式Ogg Vorbis,mp3,Wav

示例代码一：
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：

示例代码二：
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">

<audio> 标签的属性
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

上面就是我们在页面中实现播放音乐

视频播放

支付的视频格式有ogg,mpeg4,webm。但不是每种浏览器都支付这三种视频格式的，推荐使用mpeg4。
示例代码：
<video src="movie.mpeg4" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
其中：<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

示例二：
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.

视频和音乐类似

<video> 标签的属性
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

HTML 5 Web 存储
在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储。

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

1、localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

2、sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

HTML 5 －GeoLocation
HTML5 Geolocation API 封装在 navigator.geolocation 属性里，各种接口即是 navigator.geolocation 对象的方法

1、 getCurrentPosition 用来获取用户当前的位置信息，该方法带有三个参数：
         1、successCallback：成功获取用户位置信息后的回调函数         2、errorCallback：获取用户位置信息失败时的回调函数         3、positionOptions：可选。获取用户位置信息的配置参数

2、watchPosition()   watchPosition 的三个参数和 getCurrentPosition 完全一样，不同的是 watchPosition 是设计用来实时获取＼检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置，只要发生变化，浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ，否则触发 errorCallback。

3、clearWatch() 
       接受一个 watchPosition 返回的 ID，功能是清除对用户位置的循环监视。

1、getCurrentPosition() 
getCurrentPosition 用来获取用户当前的位置信息，该方法带有三个参数：
         1、successCallback：成功获取用户位置信息后的回调函数         2、errorCallback：获取用户位置信息失败时的回调函数         3、positionOptions：可选。获取用户位置信息的配置参数
i）、successCallback
      successCallback 函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：        1、accuracy：精确度        2、latitude：纬度        3、longitude：经度        4、altitude：海拔        5、altitudeAcuracy：海拔高度的精确度        6、heading：朝向        7、speed：

ii）、errorCallback
       和 successCallback 函数一样带有一个参数，对象字面量格式，表示返回的错误代码。它包含以下两个属性：           1、message：错误信息           2、code：错误代码。       其中错误代码包括以下四个值：           0 — UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息           1 — PERMISSION_DENIED：表示用户拒绝获取位置信息的请求           2 — POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星           3 — TIMEOUT：表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

iii）、positionOptions
       positionOptions 的数据格式为JSON，有三个可选的属性：        1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。        2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。        3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。

2、watchPosition() 
       watchPosition 的三个参数和 getCurrentPosition 完全一样，不同的是 watchPosition 是设计用来实时获取＼检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置，只要发生变化，浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ，否则触发 errorCallback。
       另外和  getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数（setTimeout/setInterval）那样，返回一个 ID ，可以被清除掉。这里是用接下来介绍的 clearWatch 清除。
 
3、clearWatch() 
       接受一个 watchPosition 返回的 ID，功能是清除对用户位置的循环监视。

HTML 5 Canvas
canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
   canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：通过Canvas对象的getContext(‘2d’);获得 CanvasRenderingContext2D 对象。由上下文对象，来具体进行绘图工作。

phoneGap介绍
在webView中，java代码和javascript代码的相互调用中单向的，用这种方法开发的应用，在扩展和维护的时候会非常麻烦，为了解决这个麻烦phoneGap诞生了，phoneGap是建立在webView之上的一个开源框架，使用phoneGap来开发web应用，可以使用java代码和javascript代码完全分开，互不打扰，只要尊守共同的接口文档即可以开发出功能完善的应用。
由于phoneGap的这些优越性，以及html的兴起，phoneGap被adobe公司收获，并捐献给了Apache开源项目组织。
  phoneGap现在最新版本是1.8，从1.5开始，phoneGap改名为cordova，

phoneGap的使用步聚
一、java代码部分：
1、导入phoneGap.jar
2、添加相应的权限
3、修改主Activity为继承自类DroidGap
4、在主类中用super.loadUrl()，加载网页
5、添加xml 配置文件
二、网页代码部分：
1、引入phoneGap.js
2、编写html页面。确保phoneGap加载完成后，才使用。
document.addEventListener("deviceready", onDeviceReady, false);

定义javascript接口文档
  js文档的编写可以参考phoneGap源代码中的示例来写。
js接口文档中定义的内容有：
1、service名字和与之对应的对象
2、每个方法对应的action
3、每个方法的参数的类型
4、方法返回值的类型
在文档中先要判断该文档是否已经加载，并在最后，确保PhoneGap加载此文档。