CSS3 总结

css3选择器

css3属性
CSS3发展史简介

HTML的诞生 20世纪90年代初
1996年底， CSS第一版诞生
1998年5月 CSS2正式发布
2004年 CSS2.1发布
CSS3的发布 2002 2003 2004 2005 2007 2009 2010

模块化开发

CSS1 中定义了网页的基本属性：
字体、颜色、基本选择器等
CSS2中在CSS1的基础上添加了高级功能
浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)
CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段

CSS选择器复习

通用选择器：* 选择到所有的元素
选择子元素：> 选择到元素的直接后代
相邻兄弟选择器：+选择到紧随目标元素后的第一个元素
普通兄弟选择器：~选择到紧随其后的所有兄弟元素
伪元素选择器：
::first-line 匹配文本块的首行
::first-letter 选择文本块的首字母
伪类选择器：
:before,:after在元素内容前面、后面添加内容(相当于行内元素)

CSS3结构选择器

css3属性选择器

CSS3伪类选择器
UI伪类选择器：

:enabled选择启用状态元素
:disabled 选择禁用状态元素
:checked选择被选中的input元素（单选按钮或复选框）
:default 选择默认元素
:valid、invalid 根据输入验证选择有效或无效的input元素
:in-range、out-of-range选择指定范围之内或者之外受限的元素
:required、optional根据是否允许:required属性选择input元素

动态伪类选择器：

:link选择链接元素
:visited 选择用户以访问的元素
:hover 鼠标悬停其上的元素
:active鼠标点击时触发的事件
:focus 当前获取焦点的元素

其他伪类选择器：

:not(<选择器>)对括号内选择器的选择取反
:lang(<目标语言>) 基于lang全局属性的元素
:target url片段标识符指向的元素
:empty选择内容为空的元素
:selection鼠标光标选择元素内容

CSS3新增文本属性

CSS文本属性复习

white-space：对象内空格的处理方式
nowrap 控制文本不换行
pre 空白会被浏览器保留
pre-line 合并空白 保留换行符
pre-wrap 保留空白 正常换行
direction：文本流的方向
ltr 文本从左向右
rtl 文本从右往左
unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

CSS3新增文本属性

color:rgba();
text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出
text-align:文本的对齐方式
text-transform:文字的大小写
text-decoration:文本的装饰线，复合属性
text-shadow:文本阴影
text-fill-color:文字填充颜色
text-stroke:复合属性。设置文字的描边
tab-size:制表符的长度
word-wrap:当前行超过指定容器的边界时是否断开转行
word-break:规定自动换行的处理方法
text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出
clip： 默认值 无省略号
ellipsis：当对象内文本溢出时显示省略标记（...）。
注意：该属性需配合over-flow:hidden属性(超出处理)还有 white-space:nowrap(禁止换行)配合使用，否则无法看到效果

text-align:文本的对齐方式

css1
left:默认值 左对齐
right:右对齐
center:居中
justify： 内容两端对齐。
css3
start:开始边界对齐
end:结束边界对齐

text-transform:文字的大小写

css1
none： 默认值 无转换
capitalize： 将每个单词的第一个字母转换成大写
uppercase： 转换成大写
lowercase： 转换成小写
css3
full-width： 将左右字符设为全角形式。不支持
full-size-kana：将所有小假名字符转换为普通假名。不支持
例如：土耳其语

text-decoration:文本的装饰线，复合属性(只火狐支持)

text-decoration-line：
指定文本装饰的种类。相当于CSS1时的text-decoration属性
text-decoration-style ：
`指定文本装饰的样式。
text-decoration-color：
`指定文本装饰的颜色。
blink： 指定文字的装饰是闪烁。 opera和firefox
text-decoration : #F00
 double overline CSS3实例

text-shadow:文本阴影

