随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以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

web中的字体

web中的字体，和系统无关，系统有无该字体不影响最终的显示效果，不同浏览器所支持的字体格式是不一样的。

• TureTpe(.ttf)格式
  .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
• OpenType(.otf)格式
  .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
• Web Open Font Format(.woff)格式
  woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
• Embedded Open Type(.eot)格式
  .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
• SVG(.svg)格式
  .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

字体图标

其实我们可以把文字理解成是一种特殊形状的图片，常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
这样做的优点：

• 将所有图标打包成字体库，减少请求；
• 具有矢量性，可保证清晰度；
• 使用灵活，便于维护；

附录：Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/

CSS3引入的布局模式Flexbox布局，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
首先我们先理解几个概念：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的。
方向：默认主轴从左向右，侧轴默认从上到下。

注意：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

通过下图我们来深入理解（图片来源于网络）

1、必要元素：

• 指定一个盒子为伸缩盒子 display: flex。
• 设置属性来调整此盒的子元素的布局方式,例如：flex-direction。
• 明确主侧轴及方向。
• 可互换主侧轴，也可改变方向。
  2、属性详解

• 调整主轴方向（默认为水平方向）flex-direction，该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。

  • row 水平方向（从左向右）`
  • reverse-row` 反转（从右向左）
  • column 垂直方向（从上向下）
  • reverse-column 反转列（从下向上）

• justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

  • flex-start 起点对齐
  • flex-end 终点对齐
  • center 中间对齐
  • space-around 环绕
  • space-between 两端对齐
• flex控制子项目的缩放比例，不指定flex 属性，则不参与分配。

• align-items设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

  • flex-start 起点对齐
  • flex-end 终点对齐
  • center 中间对齐
  • Strethc 拉伸。
• order可以进行排序

附录：flex-wrap
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。
语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
属性：

小编安装了Ubuntu18.04之后，从系统自带的软件商店安装微信的时候，不知道什么原因，总是安装失败，所以只能通过手动安装了，其实手动安装也很简单，github上面有微信的开源项目。开源地址：https://github.com/geeeeeeeeek/electronic-wechat
解压之后。里面的内容如下（微信的图标是我自己加入进去的，为了创建快捷方式用）

这时候，你只需要点击这个图标就可以进入扫码登录界面了。
然后再创建一个快捷方式。

cd /usr/share/applications
sudo vim wechat.desktop

然后通过vim把以下内容填如进去

[Desktop Entry]
Categories=Development;
Comment[zh_CN]=
Comment=
Exec=/opt/electronic-wechat-linux-x64/electronic-wechat  //运行文件的位置
GenericName[zh_CN]=App
GenericName=App
Icon=/opt/electronic-wechat-linux-x64/wechat.png  //图标的位置
MimeType=
Name[zh_CN]=微信
Name=wechat
Path=
StartupNotify=true
Terminal=false
Type=Application
X-DBUS-ServiceName=
X-DBUS-StartupType=
X-KDE-SubstituteUID=false
X-KDE-Username=owen

首先，打开终端，输入sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/回车，
然后输入wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -回车。
输入sudo apt-get update回车。
最后输入 sudo apt-get install google-chrome-stable
安装完毕，谷歌 Chrome 浏览器（稳定版）

columns语法:columns:[ column-width ] || [ column-count ]，设置或检索对象的列数和每列的宽度。
相关属性

• 分几列
  column-count:3;
• 分割线
  column-rule:1px dashed red;
• 设置列间距
  column-gap:60px;
• 列宽度
  column-width: 400px;
• 和并列
  column-span:all

注意：为了解决浏览器的兼容性问题，一定要加上浏览器的前缀。