htmlcss学习笔记

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，一些资源库：

 

 

　　morderizr 一个js库，检测浏览器是否支持某些HTML5和CSS3特性的JS库　　http://modernizr.cn/

0.2，一些解释：

处理html文件软件有很多，他们有个共同的名字叫：用户代理(user agent )。其中最最常见最最主流的便是  浏览器。

一个html元素是指： 开始标签 + 内容 + 闭合标签，有些自闭合标签自身就是一个元素 

布尔属性：布尔属性不需要设定一个值，只需要将属性名添加到元素中即可，如hidden, disabled等都是布尔属性。给这类属性赋任何值都和只写此属性名效果相同。如hidden='false'仍然是hidden效果

1，HTML文档结构

①外层结构

　　外层结构由两个元素确定： DOCTYPE和html。

　　 　　

　　

　　

②head

　　head标签里包含元数据，可以向浏览器提供文档的一些信息，如标题，作者等等。除了可包含用于说明html文档的元素，head元素还能用来规定文档与外部资源(如css样式表)的关系，定义内嵌css样式，放置和载入脚本程序。

　　

　　　　

　　

③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多个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单位根据元素（即文档的根元素）的字号而定。

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是指给变量赋的是一个【无值】。

例子如下：

又如，


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的解析基准。。 是个void element。（称为虚元素，还有

---

等也是。不能有用户自定义的内容，但可以有自己的属性）

7.2.2,meta元素。也是虚元素。用元数据说明文档,拥有的属性有:name, content, charset, http-equiv。有三种用法，分别如下：

7.2.2.1,指定名/值元数据对

除了预定义的5个元数据类型，还可以使用元数据扩展。参见　　http://wiki.whatwg.org/wiki/MetaExtensions

7.2.2.2，声明字符编码

7.2.2.3,模拟HTTP标头字段

 

 7.2.3，style元素。属性有type, scoped, media。

<意识到没必要记录这么详细，下面只记录一些核心笔记>

1，xxx,其中的xxx在没有label属性时便充当label属性，没有value属性时便充当value属性。两者都没有时，xxx便充当两者。

 2，提交到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的内容中使用：

　　　　

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而言，“另一个地方”指的是包含在当前页面中的

 

②，c.html

 

    
    
    



c.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 // 不设置内容类型,这个也必须有，否则服务器无法接受到数据 });

    
    



    

        

            
Bananas:
            

        
        

            
Apples:
            

        
        

            
Cherries:
            

        
        

            
File:
            

        
        

            
Progress:
            

                
            
        
        

            
Meter:
            

                
            
        
        

            
Total:
            
0 items
        
    
    Submit Form

 

③，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字幕标签  【chrome://flags     about:config】

　　有些版本的chrome的video和audio标签只支持ogg格式的视频和音频。实际上每种浏览器、同一种浏览器的不同版本支持的视频和音频格式都不同。

　　html5 video 外挂字幕[webVTT]研究  　　 https://yq.aliyun.com/articles/4269

　　WebVTT 及 HTML5 元素简介      http://www.cnblogs.com/imust2008/p/6207272.html

 

20，使用画布canvas:

　　【一个绘图建议，通过平移,缩放,旋转 画布上下文，使得每次画笔的起点都是从坐标原点开始的,此时要注意保存原来的状态( context.save() )。原因是画布的旋转和缩放等变换操作都是针对原点进行的。如果对一个不在原点的图形进行旋转，很有可能因控制不好坐标导致图形位置不在画布范围内】

　　1.1,，注意，这里的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(,) 　　/ 　　getData()　　 / 　　clearData()。具体用法是在被拖动元素的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)，代码如下：

    
    



    

        
Longitude:
        
-
        
Latitude:
        
-
    
    

        
Altitude:
        
-
        
Accuracy:
        
-
    
    

        
Altitude Accuracy:
        
-
        
Heading:
        
-
    
    

        
Speed:
        
-
        
Time Stamp:
        
-
    

  

　　2，监控地理位置：watchPositon(callback, errorCallback, options)。此方法和getCurrentPosition()方法所需参数相同，工作方式也一样。不同的是：随着位置发生改变，回调函数会被反复调用。此方法有一个替代方法：使用一个定时器周期性地调用getCurrentPosition()方法,稍有不同的是watchPosition()在第一次调用后会取得当前位置，执行成功或错误回调,然后watchPosition()就地等待系统发出位置已改变的信号而不是自己主动轮询位置。watchPosition()使用方法代码如下：

    
    



    

        
Longitude:
-
        
Latitude:
-
    
    

        
Altitude:
-
        
Accuracy:
-
    
    

        
Altitude Accuracy:
-
        
Heading:
-
    
    

        
Speed:
-
        
Time Stamp:
-
    
    

        
Error Code:
-
        
Error Message:
-
    

停止监控
  

 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()在老版本的浏览器中存在，在新版本的浏览器中已经不存在了，说明没什么太大用处

　　　　  最后一个，使用便捷属性(只在使用便捷属性)时，类似border-top属性要改为borderTop.

　　　　 getPropertyPriority()返回 字符串'important' 或空字符串“”。

　　　　setProperty(,,[])第三个参数可选，可以设为字符串"important"。

　　6, 获取某一HTMLElment元素的计算样式(所谓计算样式就是浏览器用于显示某个元素的CSS属性集合)：

　　　　window.getComputedStyle(HTMLElement) // 注意，此方法得出的结果是只读的，无法利用此方法修改计算样式。

29，

30，

31，

32，

33，

34，

35，

36，

37，