取值：x y blur color,......
x 横向偏移
y 纵向偏移
blur 模糊距离(灰度)
color 阴影颜色
text-fill-color:文字填充颜色
text-stroke:复合属性。设置文字的描边
text-stroke-width:文字的描边厚度
text-stroke-color:文字的描边颜色
tab-size:制表符的长度
默认值为8(一个tab键的空格字节长度)，在 pre标签之内才会有显示
word-wrap:当前行超过指定容器的边界时是否断开转行
normal： 默认值
允许内容顶开或溢出指定的容器边界。
break-word：
内容将在边界内换行。如果需要，单词内部允许断行

CSS3盒模型

CSS盒模型复习

CSS3弹性盒模型

以下6个属性设置在容器上

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
属性详解
flex-direction:
 row | row-reverse | column | column-reverse;
 
flex-wrap:
 nowrap | wrap | wrap-reverse;                   
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row
 nowrap
flex-flow:
 <flex-direction> || <flex-wrap>;

justify-content属性定义了项目在主轴上的对齐方式。
justify-content:   
 flex-start | flex-end | center | space-between | space-around;

align-items属性定义项目在交叉轴上如何对齐。
align-items:
 flex-start | flex-end | center | baseline | stretch;

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content:
 flex-start | flex-end | center | space-between | space-around | stretch;

以下6个属性设置在项目上

order
flex-grow
flex-shrink
flex-basis
flex
align-self

属性详解
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0
 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self:
 auto | flex-start | flex-end | center | baseline | stretch;

css3新增背景属性

CSS背景属性复习

background:
background-color:背景颜色
background-image:背景图片
background-repeat:背景重复
background-position:背景定位
background-attachment:背景固定(scroll/fixed)

CSS3新增背景属性

background-size 背景尺寸
background-size:x
 y 水平 垂直方向的尺寸，像素/百分比/auto/…
background-size:100%
 100%
background-size:cover 比例放大
background-size:contain 包含（图片不溢出）

多背景

background-image:url(1.jpg),url(2.jpg);
background-origin 背景区域定位
border-box： 从border区域开始显示背景。
padding-box： 从padding区域开始显示背景。
content-box： 从content内容区域开始显示背
background-clip 背景绘制区域
border-box： 从border区域向外裁剪背景。
padding-box： 从padding区域向外裁剪背景。
content-box： 从content区域向外裁剪背景。
text:背景填充文本
no-clip： 从border区域向外裁剪背景

颜色渐变

线性渐变：linear-gradient(起点/角度，颜色 位置，...,)
起点：left/top/right/bottom/left
 top......默认top
角度：逆时针方向 0-360度
颜色 位置：red
 50%, blue 100%(红色从50%渐变到100%为蓝色)
repeating-linear-gradient 线性渐变重复平铺
IE低版本渐变(滤镜)：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
径向渐变：radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)
起点：left/top/right/bottom或具体值/百分比
形状：ellipse(椭圆)、circle(正圆)
大小：具体数值或百分比，也可以是关键字（closest-side(最近端), closest-corner最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖)）;

透明颜色：transparent
实例：border实现三角箭头、风车等
透明度：
opacity
取值：0-1之间
注：低版本的IE浏览器不兼容,需用IE浏览器的滤镜实现相同效果，filter:alpha(opacity=50)
对于低版本的火狐浏览器需添加内核前缀，-moz-opacity

CSS3边框系列

圆角-阴影

边框圆角

在CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片
在 CSS3中，创建圆角是非常容易的
在CSS3中，border-radius属性用于创建圆角
border-radius边框圆角写法
border-radius:
 2em 1em 4em / 0.5em 3em;

等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

box-shadow方框添加阴影

语法：box-shadow:x-shadow y-shadow blur spread color inset;
box-shadow的API
x-shadow 必需。水平阴影的位置。允许负值。
y-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS颜色值
inset 可选。将外部阴影 (outset) 改为内部阴影
实例：box-shadow:10px
 10px 5px 5px #888888;

边框系列-图片

border-image语法

