-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
2971 lines (2829 loc) · 500 KB
/
search.xml
File metadata and controls
2971 lines (2829 loc) · 500 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Cookie,Session与LocalStorage</title>
<url>/2020/10/02/Cookie-Session%E4%B8%8ELocalStorage/</url>
<content><![CDATA[<h1 id="Cookie由来"><a href="#Cookie由来" class="headerlink" title="Cookie由来"></a>Cookie由来</h1><p>谈到Cookie不得不谈到http协议，wiki上的定义⬇</p>
<blockquote>
<p>设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法</p>
</blockquote>
<p>由于这个设计目的，早期http协议被设计为无状态的协议，一个HTTP协议通信过程往往是建立连接>传输内容>关闭连接，整个过程十分简单。</p>
<p>然而万维网发展的比想象中快太多，HTML不再只是单纯的文档，还被用于交互，有了登陆注册等保存状态的需要，然而http协议是无状态的，这个场景需要下，Cookie就诞生了。</p>
<h1 id="Cookie具体是怎么样的？"><a href="#Cookie具体是怎么样的？" class="headerlink" title="Cookie具体是怎么样的？"></a>Cookie具体是怎么样的？</h1><p>Cookie其实就是一段文本信息，由浏览器储存在本地硬盘上，服务器通过<code>Set-Cookie</code>设置Cookie，浏览器通过<code>Cookie</code>字段附上设置的Cookie信息。</p>
<p>emm，还是看一个完整的请求吧</p>
<hr>
<p><strong>响应</strong></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">HTTP/1.1 200 ok</span><br><span class="line">Date: Sat, 02 Feb 2019 14:24:28 GMT</span><br><span class="line">Content-Type: text/html</span><br><span class="line">Content-Length: 182</span><br><span class="line">Connection: keep-alive</span><br><span class="line">Set-Cookie: tgw_l7_route=80f350dcd7c650b07bd7b485fcab5bf7; Expires=Sat, 02-Feb-2019 14:39:28 GMT; Path=/</span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<p><strong>下次请求</strong></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">GET / HTTP/1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Cookie: tgw_l7_route=80f350dcd7c650b07bd7b485fcab5bf7</span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<h2 id="Set-Cookie"><a href="#Set-Cookie" class="headerlink" title="Set-Cookie"></a><code>Set-Cookie</code></h2><p>服务端通过在响应头中添加<code>Set-Cookie: xxx=xxx</code>的方式以键值对的形式设置Cookie，除此之外还有其它字段可以控制Cookie的字段</p>
<ul>
<li><p><code>Domain</code><br>指定Cookie从属于那个域名，在请求对应域名时会带上这个Cookie，默认为当前文档域名，<strong>不包含子域名</strong>，若主动设置<code>Domain</code>,则一般会包含子域名，例如设置了<code>Domain=geylnu.com</code>,则<code>blog.geylnu.com</code>也是可以访问这个<code>geylnu.com</code>的Cookie。</p>
</li>
<li><p><code>Path</code><br>在域名符合的前提下，如果请求的路径与<code>Path</code>的路径相匹配就在请求中附上这个Cookie，路径匹配从前到后匹配，以<code>/</code>作为分隔符</p>
</li>
<li><p><code>Expires</code><br>在指定日期Cookie到期，Cookie到期后服务器会自动删除这个Cookie，设置时间格的式为<code>Thu, 01 Jan 1970 00:00:00 GMT</code>这样的格林尼治标准时间，没有设置该属性或<code>Max-age</code>，Cookie会自动在浏览器关闭后清除。值得注意的是响应头中的时间是基于服务器时间生成的，而客户端的时间可能与服务端不一致，这种情况下使用<code>max-age</code>属性设置过期时间是一个更好的选择。</p>
</li>
<li><p><code>Max-age</code><br>在指定秒后Cookie到期，作用等同于<code>Expires</code>，当同时设置了<code>Expires</code>和<code>Max-age</code>时，<code>Max-age</code>优先级更大；由于不直接设置时间，规避了服务端时间和客户端时间可能不一致的问题。</p>
</li>
<li><p><code>Http-only</code><br>Cookie只允许浏览器发出请求时在<code>Cookie</code>中附带上，通过<code>Set-Cookie</code>修改，不允许通过js脚本得到拿到，这可以有效的防止<a href="https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC" title="什么是xss攻击？">XSS攻击</a></p>
</li>
<li><p><code>Secure</code><br>指定该Cookie只在加密协议（https）才能把这个Cookie发送到服务器，如果设置该属性是通过http协议设置的，浏览器会自动忽略该属性（自动纠错，因为http下设置这个属性没有意义）。如果协议为<code>https</code>，该属性默认打开</p>
</li>
</ul>
<p>一个完整的Cookie设置示范：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Set-Cookie: sessionId=hihihi; Expirers=Wed, 01 Jan 2020 00:00:00 GMT; Max-age=10000; Http-only; Secure;</span><br></pre></td></tr></table></figure>
<h2 id="js操作方式"><a href="#js操作方式" class="headerlink" title="js操作方式"></a>js操作方式</h2><p>读</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="property">cookie</span> <span class="comment">//返回"xx=xxx; yy=yyy"</span></span><br></pre></td></tr></table></figure>
<p>写</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="property">cookie</span> = <span class="string">'xxx=hihihi'</span></span><br></pre></td></tr></table></figure>
<p>这里由于设定了<code>get</code>和<code>set</code>属性，读是一次读写全部Cookie，写为一个个Cookie单独设置。</p>
<h2 id="Session"><a href="#Session" class="headerlink" title="Session"></a>Session</h2><p>好了，现在http协议支持将状态保存在客户端了，之后每个客户端都是有名有姓的人了。<br>但是客户端保存状态信息是不可靠的，客户端可以修改自己本地的Coookie值，Cookie值在非<code>https</code>加密协议的情况下，也容易被截获获取到敏感信息（这里吐槽下我校教务系统，密码明文直接写在Cookie中）。</p>
<p>对应的解决方法就是在服务端也维护对应的状态，大部分状态信息都由服务端记录，客户端只需要记录一个由服务端随机生成的sessionId用于服务端识别，这就是Session了，一般Session储存在内存，也有其它实现，甚至无Session的方式。</p>
<h1 id="LocalStorage"><a href="#LocalStorage" class="headerlink" title="LocalStorage"></a>LocalStorage</h1><p>由于Cookie在每个请求中都会被添加，网络开销很大，很多非敏感状态信息也不需要服务器来存储，Cookie的大小有也很小，只有4kb；为了解决这个问题，HTML5规范就提出了LocalStorage，LocalStorage和cookie一样都是存在本地电脑磁盘上，数据形式也是hash表，存储形式也都是字符串。</p>
<p>不过和cookie不同的是LocalStorage不会跟随请求发送，仅限通过浏览器api操作，储存空间一般为5M大小，远大于cookie可以使用的空间，并且没有过期期限，除非用户主动清理会一直存在，通常在能用LocalStorage的地方尽量都用LocalStorage，前端不应该使用Cookie。</p>
<h1 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="sessionStorage"></a>sessionStorage</h1><p>sessionStorage与LocalStorage基本相同，只是sessionStorage过期不同，另外还有个显著的特点：sessionStorage会在窗口创建时初始化一个新的会话，也就是即使是同一个域名下不同窗口，sessionStorage也是不一样的。同时，在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点与使用cookie作为凭证是相似的。</p>
<h2 id="js操作方式-1"><a href="#js操作方式-1" class="headerlink" title="js操作方式"></a>js操作方式</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">'key'</span>,<span class="string">'value'</span>)</span><br><span class="line"><span class="variable language_">localStorage</span>.<span class="title function_">remove</span>(<span class="string">'key'</span>)</span><br><span class="line"><span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">'key'</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">localStorage</span>.<span class="title function_">clear</span>()<span class="comment">//移除全部</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>网络协议</category>
</categories>
<tags>
<tag>cookie</tag>
<tag>LocalStorage</tag>
<tag>Session</tag>
</tags>
</entry>
<entry>
<title>DOM API</title>
<url>/2018/05/27/DOM-API/</url>
<content><![CDATA[<h1 id="什么是DOM？"><a href="#什么是DOM？" class="headerlink" title="什么是DOM？"></a>什么是DOM？</h1><p><code>DOM</code>全称为<code>Document Object Model</code>,是js用来操控XHTML,在DOM中，所有标签都是node的子集，文档最开始的属性标识了文档采用的版本，比如<code><!DOCTYPE html></code>表示是html5,这个属性每个HTML/XHTML文档都必须具有。将文档每个标签以树形的方式组织方便js对 其进行操控，着建里起的模型就叫DOM。</p>
<h1 id="node"><a href="#node" class="headerlink" title="node"></a>node</h1><p>DOM中所有标签及元素等都被抽象地称为<code>node</code>节点，比如对于<code>标签元素</code>，还具有</p>
<h1 id="DOM标准"><a href="#DOM标准" class="headerlink" title="DOM标准"></a>DOM标准</h1><p>Element对象代表页面中具有的标签，构造函数为Element,整个文档被称为document,对应的构造函数为Document<br>元素中的文字被Text构造出来</p>
<p>Element、Document、Text都继承自node，其它结点还有注释结点<code>Comment</code>这些，不过平时很少用</p>
<h2 id="nodeType"><a href="#nodeType" class="headerlink" title="nodeType"></a>nodeType</h2><table>
<thead>
<tr>
<th align="center">编号</th>
<th align="center">节点</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">标签</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">文字</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">注释</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">document</td>
</tr>
<tr>
<td align="center">10</td>
<td align="center">声明文档类型的标签</td>
</tr>
<tr>
<td align="center">11</td>
<td align="center">虚拟DOM</td>
</tr>
</tbody></table>
<h2 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h2><h3 id="nodeName"><a href="#nodeName" class="headerlink" title="nodeName"></a>nodeName</h3><p>返回节点的名称，除特例外总是返回名称的大写<br>特例：</p>
<ul>
<li><p>document<br>直接使用document.nodeName返回的是<code>#document</code>，需要使用<code>document.documentElement.nodeName</code>，才会正常返回<code>HTML</code></p>
</li>
<li><p>svg<br> svg很特殊，只有它的标签是小写</p>
</li>
</ul>
<h3 id="innerText"><a href="#innerText" class="headerlink" title="innerText"></a>innerText</h3><p>获取到其节点内的所有文本内容(微软发明的)</p>
<h3 id="textContent"><a href="#textContent" class="headerlink" title="textContent"></a>textContent</h3><p>和上面一样，只是不会忽略style和script标签，性能会更好一点。（火狐发明的）</p>
<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="appendChild"><a href="#appendChild" class="headerlink" title="appendChild()"></a>appendChild()</h3><p>添加儿子</p>
<h3 id="cloneNode"><a href="#cloneNode" class="headerlink" title="cloneNode()"></a>cloneNode()</h3><p>默认进行浅拷贝。如果传<code>true</code>进行深拷贝。</p>
<h3 id="contains"><a href="#contains" class="headerlink" title="contains()"></a>contains()</h3><p>是否包含指定元素</p>
<h3 id="hasChildNodes"><a href="#hasChildNodes" class="headerlink" title="hasChildNodes()"></a>hasChildNodes()</h3><p>是否有子节点</p>
<h3 id="insertBefore"><a href="#insertBefore" class="headerlink" title="insertBefore()"></a>insertBefore()</h3><p>插入人到元素前面</p>
<h3 id="isEqualNode"><a href="#isEqualNode" class="headerlink" title="isEqualNode()"></a>isEqualNode()</h3><p>元素类型、内容、属性完全一致</p>
<h3 id="isSanmeNode"><a href="#isSanmeNode" class="headerlink" title="isSanmeNode()"></a>isSanmeNode()</h3><p>同一元素</p>
<h3 id="removeChild"><a href="#removeChild" class="headerlink" title="removeChild()"></a>removeChild()</h3><p>从DOM树中移除，等待被垃圾回收</p>
<h3 id="replaceChild-newChild-oldChild"><a href="#replaceChild-newChild-oldChild" class="headerlink" title="replaceChild(newChild,oldChild)"></a>replaceChild(newChild,oldChild)</h3><p>替换成指定的子节点</p>
<h3 id="normalize"><a href="#normalize" class="headerlink" title="normalize()"></a>normalize()</h3><p>常规化，在一个”规范化”后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。</p>
<h1 id="Document接口"><a href="#Document接口" class="headerlink" title="Document接口"></a>Document接口</h1><h2 id="属性-1"><a href="#属性-1" class="headerlink" title="属性"></a>属性</h2><h3 id="body"><a href="#body" class="headerlink" title="body"></a>body</h3><p>包含当前页面的元素</p>
<h3 id="characterSet"><a href="#characterSet" class="headerlink" title="characterSet"></a>characterSet</h3><p>返回使用的字符编码</p>
<h3 id="childElementCount"><a href="#childElementCount" class="headerlink" title="childElementCount"></a>childElementCount</h3><p>返回子元素个数</p>
<h3 id="domain"><a href="#domain" class="headerlink" title="domain"></a>domain</h3><p>返回域名</p>
<h3 id="location"><a href="#location" class="headerlink" title="location"></a>location</h3><p>一个包含地址信息的对象</p>
<h3 id="readyState"><a href="#readyState" class="headerlink" title="readyState"></a>readyState</h3><p>是否正在下载</p>
<h3 id="referrer"><a href="#referrer" class="headerlink" title="referrer"></a>referrer</h3><p>从哪里访问过来</p>
<h3 id="visibilityState"><a href="#visibilityState" class="headerlink" title="visibilityState"></a>visibilityState</h3><p>该页面是否被显示</p>
<h3 id="children"><a href="#children" class="headerlink" title="children"></a>children</h3><h3 id="doctype"><a href="#doctype" class="headerlink" title="doctype"></a>doctype</h3><h3 id="documentElement"><a href="#documentElement" class="headerlink" title="documentElement"></a>documentElement</h3><h3 id="fullscreen"><a href="#fullscreen" class="headerlink" title="fullscreen"></a>fullscreen</h3><h3 id="head"><a href="#head" class="headerlink" title="head"></a>head</h3><h3 id="hidden"><a href="#hidden" class="headerlink" title="hidden"></a>hidden</h3><h3 id="images"><a href="#images" class="headerlink" title="images"></a>images</h3><h3 id="links"><a href="#links" class="headerlink" title="links"></a>links</h3><h3 id="onxxxxxxxxx"><a href="#onxxxxxxxxx" class="headerlink" title="onxxxxxxxxx"></a>onxxxxxxxxx</h3><h3 id="origin"><a href="#origin" class="headerlink" title="origin"></a>origin</h3><h3 id="plugins"><a href="#plugins" class="headerlink" title="plugins"></a>plugins</h3><h3 id="readyState-1"><a href="#readyState-1" class="headerlink" title="readyState"></a>readyState</h3><h3 id="referrer-1"><a href="#referrer-1" class="headerlink" title="referrer"></a>referrer</h3><h3 id="scripts"><a href="#scripts" class="headerlink" title="scripts"></a>scripts</h3><h3 id="scrollingElement"><a href="#scrollingElement" class="headerlink" title="scrollingElement"></a>scrollingElement</h3><h3 id="styleSheets"><a href="#styleSheets" class="headerlink" title="styleSheets"></a>styleSheets</h3><h3 id="title"><a href="#title" class="headerlink" title="title"></a>title</h3><h2 id="方法-1"><a href="#方法-1" class="headerlink" title="方法"></a>方法</h2><h3 id="close"><a href="#close" class="headerlink" title="close()"></a>close()</h3><p>页面加载完毕后自动关闭</p>
<h3 id="write"><a href="#write" class="headerlink" title="write()"></a>write()</h3><p>向文档内写入东西，如在open时调用write会向文档追加内容，如果已经关闭了调用write会<strong>重写documentn的内容</strong>，这<strong>十分危险！</strong> 不能在任何<strong>异步</strong>或者<strong>延时性</strong>的操作上使用write</p>
<h3 id="writeln"><a href="#writeln" class="headerlink" title="writeln()"></a>writeln()</h3><p>写一行</p>
<h3 id="open"><a href="#open" class="headerlink" title="open()"></a>open()</h3><p>页面一开始打开的时候启用open,可以向文档内写入数据</p>
<h3 id="execCommand"><a href="#execCommand" class="headerlink" title="execCommand()"></a>execCommand()</h3><p>文本编辑器会用到这个</p>
<h3 id="createDocumentFragment"><a href="#createDocumentFragment" class="headerlink" title="createDocumentFragment()"></a>createDocumentFragment()</h3><h3 id="createElement"><a href="#createElement" class="headerlink" title="createElement()"></a>createElement()</h3><h3 id="createTextNode"><a href="#createTextNode" class="headerlink" title="createTextNode()"></a>createTextNode()</h3><h3 id="exitFullscreen"><a href="#exitFullscreen" class="headerlink" title="exitFullscreen()"></a>exitFullscreen()</h3><h3 id="getElementById"><a href="#getElementById" class="headerlink" title="getElementById()"></a>getElementById()</h3><h3 id="getElementsByClassName"><a href="#getElementsByClassName" class="headerlink" title="getElementsByClassName()"></a>getElementsByClassName()</h3><h3 id="getElementsByName"><a href="#getElementsByName" class="headerlink" title="getElementsByName()"></a>getElementsByName()</h3><h3 id="getElementsByTagName"><a href="#getElementsByTagName" class="headerlink" title="getElementsByTagName()"></a>getElementsByTagName()</h3><h3 id="getSelection"><a href="#getSelection" class="headerlink" title="getSelection()"></a>getSelection()</h3><h3 id="hasFocus"><a href="#hasFocus" class="headerlink" title="hasFocus()"></a>hasFocus()</h3><h3 id="querySelector"><a href="#querySelector" class="headerlink" title="querySelector()"></a>querySelector()</h3><p>返回找到的第一个元素</p>
<h3 id="querySelectorAll"><a href="#querySelectorAll" class="headerlink" title="querySelectorAll()"></a>querySelectorAll()</h3><p>以伪数组的形式返回符合的所有元素</p>
<h1 id="Element"><a href="#Element" class="headerlink" title="Element"></a>Element</h1><h2 id="属性-2"><a href="#属性-2" class="headerlink" title="属性"></a>属性</h2><h3 id="innerHTML"><a href="#innerHTML" class="headerlink" title="innerHTML"></a>innerHTML</h3><p>其中的HTML，被改写有安全风险</p>
<h1 id="一些其它需要注意的点"><a href="#一些其它需要注意的点" class="headerlink" title="一些其它需要注意的点"></a>一些其它需要注意的点</h1><p>看下面的代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> parent = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'parent'</span>);</span><br><span class="line">parent.<span class="property">childNodes</span>.<span class="property">length</span> <span class="comment">// 2</span></span><br><span class="line">parent.<span class="title function_">appendChild</span>(<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>));</span><br><span class="line">parent.<span class="property">childNodes</span>.<span class="property">length</span> <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> allDiv = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'div'</span>)</span><br><span class="line">allDiv.<span class="property">length</span> <span class="comment">// 假设是 2</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>( <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>) )</span><br><span class="line">allDiv.<span class="property">length</span> <span class="comment">// 还是2</span></span><br></pre></td></tr></table></figure>
<p>这里length没有改变时因为<code>parent.childNodes</code>是动态集合。所谓动态集合就是一个活的集合，DOM树删除或新增一个相关节点，都会立刻反映在NodeList接口之中。<br> <code>document.querySelectorAll</code>方法返回的是一个静态集合(伪数组)。DOM内部的变化，并不会实时反映在该方法的返回结果之中。</p>
]]></content>
<categories>
<category>JavaScript</category>
</categories>
</entry>
<entry>
<title>DOM事件</title>
<url>/2018/06/04/DOM%E4%BA%8B%E4%BB%B6/</url>
<content><![CDATA[<h1 id="DOM标准"><a href="#DOM标准" class="headerlink" title="DOM标准"></a>DOM标准</h1><h2 id="标准前的标准"><a href="#标准前的标准" class="headerlink" title="标准前的标准"></a>标准前的标准</h2><p>在未指定标准前就已经有了事实上的标准<br>如：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">button.<span class="property">onclick</span> = <span class="keyword">function</span>{</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="DOM1"><a href="#DOM1" class="headerlink" title="DOM1"></a>DOM1</h2><p>有了更多的事件</p>
<ul>
<li>blur</li>
<li>click</li>
<li>focus</li>
<li>select</li>
</ul>
<h2 id="DOM2"><a href="#DOM2" class="headerlink" title="DOM2"></a>DOM2</h2><p>事件被单独列出来，有了拥有了事件流，事件捕获，事件冒泡，事件取消，也是最广泛的版本</p>
<h1 id="事件详解"><a href="#事件详解" class="headerlink" title="事件详解"></a>事件详解</h1><h2 id="声明方式"><a href="#声明方式" class="headerlink" title="声明方式"></a>声明方式</h2><ol>
<li><p>内联声明</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">xxx</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"xxx"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"xxx()"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"xxx.call"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure>
<p>这种方式比较奇怪的时第一种方式无效，下面两种方式有效，实际上这里等同于<code>eval(xxx())</code></p>
</li>
<li><p>js声明</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">xxx</span>(<span class="params"></span>){</span><br><span class="line"> }</span><br><span class="line">button.<span class="property">onclick</span> = xxx</span><br><span class="line">button.<span class="title function_">addListener</span>(<span class="string">'click'</span>,xxx,options)</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>onclick</code>与<code>addListener</code>的区别<br>前者是一个属性，只能赋值一个，后者是一个队列，可以监听多个事件，并按照声明顺序触发。<br>除此之外，第三个参数还可以指定一些布尔值</p>
</li>
</ol>
<h2 id="事件模型"><a href="#事件模型" class="headerlink" title="事件模型"></a>事件模型</h2><h3 id="捕获与冒泡"><a href="#捕获与冒泡" class="headerlink" title="捕获与冒泡"></a>捕获与冒泡</h3><p>在DON的事件模型中，事件传播被分为两个阶段，首先某事件触发后，会把该事件从父标签一级级传递给最终的子标签，这个阶段叫做捕获阶段，最终的子标签得到这个事件后，再把这个事件一级级返回到最上层父标签，这个过程叫做冒泡阶段，默认声明的事件是在冒泡阶段触发。值得注意的是，最终的子标签并不区分冒泡或捕获阶段，声明的多个事件按照声明先后触发。</p>
<p>如果只指定一个布尔值，则指是否在捕获阶段捕获事件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">button.<span class="title function_">addListener</span>(<span class="string">'click'</span>,xxx,ture)</span><br></pre></td></tr></table></figure>
<p>默认为在冒泡阶段捕获，也就是此值为false</p>
<p>阻止传播：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> (<span class="params">e</span>){</span><br><span class="line"> e.<span class="title function_">stopPropagation</span>()</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>另外jquery()的阻止默认事件是直接传false</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(xxx).<span class="title function_">on</span>(<span class="string">'click'</span>,<span class="literal">false</span>)</span><br></pre></td></tr></table></figure>
<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><h3 id="怎么达到点击别处关闭浮层的效果"><a href="#怎么达到点击别处关闭浮层的效果" class="headerlink" title="怎么达到点击别处关闭浮层的效果?"></a>怎么达到点击别处关闭浮层的效果?</h3><p>在<code>document</code>的冒泡阶段监听click事件，如果监听到就关闭浮层，而在浮层上监听click事件，阻止click事件冒泡。</p>
<p>我们还可以不使用阻止冒泡，我们在浮层被点击后添加一个0定时器，监听<code>document</code>，定时器会在空闲时触发，也就是当前事件传播结束，OK。</p>
<p>实现轮播细节<br>把第一张和最后一张复制到前面和后面，这里用<code>clone(true)</code>进行深克隆<br>复制后还要让其显示第二张</p>
<p><code>hidden()</code>再<code>show()</code>就可以隐藏动画,但是短时间的操作浏览器会合并,<code>offset()</code>可以让css立即生效而不计算</p>
<p>jquery还可以监听所有子元素的，为其添加事件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'xxx'</span>).<span class="title function_">on</span>(<span class="string">'click'</span>,<span class="string">'button'</span>,<span class="keyword">function</span>(<span class="params"></span>))</span><br></pre></td></tr></table></figure>
<p>这里 第二个参数是选择器</p>
]]></content>
<categories>
<category>JavaScript</category>
</categories>
<tags>
<tag>事件</tag>
<tag>DOM</tag>
</tags>
</entry>
<entry>
<title>HTML常用标签</title>
<url>/2018/04/03/HTML%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/</url>
<content><![CDATA[<p><em>注意：由于Markdown会自动将换行转换为<br>标签，为了避免换行，展现实际效果时的标签事实上都在同一行,这可能会带来一些空格的差异</em></p>
<h1 id="lt-div-gt"><a href="#lt-div-gt" class="headerlink" title="<div>"></a><div></h1><p>没有实义，主要用来分组，默认样式为块级，会单独占一行</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span>A<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span>B<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong></p>
<div>A</div><div>B</div>
***
# <span\>
没有实义，主要用来分组和其它作用，默认样式为内嵌，与其它元素共存。
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">span</span>></span>A<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">span</span>></span>B<span class="tag"></<span class="name">span</span>></span></span><br></pre></td></tr></table></figure>
**效果：**
<span>A</span><span>B</span>
***
# <h1\>
表示一级标题，默认会加粗，二级标签使用`<h2>`，以此类推
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h1</span>></span>一级标题<span class="tag"><<span class="name">h1</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h2</span>></span>二级标题<span class="tag"><<span class="name">h2</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h3</span>></span>三级标题<span class="tag"><<span class="name">h3</span>></span></span><br></pre></td></tr></table></figure>
效果：
<h1>一级标题<h1><h2>二级标题<h2><h3>三级标题<h3>
# <p\>
段落元素，表示一个文本的段落
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><p>埃菲尔铁塔最初是作为 1889 年世界博览会的入口而兴建的。得名于设计它的著名建筑、结构师古斯塔夫·埃菲尔。埃菲尔铁塔从 1887 年开始动工，直到 1898 年才结束。是目前世界上访问人数最多的付费建筑物，每年有 700 万人登上铁塔的最高处。</p></span><br></pre></td></tr></table></figure>
**效果：**
<p>埃菲尔铁塔最初是作为 1889 年世界博览会的入口而兴建的。得名于设计它的著名建筑、结构师古斯塔夫·埃菲尔。埃菲尔铁塔从 1887 年开始动工，直到 1898 年才结束。是目前世界上访问人数最多的付费建筑物，每年有 700 万人登上铁塔的最高处。</p>
***
# <strong\>
表示强调其中的内容，内容十分重要，会自动加粗，如果只是为了加粗，将其css中的`font-weight`属性设置为`"bold"`是更好的选择。**`em`**和其类似。
<p><em>由于Markdown只提供<code>**xxx**</code>的方式加粗文本，这被解释为<strong>xxx</strong>,所以我这里</em>*<code>效果：</code>*<em>的用法是不正确的。</em></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">strong</span>></span>这个文本很重要<span class="tag"></<span class="name">strong</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong><br><strong>这个文本很重要</strong></p>
<hr>
<h1 id="lt-ul-gt"><a href="#lt-ul-gt" class="headerlink" title="<ul>"></a><ul></h1><p> 表示无序列表,用<code><li></li></code>来表示每一个例子/选项，与其相似的还有<code>ol</code>有序列表<br> <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>葡萄<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>橘子<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>香蕉<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>菠萝<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure><br><strong>效果：</strong></p>
<ul><li>葡萄</li><li>橘子</li><li>香蕉</li><li>菠萝</li></ul>
***
<h1 id="lt-img-gt"><a href="#lt-img-gt" class="headerlink" title="<img>"></a><img></h1><p>显示图片，<code><img></code>是一个空标签，没有带有带<code>/</code>的结束标签，且它也是一个可替换标签，它的相关样式由资源自己决定。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"/2018/03/17/Markdown%E5%85%A5%E9%97%A8/jz.png"</span> <span class="attr">alt</span>=<span class="string">"紫罗兰永恒花园"</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong><br><a href="/2018/03/17/Markdown%E5%85%A5%E9%97%A8/jz.png" download="紫罗兰紫罗兰永恒花园"><br><img data-src="/2018/03/17/Markdown%E5%85%A5%E9%97%A8/jz.png" alt="紫罗兰永恒花园" download></a></p>
<hr>
<h1 id="lt-a-gt"><a href="#lt-a-gt" class="headerlink" title="<a>"></a><a></h1><p>可访问的链接，使用href指定访问的URL地址。也可以添加<code>download</code>属性，表示直接下载url的内容。</p>
<p><em>download属性只在当前协议为http/https时有用</em></p>
<p><strong>href有多种状态</strong></p>
<ol>
<li><p><strong>绝对路径</strong><br> 以<code>/</code>开头，访问的是当前协议当前域名下的绝对地址</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/2018/03/17/Markdown入门/"</span>></span>我的第一篇博客<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="/2018/03/17/Markdown入门/">我的第一篇博客</a></p>
</li>
<li><p><strong>相对路径</strong><br> 使用<code>.</code>或<code>..</code>可以访问当前目录和上级目录，默认会加上<code>./</code></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"./龙王的工作.jpg"</span>></span>点击查看《龙王的工作》图片<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="./龙王的工作.jpg">点击查看《龙王的工作》图片</a></p>
</li>
<li><p><strong>当前协议URL</strong><br> 使用很当前一致的协议补全URL</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"//baidu.com"</span>></span>点击访问百度<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="//baidu.com">点击访问百度</a></p>
</li>
<li><p><strong>指定协议</strong><br> 输入一个完整的URL</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"mailto:yanglei1997630@gmail.com"</span>></span>给我发邮件<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="mailto:yanglei1997630@gmail.com">给我发邮件</a></p>
</li>
<li><p><strong>伪协议</strong><br> 伪协议是指以<code>javascript:</code>为属性值，点击之后执行javascript,<br> 这在某些方面有特殊的作用。<br> 如想点击<code><a></code></p>
<ul>
<li><p><strong>为空值</strong><br> 这种方法会导致重新刷新此页面</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">herf</span>=<span class="string">""</span>></span>这会导致页面刷新<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="">这会导致页面刷新</a></p>
</li>
<li><p><strong>为<code>#</code></strong><br> 这种方法不会引起页面刷新，但会跳转到页面顶部</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">herf</span>=<span class="string">"#"</span>></span>这会导致跳转到页面顶部<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="#">这会导致跳转到页面顶部</a></p>
</li>
</ul>
<p> 比较好的解决办法是使用<code>###</code>。<br> <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">herf</span>=<span class="string">"###"</span>></span>不会发生任何事，但地址栏会轻微改变<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><br> <strong>效果：</strong><br> <a href="###">不会发生任何事，但地址栏会轻微改变</a></p>
<ul>
<li><strong>javascript空语句</strong><br> 另一个办法就是javascript为伪协议，执行一段空javascrpt语句 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span>></span>不会发生任何事<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<strong>效果：</strong><br> <a href="javascript:;">不会发生任何事</a></li>
</ul>
</li>
</ol>
<hr>
<h1 id="lt-iframe-gt"><a href="#lt-iframe-gt" class="headerlink" title="<iframe>"></a><iframe></h1><p>框架元素，主要用来在当前页面嵌入一个新的HTML页面，iframe几乎相当于独立的标签页，拥有自己独立的历史记录等，目前已经很少使用，不过在部分情况下仍然有用处。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"http://baidu.com"</span>></span><span class="tag"><<span class="name">p</span>></span>iframe未显示时出现的文本<span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong></p>
<iframe src="http://baidu.com"><p>iframe未显示时出现的文本<p></iframe>
<p>如想在iframe中打开你需要的页面,需要添加name属性</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"http://baidu.com"</span> <span class="attr">name</span>=<span class="string">"iframe"</span>></span><span class="tag"><<span class="name">p</span>></span>iframe未显示时出现的文本<span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://qq.com"</span> <span class="attr">target</span>=<span class="string">"iframe"</span>></span>点击在iframe中打开qq.com<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong></p>
<iframe src="http://baidu.com" name="iframe"><p>iframe未显示时出现的文<p></iframe><a href="http://qq.com" target="iframe">点击在iframe中打开qq.com</a>
<p>除此之外，a标签还拥有其它target属性</p>
<ol>
<li><p><strong>_black</strong><br> 在新标签页打开</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://baidu.com"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span>点击在新标签页内访问百度<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="http://baidu.com" target="_blank">点击在新标签页内访问百度</a></p>
</li>
<li><p><strong>_self</strong><br> 在本页内打开</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://baidu.com"</span> <span class="attr">target</span>=<span class="string">"_self"</span>></span>点击在本标签页内访问百度<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <a href="http://baidu.com" target="_self">点击在本标签页内访问百度</a></p>
</li>
<li><p><strong>_parent</strong><br> 在父级页面打开</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://baidu.com"</span> <span class="attr">target</span>=<span class="string">"_parent"</span>></span>访问父级<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> 比如页面内嵌套一个iframe，iframe内有一个在这样的标签，是在上级页面打开。</p>
</li>
<li><p><strong>_parent</strong><br> 在根页面打开打开</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://baidu.com"</span> <span class="attr">target</span>=<span class="string">"_parent"</span>></span>访问父级<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> 在frame嵌套frame的多级嵌套情况下，无论嵌套多少层，总是在最开始的根页面打开。</p>
</li>
</ol>
<p>除此之外，因为自带的iframe边框比较丑，可以通过<code>frameborder=0</code>来禁用。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"http://baidu.com"</span> <span class="attr">frameborder</span>=<span class="string">"0"</span>></span><span class="tag"><<span class="name">p</span>></span>iframe未显示时出现的文本<span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong></p>
<iframe src="http://baidu.com" frameborder="0"><p>iframe未显示时出现的文本<p></iframe>
***
# <form\>
表单元素，用来提交给服务器表单数据，**<form\>**标签中包含有许多子标签，包括**<input\>** **<select\>** **<textarea\>**等等
<p>form元素使用<code>action</code>确定请求的地址，使用<code>method</code>确定请求的方式，<code>method</code>拥有两种方式，分别为post和get,通过开发者工具可以方便的看见请求的类型,默认使用get请求</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"xxx"</span> <span class="attr">method</span>=<span class="string">"get"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> ></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong></p>
<form action="xxx" method="get">
<input type="submit" >
</form>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"xxx"</span> <span class="attr">method</span>=<span class="string">"post"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> ></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>效果：</strong></p>
<form action="xxx" method="post">
<input type="submit" >
</form>
<ol>
<li><p><strong><input></strong><br>input拥有许多type值，常见的有text、button、submit、checkbox、radio、password、file等。</p>
<ul>
<li><strong>submit</strong><br> 提交表单的内容 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"xxx"</span> <span class="attr">method</span>=<span class="string">"post"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"userName"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"password"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"登录"</span> ></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure>
<strong>效果：</strong> <form action="xxx" method="post">
<input type="text" name="userName">
<input type="text" name="password">
<input type="submit" value="登录" >
</form></li>
</ul>
<p> 其中，具有想提交内容的标签必须具有name，否则无法提交内容。<br> 使用get提交，会直接把内容加到路径后，使用post提交，会添加在header第四部分</p>
<p> 如果表单中没有form标签，没有指定type的<button>标签也具有提交功能<br> <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"xxx"</span> <span class="attr">method</span>=<span class="string">"post"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span>></span>提交<span class="tag"><<span class="name">button</span>></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure><br> <strong>效果：</strong><br> <form action="xxx" method="post"><br> <button>提交</button><br> </form></p>
<ul>
<li><p><strong>checkbox</strong><br> 多选框</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">span</span>></span>喜欢吃的水果：<span class="tag"><<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">label</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"lovaFruit"</span> <span class="attr">value</span>=<span class="string">"苹果"</span>></span>苹果<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"><span class="tag"><<span class="name">label</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"lovaFruit"</span> <span class="attr">value</span>=<span class="string">"草莓"</span>></span>草莓<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"><span class="tag"><<span class="name">label</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"lovaFruit"</span> <span class="attr">value</span>=<span class="string">"橘子"</span>></span>橘子<span class="tag"></<span class="name">label</span>></span></span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <span>喜欢吃的水果：<span><label><input type="checkbox" name="lovaFruit" value="苹果">苹果</label><label><input type="checkbox" name="lovaFruit" value="草莓">草莓</label><label><input type="checkbox" name="lovaFruit" value="橘子">橘子</label></p>
</li>
<li><p><strong>radio</strong><br> 单选框</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">span</span>></span>你是男孩还是女孩？<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">label</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"girl"</span>></span>女孩<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"><span class="tag"><<span class="name">label</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"boy"</span>></span>男孩<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"><span class="tag"><<span class="name">label</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"LGBT"</span>></span>跨性别者<span class="tag"></<span class="name">label</span>></span> </span><br></pre></td></tr></table></figure>
<p> <strong>效果：</strong><br> <span>你是男孩还是女孩？</span><label><input type="radio" name="gender" value="girl">女孩</label><label><input type="radio" name="gender" value="boy">男孩</label><label><input type="radio" name="gender" value="LGBT">跨性别者</label></p>
</li>
</ul>
</li>
</ol>
<hr>
<ol start="2">
<li><strong><select></strong><br>下拉列表，使用<code>disabled</code>不可选中，<code>selected</code>默认选中，<code>multipl</code>可以多选<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">select</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span> <span class="attr">selected</span>></span>四川<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span>></span>广东<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span>></span>湖南<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span> <span class="attr">disabled</span>></span>台湾<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"></<span class="name">select</span>></span></span><br></pre></td></tr></table></figure></li>
</ol>
<p><strong>效果：</strong><br><select><option selected>四川</option><option>广东</option><option>湖南</option><option disabled>台湾</option></select></p>
<hr>
<ol start="3">
<li><strong><textarea></strong><br>文本域，主要用来输入大量文本，可以使用<code>cols</code>指定列数，<code>rows</code>指定行数，但是这与字符长度不完全匹配</li>
</ol>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">textarea</span> <span class="attr">clos</span>=<span class="string">"50"</span> <span class="attr">rows</span>=<span class="string">"50"</span>></span>在这里输入<span class="tag"></<span class="name">textarea</span>></span></span><br></pre></td></tr></table></figure>
<textarea clos="10" rows="10">在这里输入</textarea>
<hr>
<h1 id="lt-table-gt"><a href="#lt-table-gt" class="headerlink" title="<table>"></a><table></h1><p>表格标签，表格标签分别具有三部分，分别是头<code><thead></code>，身体<code><tbody></code>，脚<code><tfoot></code>，还有管内容的标签<code><th></code>，<code><tr></code>，<code><td></code>。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">thred</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>姓名<span class="tag"></<span class="name">th</span>></span><span class="tag"><<span class="name">th</span>></span>学号<span class="tag"></<span class="name">th</span>></span><span class="tag"><<span class="name">th</span>></span>成绩<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thred</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>张三<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>0101<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>99<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>李四<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>0102<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>98<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>王麻子<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>0103<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>95<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thred</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tfoot</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thred</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure>
<table><thred><th>姓名</th><th>学号</th><th>成绩</th></thred><tr><td>张三</td><td>0101</td><td>99</td></tr><tr><td>李四</td><td>0102</td><td>98</td></tr><tr><td>王麻子</td><td>0103</td><td>95</td></tr><tbody></thred><tfoot></thred></table>
<p>还可以通过<code><colgroup></code>及其子元素<code><col></code>指定每一列的宽度</p>
<hr>
<p><em>OK</em></p>
]]></content>
<categories>
<category>HTML</category>
</categories>
</entry>
<entry>
<title>JSONP</title>
<url>/2018/06/10/JSONP/</url>
<content><![CDATA[<h1 id="为什么要使用JSONP？"><a href="#为什么要使用JSONP？" class="headerlink" title="为什么要使用JSONP？"></a>为什么要使用JSONP？</h1><p>在早期，访问html页面必须进行跳转，页面的展示也依靠点击超链接，由于加载一个新页面，这不可避免的需要进行刷新。<br>有些利用页面种嵌入<code>iframe</code>，点击链接/按钮<code>iframe</code>访问页面，达到页面不刷新的目的，这种实现方式很丑陋。</p>
<p>而JSONP是一种更方便的更新数据方式，类似于现在的<code>ajax</code></p>
<h1 id="JSONP具体是怎么做的"><a href="#JSONP具体是怎么做的" class="headerlink" title="JSONP具体是怎么做的?"></a>JSONP具体是怎么做的?</h1><ol>
<li>创建一个随机的函数名，</li>
<li>创建一个<code><script></code>,并将<code>src</code>指向要访问的后端服务器地址，如<code>/?callback=函数名</code></li>
<li>将<code><script></code>加入文档就会立即向指定地址发起请求</li>
<li>服务器收到请求，将数据写入自己要返回的内容中，如<code>函数名(参数)</code>，</li>
<li>客户端收到，立即执行了<code><script></code>中的内容，也就是<code>函数名(参数)</code>,通过这种方式就完成了动态的更新。</li>
</ol>
<p>JSONP参数可以是任意的，不过为了统一，一般使用<code>callback=</code>这种调用。</p>
<p>JSONP的请求是跨域的，后端服务器只要实现了<code>callback</code>调用，就可以直接使用。但同时由于使用的是动态加载<code><script></code>资源，JSONP只能使用<code>get</code>方式请求资源。</p>
<p>jQuery对其进行了封装，调用方式如下</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">"xxxx"</span></span><br><span class="line"> <span class="attr">dateType</span>: <span class="string">'jsonp'</span></span><br><span class="line"> <span class="attr">success</span>: <span class="keyword">function</span>(<span class="params">A</span>){</span><br><span class="line"> ...</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>我的简单实现可以在<a href="https://github.com/Geylnu/nodeServerDemo/blob/master/main.js">这里</a></p>
]]></content>
<categories>
<category>JavaScript</category>
</categories>
<tags>
<tag>JSON</tag>
</tags>
</entry>
<entry>
<title>MVC</title>
<url>/2018/07/09/MVC/</url>
<content><![CDATA[<p>M:Model<br>V:view<br>c:controller</p>
<p>模块化 把每个分成一个个js小文件<br>每个模块把操作的html作为一个view，作为v（我觉得应该是model）<br>再生成一个controller，参数是view，接受view进行操作</p>
<p>这里最好将controller封装成一个对象，像下面这样</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> controller = {</span><br><span class="line"> <span class="attr">view</span>: <span class="literal">null</span>,</span><br><span class="line"> <span class="attr">init</span>: <span class="keyword">function</span> (<span class="params">view</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">view</span> = view</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">bindEvents</span>()</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="attr">bindEvents</span>: <span class="keyword">function</span> (<span class="params"></span>){</span><br><span class="line"> xxx.<span class="title function_">addListener</span>(<span class="string">'xxx'</span>,<span class="keyword">function</span> (<span class="params"></span>){</span><br><span class="line"> xxx</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>值得注意的是监听函数中调用的是触发事件本身的元素，也就是这里取this取到的不是controller对象本身，这种情况可以使用箭头函数，箭头函数自身不具有this，使用的this向上寻找到的对象就是正确的了。</p>
<p>同时由于多个模块相互分离，并不知道其它模块的情况，可能出现全局变量污染的情况，因此，需要使用立即执行函数。</p>
<p>js中在ES6前不能使用<code>{}</code>包裹创建局部变量，避免全局变量污染可以使用<code>function</code>的创建局部变量环境。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">xxx</span>(<span class="params"></span>){</span><br><span class="line"> ...</span><br><span class="line">}.<span class="title function_">call</span>()</span><br></pre></td></tr></table></figure>
<p>但是这个方案实际还是存在问题，xxx其实也是一个全局变量</p>
<p>升级版就出现了</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> (<span class="params"></span>){</span><br><span class="line"></span><br><span class="line">}.<span class="title function_">call</span>()</span><br></pre></td></tr></table></figure>
<p>然而遗憾的是这个方法会报语法错误</p>
<p>再升级版</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">!<span class="keyword">function</span> (<span class="params"></span>){</span><br><span class="line">}.<span class="title function_">call</span>()</span><br></pre></td></tr></table></figure>
<p>使用其它单目运算符也能起到一样的效果，整个包裹大括号也是可行的，但可能出现bug,比如被视为函数实参。<br>还可以用随机数，不过有点丑陋</p>
<p>同时还可以使用闭包</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">!<span class="keyword">function</span> (<span class="params"></span>){</span><br><span class="line"> <span class="keyword">var</span> person ={}</span><br><span class="line"> person.<span class="property">name</span> = <span class="string">'xxx'</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">getname</span> = <span class="keyword">function</span> (<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> person.<span class="property">name</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
]]></content>
</entry>
<entry>
<title>Markdown入门</title>
<url>/2018/03/17/Markdown%E5%85%A5%E9%97%A8/</url>
<content><![CDATA[<h2 id="什么是Markdown"><a href="#什么是Markdown" class="headerlink" title="什么是Markdown?"></a>什么是Markdown?</h2><p>Markdown是一种轻量的<a href="https://zh.wikipedia.org/wiki/%E7%BD%AE%E6%A0%87%E8%AF%AD%E8%A8%80" title="什么是标记语言？">标记语言</a>,允许人们以易读易写的纯文本方式编写文档，并可以轻松的转换为有效的HTML文档，许多网站及应用都使用Markdown或其它衍生版本让用户更专注于文档的写作，而不需要烦恼于排版、格式等琐碎的事情，你大可以在轻度写作上，告别word这样繁琐的工具。</p>
<h2 id="怎么使用Markdown"><a href="#怎么使用Markdown" class="headerlink" title="怎么使用Markdown?"></a>怎么使用Markdown?</h2><h3 id="我需要怎样的编辑器？"><a href="#我需要怎样的编辑器？" class="headerlink" title="我需要怎样的编辑器？"></a>我需要怎样的编辑器？</h3><p>Markdown无需任何编辑器，你可以在任意文档编辑器使用Markdown语法，即使不经过处理，纯文本的Markdown也拥有不错的阅读体验，如果你需要即时的预览的Markdown语法效果，你可以使用以下几个在线的编辑器</p>
<ol>
<li><a href="https://www.zybuluo.com/mdeditor">Cmd Markdown</a> 国内一款不错的Markdown在线编辑器</li>
<li><a href="https://jianshu.com/">简书</a> 需要注册一下，也支持Markdown</li>
<li><a href="https://dillinger.io/">dillinger</a> 很漂亮的一个在线编辑器，还支持许多云端备份，不过国内访问很慢，中文支持也不好，如果你在国外还是不错的。</li>
</ol>
<h3 id="Makedown的具体语法是怎样的？"><a href="#Makedown的具体语法是怎样的？" class="headerlink" title="Makedown的具体语法是怎样的？"></a>Makedown的具体语法是怎样的？</h3><p>Makedown的语法是相当简单的，你至多只需要十分钟就能掌握Markdown语法，我推荐你打开上述的在线编辑器，一起来编辑看看效果！</p>
<h4 id="1-我想要一个标题？"><a href="#1-我想要一个标题？" class="headerlink" title="1. 我想要一个标题？"></a>1. 我想要一个标题？</h4><p>你可以这样输入<br> # 标题</p>
<p><strong>效果：</strong></p>
<h1 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h1><p>嘿！看看你是否正确的在#号后加了空格？虽然许多编辑器支持不带空格的写法，但标准的Markdown标签里应该加上空格。</p>
<hr>
<h4 id="2-我想要一个多级标题？"><a href="#2-我想要一个多级标题？" class="headerlink" title="2. 我想要一个多级标题？"></a>2. 我想要一个多级标题？</h4><p>你可以这样输入<br> # 一级标题<br> ## 二级标题<br> ### 三级标题<br><strong>效果:</strong></p>
<h1 id="一级标题"><a href="#一级标题" class="headerlink" title="一级标题"></a>一级标题</h1><h2 id="二级标题"><a href="#二级标题" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题"><a href="#三级标题" class="headerlink" title="三级标题"></a>三级标题</h3><hr>
<h4 id="3-标题有了，段落（正文）又该怎么写？"><a href="#3-标题有了，段落（正文）又该怎么写？" class="headerlink" title="3. 标题有了，段落（正文）又该怎么写？"></a>3. 标题有了，段落（正文）又该怎么写？</h4><p>不需要怎么写！Markdown并不需要你做多余的工作，你只需要自然的<strong>回车换行</strong>，即是下一个段落。</p>
<pre><code>由若干“来自GitHub、Reddit、Stack Exchange以及开源社区的重要代表”组成了一个“小型非公开工作组”，打算将Markdown标准化，并为了进一步的改进开放该标准。工作组于近日发布了Standard Markdown，随之有专门的网站standardmarkdown.com，但发布几天后应Gruber的要求被迫关闭了。
在一则发给Atwood的私信中，Gruber说标准使用了Markdown“令人愤怒”，要求标准化工作组重新命名项目，关闭standardmarkdown.com并且道歉。对于名字，Gruber建议工作组可以使用比如Strict Markdown或Pedantic Makrdown类似的名字。Atwood希望有其他的名称，在等待Gruber的反馈一天无果后，将其重命名为Common Markdown。
</code></pre>
<p><strong>效果：</strong><br>由若干“来自GitHub、Reddit、Stack Exchange以及开源社区的重要代表”组成了一个“小型非公开工作组”，打算将Markdown标准化，并为了进一步的改进开放该标准。工作组于近日发布了Standard Markdown，随之有专门的网站standardmarkdown.com，但发布几天后应Gruber的要求被迫关闭了。</p>
<p>在一则发给Atwood的私信中，Gruber说标准使用了Markdown“令人愤怒”，要求标准化工作组重新命名项目，关闭standardmarkdown.com并且道歉。对于名字，Gruber建议工作组可以使用比如Strict Markdown或Pedantic Makrdown类似的名字。Atwood希望有其他的名称，在等待Gruber的反馈一天无果后，将其重命名为Common Markdown。</p>
<hr>
<h4 id="4-我想引用其他人的话语-x2F-句子该怎么办？"><a href="#4-我想引用其他人的话语-x2F-句子该怎么办？" class="headerlink" title="4. 我想引用其他人的话语/句子该怎么办？"></a>4. 我想引用其他人的话语/句子该怎么办？</h4><pre><code>> 鹅，鹅，鹅，曲项向天歌。
白毛浮绿水，红掌拨清波。
————骆宾王
</code></pre>
<p><strong>效果：</strong></p>
<blockquote>
<p>鹅，鹅，鹅，曲项向天歌。<br> 白毛浮绿水，红掌拨清波。<br> ————骆宾王</p>
</blockquote>
<p>你还可以多级嵌套这些引用：</p>
<pre><code>> 鲁迅说：
>> 鲁迅没有说过这句话
————鲁迅
</code></pre>
<p><strong>效果：</strong></p>
<blockquote>
<p>鲁迅说：</p>
<blockquote>
<p>鲁迅没有说过这句话<br>—————鲁迅</p>
</blockquote>
</blockquote>
<hr>
<h4 id="5-我需要一个列表？"><a href="#5-我需要一个列表？" class="headerlink" title="5. 我需要一个列表？"></a>5. 我需要一个列表？</h4><pre><code>*《如果有妹妹就好了》
*《小林家的妹抖龙》
*《紫罗兰永恒花园》
*《罗小鸽战记》
</code></pre>
<p><strong>效果：</strong></p>
<ul>
<li>《如果有妹妹就好了》</li>
<li>《小林家的妹抖龙》</li>
<li>《紫罗兰永痕花园》</li>
<li>《罗小鸽战记》<br>如果你愿意，你还可以使用 <code>+</code> 或 <code>-</code> 代替 <code>*</code> 号，它们的作用是等同的。</li>
</ul>
<p>如果你需要一个有序列表，你可以这样做：<br> 1. 先看看3<br> 2. 看看4写的什么<br> 3. 再看看2<br> 4. 回去看看1<br><strong>效果：</strong></p>
<ol>
<li>先看看3</li>
<li>看看4写的什么</li>
<li>再看看2</li>
<li>回去看看1</li>
</ol>
<p>如果你愿意，你也可以不按顺序写上标号，这也能够被正常解析。</p>
<pre><code>4. 先看看3
2. 看看4写的什么
1. 再看看2
4. 回去看看1
</code></pre>
<p><strong>效果：</strong><br>4. 先看看3<br>2. 看看4写的什么</p>
<ol>
<li>再看看2</li>
<li>回去看看1</li>
</ol>
<p>你还可以做一个代办事项列表</p>
<pre><code>- [ ] 不勾选
- [x] 勾选
</code></pre>
<p><strong>效果：</strong></p>
<ul>
<li><input disabled="" type="checkbox"> 不勾选</li>
<li><input checked="" disabled="" type="checkbox"> 勾选</li>
</ul>
<hr>
<h4 id="我需要在文章中插入链接？"><a href="#我需要在文章中插入链接？" class="headerlink" title="我需要在文章中插入链接？"></a>我需要在文章中插入链接？</h4><ul>
<li><p>行内式：</p>
<p> <a href="https://github.com/">Gayhub</a></p>
</li>
<li><p>参考式：</p>
<p> [Gayhun][1]<br> [1]:<a href="http://github.com/">http://github.com</a></p>
</li>
</ul>
<p><strong>释义：</strong></p>
<ul>
<li><p>行内式：<br>[显示的文本](点击文本访问的链接)</p>
</li>
<li><p>参考式<br>[显示的文本][自己定义的id]<br>[自己定义的id]:链接<br>参考式基本和行内式没有差别，只是可以预先定义要显示的文本。</p>
</li>
</ul>
<p><strong>效果：</strong><br><a href="http://github.com/">Gayhub</a></p>
<p>如果你需要鼠标悬停时给出提示信息，你可以这样</p>
<pre><code>[B站](https://bilibili.com "点此访问bilibili")
</code></pre>
<p><strong>释义：</strong><br>[显示的文本](点击文本访问的链接 “鼠标悬停时的提示信息”)<br><strong>效果</strong><br><a href="https://bilibili.com/" title="点此访问bilibili">B站</a></p>
<p><strong>这样写还是有点麻烦？</strong><br>在显示文本和链接一致的情况下，你只需</p>
<pre><code><https://bilibili.com>
</code></pre>
<p><strong>效果：</strong><br><a href="https://bilibili.com/">https://bilibili.com</a></p>
<hr>
<h4 id="插入图片怎么办？"><a href="#插入图片怎么办？" class="headerlink" title="插入图片怎么办？"></a>插入图片怎么办？</h4><pre><code>
</code></pre>
<p><strong>释义：</strong><br>[ 图片未加载成功时的帮助文本 ](图片的链接 “鼠标悬停时的提示信息”)</p>
<p>图片也拥有和链接相似的参考式写法。<br><strong>效果：</strong><br><img data-src="/2018/03/17/Markdown%E5%85%A5%E9%97%A8/jz.png" alt="紫罗兰永痕花园" title="紫罗兰永痕花园"></p>
<hr>
<h4 id="我想在文章中显示代码？"><a href="#我想在文章中显示代码？" class="headerlink" title="我想在文章中显示代码？"></a>我想在文章中显示代码？</h4><p><strong>1. 原生风格：</strong><br>首行缩进<strong>4个空格</strong>或是一个<strong>制表符</strong><br><img data-src="/2018/03/17/Markdown%E5%85%A5%E9%97%A8/ys1.png" alt="显示代码演示"></p>
<p><strong>效果：</strong></p>
<pre><code> int main(){
printf("Hello world!");
return 0;
}
</code></pre>
<p><strong>2. Github风格</strong><br>使用 <strong>```</strong> 包裹代码</p>
<p><img data-src="/2018/03/17/Markdown%E5%85%A5%E9%97%A8/ys2.png" alt="显示代码演示"></p>
<p><strong>效果：</strong></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">int main(){</span><br><span class="line"> printf("Hello world!");</span><br><span class="line"> return 0;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="我想用表格来展示？"><a href="#我想用表格来展示？" class="headerlink" title="我想用表格来展示？"></a>我想用表格来展示？</h4><pre><code>英雄名称| 击杀 |死亡| 助攻
:--|:--:|--:| --:
斧王|1|50|5
宙斯|5|5|5
炸弹人|56|5|41
</code></pre>
<p><strong>释义：</strong><br>第一行代表表头，第二行代表对齐方式控制，第三行开始是内容。<br>其中 <code>:--</code>代表左对齐，<code>--:</code>代表右对齐，<code>:--:</code>代表居中对齐。</p>
<p><strong>效果：</strong></p>
<table>
<thead>
<tr>
<th align="left">英雄名称</th>
<th align="center">击杀</th>
<th align="right">死亡</th>
<th align="right">助攻</th>
</tr>
</thead>
<tbody><tr>
<td align="left">斧王</td>
<td align="center">1</td>
<td align="right">50</td>
<td align="right">5</td>
</tr>
<tr>
<td align="left">宙斯</td>
<td align="center">5</td>
<td align="right">5</td>
<td align="right">2</td>
</tr>
<tr>
<td align="left">炸弹人</td>
<td align="center">56</td>
<td align="right">5</td>
<td align="right">41</td>
</tr>
</tbody></table>
<hr>
<h4 id="我想让我的文本更有表现力？"><a href="#我想让我的文本更有表现力？" class="headerlink" title="我想让我的文本更有表现力？"></a>我想让我的文本更有表现力？</h4><ul>
<li><p><strong>斜体</strong></p>
<pre><code> *这是一串斜体*
</code></pre>
<p> <strong>效果：</strong></p>
<p> <em>这是一串斜体</em></p>
</li>
<li><p><strong>粗体</strong><br> <strong>这是一串粗体</strong><br> <strong>效果：</strong></p>
<p> <strong>这是一串粗体</strong></p>
</li>
<li><p><strong>单独显示一串代码</strong><br> <code>Hello world</code><br> <strong>效果：</strong></p>
<p> <code>Hello world</code></p>
</li>
<li><p><strong>给文字加上删除线</strong><br> <del>这是要被删除的文字</del><br> <strong>效果：</strong></p>
<p> <del>这是要被删除的文字</del></p>
</li>
<li><p><strong>添加水平线</strong><br> ***<br> <strong>效果：</strong></p>
<hr>
</li>
</ul>
<hr>
<h4 id="我想使用的字符字被看包括在Markdown语法内？"><a href="#我想使用的字符字被看包括在Markdown语法内？" class="headerlink" title="我想使用的字符字被看包括在Markdown语法内？"></a>我想使用的字符字被看包括在Markdown语法内？</h4><p>你可以使用在你想使用的字符前添加转义符<code>\</code></p>
<pre><code> \\
</code></pre>
<p><strong>效果：</strong><br>\</p>
<p><strong>你可以对这些字符进行转义</strong></p>
<table>
<thead>
<tr>
<th align="center">字符</th>
<th align="center">名称</th>
</tr>
</thead>
<tbody><tr>
<td align="center">|反斜线</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">`</td>
<td align="center">反引号</td>
</tr>
<tr>
<td align="center">*</td>
<td align="center">星好</td>
</tr>
<tr>
<td align="center">_</td>
<td align="center">底线</td>
</tr>
<tr>
<td align="center">{}</td>
<td align="center">花括号</td>
</tr>
<tr>
<td align="center">[]</td>
<td align="center">方括号</td>
</tr>
<tr>
<td align="center">()</td>
<td align="center">括号</td>
</tr>
<tr>
<td align="center">#</td>
<td align="center">井号</td>
</tr>
<tr>
<td align="center">+</td>
<td align="center">加号</td>
</tr>
<tr>
<td align="center">-</td>
<td align="center">减号</td>
</tr>
<tr>
<td align="center">,</td>
<td align="center">英文句点</td>
</tr>
<tr>
<td align="center">!</td>
<td align="center">感叹号</td>
</tr>
</tbody></table>
<hr>
<h3 id="一切OK"><a href="#一切OK" class="headerlink" title="一切OK"></a>一切OK</h3>]]></content>
<tags>
<tag>测试</tag>
</tags>
</entry>
<entry>
<title>Windows Terminal 打造最美终端~</title>
<url>/2020/01/08/Windows-Terminal-Wsl-%E6%89%93%E9%80%A0%E6%9C%80%E7%BE%8E%E7%BB%88%E7%AB%AF/</url>
<content><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>自己之前在Windows一直使用<a href="https://cmder.net/">cmder</a>作为自己的终端使用，主要就是自带颜值比git-bash这些高很多，不过在把Windows升级到1909版本，cmder不知为何无法连接到<a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10" title="Windows Linux子系统">wsl</a>了, 正好也想试试微软新出的<a href="https://github.com/microsoft/terminal">Windows Terminal</a></p>
<h2 id="下载安装"><a href="#下载安装" class="headerlink" title="下载安装"></a>下载安装</h2><p>直接在<a href="https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701">应用商店</a>里安装就可以了</p>
<h2 id="个性化Windows-Terminal"><a href="#个性化Windows-Terminal" class="headerlink" title="个性化Windows Terminal"></a>个性化Windows Terminal</h2><p>默认的Windows Terminal各个终端都是默认样式，劝退级别233。点击下拉菜单，点击设置就会打开Vscode来自己配置Windows Terminal了</p>
<p>添加新的终端需要在<code>profiles</code>属性下添加，类似下面这样</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"guid"</span>: <span class="string">"{156bea93-de01-48ff-bce0-860cc70a73d5}"</span>, <span class="comment">//uuid 用于区分不同终端</span></span><br><span class="line"> <span class="string">"background"</span>: <span class="string">"#282c34"</span>, <span class="comment">//背景颜色</span></span><br><span class="line"> <span class="string">"closeOnExit"</span>: <span class="literal">true</span>, </span><br><span class="line"> <span class="string">"colorScheme"</span>: <span class="string">"Chester"</span>, <span class="comment">//配色方案</span></span><br><span class="line"> <span class="string">"commandline"</span>: <span class="string">"\"%PROGRAMFILES%\\git\\usr\\bin\\bash.exe\" -i -l"</span>, <span class="comment">// 终端位置</span></span><br><span class="line"> <span class="string">"cursorColor"</span>: <span class="string">"#FFFFFF"</span>,</span><br><span class="line"> <span class="string">"cursorShape"</span>: <span class="string">"bar"</span>,</span><br><span class="line"> <span class="string">"fontFace"</span>: <span class="string">"Consolas"</span>,</span><br><span class="line"> <span class="string">"fontSize"</span>: <span class="number">12</span>,</span><br><span class="line"> <span class="string">"historySize"</span>: <span class="number">9001</span>,</span><br><span class="line"> <span class="string">"icon"</span>: <span class="string">"%SystemDrive%\\Program Files\\Git\\mingw64\\share\\git\\git-for-windows.ico"</span>, </span><br><span class="line"> <span class="string">"name"</span>: <span class="string">"Bash"</span>,</span><br><span class="line"> <span class="string">"padding"</span>: <span class="string">"10, 10, 10, 10"</span>,</span><br><span class="line"> <span class="string">"snapOnInput"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"startingDirectory"</span>: <span class="string">"%USERPROFILE%"</span>,</span><br><span class="line"> <span class="string">"useAcrylic"</span>: <span class="literal">true</span>, <span class="comment">// 是否启用毛玻璃特效</span></span><br><span class="line"> <span class="string">"acrylicOpacity"</span>: <span class="number">0.85</span> <span class="comment">// 透明度 仅在启用毛玻璃特效后有效</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>想要终端变得好看，配色是第一步，可以去<a href="https://github.com/mbadolato/iTerm2-Color-Schemes">iTerm2-Color-Schemes</a>上找一个自己喜欢的主题，复制<code>windowsterminal</code>同名文件的内容到<code>schemes</code>，比如我选择的<a href="https://github.com/mbadolato/iTerm2-Color-Schemes/blob/master/windowsterminal/Chester.json">Chester</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"name"</span>: <span class="string">"Chester"</span>,</span><br><span class="line"> <span class="string">"black"</span>: <span class="string">"#080200"</span>,</span><br><span class="line"> <span class="string">"red"</span>: <span class="string">"#fa5e5b"</span>,</span><br><span class="line"> <span class="string">"green"</span>: <span class="string">"#16c98d"</span>,</span><br><span class="line"> <span class="string">"yellow"</span>: <span class="string">"#ffc83f"</span>,</span><br><span class="line"> <span class="string">"blue"</span>: <span class="string">"#288ad6"</span>,</span><br><span class="line"> <span class="string">"purple"</span>: <span class="string">"#d34590"</span>,</span><br><span class="line"> <span class="string">"cyan"</span>: <span class="string">"#28ddde"</span>,</span><br><span class="line"> <span class="string">"white"</span>: <span class="string">"#e7e7e7"</span>,</span><br><span class="line"> <span class="string">"brightBlack"</span>: <span class="string">"#6f6b68"</span>,</span><br><span class="line"> <span class="string">"brightRed"</span>: <span class="string">"#fa5e5b"</span>,</span><br><span class="line"> <span class="string">"brightGreen"</span>: <span class="string">"#16c98d"</span>,</span><br><span class="line"> <span class="string">"brightYellow"</span>: <span class="string">"#feef6d"</span>,</span><br><span class="line"> <span class="string">"brightBlue"</span>: <span class="string">"#278ad6"</span>,</span><br><span class="line"> <span class="string">"brightPurple"</span>: <span class="string">"#d34590"</span>,</span><br><span class="line"> <span class="string">"brightCyan"</span>: <span class="string">"#27dede"</span>,</span><br><span class="line"> <span class="string">"brightWhite"</span>: <span class="string">"#ffffff"</span>,</span><br><span class="line"> <span class="string">"background"</span>: <span class="string">"#2c3643"</span>,</span><br><span class="line"> <span class="string">"foreground"</span>: <span class="string">"#ffffff"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>把profiles中终端配置修改成对应主题名称</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> ...</span><br><span class="line"> <span class="string">"colorScheme"</span>: <span class="string">"Chester"</span></span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>最后顺带修改一下背景颜色，微调一下透明度</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"background"</span>: <span class="string">"#282c34"</span>, <span class="comment">// 比较有质感的黑色</span></span><br><span class="line"> <span class="string">"useAcrylic"</span>: <span class="literal">true</span>, </span><br><span class="line"> <span class="string">"acrylicOpacity"</span>: <span class="number">0.85</span> <span class="comment">// 0.8左右都是比较适合的</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>最后实现效果如下</p>
<p><img data-src="/2020/01/08/Windows-Terminal-Wsl-%E6%89%93%E9%80%A0%E6%9C%80%E7%BE%8E%E7%BB%88%E7%AB%AF/terminal.png" alt="效果"></p>
<p>这里用的是cat的升级版<a href="https://github.com/sharkdp/bat">bat</a>,需要在<a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10" title="Windows Linux子系统">wsl</a>下安装</p>
<h3 id="无法出现毛玻璃特效？"><a href="#无法出现毛玻璃特效？" class="headerlink" title="无法出现毛玻璃特效？"></a>无法出现毛玻璃特效？</h3><p>这可能是由于在系统设置中关闭了特效，可以打开设置->个性化->颜色->透明效果->启用打开毛玻璃特效，然后重新打开Windows Terminal就生效了</p>
<h3 id="进入后目录不是用户目录？"><a href="#进入后目录不是用户目录？" class="headerlink" title="进入后目录不是用户目录？"></a>进入后目录不是用户目录？</h3><p>可以在执行命令后面添加这些参数，相关issues可以看这里<a href="https://github.com/microsoft/terminal/issues/592">startingDirectory setting issue for wsl profile</a></p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"commandline"</span><span class="punctuation">:</span> <span class="string">"wsl.exe ~ -d Ubuntu"</span></span><br><span class="line"><span class="punctuation">}</span> </span><br></pre></td></tr></table></figure>
<h3 id="如何让wsl和windows通信？"><a href="#如何让wsl和windows通信？" class="headerlink" title="如何让wsl和windows通信？"></a>如何让wsl和windows通信？</h3><p>根据 <a href="https://docs.microsoft.com/en-us/windows/wsl/wsl2-ux-changes">官方文档</a>,在<code>/etc/resolv.conf</code>中，会储存windows主机的ip地址。</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># This file was automatically generated by WSL. To stop automatic generation of this file, add the following entry to /etc/wsl.conf:</span></span><br><span class="line"><span class="comment"># [network]</span></span><br><span class="line"><span class="comment"># generateResolvConf = false</span></span><br><span class="line">nameserver 172.20.192.1</span><br></pre></td></tr></table></figure>
<p>我们可以直接使用bash脚本提取它作为全局变量使用</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">export</span> win_host=<span class="string">"<span class="subst">$(grep -oP '(?<=nameserver )</span>\d{1,3}(?:\.\d{1,3}){3}' /etc/resolv.conf)"</span></span><br><span class="line"><span class="built_in">echo</span> <span class="variable">$win_host</span></span><br><span class="line">172.20.192.1</span><br><span class="line"></span><br><span class="line"><span class="built_in">export</span> http_proxy=<span class="string">"http://<span class="variable">${win_host}</span>:1080"</span></span><br><span class="line"><span class="built_in">export</span> https_proxy=<span class="string">"http://<span class="variable">${win_host}</span>:1080"</span></span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>Shell</category>
</categories>
<tags>
<tag>Linux</tag>
<tag>Windows Terminal</tag>
</tags>
</entry>
<entry>
<title>ajax初探</title>
<url>/2018/06/11/ajax%E5%88%9D%E6%8E%A2/</url>
<content><![CDATA[<h1 id="如何向后端请求数据？"><a href="#如何向后端请求数据？" class="headerlink" title="如何向后端请求数据？"></a>如何向后端请求数据？</h1><ul>
<li><p>form表单提交，使用method指定提交方式,action为提交的地址。</p>
</li>
<li><p>a标签点击能发请求<br>这两者都要刷新页面或者新开页面</p>
</li>
<li><p>img可以发请求，但请求的必须是图片 不需要增加到页面</p>
</li>
<li><p>script和link也可以发起请求，但link和script只能加载指定格式，但是需要加到页面</p>
</li>
</ul>
<p>之后，ie5在js中引入ActiveX对象（api），使js可以直接发起http请求<br>随后其它浏览器也跟进，取名<code>XMLHttpRequest</code><br>不到一年，谷歌推出gmail.com,这里可以说前端真正诞生了</p>
<p>ie6后来也成为了安装最多的浏览器60%,ie因此就膨胀了,随后微软拆开ie6的开发人员，只更新安全功能，让chrome也跟了上来</p>
<h2 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h2><p>Jesse James Garrett 将一下技术取名AJAX（异步的javaScript和 XML</p>
<ol>
<li>使用XMLHttpRequest发请求</li>
<li>服务器返回xml格式的字符串</li>
<li>js解析xml，并更新局部页面(现在用JSON)</li>
</ol>
<p>使用<code>XMLHttpRequest</code>的方法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">myButton.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>,<span class="function">()=></span>{</span><br><span class="line"> <span class="keyword">let</span> request = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line"> request.<span class="title function_">open</span>(<span class="string">'GET'</span>,<span class="string">'/XXX'</span>) <span class="comment">//初始化配置 请求方式忽略大小写 默认异步</span></span><br><span class="line"> request.<span class="property">onreadystatechange</span> = <span class="function">()=></span>{</span><br><span class="line"> <span class="keyword">if</span> (request.<span class="property">readyState</span> === <span class="number">4</span> && request.<span class="property">status</span> === <span class="number">200</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(request.<span class="property">responseText</span>) <span class="comment">//响应内容</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> request.<span class="title function_">send</span>() <span class="comment">//发送</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>网络响应的时间会很长，这段时间已经够javaScript执行很多任务了，所以需要使用异步</p>
<p><strong>readystate</strong></p>
<table>
<thead>
<tr>
<th align="center">值</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">0</td>
<td align="center"><code>open()</code>方法还没有被调用</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center"><code>send()</code>方法还没有被调用</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center"><code>send()</code>方法已被调用，响应头和响应状态码已经返回</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">正在下载响应体</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">请求全部完成</td>
</tr>
</tbody></table>
<p>onreadystate 要注意放在前面</p>
<p>一般不用管300状态码. 浏览器会自动处理</p>
<h2 id="解析数据"><a href="#解析数据" class="headerlink" title="解析数据"></a>解析数据</h2><p>可以使用DOM api解析xml，但是很复杂，现在已经过时了。<br>1所以用什么更好的方法更好的表示数据呢？</p>
<p>后来道格拉斯·克罗克福发明了一种轻量的资料语言<a href="https://zh.wikipedia.org/zh-hans/JSON">JSON</a></p>
<h3 id="JSON语法"><a href="#JSON语法" class="headerlink" title="JSON语法"></a>JSON语法</h3><p>JSON支持<code>object</code> <code>array</code>两种数据组织方式，值支持<code>string</code> <code>number</code> <code>object</code> <code>array</code> <code>true</code> <code>false</code> <code>null</code><br>没有<code>undefined</code></p>
<p>json没有变量，不支持引用，没有原型链</p>
<ul>
<li>string 必须具有<code>""</code><br>支持转义符<code>\\</code></li>
</ul>
<p>注意，永远返回的是字符串，只是将其解析为对象<br>解析:<code>JSON.parse(string)</code></p>
<h2 id="同源策略"><a href="#同源策略" class="headerlink" title="同源策略"></a>同源策略</h2><p>同源策略要求协议+端口+域名一模一样才允许发起AJAX请求，保证安全</p>
<p>本质是禁止一个域名的js在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止向另一个域名发送请求。</p>
<p>不是同源的网页不能使用ajax发起请求（实际上发起了，只是不能读取内容），其他都可以</p>
<p>简单规避方法就是使用CORS,服务端设置<code>Access-Control-Allow-Origin: xxx</code>响应头 表示允许xxx跨域访问</p>
<h2 id="设置header"><a href="#设置header" class="headerlink" title="设置header"></a>设置header</h2><p>必须在open()和send()之间调用。<br>send()可以为post 设置请求内容</p>
<p>getAllResponseHeader获得所有响应头</p>
<p>tcp进行分片传输，因此会先拿到先拿到最开始的状态包，就可以先判断是否需要继续接受等之后的逻辑</p>
<p>传多个变量很容易让别人不知道自己具体想传什么，这里可以采用传个对象的方式，这样就有名字了</p>
<p>设置header 接受多参数</p>
<p>析构赋值，把名字一样的赋到同名变量里</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">param = {<span class="attr">a</span>:<span class="string">'aga'</span>,<span class="attr">b</span>:<span class="string">'gag'</span>,<span class="attr">c</span>:<span class="string">'aga'</span>}</span><br><span class="line"><span class="keyword">let</span> {a,b,c} = param</span><br></pre></td></tr></table></figure>
<p>对于函数可以采用这个方式</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> (<span class="params">{a,b,c}</span>){<span class="comment">//取得参数中的abc</span></span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>还有很多方式比如对象键名为字符串，不可以调用变量，但是<code>[x]: sss</code>可以</p>
<p>自己写回调可能不同库不一样，回调函数名不统一，所以需要规范出来</p>
<p>Promise写法：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">.<span class="title function_">then</span>() <span class="comment">//第一个是成功第二个是失败</span></span><br></pre></td></tr></table></figure>
<p>具体写法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve,reject</span>){</span><br><span class="line"> xxx</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>JavaScript</category>
</categories>
<tags>
<tag>ajax</tag>
</tags>
</entry>
<entry>
<title>canvas体验</title>
<url>/2018/05/08/canvas%E4%BD%93%E9%AA%8C/</url>
<content><![CDATA[<h1 id="必要的初始化"><a href="#必要的初始化" class="headerlink" title="必要的初始化"></a>必要的初始化</h1><ol>
<li><p>canvas默认是一个inline-block元素，这通常会导致一些BUG产生，例如下方有空白，宽度不合理，建议将其显示为<code>block</code>元素</p>
</li>
<li><p>让画板覆盖全屏<br> 这里需要不能使用css为其设置样式，在css中设置的样式实际并没有改变画板内部的大小，只是将画布简单的放大。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> canvas =<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'id'</span>)</span><br><span class="line">canvas.<span class="property">width</span> = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span></span><br><span class="line">canvas.<span class="property">height</span> = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span></span><br></pre></td></tr></table></figure></li>
</ol>
<p>获得一个具有2D绘制功能的对象</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">'2d'</span>)</span><br></pre></td></tr></table></figure>
<h1 id="绘制图像"><a href="#绘制图像" class="headerlink" title="绘制图像"></a>绘制图像</h1><p>现在就可以开始绘制图像了<br>具体如何绘制可以参考官<a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">api文档</a>，官方文档什么都有。</p>
<p>绘制肯定需要鼠标键盘事件了，js监听事件非常简单</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params">e</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这里我们可以从鼠标事件中得到事件触发的相关参数，我们这里只需要clientX和clientY就可以了，它们代表鼠标点击的是当前页面窗口的位置，并不是在canvas中的位置，有时候页面会被用户改变，此时也需要让canvas自动改变</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">autoSetSize</span>(<span class="params">obj</span>) {</span><br><span class="line"> obj.<span class="property">width</span> = <span class="title function_">getPageSize</span>().<span class="property">width</span></span><br><span class="line"> obj.<span class="property">height</span> = <span class="title function_">getPageSize</span>().<span class="property">height</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onresize</span> = <span class="keyword">function</span> (<span class="params">param</span>) {</span><br><span class="line"> <span class="title function_">autoSetSize</span>(canvas)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这样就可以了,getPageSize是前面函数的封装</p>
<p>另外需要注意的是canvas默认背景是透明的，需要自己画个颜色做背景。</p>
<h1 id="移动端优化"><a href="#移动端优化" class="headerlink" title="移动端优化"></a>移动端优化</h1><h2 id="历史渊源"><a href="#历史渊源" class="headerlink" title="历史渊源"></a>历史渊源</h2><p>最早的时候手机浏览采用的是一种wap语言，也就是HTML的简化版，到了iphone3Gs，乔布斯把真正的网页搬上了手机，它们把手机模拟成一个宽度为980px的网页，进行等比缩放，用户也可以放大进行点击。</p>
<h2 id="优化"><a href="#优化" class="headerlink" title="优化"></a>优化</h2><p>但是我们的画板我们并不需要缩放，我们因此就需要禁用它。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,initial-scale=1,user-scalable=no"</span> /></span></span><br></pre></td></tr></table></figure>
<p>意思是内容宽度等于设备屏幕的物理宽度，初始比例为一，禁用缩放。<br>在移动端交互方式也不再一样，产生的是touch事件,touch事件会将每一个点的属性以数组的形式列在touch事件中。</p>
<p>但是我们如何判断其是否支持触摸？<br>在事件初始化过程中，如果设备支持此事件，事件监听会被置为<code>null</code>,而如果不具有，会为<code>undefined</code></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>.<span class="property">onclick</span>)</span><br></pre></td></tr></table></figure>
<p>除此之外，在许多手机浏览器会给页面添加一些滚动的默认效果，比如露出背景，这需要使用preventDefault阻止。</p>
]]></content>
<categories>
<category>JavaScript</category>
</categories>
</entry>
<entry>
<title>css布局</title>
<url>/2018/04/22/css%E5%B8%83%E5%B1%80/</url>
<content><![CDATA[<h1 id="左右布局"><a href="#左右布局" class="headerlink" title="左右布局"></a>左右布局</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span> <span class="attr">class</span>=<span class="string">"clearfix"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span>左边的东西<span class="tag"></<span class="name">div</span>></span><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>></span>右边的东西<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> red solid; </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span>{</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">clear</span>: both;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.left</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">49%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.right</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:right</span>;</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">49%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>效果见<a href="http://js.jirengu.com/xilocahoru/1/watch?html,css,output">jsBin</a></p>
<h1 id="左中右布局"><a href="#左中右布局" class="headerlink" title="左中右布局"></a>左中右布局</h1><p>中间加个<code>inline-block</code>的<code>div</code>并居中。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span> <span class="attr">class</span>=<span class="string">"clearfix"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span>左边的东西<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>中间的东西<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>></span>右边的东西<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> red solid; </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span>{</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">clear</span>: both;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.left</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">20%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.right</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:right</span>;</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">20%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.center</span>{</span><br><span class="line"> <span class="attribute">display</span>:inline-block;</span><br><span class="line"> <span class="attribute">margin-left</span>:auro;</span><br><span class="line"> <span class="attribute">margin-right</span>:auto;</span><br><span class="line"> <span class="attribute">vertical-align</span>: top;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>效果见<a href="http://js.jirengu.com/welotibebi/3/watch?html,css,output">jsBin</a></p>
<h1 id="水平居中"><a href="#水平居中" class="headerlink" title="水平居中"></a>水平居中</h1><ul>
<li><p>设置左右边距为auto;</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br></pre></td></tr></table></figure>
<p> 优点：简单方便<br> 缺点：无法对已float元素生效,元素必须具有固定的宽度</p>
</li>
<li><p>设置为<code>inline-block</code>并<code>text-align: center</code></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*父元素*/</span></span><br><span class="line"><span class="attribute">text-align</span>: center</span><br><span class="line"><span class="comment">/*子元素*/</span></span><br><span class="line">display: inline-block</span><br></pre></td></tr></table></figure>
<p> inline元素可以对父级元素使用<code>text-align: center</code><br> 优点：可以对float元素生效，也适用于多个块级元素需要垂直居中的情况<br> 缺点：容易出BUG，一般需要<code>vertical-align: top;</code>修复</p>
</li>
</ul>
<h1 id="垂直居中"><a href="#垂直居中" class="headerlink" title="垂直居中"></a>垂直居中</h1><ul>
<li><p>设置行高与高度相等</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line"><span class="attribute">line-height</span>: <span class="number">50px</span>;</span><br></pre></td></tr></table></figure>
<p>设置<code>padding-top</code>与<code>pdding-bottom</code>也是可行的。<br> 缺点：只适合内联与内联块级元素</p>
</li>
<li><p>设置table布局</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*父元素*/</span></span><br><span class="line"><span class="attribute">display</span>: table;</span><br><span class="line"><span class="comment">/*子元素*/</span></span><br><span class="line"><span class="attribute">display</span>: inline-block;</span><br><span class="line"><span class="attribute">vertical-align</span>: middle;</span><br></pre></td></tr></table></figure>
</li>
<li><p>position和top和transform</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*父元素*/</span></span><br><span class="line"><span class="attribute">position</span>: relative;</span><br><span class="line"><span class="comment">/*子元素*/</span></span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">0</span>,<span class="number">50%</span>);</span><br></pre></td></tr></table></figure></li>
</ul>
<h1 id="水平垂直居中"><a href="#水平垂直居中" class="headerlink" title="水平垂直居中"></a>水平垂直居中</h1><ul>
<li><p>方法1：绝对定位+margin:auto</p>
<p> div{<br> width: 200px;<br> height: 200px;<br> background: green;<br><br> position:absolute;<br> left:0;<br> top: 0;<br> bottom: 0;<br> right: 0;<br> margin: auto;<br> }</p>
</li>
<li><p>方法2：绝对定位+负margin</p>
<p> div{<br> width:200px;<br> height: 200px;<br> background:green;<br><br> position: absolute;<br> left:50%;<br> top:50%;<br> margin-left:-100px;<br> margin-top:-100px;<br> }</p>
</li>
<li><p>方法3：绝对定位+transform</p>
<p> div{<br> width: 200px;<br> height: 200px;<br> background: green;<br><br> position:absolute;<br> left:50%; /* 定位父级的50% */<br> top:50%;<br> transform: translate(-50%,-50%); /*自己的50% */<br> }</p>
</li>
<li><p>方法4：flex布局</p>
<p> .box{<br> height:600px;<br><br> display:flex;<br> justify-content:center; //子元素水平居中<br> align-items:center; //子元素垂直居中<br> /* aa只要三句话就可以实现不定宽高水平垂直居中。 */<br> }<br> .box>div{<br> background: green;<br> width: 200px;<br> height: 200px;<br> }</p>
</li>
</ul>
<h1 id="还可以使用"><a href="#还可以使用" class="headerlink" title="还可以使用"></a>还可以使用</h1><ul>
<li>flex布局，很方便</li>
</ul>
<h1 id="小技巧"><a href="#小技巧" class="headerlink" title="小技巧"></a>小技巧</h1><ul>
<li>使用<code>::before</code>和<code>::after</code>可以方便的创建新元素再给它加样式</li>
<li>可以重新设置盒模型<code>box-sizing</code>来方便的设置固定的比例的宽度等</li>
<li>可以使用伪类来选择特定状态/性质的元素，如：<code>:nth-chlid(even)</code>,选择偶数子元素</li>
</ul>
]]></content>
<categories>
<category>css</category>
</categories>
</entry>
<entry>
<title>https原理是什么?</title>
<url>/2020/08/29/https%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88/</url>
<content><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>自己初中的时候有过一段时间很好奇密码学相关的问题，当时就了解到了非对称加密，觉得很神奇，只要被公钥加密，就只有私钥才能解开，当时想，加密过程不过就是按照规则进行一些数学计算而已，怎么会不可逆呢？非对称加密是怎么做到这些的？怎么让网络变成可信的？<br>当时百度还挺可靠的，搜索到了一篇讲的很好文章，大概有了认知，可惜那篇文章找不到了；今天正好看到一个前端问题：https 原理是什么？就再学习了一次，写这篇博客记录下来。</p>
<h1 id="https-为什么出现"><a href="#https-为什么出现" class="headerlink" title="https 为什么出现?"></a>https 为什么出现?</h1><p>因为网络链路默认是不可信任的，HTTP 在整个传输过程中无法保证数据不被窥探、篡改，常见的<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB">中间人攻击</a>就是利用了这个原理，日常经常发现的网页出现莫名奇妙的新增广告，通常叫做运营商劫持，就是一种中间人攻击。</p>
<h1 id="https-如何防止中间人攻击的？"><a href="#https-如何防止中间人攻击的？" class="headerlink" title="https 如何防止中间人攻击的？"></a>https 如何防止中间人攻击的？</h1><p>https 在 TCP 传输层和 HTTP 应用层之间再加了一层 SSL/TSL(传输层安全协议)，用于对 HTTP 报文进行加密。</p>
<p>SSL/TSL 采用基于公钥的加密算法，比如最常用的<a href="https://zh.wikipedia.org/wiki/%E5%82%B3%E8%BC%B8%E5%B1%A4%E5%AE%89%E5%85%A8%E6%80%A7%E5%8D%94%E5%AE%9A">RSA 算法</a>。</p>
<p>RSA 是一种非对称加密算法，在了解非对称加密前，先了解一下对称加密，对称加密指的是在加密或者解密时使用相同的密钥。就像是为数据上一把锁，同时也要把钥匙拿给解密的人。<br>使用对称加密的过程往往是这样的：</p>
<ul>
<li>A 生成随机密钥 K</li>
<li>A 与 B 通过某种方式</li>
<li>A 密钥 K 加密明文数据</li>
<li>A 传输密文数据</li>
<li>B 使用密钥 K 解密密文</li>
<li>得到明文数据<br>对称加密的一大问题就是存在密钥交换环节，想要解密必须传输密钥，而传输密钥这个环节，往往容易泄露密钥，整个加密环节也就不安全了。</li>
</ul>
<p>非对称加密算法就解决了这个问题，密钥加密解密使用不同的密钥，避免了密钥交换环节，最著名的非对称加密算法就是 RSA 算法</p>
<h2 id="RSA-算法是怎么工作的？"><a href="#RSA-算法是怎么工作的？" class="headerlink" title="RSA 算法是怎么工作的？"></a>RSA 算法是怎么工作的？</h2><p>RSA 算法利用了数论方面的知识，详细的数学解释可以看阮一峰的博客，简单易懂（虽然自己只看了半懂 233）</p>
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html">RSA 算法原理（一) 阮一峰</a></li>
<li><a href="https://www.ruanyifeng.com/blog/2013/07/rsa_algorithm_part_two.html">RSA 算法原理（二）阮一峰</a></li>
</ul>
<p>整个过程简单概述，为</p>
<h2 id="生成"><a href="#生成" class="headerlink" title="生成"></a>生成</h2><ol>
<li>随机选择两个不相等的质数<strong>p</strong>和<strong>q</strong></li>
<li>计算<strong>p</strong>和<strong>q</strong>的乘积<strong>n</strong></li>
<li>计算<strong>n</strong>的欧拉函数 φ(n)，φ(n) = (p-1)(q-1)</li>
<li>随机选择一个整数<strong>e</strong>，条件是 1< e < φ(n)，且 e 与 φ(n) 互质</li>
<li>计算<strong>e</strong>对于 φ(n)的模反元素<strong>d</strong>。</li>
<li>将<strong>n</strong>和<strong>e</strong>封装成公钥，<strong>n</strong>和<strong>d</strong>封装成私钥。</li>
</ol>
<h2 id="加解密"><a href="#加解密" class="headerlink" title="加解密"></a>加解密</h2><ol>
<li>假设需要加密的密文为 m，m 必须是整数，且<strong>m</strong>必须小于<strong>n</strong></li>
<li>利用公钥（n,e）计算加密的密文<code>c=m^e mod n</code></li>
<li>利用私钥（n,d）解密密文 <code>m=c^d mod n</code></li>
</ol>
<p>理论上公钥也可以当作公钥，也可以当作私钥，但实际上为了方便客户端进行加密和防止破解，公钥使用的 e 往往较小，私钥的更大。</p>
<h2 id="对抗中间人攻击"><a href="#对抗中间人攻击" class="headerlink" title="对抗中间人攻击"></a>对抗中间人攻击</h2><p>只引入非对称加密算法实际上并不能阻止中间人攻击，非对称密钥加密依赖于公钥的正确性。<br>想想这样的场景:</p>
<ol>
<li>小昂给小蕾想秘密的通过网路传输些暧昧信息</li>
<li>小昂生成一对公钥和私钥，将公钥传输给小蕾</li>
<li>小蕾收到公钥，并且将信息利用公钥进行加密</li>
<li>小昂收到信息</li>
</ol>
<p>整个过程看样子很完美<br>但是这其中有一个很重大的缺陷，网络中一切数据都是可以被截获和伪造的，小蕾其实并不能确认公钥就是小昂发送的，公钥在传输中存在被掉包的可能</p>
<ol>
<li>小昂生成一对公钥和私钥，将公钥传输给小蕾</li>
<li>小艾在中途截获了传输的公钥，并替换成了自己公钥</li>
<li>小蕾利用小艾的公钥加密了信息</li>
<li>小艾利用了自己的私钥解密了小蕾的信息</li>
<li>小艾篡改了信息，并使用小昂的公钥重新加密了修改后的信息</li>
<li>小昂收到了被篡改的信息。</li>
</ol>
<p>这是个很大的问题！非对称加密并没有解决中间人攻击。</p>
<h3 id="证书机制"><a href="#证书机制" class="headerlink" title="证书机制"></a>证书机制</h3><p>证书机制利用了另一个特点，即被私钥加密的信息，可以被公钥解密，可以利用私钥对消息进行一次签名，证明自己就是私钥的拥有者。</p>
<p>证书机制是这样工作的</p>
<ol>
<li>首先由受信任的机构（CA）生成一组公钥和私钥</li>
<li>软件商（浏览器、操作系统）会将这个公钥内置在自己软件中，并信任这个公钥。</li>
<li>小昂为了自己的通信安全，证明自己就是公钥的拥有者，决定使用数字证书。</li>
<li>CA 收到小昂的申请，确认了小昂的身份。</li>
<li>CA 先生成了这个证书的基本信息<ul>
<li>使用者： 小昂</li>
<li>公钥：xxxxx</li>
<li>有效期限：xxxxx</li>
<li>公钥算法：RSA</li>
<li>证书版本：xxxx</li>
</ul>
</li>
<li>CA 利用 hash 算法计算上列信息的 hash 值，并用自己的私钥进行加密，并和上面的信息组合，成为最终的数字证书。<br>这时小昂就得到了自己的数字证书，可以证明自己时公钥的拥有者了。</li>
</ol>
<p>小昂与小蕾接下来的通信就是这样的</p>
<ol>
<li>小蕾向小昂发送请求</li>
<li>小昂出示自己的数字证书</li>
<li>小蕾对得到的证书进行验证，使用 CA 的公钥解密被加密的数字证书 hash，计算数字证书 hash 值，以保证证书未被篡改</li>
<li>小类使用数字证书的公钥和算法进行加密密文</li>
</ol>
<h3 id="使用对称密钥"><a href="#使用对称密钥" class="headerlink" title="使用对称密钥"></a>使用对称密钥</h3><p>在使用非对称密钥中，由于公钥是公开的，被私钥加密的内容实际可以被认为等同于明文，小蕾向小昂发送信息，只有小昂能够解密，但是任何持有公钥的人都能解密小昂使用私钥加密的内容。<br>并且非对称加密相比对称加密，运算复杂度要高一个数量级，如果要传输大量信息，性能消耗会很大，在这种情况下，引入对称密钥就是很有必要的了。</p>
<ul>
<li>在上文的前提下，小蕾随机生成一个密钥，并将这个密钥使用公钥加密，发送给小昂</li>
<li>小昂使用私钥解密这个私钥，并在接下来的过程中，转用这个对称加密密钥进行通信</li>
</ul>
<p>在这个过程中往往为了前向安全性，使用的是<a href="https://zh.wikipedia.org/wiki/%E8%BF%AA%E8%8F%B2-%E8%B5%AB%E7%88%BE%E6%9B%BC%E5%AF%86%E9%91%B0%E4%BA%A4%E6%8F%9B">DH 密钥交换算法</a>协商密钥，不依赖于 RSA 算法</p>
<h3 id="增强安全性"><a href="#增强安全性" class="headerlink" title="增强安全性"></a>增强安全性</h3><ul>
<li>为了防止重放攻击，SSL/TLS 还会在密文中附带时间戳</li>
<li>为了保证内容完整性，SSL/TLS 会计算内容的 hash 值并一同加密发送</li>
<li>为了防止从 https 降级成 http，https 拥有 HSTS(HTTP Strict Transport Security)，会强制客户端使用 https</li>
</ul>
]]></content>
<categories>
<category>网络协议</category>
</categories>
<tags>
<tag>https</tag>
<tag>非对称加密</tag>
</tags>
</entry>
<entry>
<title>http入门</title>
<url>/2018/03/30/http%E5%85%A5%E9%97%A8/</url>
<content><![CDATA[<h1 id="HTTP是什么？"><a href="#HTTP是什么？" class="headerlink" title="HTTP是什么？"></a>HTTP是什么？</h1><p>HTTP是HyperText Transfer Protoco的缩写，中文译作“超文本传输协议”，HTTP构建在TCP传输协议的基础上，处于应用层，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法，不过目前HTTP协议已经不仅仅只为传输HTML服务，还有其他功能，不过传输HTML仍然是最主要的。</p>
<h1 id="怎样使用HTTP"><a href="#怎样使用HTTP" class="headerlink" title="怎样使用HTTP?"></a>怎样使用HTTP?</h1><p>在浏览器输入输入以HTTP或HTTPS作为协议名的URL就可以了<br>比如：<a href="https://www.google.com.hk/search?q=URL&oq=URL">https://www.google.com.hk/search?q=URL&oq=URL</a></p>
<h2 id="什么是URL"><a href="#什么是URL" class="headerlink" title="什么是URL?"></a>什么是URL?</h2><p>URL(统一资源定位符)是URI（统一资源标识符）的子集，或者说是一种具体实现，URI的定义不太好查，我的理解是URI是为了标识某一资源使用的某种编码方法，URL是通过使用其位置的方法标识资源，URI的另一个子集URN（统一资源名）是通过给予一个唯一的编码来标识资源。</p>
<h2 id="URL的具体样子"><a href="#URL的具体样子" class="headerlink" title="URL的具体样子"></a>URL的具体样子</h2><pre><code>协议名://域名 端口 路径 ?查询参数 锚点
</code></pre>