iframe里有一个srcdoc属性，很有用！
window.location.href=document.referrer//可以实现返回上一级页面并刷新
HTML5权威指南©®，比较老的书了，有些知识过时了！！！
HTML5高级程序设计 也是比较老的书了。
0.0一些网站：
http://caniuse.com/ 查询浏览器支持情况
https://www.w3.org/html/ 【w3c的html首页】
https://www.w3.org/TR/2016/WD-html51-20160310/changes.html#changes 【html5.1官方文档 table of contents】
https://www.w3.org/html/ig/zh/wiki/HTML5 【html5中文版文档，不过貌似不是最新的html版本】
https://www.w3.org/Style/CSS/ 【w3c的css首页】
https://www.w3.org/TR/css-2017/ 【css最新版本手册】
0.1，一些资源库：
<!--[if IE]><script>alert('This is IE');</script><![endif]-->
morderizr 一个js库，检测浏览器是否支持某些HTML5和CSS3特性的JS库 http://modernizr.cn/
0.2，一些解释：
处理html文件软件有很多，他们有个共同的名字叫：用户代理(user agent )。其中最最常见最最主流的便是 浏览器。
一个html元素是指： 开始标签 + 内容 + 闭合标签，有些自闭合标签自身就是一个元素
布尔属性：布尔属性不需要设定一个值，只需要将属性名添加到元素中即可，如hidden, disabled等都是布尔属性。给这类属性赋任何值都和只写此属性名效果相同。如hidden='false'仍然是hidden效果
1，HTML文档结构
①外层结构
外层结构由两个元素确定： DOCTYPE和html。
<!DOCTYPE HTML> <!--让浏览器明白其处理的是html文档，这是用布尔属性HTML表达的。使用此元素会让浏览器以标准兼容模式(即document.compatMode='CSS1Compat')显示页面，否则会触发浏览器的怪异模式(即document.compatMode='BackCompat')-->
<html>
</html>
②head
head标签里包含元数据，可以向浏览器提供文档的一些信息，如标题，作者等等。除了可包含用于说明html文档的元素，head元素还能用来规定文档与外部资源(如css样式表)的关系，定义内嵌css样式，放置和载入脚本程序。
<head>
<title>我是标题</title>
</head>
③body
1.2，html元素类型：
另一本书中的分类：
2，HTML entities(html实体)
HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。
´ ´ © © > > µ µ ® ® & & ° ° ¡ ¡ » » ¦ ¦ ÷ ÷ ¿ ¿ ¬ ¬ § § • • ½ ½ « « ¶ ¶ ¨ ¨ ¸ ¸ ¼ ¼ < < ± ± × × ¢ ¢ ¾ ¾ ¯ ¯ “ " ™ ™ € € £ £ ¥ ¥ „ „ … … · · › › ª ª ˆ ˆ “ “ — — ’ ’ º º † † ‹ ‹ – – ‚ ‚ ” ” ‡ ‡ ‘ ‘ ‰ ‰ ­ ˜ ˜ ≈ ≈ ⁄ ⁄ ← ← ∂ ∂ ♠ ♠ ∩ ∩ ≥ ≥ ≤ ≤ ″ ″ ∑ ∑ ♣ ♣ ↔ ↔ ◊ ◊ ′ ′ ↑ ↑ ↓ ↓ ♥ ♥ − − ∏ ∏ ‍ ♦ ♦ ∞ ∞ ≠ ≠ √ √ ‌ ≡ ≡ ∫ ∫ ‾ ‾ → → α α η η μ μ π π θ θ β β γ γ ν ν ψ ψ υ υ χ χ ι ι ω ω ρ ρ ξ ξ δ δ κ κ ο ο σ σ ζ ζ ε ε λ λ φ φ τ τ Α Α Η Η Μ Μ Π Π Θ Θ Β Β Γ Γ Ν Ν Ψ Ψ Υ Υ Χ Χ Ι Ι Ω Ω Ρ Ρ Ξ Ξ Δ Δ Κ Κ Ο Ο Σ Σ Ζ Ζ Ε Ε Λ Λ Φ Φ Τ Τ ς ς HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。
HTML 原代码 显示结果 描述 < < 小于号或显示标记 > > 大于号或显示标记 & & 可用于显示其它特殊字符 " “ 引号 ® ® 已注册 © © 版权 ™ ™ 商标   半个空白位   一个空白位 不断行的空白
提供一些符号的英文，
` backquote 反引号
～tilde 波浪号
!exclamation 惊叹号
@ at
# numbersign,英语国家是hash,美语是pound,音乐里作sharp,如C#
$ dollar
% percent
^ caret
& ampersand
* asterisk,star(美语),数学公式中作multiply
( parenleft,opening parentheses
) parenright,closing paretheses
- minus;hyphen连字符,不读
_ underscore
+ plus
= equal
[ bracketleft,opening bracket
] bracketright,closing bracket
{ braceleft
} braceright
; semicolon
:colon
' quote
" doublequote
/ slash
\ backslash 反斜杠
| bar
,comma
< less
> greater
.period
question
space 空格
其他符号的读法
＜ is less than
＞ is more than
≮ is not less than
≯ is not more than
≤ is less than or equal to 小于或等于号
- hyphen 连字符
≥ is more than or equal to 大于或等于号
' apostrophe 省略号,英文中省略字符用的撇号;所有格符号
％ percent
－ dash 破折号
‰ per mille
∞ infinity 无限大号
∝ varies as 与…成比例
( ) parentheses 圆括号
√ (square) root 平方根
[ ] square brackets 方括号
∵ since; because 因为
《 》 French quotes 法文引号;书名号
∴ hence 所以
… ellipsis 省略号
∷ equals,as (proportion) 等于,成比例
¨ tandem colon 双点号
∠ angle 角
∶ ditto 双点号
⌒ semicircle 半圆
‖ parallel 双线号
⊙ circle 圆
／ virgule 斜线号
○ circumference 圆周
swung dash 代字号
△ triangle 三角形
§ section; division 分节号
⊥ perpendicular to 垂直于
→ arrow 箭号；参见号
∪ union of 并,合集
∩ intersection of 交,通集
∫ the integral of …的积分
± plus or minus 正负号
∑ summation of 总和
× is multiplied by 乘号
° degree 度
÷ is divided by 除号
′ minute 分
〃 second 秒
≠ is not equal to 不等于号
≡ is equivalent to 全等于号
℃ Celsius degree 摄氏度
≌ is equal to or approximately equal to 等于或约等于号
4,全局属性（所有的全局属性）
accesskey="n"：不区分大小写，chrome浏览器alt + n选中，firefox浏览器alt + shift + n选中。注意如果是button或者是超链接元素，相当于直接点了此按钮或者此链接。
class属性 用于css样式
contenteditable='true' / 'false'。不要当做布尔属性
contextmenu无主流浏览器支持此属性
dir规定元素中文字的方向，有效值只有两个：ltr(从左到右)和rtl(从右到左)。注意从右到左的效果是如下：
draggable:表示元素是否可被拖放。像个布尔属性，但不是布尔属性，只能完整使用， 即draggable='true' / 'false'，单写和其他任何方式都不支持
dropzone：与draggable搭配使用。其值有三个：dropzone="copy" / "move" / "link"。
hidden:布尔属性. 隐藏元素。此元素不占html文档任何空间
id属性:给元素分配一个唯一的标识符。用处：1，用于css样式， 2导航到文档中的特定位置，url后面加上 #id_name 即可直接导航至该元素。该url的末尾部分(#加上元素id值)成为url片段标识符【fragment identifier】
lang: 用于说明元素内容所使用的语言(任何元素都可用，全局属性嘛)。用处：1，让浏览器调整其表达元素内容的方式【貌似没啥作用。。】，比如说，改变使用的引号，在使用了文字朗读器(或别的残障辅助技术)的情况下正确发音， 2， 还可以用来选择指定语言的内容，以便只显示用户所选语言的内容或对其应用样式
spellcheck: 表明浏览器是否应该对元素的内容进行拼写检查，这个属性只有用在用户可以编辑的元素上时才有意义。注意，这是非布尔属性，spellcheck可以接受的属性值有两个：spellcheck='true'/ 'false'.拼写检查的方式因浏览器而异。
style属性：用来直接在元素身上定义css样式（这是 在style元素 或 外部样式表中定义样式 之外的第三个选择）。
tabindex:HTML页面上的键盘焦点可以通过按Tab键在各元素间切换。用tabindex属性可以改变默认的转移顺序。tabindex属性值为数字，为1的第一个被选中，依次类推；为负值的不会被选中；为0和不写一样，优先级低于正数任何值。另外一点需要注意：像input元素等默认可以被tab选中，但是像div之类的大部分元素默认不会被tab切换到，但是给此div元素定义了tabindex值之后，这个元素就可以通过tab键选中了。
title属性：当鼠标悬浮时提供元素的额外信息。浏览器通常用这些东西显示工具提示。
5，初探CSS
①，<link rel='stylesheet' type='text/css' href='style.css' /> 可以link多个css文件，若对同一个元素应用样式，则最后被加载的样式有效
②，在一个css文件中可以引入另一个css文件，使用@import语句。注意此语句必须是在文件最开始【有个例外，就是@charset语句，用于指定样式文件的字符编码】！可以引入多个，同样若对同一个元素应用样式，最后被加载的样式有效。as shown in the following figure :
③，样式表层叠次序
1，内联样式 inline sytles [style属性]
2, 内嵌样式 embedded styles [style标签]
3, 外部样式 external styles [link 标签]
前三者统一叫做作者样式 author styles
4, 用户样式user styles(指的是用户自己针对某个浏览器自定义的一些css样式，几乎没人会这么做。。。,参考 http://www.cnblogs.com/everest33Tong/p/6709881.html)
5,浏览器默认样式,browser styles (more properly known as the user agent styles)
④，!important可以改变样式层叠顺序。
注意：在处理重要样式时，用户样式和作者样式的顺序是用户样式优先，这和非重要样式的处理顺序相反。
⑤，浏览器逐个处理每个html元素样式，当发现一个元素的样式有两个以上，且处以同一等级(比如都在style标签里的针对同一个元素的样式，并不是哪个在下面哪个生效，而是哪个越具体哪个生效)，则按如下规则(简单来说就是越具体优先级越高)：
⑥，继承
如果浏览器在1，作者样式2，用户样式3，浏览器样式中(说明浏览器也没有为各个html元素准备默认值) 都找不到一个元素的样式定义，就会求助于继承机制，使用父元素的这个样式的属性值。
⑦，css颜色
5.8，css长度
5.8.1，绝对长度
5.8.2，相对长度
5.8.2.1， em:与元素字号挂钩的相对单位
浏览器逐个处理每个html元素的样式，如果遇到em单位作为长度，就表示这个元素的长度是与本元素内的字体大小(即是font-size属性的值)相关。
5.8.2.2，rem:与根元素的字号挂钩的相对单位
rem单位根据<html></html>元素（即文档的根元素）的字号而定。
5.8.2.3，ex:
5.8.2.4，像素问题px(pixel)
5.8.2.5，
6， 初探javascript
6.1, javascript是区分大小写的语言
6.2，
6.3
6.4, 相等运算符（==）和等同运算符（===）：
相等运算符会尝试将操作数转化为同一类型，以便判断是否相等。本质上讲，== 运算符测试两个值是否相等，而不管其类型。
6.5，
var obj1 = {name: 'tong', age: 11}; var obj2 = {name: 'tong', age: 11};则，obj1 == obj2 返回false。这个应该和python中的处理方式一样，obj1 和 obj2是不同的引用，id(obj1)和id(obj2)不同。
6.6，显式类型转换：
6.6.1:将数值转化为字符串
6.6.2：将字符串转化为数值
6.7：数组
注释：经测试，array.push()和array.unshift()返回的是增加数目后的数组长度，截图中应该有误。
6.8：null与undefined 【Boolean(null) == false Boolean(undefined) == false】
undefined是在未定义变量值的情况下得到的值；null是指给变量赋的是一个【无值】。
例子如下：
<script type="text/javascript">
var myData = {
name: 'tong'
};
console.log(myData.age, 'age' in myData);//undefined false
myData.age = null;
console.log(myData.age, 'age' in myData);//null true
</script>
又如，
<script>
var a; //定义了变量但没有赋值
console.log(a); //打印出的就是undefined.
如果是没有定义变量而console.log(b)则会报错!
</script>
6.9:javascript库
jqueryUI中文网【待研究】： http://www.jqueryui.org.cn/
7，文档元素和元数据元素
7.1文档元素。文档元素有四个,DOCTYPE,html,head,body
7.1.1DOCTYPE元素。
7.1.2html元素。
html元素更恰当的名字是根元素(root element)。它表示文档中HTML部分的开始。
7.1.3head元素。
7.1.4body元素。
7.2 元数据元素。title,base,meta等元素都属于元数据元素
7.2.1，base元素。设置相对URL的解析基准。<base href='...' target='..' />。 是个void element。（称为虚元素，还有<hr />等也是。不能有用户自定义的内容，但可以有自己的属性）
7.2.2,meta元素。也是虚元素。用元数据说明文档,拥有的属性有:name, content, charset, http-equiv。有三种用法，分别如下：
7.2.2.1,指定名/值元数据对
除了预定义的5个元数据类型，还可以使用元数据扩展。参见 http://wiki.whatwg.org/wiki/MetaExtensions
7.2.2.2，声明字符编码
<meta charset='utf-8' />
7.2.2.3,模拟HTTP标头字段
7.2.3，style元素。属性有type, scoped, media。
<意识到没必要记录这么详细，下面只记录一些核心笔记>
1，<option label='label' value='value'>xxx</option>,其中的xxx在没有label属性时便充当label属性，没有value属性时便充当value属性。两者都没有时，xxx便充当两者。
2，<input type='image' src='xxx.jpg' name='sss' />提交到php时,会自动有两个叫sss.x和sss.y的字段名传给php，代表点击图片的位置举例图片左上角的坐标，此时php接收的字段名要写成sss_x与sss_y，若写成sss.x与sss.y则接收不到。
3，textarea wrap属性介绍
off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去； soft：自动软回车换行，换行标记不会传送到服务器中去。
4, novalidate是form元素的属性,表示不对表单验证(优先级高于具体的验证表单)。对于type='submit'型的button和input元素有一个相似属性，formnovalidate。其他的button和inupt都没有此属性。
5,:only-of-type伪类选择器匹配的是，父元素的唯一类型的子元素。
6,如果用百分比指定元素的内边距padding，外边距margin...,则四个方向的百分比都是和包含块(即父元素)的宽度有关，和高度没有任何关系。
7,display:
8，pisition:
另外：relative不脱离文档流，absolute脱离文档流。z-index属性只对应用了非static定位的元素有效。
9, DOM中的cookie. document.cookie
1,一次只能设置一个cookie
2,指定一个键值对作为cookie属性的值。如，document.cookie='cookie_1=value_1'。这个cookie会被添加到文档的cookie集合。如果设置的值和现有的某个cookie具有相同的名称，那么就会用新值更新那个cookie。
3，可以在cookie的键值对后面添加额外字段设置cookie更多的信息，以分号分割。如设置有效期：document.cookie='cookie_name=cookie_value;max-age=3'; 可以添加的字段如下列表
10， script标签中的defer与async属性。
1， 这两个属性只能与src属性一起使用，否则不起作用。即只能用于外部脚本文件，对文档内嵌脚本不起作用。
2， 默认情况下，浏览器一遇到script元素就会暂停处理HTML文档，转而载入脚本文件并执行其中的脚本。在脚本执行完毕后浏览器才会继续解析HTML文档。defer属性可以改变浏览器对脚本的处理顺序。当浏览器遇到带有defer属性的script元素时，会将脚本的加载和执行推迟到HTML文档中的所有元素都已得到解析之后。更具体的说是，会在document.readyState == 'interactive'时执行。
3，document.readyState属性提供了加载和解析HTML文档过程中当前处于哪个阶段的信息。具体信息见下表：
这个属性与readystatechange事件结合使用用处最大。document.onreadystatechange=function(){....}
4, async属性可以异步执行脚本。默认情况，浏览器遇到script元素就会停止处理HTML文档。当使用了async属性后，浏览器遇到此script元素时会继续解析HTML文档中的其他元素(包括其他script元素),同时异步加载和执行这个带有async属性的script元素。如果运用得当，这可以大大提高整体加载性能。不过也有一个缺点，使用async属性后，页面中的脚本不再按定义它们的次序执行。因此如果脚本中使用了其他脚本中定义的函数或值，那就不宜使用async属性。
11，在事件中设置css属性，相当于是在<style>元素里设置此css属性（即属于内嵌而非内联或者外部）。
12，onmouseenter/onmouseleave 与 onmouseover/onmouseout的区别：
前者会把元素以及其子元素当作一个整体，只有从外界进入这个整体或者从这个整体移开到外界时事件才会触发。
后者会把元素及其所有的各个子元素分开对待，各个子元素和父元素构成了各个区域，由这些区域中的任何一个进入另一个都会触发onmouseover/onmouseout事件。这两个事件的event对象还有一个属性relatedTarget提供了相关元素的信息，相关元素就是从哪个元素过来的（onmouseover）或者离开到了哪个元素(onmouseout)。
比如，定义了红框元素的onmouseover/onmouseout事件，当由B区域进入A区域时，会首先触发onmouseout事件，然后会触发onmouseover事件。
13，理解事件流。
①事件流分为三个阶段，捕捉(capture)、目标(target)、冒泡(bubbling)。Event事件对象的一个属性eventPhase的三个值分别对应这三个阶段：Event.CAPTURING_PHASE、Event.AT_TARGET、Event.BUBBLING_PHASE。
②理解捕捉阶段(从body元素一路流向目标元素)：捕捉阶段发生在目标元素的所有祖先元素身上，只有此祖先元素定义和目标元素相同的事件监听器addEventListener('event', 'handler', true)的时候指定第三个参数为true(这第三个参数可以省略，默认是false)。当这个事件(目标和祖先元素的共同事件)触发时，会先执行开启了捕捉监听器的祖先元素的handler,此时event.target指的是目标元素，event.currentTarget指的是这个祖先元素。如果在此祖先元素的handler中用了stopPropagation或这stopImmediatePropagation，则这个事件流就会停止在此祖先元素这里，不会进一步流向目标元素，也就不会有后面的目标阶段和冒泡阶段。stopPropagation会确保调用当前元素上注册的所有事件监听器，而stopImmediatePropagation则会忽略任何未触发的监听器。
③理解目标阶段：这个阶段很简单，当捕捉阶段完成后，浏览器会触发目标元素上任何已添加的事件类型监听器。
④理解冒泡阶段(从目标元素一路流向body元素)：冒泡阶段可以看作是捕捉阶段的逆向阶段。也是发生在目标元素的各个祖先元素身上，只要其祖先元素注册了和目标元素相同的事件监听器，且没有开启事件捕捉，亦即其祖先元素的addEventListener('event', 'handler',false)的第三个参数是false(即默认值)。在完成目标元素的目标阶段后，事件会向上冒泡，就会执行符合条件的祖先元素身上的事件监听器。另外注意：不是所有的事件都支持冒泡，可以用事件的bubbles属性检查（event.bubbles）.
⑤以上是从目标元素的角度看待事件流的，现在换个角度从祖先元素的角度看待事件流：
<p><span></span></p>
14，关于css的media。
一，总述：media属性用来表明文档应该在什么情况下使用该元素中定义的样式。如media='screen'等。
media还可以设计更为具体的使用条件，如media='screen and (width:100px)'。除了and还可以使用not和逗号(表示or，但不支持or)。
二，总共有三种用法：
①，在link元素里使用：
<link href='...' rel='..' media='screen and (min-width:1000px)' />
②，在styel元素里使用：
<style type='..' media='screen and (min-width:1000px)'>....</style>
③，在style的内容中使用：
<style type='..'>
@media screen and (min-width:1000px) {css styles }
</style>
15，匹配手机横竖屏：(css 和 javascript)
①，css识别：
@media screen and (orientation: landscape) {横屏}
@media screen and (orientation: portrait) {竖屏}
②，js识别：
- //判断手机横竖屏状态： window.onorientation = function(e){}或者更好的addEventListener()
- window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function(e) {
- if (window.orientation === 180 || window.orientation === 0) {
- //alert('竖屏状态！');
- }
- if (window.orientation === 90 || window.orientation === -90 ){
- //alert('横屏状态！');
- }
- }, false);
- //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
16，CSS多列布局。
只有opera支持标准的多列布局。其他浏览器需要带有前缀。ie从10开始支持。
colunm-count: 缩放浏览器时，自动调整列宽度保持列数；
column-fill: 一般浏览器都不支持；
colunm-gap: 列与列之间的间距；
column-rule: column-rule-width column-rule-style column-rule-color，和border:1px solid red类似。是列与列之间的分割线的样式设置；
column-span: 貌似没啥效果；
column-width: 指定列宽，当浏览器缩放时，调整列数以保持列宽。
17，跨文档消息传递(cross-document messaging)：有时简称为XDM，核心是postMessage()方法;
在HTML5规范中，除了XDM部分之外的其他地方也会用到postMessage()方法，但都是为了同一个目的：向另一个地方传递数据。对于XDM而言，“另一个地方”指的是包含在当前页面中的<iframe>元素或者由当前窗口弹出的窗口.
一个实例如下：两个脚本，
①，a.html（主页面，内嵌iframe页面c.html）
<!DOCTYPE HTML>
<html>
<head>
<title>a.html</title>
<meta charset="utf-8">
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
#msg {
font-size: 3em;
color: red;
}
</style>
</head>
<body>
<!--此文档的地址为：http://localhost/html/a.html-->
<iframe src="http://tong/html/c.html" id="myFrame" frameborder="1" width="20%" height="300px"></iframe>
<img id="img" src="res/ooo.ico"/>
<div id="msg"></div>
<script>
var img = document.getElementById('img');
var msg = document.getElementById('msg');
//获取内嵌frame的window对象,也可以使用window.frames[0]来获取
var frameWindow = document.getElementById('myFrame').contentWindow; img.onclick = function (e) { /** * ①要向id为myFrame的内嵌框架发送消息,就在myFrame的window对象上调用postMessage()方法. * ②postMessage()接收两个参数,第一个参数是发送的消息字符串,第二个参数指定接收消息的脚本的来源. * 如果实际接收消息的脚本与此参数一致则消息可以成功发送,否则postMessage()什么都不做.如果指定此参数为"*",则可以向任何脚本发送消息,不建议这么做,不安全 * ③接收消息的脚本接收到消息时,会触发其window对象的message事件. * ④另外说明一点:如果postMessage()方法不是在click事件中而是直接写在外面(即加载页面中就会执行),则通过设置断点可以发现,在执行postMessage() * 方法时,c.html还没有加载出来,所以会报错。 */ frameWindow.postMessage('永不独行', 'http://tong'); msg.innerHTML = 'Message sent'; }; //接收回执消息 window.onmessage = function (e) { console.log(e.data,e.origin,e.source,"a.html"); // e.source.postMessage('再次发送消息',"http://tong");//如果加上此行代码则会形成一个死循环 } </script> </body> </html>
②，c.html
<!DOCTYPE HTML>
<html>
<head>
<title>otherpage.html</title>
<meta charset="utf-8">
<style>
#target {
width: 355px;
height: 355px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--此文档的地址为：http://tong/html/c.html-->
<div id="target">c.html</div>
</table>
<script>
var target = document.getElementById('target');
window.onmessage = function (e) {
/**
* 参数e是浏览器传递的一个MessageEvent对象，其属性列表如下：
* data 别的脚本发送的字符串消息
* origin 发送消息的脚本的来源
* source 发送消息的脚本所在的窗口对象的代理,并非是真正的window对象,不能通过此代理对象访问window对象的其他任何信息。
* 记住：只通过此代理对象调用postMessage()就好。
*/
if (e.origin == 'http://localhost') {
target.innerHTML = e.data + "<br/>" + e.origin;
console.log(e.source,"c.html"); //向发送消息的窗口发送回执 e.source.postMessage("接收到你的消息了","http://localhost"); } else { target.innerHTML = "Msg has been discarded"; } }; </script> </body> </html>
18，ajax简述：
①，XMLHttpRequest对象的readyState取值：如，XMLHttpRequest.DONE == 4
②，用法:
FormData的用法：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
关于jQuery使用FormData需要注意设置选项：
var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不处理数据,必须有这个设置，否则FormData无法收集到数据 contentType: false // 不设置内容类型,这个也必须有，否则服务器无法接受到数据 });
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
}
.label {
text-align: right;
}
</style>
</head>
<body>
<form id="fruitform" method="post" action="http://tong/html/a.php">
<div class="table">
<div class="row">
<div class="cell label">Bananas:</div>
<div class="cell"><input name="bananas" value="2"/></div>
</div>
<div class="row">
<div class="cell label">Apples:</div>
<div class="cell"><input name="apples" value="5"/></div>
</div>
<div class="row">
<div class="cell label">Cherries:</div>
<div class="cell"><input name="cherries" value="20"/></div>
</div>
<div class="row">
<div class="cell label">File:</div>
<div class="cell"><input type="file" name="file"/></div>
</div>
<div class="row">
<div class="cell label">Progress:</div>
<div class="cell">
<progress value="0" id="prog"></progress>
</div>
</div>
<div class="row">
<div class="cell label">Meter:</div>
<div class="cell">
<meter id="meter" value="374 " low="400 " max="3743 "></meter>
</div>
</div>
<div class="row">
<div class="cell label">Total:</div>
<div id="results" class="cell">0 items</div>
</div>
</div>
<button id="submit" type="submit">Submit Form</button>
</form>
<script>
var form = document.getElementById('fruitform');
var submit = document.querySelector('#submit');
var progress = document.getElementById('meter');
submit.onclick = function (e) {
e.preventDefault();
var formData = new FormData(form);
/**关于FormData需要注意以下几点：
①，创建FormData对象时可以传递一个HTMLFormElement对象，此表单里的所有元素的值都会被自动收集起来；当然不传递HTMLFormElement对象也可以。
②，使用FormData对象时，不需要用setRequestHeader(name, value)
设置content - type标头了，因为如果使用FormData对象，数据总是会被编码成multipart / form - data。
③，FormData对象定义了一个append(name, value)
方法，可以用此方法增补从表单中收集的数据，也可以在不使用HTMLFormElement的情况下自定义发送的键值对数据。
④，用ajax发送文件则必须使用FormData对象与type为file的input元素。可以用XMLHttpRequest对象的upload属性追踪文件上传进度。
*/
var httpRequest = new XMLHttpRequest();
var upload = httpRequest.upload;//追踪上传进度,返回一个可用于监控进度的对象XMLHttpRequestUpload
upload.onprogress = function (e) {
alert('upload.onprogress');
progress.max = e.total;
console.log("e.total " + e.total);
progress.value = e.loaded;
console.log("e.loaded " + e.loaded);
};
upload.onload = function (e) {
alert('upload.onload');
progress.value = 1;
console.log("onload++++++++++++++++++++++++ ");
progress.max = 1;
};
httpRequest.onload = function (e) {
alert('hR.onload')
};
httpRequest.onprogress = function (e) {
alert('hR.onprogress');
//httpRequest的progress事件会在浏览器接收新数据期间周期性的触发。event对象有三个额外属性：
e.lengthComputable;//布尔值，表示进度信息是否可用
e.position;//表示已经接收的字节数
e.totalSize;//表示根据Content-Length响应头部 确定的预期字节数。
};
httpRequest.onloadstart = function (e) {
alert('hR.onloadstart');
};
httpRequest.onloadend = function (e) {
alert('hR.onloadend');
};
//readystatechange事件（包括其他事件）最好放在调用open()之前使用，以确保浏览器兼容性
httpRequest.onreadystatechange = function (e) {
alert('onreadystatechange' + e.target.readyState);
if (e.target.readyState == 4) {
if (e.target.status == 200) {
// e.target.overrideMimeType('application/xml');//overrideMimeType()方法可以覆盖(重写)服务器返回的MIME类型
// var xmldoc = e.target.responseXML;//responseXML属性解析接收到的XML,然后将其作为一个Document对象返回,然后就可以在xml文档里导航了
// var val = xmldoc.getElementsByTagName("item")[0].getAttribute("quantity");//在xml文档里导航
document.getElementById('results').innerHTML = e.target.responseText;
}
}
};
httpRequest.open('POST', form.action, true);
httpRequest.timeout = 1000;//将超时设置为1000毫秒;
httpRequest.ontimeout = function (e) {
console.log('超时了！！');
};
// httpRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');//关于设置请求标头需注意以下几点：
/**
①必须在open之后send之前调用setRequestHeader
②FormData对象和GET方法不用设置此请求标头，post字符串参数必须设置此标头[可以是 下行 三种编码方式中的任意一种]，否则无法post过去数据
③post字符串参数形式如formdata = 'banana=2&apple=3&orange=4';application/x-www-form-urlencoded是表单数据的默认编码方式(另外两个编码方式是multipart/form-data与text/plain)，但却不是ajax的默认编码，因此需要设置一个content-type标头来告诉服务器准备接受哪种数据格式。
*/
httpRequest.send(formData);
}
</script>
</body>
</html>
③，cors(cross-origin-resources-share)跨源资源共享：
对ajax的跨源资源共享来说，只需要在服务器上的脚本文件里加上一个响应头即可，【Access-Control-Allow-Origin:http://localhost:8080】。凡是cors请求，浏览器都会在请求头里添加一个Origin标头来注明当前文档的来源，可以通过它来灵活的设置Access-Control-Allow-Origin标头的值。另外还可以把Access-Control-Allow-Origin标头设置成一个* 号，意为允许任意来源的跨源请求。注意，为了安全，跨域XMLHttpRequest对象有一些限制：①不能使用setRequestHeader()设置自定义头部。②不能发送和接收cookie③调用getAllResponseHeader()方法总会返回空字符串(但是实际测试时并非空字符串)。
跨域专题：
1,跨域问题一般可以通过设置服务器的代理简单的解决
2,也可以通过服务端脚本加上头文件，手动添加服务器允许访问的域名。
3,常规的GET，POST，PUT，DELETE请求是简单请求（相对于OPTIONS请求），但是OPTIONS有点儿特别，它要先发送请求问问服务器，你要不要我请求呀，要我就要发送数据过来咯。在Vue的项目里，Http服务采用Axios，而它正是采用OPTIONS请求。如果仅仅在header里面加入： 'Access-Control-Allow-Origin'：*【貌似新版的谷歌浏览器连*号都不让加，只能是具体的域名】，是并不能解决问题的，这儿就需要后台对OPTIONS请求额外处理。具体的处理方法是：如果后端服务脚本检测到是OPTIONS请求，则返回一个200的响应状态码，告诉请求可以进一步请求。
4, 满足以下条件的请求都会去发起一个 Preflighted requests(预请求)，也就是options请求。
- 非GET、POST、HEAD方法的请求
- 是POST请求但是提交的Content-Type头类型是 除了 application/x-www-form-urlencoded, multipart/form-data, ortext/plain这三个之外的其他类型
19，vedio字幕<track>标签 【chrome://flags about:config】
有些版本的chrome的video和audio标签只支持ogg格式的视频和音频。实际上每种浏览器、同一种浏览器的不同版本支持的视频和音频格式都不同。
html5 video 外挂字幕[webVTT]研究 https://yq.aliyun.com/articles/4269
WebVTT 及 HTML5 <track> 元素简介 http://www.cnblogs.com/imust2008/p/6207272.html
20，使用画布canvas:
【一个绘图建议，通过平移,缩放,旋转 画布上下文，使得每次画笔的起点都是从坐标原点开始的,此时要注意保存原来的状态( context.save() )。原因是画布的旋转和缩放等变换操作都是针对原点进行的。如果对一个不在原点的图形进行旋转，很有可能因控制不好坐标导致图形位置不在画布范围内】
1.1,<canvas id='can' width='200' height='200'></canvas>，注意，这里的width和heigth是canvas的属性，不带单位，而且和css中的width/height并不同，两者使用的并不是同一套单位！！！！！
1.2，var context = document.getElementById('can').getContext('2d');
1.2.1，画笔属性：
context.lineJoin 'round'/'bevel'/'miter' 设置连接处的样式
context.fillStyle/strokeStyle 'red'/'#663300'/'rgba(x,x,x,0.3)'/渐变/背景图案/... 填充样式/线条样式
context.lineWidth 4/5/6/... 宽度，不带单位
context.lineCap 'butt'/'square'/'round'/ 设置端点处的样式(起点，终点处)
context.globalAlpha = 0.2; //设置透明度 取值范围 [0,1], 0全透明，1不透明。
1.2.3，渐变
var xxx = context.createLinearGradient(x1,y1,x2,y2);//线性渐变
var xxx = context.createRadialGradient(x1,y1,r1,x2,y2,r2);//径向渐变
xxx.addColorStop(position, color);起点位置为0，终点位置为1.color可以为'red' / '#663300'/ 'rgba(1,1,1,0.3)' ;0透明，1不透明
context.fillStyle/strokeStyle=xxx;//将渐变指定给填充样式或笔触样式
1.2.4，背景图案
var xxx = context.createPattern(img_element, 'repeat/repeat-x/repeat-y/no-repeat');
context.fillStyle/strokeStyle=xxx;//将图案指定给填充样式或笔触样式
1.3，变换【所有变换都只影响后面的绘图，之前的保持不变】
context.translate(x,y);//意思是将画布上下文沿x轴和y轴分别移动x 和 y的距离,如此改变的是整个画布上下文，亦即整个画布的起始坐标等。
context.rotate(arg); // 使画布绕(0,0)顺时针旋转指定的弧度数。
context.scale(xscale, yscale);// 沿x轴缩放xscale倍，沿y轴缩放yscale倍。
36.6.4 说明：scale()之后的绘画会使每个参数都响应缩放。比如下图，使用scale之后，fillRect()中的四个参数都会响应的扩大2倍,等价于fillRect(20,20,500,500) 。如果只是scale(2,1)x轴扩大2倍，y轴不缩放，则等价于fillRect(20,10,500,250)
context.transform(a,b,c,d,e,f);// transform() 允许您缩放、旋转、移动并倾斜当前的环境。这里所有的变换都是相对的，即 transform() 方法的行为相对于由 rotate(), scale(), translate(), or transform() 完成的其他变换。二维变换矩阵中每个参数的含义：
a: 水平缩放值；b：水平倾斜值(会导致图形变形)；c:垂直倾斜值(图形不会变形)；d：垂直缩放值；e：水平移动值；f：垂直移动值。
context.setTransform(a,b,c,d,e,f);//每个参数的含义同context.transform()，不同之处在于这里的所有变换都是绝对的，即所有的变换都是相对于画布的绝对原点( 也就是第一次定义画布时候的原点，不考虑后面的任何变换 )而言的。
1.4，context.save();//意思是保存当前的画布上下文，即保存此时整个画布的起始坐标，画布大小，画布旋转，画笔属性，阴影，渐变等，但注意并不保存当前画笔的位置。
context.restore();//恢复最近保存的画布上下文(针对画布的平移,旋转，缩放，画笔属性，阴影，渐变的改变等的恢复)，注意，恢复后，当前画笔的位置并不是save()时的画笔位置，而是restore()时的画笔位置。
1.5，context.fillRect(x,y,width,height) / .strokeRect(x,y,w,h) / .clearRect(x,y,w,h)
1.6, 子路径是一组线条的集合，即每个context.beginPath()与context.stroke()/fill()之间的所有线条集合，其中的每个线条的起点都是上一个线条的终点。最开始的起点必须用context.moveTo()函数，不可省略.
1.7.1，context.quadraticCurveTo(cx,cy,x,y);//绘制二次贝塞尔曲线，x,y为曲线终点，cx,cy为控制点。所谓控制点位与曲线的旁边(不是曲线之上)，其作用相当于对曲线产生一个拉力。通过调整控制点的位置，就可以改变曲线的曲率。
1.7.2, context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);//三次贝塞尔曲线,两个控制点
1.8， context.drawImage(img_element,x,y,[可选参数]);在canvas中插入图片，说明如下，
《1》此函数有三种用法，三个参数 或者 五个参数 或者 九个参数。第一个参数永远是固定的，表示图像的来源，注意此参数必须是个代表img,video,或者其他canvas的HTMLElment对象。还要注意，需要等到图片加载完毕后才能将其呈现在canvas上(即调用drawImage方法)，否则canvas将不会显示任何图片。
示例：var img=new Image();
img.src='url';
img.onload=function(e){...; ...; context.drawImage(...);...;...;}//保证图片加载完毕后才将其呈现在canvas上。这里注意，应该是把所有的canvas代码卸载onload函数里，而不是仅仅只有context.draoImage()一句代码，原因是如果只写一句代码，那么js的执行顺序是把其他所有代码执行完毕后，再执行img加载完毕后onload里的代码，此时可能由于平移等原因，drawImage()方法的起始坐标已经发生变化了，会产生意想不到的结果。
《2》当三个参数时，第二个和第三个参数表示图片在画布上的其实坐标，将应用图片的原始大小。
《3》当五个参数时，2，3同上，第四个和四五个参数表示设置图片的宽度和高度。
《4》当九个参数时，最终效果是截取原始图片并放在canvas上，具体解释如下：
2,3两个参数表示，截取原始图片时的起始坐标，
4,5两个参数表示，截取原始图片时的截取宽度和高度
6,7两个参数表示，截取后的图片放在canvas上的起始坐标。
8,9两个参数表示，截取后的图片放在canvas上的宽度和高度。
1.9，canvas文本：
context.fiilText('text', x, y[, maxwidth]); // 'text'为文本内容。x,y代表文字位置，maxwidth可选，代表文本最大宽度(若文本没到最大宽度,则显示本身宽度)；
context.strokeText('text', x, y[, maxwidth]);//同上。
设置文本的属性：
context.font = '40px sans-serif'; // 注意，经测试，必须字体大小和字体样式同时指定，才会生效。
context.textAlign = 'start / end / left / right / center'; //指定文字对其方式，这里是相对于fillText()方法中的(x,y)指定的位置而言的。例如，center 则文字的横向中心位置就在(x,y), left则文字的最左边在(x,y)[文字偏右],其他类似。
context.textBaseline = 'top / hanging / middle / alphabetic / ideographic / bottom'; //指定文字的纵向对其方式。如top则文本的最上边在点(x,y)处。
获取当前context环境下指定文本的实际显示宽度：context.measureText('text')。此函数会返回一个度量对象，TextMetrics {width: 351.23968505859375}
1.10； 阴影。
context.shadowColor = 'red / #663300 / rgba(0,0,0,0.2'; //css中的任何值。
context.shadowBlue = 3; //高斯模糊值
context.shadowOffsetX = 15; // 值为正数，向右偏移，负数向左偏移
context.shadowOffsetY = -10;// 同上
1.11, 像素数据。
context.getImageData(x,y,w,h);//获取选定区域的canvas画布的状态。返回ImageData对象。此对象含有三个属性，width / height /data。width代表每行含有的像素数，height代表每列含有的像素数。data是一个一维数组(经测试，很诡异，这个一维数组的表现并不是一维数组，因为一维数组的方法都不适用！)，则个一维数组按像素记录下每个像素的rgba值(a是用0-255的值表示的)，因此一个像素对应数组中四个项。[另外注意，如果canvas中有来自其他域的图片(如drawImage()方法或createPattern()方法) ，使用getImageData()获取像素数据的时候就会抛出安全异常]
context.createImageData(w,h);//生成一组空的canvas图像据，并绑定在canvas对象上。也返回ImageData对象。
context.putImageData(ImageData, x, y);//ImageData是getImageData返回的对象(可以修改其中的值)或者createImageData()创造的对象，x,y确定起始坐标(偏移量)。此函数作用(效果)是：将getImageData()获取的区域 [或createImageData()创造的区域]的像素值修改后覆盖到画布上，覆盖的起始位置由x,y确定。效果如图所示：
1.12，绘制圆弧，
context.arc(x,y,radius,startAngle, endAngle[, direction]);//x,y为圆心，radius为半径，startAngle起始角度，endAngle结束角度，direction可选，是否逆时针。
context.arcTo(x1,y1,x2,y2,radius);//三个点与两条线确定圆弧。上一条路径的终点A, (x1,y1)确定的点B, (x2,y2)确定的点C; 然后沿着AB,BC在A、C之间画一条圆弧。
1.13, 关于36章36.6.3节使用canvas的合成属性的简要说明：即globalCompositeOperation属性
文章说的来源图像是指设置了此属性之后的代码所代表的画布图像，目标图像是指设置此属性之前的画布状态。
所谓的来源图像或者目标图像的透明处和不透明处的理解：这个透明不透明并不是globalAlpha的值。所谓不透明就是有图形存在，即使其透明度为0.1也是此处所说的不透明处。比如说，一个华文彩云的描边字体，描边处是属于有图形存在，是不透明的，而内部中空的地方是没有图形的，是透明的。再比如一个100X100的举行，其透明度为0.2，若别颜色填充满，则其整体都是不透明的。‘copy’中所说的忽略一切透明度设置也并不是忽略globalAlpha的设置，而是说来源在上完全覆盖目标。另外注意一点，如图：这两者是有覆盖关系的，后面的一层会覆盖上面的一层。按途中顺序，中间填充的在最上面一层，在使用globalCompositeOperation属性比较时，目标图像只是指最上面的一层，即fillText()生成的图像，目标图像不透明的地方只是中间填充。如果把箭头处的两行代码顺序反过来，则目标图像是strokeText()生成的图像，目标图像不透明的地方只是文字的描边部分！！！
1.14，canvas的一个应用：绘制热点图，代码如下：
View Code
21，document.body.childNodes返回的值中总是间隔着一个#text文本节点，如下图所示。这是因为元素与元素间的换行(和空格)也会被视为一个文本节点。 https://segmentfault.com/q/1010000008551960
22，document.getElementById()只能用于document,其他几个都可以用于任意的HTMLElement元素。如，document.body.getElementsByTagName('div')等等。
23，使用拖放：
0,经测试，所有元素默认都是可拖动的，文字类型的是选中后实行拖动动作
1，被拖动元素的事件：dragstart / drag / dragend
2，释放区事件：要接收释放，有两个步骤，首先阻止dragenter和dragover事件的默认行为(拒绝接收任何被拖放的元素)，然后通过drop事件来接收释放的元素。
3，拖动事件DragEvent(即拖动事件函数中的参数e)派生于MouseEvent。DragEvent对象除了定义了Event和MouseEvent对象的所有功能，还增加了一个新的属性：dataTransfer（返回DataTransfer对象，用于传输数据到释放区）。DataTransfer对象定义如下属性和方法：types / files / setData(<format>,<data>) / getData(<formart>) / clearData(<format>)。具体用法是在被拖动元素的DataTransfer上调用setData()方法设置数据e.dataTransfer.setData()，在释放区元素的DataTransfer对象上调用getData()获取刚才设置的数据。
4, DataTransfer对象的 files属性 用于从操作系统里拖动文件放入释放区。files属性返回FileList对象。e.dataTransfer.files[index]返回File对象，File对象定义了name, type,size,lastModifiedDate等属性。利用这个属性结合ajax, FormData可以实现让用户从操作系统中拖动想要在表单中提交的文件。示例如下：
View Code
24，使用地理定位（苹果设备浏览器的支持最好）navigator.geolocation
pc端的chromium会报错：2，Network location provider at 'https://www.googleapis.com/' : Returned error code 400.貌似是要请求google的某项服务,无法翻墙就无法享用google服务了。
1，获取地理位置：getCurrentPosition(callback, errorCallback, options)，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table {border-collapse: collapse;}
th, td {padding: 4px;}
th {text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
</table>
<script>
/**
* 使用全局属性navigator.geolocation访问地理定位功能，它会返回一个Geolocation对象。此对象的方法如下：
* getCurrentPosition(callback, errorCallback, options) 获取当前位置， 返回void
* watchPosition(callback, error, options) 开始监控当前位置， 返回数值
* clearWatch(id) 停止监控当前位置， 返回void
*/
/**
* options参数是一个PositionOptions对象，允许我们部分控制位置信息的获取方式
*enableHighAccuracy 告诉浏览器我们希望得到可能得到的最佳结果,但是更精确的方法是打开GPS功能等等。设为true需要更长的时间,而且在移动设备上还会导致消耗更多电量。
* timeout 设置请求位置的时间，设置多少 毫秒 后会报告一个超时错误
* maximumAge 告诉浏览器我们愿意接受缓存过的位置，只要它不超过指定的 毫秒 数
*/
var options = {
enableHighAccuracy: true,
timeout: 1000, maximumAge: 30000 }; navigator.geolocation.getCurrentPosition(displayPosition, handleError, options); /** * 参数pos代表提供位置详情的Position对象，此对象有两个属性： * coords 返回当前位置的坐标 返回Coordinates对象 * timestamp 返回获取坐标信息的时间 返回时间戳字符串 */ /** *Coordinates对象详解：由Position.coords返回，此对象有如下属性： * latitude 返回维度值 * longitude 返回精度值 * altitude 返回海拔高度 * accuracy 返回位置的精度范围(误差范围,单位 米) * altitudeAccuracy 返回海拔精度(米) *heading 返回行进方向(单位度) *speed 返回行进速度(米/秒) */ function displayPosition(pos) { var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]; for (var i = 0; i < properties.length; i++) { var value = pos.coords[properties[i]]; document.getElementById(properties[i]).innerHTML = value; } document.getElementById("timestamp").innerHTML = pos.timestamp; } /** * 参数err代表PositionError对象，此对象属性有两个： * code 错误码，1用户未授权使用地理定位功能，2不能确定定位，3请求位置的尝试已超时 * message 错误描述字符串 */ function handleError(err) { console.log(err.code); console.log(err.message); } </script> </body> </html>
2，监控地理位置：watchPositon(callback, errorCallback, options)。此方法和getCurrentPosition()方法所需参数相同，工作方式也一样。不同的是：随着位置发生改变，回调函数会被反复调用。此方法有一个替代方法：使用一个定时器周期性地调用getCurrentPosition()方法,稍有不同的是watchPosition()在第一次调用后会取得当前位置，执行成功或错误回调,然后watchPosition()就地等待系统发出位置已改变的信号而不是自己主动轮询位置。watchPosition()使用方法代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table {border-collapse: collapse;}
th, td {padding: 4px;}
th {text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th><td id="longitude">-</td>
<th>Latitude:</th><td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th><td id="altitude">-</td>
<th>Accuracy:</th><td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
<th>Heading:</th><td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th><td id="speed">-</td>
<th>Time Stamp:</th><td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th><td id="errcode">-</td>
<th>Error Message:</th><td id="errmessage">-</td>
</tr>
</table>
<button id="pressme">停止监控</button>
<script>
var options = {
enableHighAccuracy: false,
timeout: 10000, maximumAge: 1000 }; var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options); document.getElementById("pressme").onclick = function(e) { navigator.geolocation.clearWatch(watchID); }; function displayPosition(pos) { var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]; for (var i = 0; i < properties.length; i++) { var value = pos.coords[properties[i]]; document.getElementById(properties[i]).innerHTML = value; } document.getElementById("timestamp").innerText = pos.timestamp; } function handleError(err) { document.getElementById("errcode").innerHTML = err.code; document.getElementById("errmessage").innerHTML = err.message; } </script> </body> </html>
25，使用web存储：
一、使用本地存储（local storage 数据会在浏览器中持久保存,浏览器关闭也不会消失）：
1，通过全局属性localStorage访问本地存储功能。此属性会返回一个Storage对象，如下：
【注意】setItem(key, value)方法设置的value始终是字符串类型。所以，如果设置为0时实际是字符串“0”，而字符串"0"的Boolean转换是true!!!
2，监听存储事件：通过本地存储功能（localStorage）保存的数据对所有来源相同(协议、主机、端口都相同)的文档都是可用的,即是可以共享的。某个文档对本地存储进行修改时会触发storage事件，我们可以监听其他同源文档上的这个事件来确保我们能跟上最新的变化。注意：storage事件只对同源的其他文档修改存储(本地存储和会话存储都一样)时生效，而不会对所在文档的变化起作用,另外，storage事件是通过Window对象触发的。与storage事件同时指派的对象是一个StorageEvent对象，其成员如下：
其中，storageArea返回的是最新的Storage对象。url标识了哪个文档发生了变化。
二、使用会话存储(session storage 在浏览器里临时保存数据,窗口关闭即被清除):
1，会话存储的工作方式和本地存储很接近，不同之处在于数据是在各个浏览上下文(窗口)私有的，会在文档(窗口)被关闭时移除。sessionStorage对象存储的信息只对本页面有效(本页面中的同源iframe也可以用,不同源的则不可用)，其他页面都不可用，即使是同源的其他页面也不可用。通过全局变量sessionStorage访问会话存储，它同样返回一个Storage对象，用法同上。但要注意，两种存储互不影响！由于storage事件只在同源的其他文件 存储数据变动 时生效，所以对于会话存储(只对本页面生效)，这就意味着事件只会在内嵌文档中触发，比如iframe里的文档，即会话存储的storage事件只会在一种情况下生效：当某个页面的iframe里的会话存储数据变化时，这个页面的storage事件会监听到。
26，离线Web应用：(注释，firefox的支持很好，有个脱机工作选项，)
从firefox的控制台信息了解到，程序缓存 API（AppCache）已不赞成使用，几天后将被移除。需离线支持请尝试使用 ServiceWorker。ServiceWorker
27，DOM关系：
document.defaultView = window
window.document = document
document.location = window.location = location
window.history = history
window.screen = screen
28，DOM与CSS：
1, document.styleSheets 返回样式表的集合CSSStyleSheet[], 即内嵌样式(style标签,区分内联样式) 和 外部样式(link 标签)的个数，每一个都由CSSStyleSheet对象代表。CSSStyleSheet.disabled=true/ false可以一次性禁用或开启此样式表的所有样式。
2, CSSStyleSheet.cssRules 返回某个样式表里的所有样式集合(每个选择器的样式是一个单独的对象CSSStyleRule). CSSStyleRule对象有一个重要属性style（返回CSSStyleDeclaration对象）
3, HTMLElement.style === CSSStyleSheet.cssRules[0].style [CSSStyleDeclaration object] 【补充：虽然都返回同类型的对象，但是两种写法的返回值的内容并不一样。前者返回值里只包含通过style属性或通过js设置的css样式,并不会包含style标签里的此元素的样式。而后者只包含style标签里的此元素的样式，并不包含style属性和js设置的css样式】
4，CSSStyleRule.cssText 为此选择器的所有样式的字符串，包括选择器本身，
CSSStyleDeclaration.cssText 为此选择器的所有样式的字符串，不包括选择器，
5，CSSStyleDeclartion对象用法：
注释：第二个方法getPropertyCSSValue(<name>)在老版本的浏览器中存在，在新版本的浏览器中已经不存在了，说明没什么太大用处
最后一个，使用便捷属性(只在使用便捷属性)时，类似border-top属性要改为borderTop.
getPropertyPriority(<name>)返回 字符串'important' 或空字符串“”。
setProperty(<name>,<value>,[<priority>])第三个参数可选，可以设为字符串"important"。
6, 获取某一HTMLElment元素的计算样式(所谓计算样式就是浏览器用于显示某个元素的CSS属性集合)：
window.getComputedStyle(HTMLElement) // 注意，此方法得出的结果是只读的，无法利用此方法修改计算样式。
29，
30，
31，
32，
33，
34，
35，
36，
37，