属性 版本 简介
border-image CSS3 设置或检索对象的边框使用图像来填充
border-image-source CSS3 设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice CSS3 设置或检索对象的边框背景图的分割方式
border-image-width CSS3 设置或检索对象的边框厚度
border-image-outset CSS3 设置或检索对象的边框背景图的扩展
border-image-repeat CSS3 设置或检索对象的边框图像的平铺方式

border-image-slice
设置或检索对象的边框背景图的分割方式

border-image-repeatvc

用于指定边框背景图的重复方式
取值：
stretch： 指定用拉伸方式来填充边框背景图。 *默认的
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小 直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果

CSS3运动体系

过渡

过渡：给改变添加过程
什么是过渡
过渡效果由哪几部分组成
过渡可以干些什么
transition 过渡属性
transition: property duration timing-function delay;
transition-property:过渡属性的名称
none 没有过渡属性
all 所有属性都过渡(默认值)
property 具体属性名称(property1,property2...)
transition-duration:过渡属性花费的时间
time 秒或毫秒
transition-timing-function:过渡效果速度曲线
time 秒或毫秒
transition-delay:过渡效果延迟时间
transition-timing-function:过渡效果速度曲线
linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out :规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out :规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0至 1 之间的数值。
过渡完成事件

过渡完成事件
Webkit内核：
obj.addEventListener('webkitTransitionEnd',function(){})
标准:
obj.addEventListener('transitionend',function(){})

动画

什么是CSS3 动画？

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
动画接口

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定动画何时开始。
animation-iteration-count 规定动画被播放的次数。
animation-direction 规定动画是否在下一周期逆向地播放。
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。
animation-timing-function速度曲线

值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
在谷歌浏览器里面需要加上-webkit-
IE6,7,8,9不支持css3运动

CSS3盒模型阴影

box-shadow:inset
 x y blur spread color
inset：投影方式
inset：内投影
outset：外投影 默认(不能设置)
x、y：阴影偏移
blur：模糊半径（灰度）
spread：扩展阴影半径
先扩展原有形状，再开始画阴影
color
CSS3盒模型倒影
box-reflect 倒影
方向 above|below|left|right;
距离
渐变（可选）

CSS3其他盒模型

box-sizing 盒模型解析模式
content-box 标准盒模型(和css2一样的计算)
width/height=border+padding+content
border-box 怪异盒模型width/height与设置的值一样 ，content减小

transform 2D转换

Css3平面转换方法
translate() 移动
rotate() 旋转
scale() 缩放
skew() 翻转
matrix() 矩阵
transform:
rotate() 旋转函数 (deg)
deg 度数
skew(X,Y) 倾斜函数 (deg)
skewX()
skewY()
scale(X,Y) 缩放函数 (正数、负数和小数)
scaleX()
scaleY()
translate(X,Y) 位移函数(px)
translateX()
translateY()
rotate() 旋转方法
用于旋转元素角度
例：rotate(30deg)
把元素顺时针旋转 30 度
translate()位置方法
用于移动元素位置
例：translate(50px,100px)
把元素从左侧移动 50 像素，从顶端移动 100 像素。
其实有些类似于我们的相对定位
scale()尺寸方法
方法用于改变元素尺寸
例：scale(2,4)
把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
skew() 翻转方法
通过 skew()方法，元素翻转给定的角度
例：transform:
 skew(30deg,20deg);
把元素围绕 X轴把元素翻转30 度，围绕 Y 轴翻转 20度

transform 3D转换

Css3立体转换

transform-style（preserve-3d） 建立3D空间（指定元素的子元素展示的场景是在3D场景还是平面(投影)场景）
Perspective 视角（指定观察者与z=0平面的距离，从而让元素及子元素看起来有3D透视位置效果
值：集体的带单位数值）
Perspective-
 origin 视角基点
值：取值类似于变换基准
transform-origin：坐标轴基点（变换基准）
值：具体的坐标值/百分比/(left/right/center/top/bottom)
默认 center center
transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

视频音频

