在微信开发的过程中，由于用户的昵称用的是emoji表情，小编就吃了很大的一个亏，在给客户演示的时候发现的SQL错误，导致存入失败。经过一段时间的摸索，发现数据库是可以直接存储emoji表情。小编的解决方法如下：
1.mysql数据库的版本大于等于5.5.3
2.把数据库的编码改成utf8mb4，字符集校对改成utf8mb4_general_ci。
3.把要存储emoji表情的表或者字段也改成utf8mb4，字符集校对改成utf8mb4_general_ci。
4.数据库配置也要更改 'DB_CHARSET' => 'utf8mb4', // 数据库编码默认采用utf8。
5.重启数据库。

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担

缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料

其它

1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源，必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时，自动由另外一个资源替换.

CACHE MANIFEST

   CACHE:
   #此部分是需要缓存的资源

   NETWORK:
   #不需要缓存那些资源，必须在网络下面才能访问
    FALLBACK:
   #当前页面无法访问时退回的页面(回退;  后退)

3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
window.online用户网络连接时被调用
window.offline用户网络断开时被调用

window.addEventListener("online",function(){
         alert("已经建立了网络连接")
    })
window.addEventListener("offline",function(){
         alert("已经失去了网络连接")
})

HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示
不同浏览器需要添加前缀如：

 webkitRequestFullScreen、mozRequestFullScreen
 webkitCancleFullScreen、mozCancleFullScreen

通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
       docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
       docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
       docElm.webkitRequestFullScreen();
    }

用户如果选择"记住密码”，系统会自动将密码保存在localStorage，不选择就会自动清除。
代码实现：
html

    <label for="">
        用户名： <input type="text" class="userName"/>
    </label>
    <br/><br/>
    <label for="">
        密　码： <input type="password" class="pwd"/>
    </label>
    <br/><br/>
    <label for="">
        <input type="checkbox" class="ckb"/>
        记住密码
    </label>
    <br/><br/>
    <button>登录</button>

javascript

<script>
    var userName=document.querySelector('.userName');
    var pwd=document.querySelector('.pwd');
    var sub=document.querySelector('button');
    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){
//        如果记住密码 被选中存储，用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }
//        否则清除用户信息
    }

    window.onload=function(){
//        当页面加载完成后，获取用户名，密码，填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }
</script>

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage
window.localStorage

特性

• 设置、读取方便
• 容量较大，sessionStorage约5M、localStorage约20M

• 只能存储字符串，可以将对象JSON.stringify() 编码后存储

  window.sessionStorage

  1、生命周期为关闭浏览器窗口
  2、在同一个窗口下数据可以共享

  window.localStorage

  1、永久生效，除非手动删除
  2、可以多窗口共享
  方法详解

• setItem(key, value) 设置存储内容
• getItem(key) 读取存储内容
• removeItem(key) 删除键值为key的存储内容
• clear() 清空所有存储内容
• key(n) 以索引值来获取存储内容

常见获取地理信息的方式有：IP地址，三维坐标（GPS，wifi，手机信号）用户自定义数据）浏览器会自动以最优方式去获取用户地理信息。HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
常用的API
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
注意：
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式

附录：获取位置的代码

<script>
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
    }else {
        console.log('浏览器不支持定位');
    }
    function successCallback(position) {
        var wd = position.coords.latitude;
        var jd = position.coords.longitude;

        console.log("获取用户信息成功");
        console.log(wd+'--'+jd);

    }
    function errorCallback(error) {
        console.log(error);
        console.log('获取用户位置失败');
    }
</script>

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

目标元素：页面中任何一个元素都可以成为目标元素
事件监听
拖拽元素

• ondrag 应用于拖拽元素，整个拖拽过程都会调用
• ondragstart 应用于拖拽元素，当拖拽开始时调用
• ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
• ondragend 应用于拖拽元素，当拖拽结束时调用
  目标元素
• ondragenter 应用于目标元素，当拖拽元素进入时调用
• ondragover 应用于目标元素，当停留在目标元素上时调用
• ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
• ondragleave 应用于目标元素，当鼠标离开目标元素时调用- `

方法：load() 加载、play() 播放、pause() 暂停
属性：currentTime 视频播放的当前进度、

  duration:视频的总时间
  paused:视频播放的状态.

事件：

 oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
 ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发

全屏：video.webkitRequestFullScreen();

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。
主要功能有：

• 支持鼠标滚动
• 支持前进后退和键盘控制
• 多个回调函数
• 支持手机、平板触摸事件
• 支持 CSS3 动画
• 支持窗口缩放
• 窗口缩放时自动调整

• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式
  兼容性：兼容jQuery1.7以上。浏览器IE8以上
  使用方法：
  1.引入

  <link rel="stylesheet" href="css/jquery.fullPage.css">
  <script src="js/jquery.min.js"></script>
  
  <!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
  <script src="js/jquery.easings.min.js"></script>
  
  <!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
  <script src="js/jquery.slimscroll.min.js"></script>
  
  <script src="js/jquery.fullPage.js"></script>

  2.html

  <div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
  </div>

  每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

同时，可以在 section 内加入 slide，如：

<div id="dowebok">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

3.JavaScript

$(function(){
    $('#dowebok').fullpage();
});

方法

回调函数

本文章来源于：dowebok