视频音频格式的简单介绍
常见的视频格式
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
常见的音频格式
视频编码：ACC、MP3、Vorbis

HTML5支持的格式

HTML5能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。
支持的视频格式：
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式

Video的使用

单独用法

<video src="文件地址"
 controls="controls"></video>
带提示用法
< video src="文件地址" controls="controls">
    您的浏览器暂不支持video标签。播放视频
</ video >
兼容用法
< video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持video标签。播放视频
</ video >

Video的常见属性

属性 值 描述
Autoplay Autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
Width Pixels(像素) 设置播放器宽度
Height Pixels(像素) 设置播放器高度
Loop Loop 播放完是否继续播放该视频，循环播放
Preload load{auto,meta,none} 规定是否预加载视频。
Src url 视频url地址
Poster Imgurl 加载等待的画面图片
Autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效

Video的API方法

方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType() videoHeight error

canvas

标签 <canvas>
不支持canvas 的浏览器可以看到的内容
默认宽度300px，默认高度150px
注意：canvas宽高需要设置在标签中 否则绘制的东西可能出错
<canvas> 绘制环境
getContext("2d");目前支持2d的场景
<canvas width="" height="" id="">
    您的浏览器不支持canvas，请更换浏览器！
</canvas>
绘制矩形
rect(L,T,W,H):创建一个矩形
fillRect(L,T,W,H):绘制填充的矩形
clearRect(x,y,w,h) 清除矩形选区
strokeRect(L,T,W,H)绘制空心矩形(无填充)
默认一像素黑色边框
设置绘图样式
fillStyle:填充颜色(绘制canvas是有顺序的)
lineWidth:触笔宽度(线宽)
strokeStyle:触笔颜色
绘制路径
beginPath() :开始路径
closePath():结束路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法 画线 默认为黑色
fill():填充方法
rect(x,y,w,h):矩形路径
save():保存绘图信息 并新开辟一个异次元空间
restore():恢复路径

绘制曲线

arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半斤
quadraticCurveTo(dx,dy,x1,y1)

贝塞尔曲线:dx,dy控制点 x1,y1结束坐标

bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标

绘制圆形

arc(x,y,半径,起始弧度,结束弧度,旋转方向)
x，y起始位置
弧度与角度：弧度=角度值*Math.PI/180
旋转方向：顺时针（默认：false），逆时针（true）

绘制文本

strokeText(文本,x,y); 绘制空心文本
fillText(文本,x,y); 绘制实心文本
font = "font-size
 font-family"注:尺寸 字体缺一不可
textAlign
 = "";文本左右对齐方式 start center end left right
textBaseline文本上下对齐方式
alphabetic默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。。
hanging 文本基线是悬挂基线。
middle 文本基线是em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。
measureText(文本).width; 文本实际宽度(只有宽度值)

图形边界样式

lineJoin: 边界连接点样式
miter(默认值),round(圆角),bevel(斜角)
lineCap: 端点样式
butt(默认值),round(圆角),square(高度多出线宽一半)
绘制图片
图片预加载，获取图片文件
onload中调用
drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)
设置背景
createPattern(img,平铺方式)
平铺方式:repeat,repeat-x,repeat-y,no-repeat

canvas变换

translate(x,y)
坐标基准点偏移 : 从起始点为基准，移动到当前位置
rotate(弧度): 旋转 弧度公式 = 角度*PI/180
scale(wb,hb)缩放比例(缩放canvas绘制的图片)
颜色渐变
线性渐变:createLinearGradient(x1,y1,x2,y2)
x1,y1起始坐标点
x2,y2结束坐标点
径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)
x1,y1,r1内圆坐标及半径
x2,y2,r2外圆坐标及半径
addColorStop(位置,颜色) 位置:渐变点 0-1之间 可多个
阴影
shadowOffsetX,shadowOffsetY x轴、y轴偏移
shadowBlur 阴影模糊度
shadowColor 阴影颜色 默认颜色:rgba(0,0,0,0)
像素
createImageData(sx,sy) 创建新的、空白的 ImageData 对象
getImageData(x1,y1,sx,sy)
返回ImageData对象，该对象为画布上指定的矩形复制像素数据putImageData(img,x2,y2)
把图像数据（从指定的 ImageData 对象）放回画布上
合成
globalAlpha 设置或返回绘图的当前alpha或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
source-over默认。在目标图像上显示源图像。
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over在源图像上方显示目标图像。
destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter显示源图像 + 目标图像。
copy显示源图像。忽略目标图像。
xor使用异或操作对源图像与目标图像进行组合。

SVG绘图

svg是什么
矢量图
与canvas的区别
svg的引入方式
方式一：

<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE svg 
PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"></svg>

方式二：
图片、背景、框架
方式三:

html页面中添加svg
circle:圆形
圆心坐标 cx,cy
半径 r
fill stroke stroke-width stlye样式
fill = "none/transparent"
ellipse:椭圆
cx属性定义的椭圆中心的x坐标
cy属性定义的椭圆中心的y坐标
rx属性定义的水平半径
ry属性定义的垂直半径
rect : 矩形
width height 宽高
坐标 x,y
圆角 rx,ry
line:线条
x1,y1,x2,y2
stroke-opacity 透明 fill-opacity
polyline:折线
points:点坐标（x1
 y1 x2 y2...）或(x1,y1,x2,y2....)
polygon:多边形
折线闭合 fill-rule:evenodd/nonzero;
path: 路劲
d属性
M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲)
C,S,Q,T 贝塞尔曲线
大写为绝对坐标(具体的坐标位置)
小写为相对坐标(相对起始坐标点的具体长度)
A命令
x半径 y半径 角度 弧长(0 小弧 1大弧) 方向(0逆时针 1顺时针)
终点(x y)
C命令：三次贝塞尔曲线
(x1,y1,x2,y2,x,y) x1,y1控制点一 x2,y2控制点二 x,y结束点
S命令：平滑贝塞尔曲线(自动对称一个控制点)
(x2,y2,x,y) x2,y2控制点 x,y结束点
Q命令：二次贝塞尔曲线
(x1,y1,x,y) x1,y1控制点 x,y结束点
T命令：一次贝塞尔曲线
(x,y)结束点
g标签:组合元素 设置元素公共属性
共用属性
transform
 = "translate(0,0)"
text标签
x, y, text-anchor(对齐start end middle) font-size
image 标签
x, y, width height
xlink:href(图片地址)

地理信息与本地存储

地理位置

经度 : 南北极的连接线
纬度 : 东西连接的线
位置信息从何而来
IP地址
GPS全球定位系统
Wi-Fi无线网络
基站
avigator.geolocation
单次定位请求 ：getCurrentPosition(请求成功,请求失败,数据收集方式)
请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
请求的时间: new
Date(position.timestamp)
请求失败函数
失败编号 ：code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了
数据收集 : json的形式
enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0
多次定位请求* : watchPosition
移动设备有用，位置改变才会触发
配置参数：frequency 更新的频率
关闭更新请求 : clearWatch
examp01 getCurrentPosition

<button id="btn">请求位置信息</button>
<div id="box"></div>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
 
btn.onclick = function(){
            navigator.geolocation.getCurrentPosition(function(position){
                box.innerHTML +="经度："+position.coords.longitude + "<br>";
                box.innerHTML +="纬度："+position.coords.latitude + "<br>";
                box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
                box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
                box.innerHTML +="地面速度"+position.coords.speed + "<br>";
                box.innerHTML +="行进方向"+position.coords.heading + "<br>";
                box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
            },function(err){
                alert(err.code);
            },{
                enableHighAccuracy:false,//精确请求
                timeout:5000,//设置超时
                maximumAge:1000//缓存时间
            });
        }

examp02
var btn = document.getElementById("btn");
var box = document.getElementById("box");
 
btn.onclick = function(){
            navigator.geolocation.watchPosition(function(position){
                box.innerHTML +="经度："+position.coords.longitude + "<br>";
                box.innerHTML +="纬度："+position.coords.latitude + "<br>";
                box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
                box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
                box.innerHTML +="地面速度"+position.coords.speed + "<br>";
                box.innerHTML +="行进方向"+position.coords.heading + "<br>";
                box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
            },function(err){
                alert(err.code);
            },{
                enableHighAccuracy:false,//精确请求
                timeout:5000,//设置超时
                maximumAge:1000//缓存时间
            });
        }

example03 高德地图应用
#container {
    width:600px; 
    height: 300px;
    margin:40px auto;
    border:1px solid red;
}
<div id="container"></div>  
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>
var map = new AMap.Map('container');

examp04 搜索城市
#container {width:500px; height:500px; margin:100px auto;}  
.menu{
    width:100px;
    box-shadow: 0 0 5px #000;
    margin:auto;
    background:#fff;
}
.menu ul li{
    list-style:none;
    line-height:30px;
    text-align:center;
    cursor:pointer;
}
#box{
    width:400px;
    height:40px;
    position:absolute;
    top:150px;
    left:50%;
    margin-left:-200px;
    background:#fff;
    box-shadow:0 0 10px #000;
}
input{
    height:38px;
    width:300px;
    border:none;
    outline:none;
}
#btn{
    width:80px;
}
<div id="container"></div> 
<div id="box">
    <input type="text" id="city" placeholder="请输入城市...">
    <input type="button" value="搜索" id="btn">
</div>
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>
var btn = document.getElementById("btn");
var city = document.getElementById("city");
var map = new AMap.Map('container');
var toolBar,mouseTool,contextMenu;
//在地图中添加操作toolBar插件、mouseTool插件
map.plugin(["AMap.ToolBar","AMap.MouseTool"],function(){
    toolBar = new AMap.ToolBar();
    map.addControl(toolBar);
    mouseTool = new AMap.MouseTool(map);
});
var menuContext = document.createElement("div");
menuContext.innerHTML = "<div class=menu><ul><li onclick='zoomMenu(0)'>缩小</li>
<li onclick='zoomMenu(1)'>放大</li>
<li onclick='distanceMeasureMenu()'>距离量测</li>
<li onclick = 'addMarkerMenu()'>添加标记</li></ul></div>";
//创建一个自定义的右键菜单
contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContext});
//给地图绑鼠标右键功能弹出右键菜单
AMap.event.addListener(map,"rightclick",function(e){
    contextMenu.open(map,e.lnglat);//e.lnglat鼠标点击的经纬度
    contextMenuPosition = e.lnglat;
})
//右键菜单缩放地图
function zoomMenu(n){
    if(n === 0){map.zoomOut();}
    if(n === 1){map.zoomIn();}
    contextMenu.close();
}
contextMenu.close();
//测量距离功能
function distanceMeasureMenu(){
    mouseTool.rule();
    contextMenu.close();
}
//添加标注功能
function addMarkerMenu(){
    mouseTool.close();
    var marker = new AMap.Marker({
        map: map,
        position: contextMenuPosition, //基点位置
        offset: {x:-5,y:-10} //相对于基点位置
    });
    contextMenu.close();
}
//搜索城市
btn.onclick = function(){
    var val = city.value;
    map.setCity(val);
}

本地存储

Storage
sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储（可以手动删除数据）
Storage的特点
存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享
Storage API
setItem():
设置数据，(key,value)类型，类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据，通过key来获取到相应的value
removeItem():
删除数据，通过key来删除相应的value
clear():
删除全部存储的值
存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的`
Key : 修改或删除的key值，如果调用clear(),key为null
newValue : 新设置的值，如果调用removeStorage(),key为null
oldValue : 调用改变前的value值
storageArea : 当前的storage对象
url : 触发该脚本变化的文档的url
注：session同窗口才可以,例子：iframe操作