-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
1266 lines (621 loc) · 798 KB
/
search.xml
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>派大星的日记 23/05/08 📘</title>
<link href="/posts/391be10a.html"/>
<url>/posts/391be10a.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-05-x2F-08-📔"><a href="#派大星的日记-23-x2F-05-x2F-08-📔" class="headerlink" title="派大星的日记 23/05/08 📔"></a>派大星的日记 23/05/08 📔</h1><blockquote><p>天气：这几天都是阴天嘞，天气凉爽</p></blockquote><blockquote><p>心情：较为愉悦</p></blockquote><p>挺久没写日记了，都有些对格式的淡忘了。不过还好嘞，能寻着之前的格式来，最近还好，没有什么不开心的事情~</p><p>今天是五月八号，2023年也快过去一半了，时间过得很快飞快。今年大概也是一事无成？或许是的。（<del>自问自答好拽</del>）</p><p>想想之前在22年终总结的时候放下的豪言，也没实行。（<del>我丢，好像一个都没干成</del>）</p><p>我觉得应该在接下来的时间里可以干成！一件或两件。找女朋友当然是不可能找到的。<del>所以就当看不见吧</del></p><p>驾照肯定能行，不过英语考级就不行了，没准备好嘞…不过今年上半年倒是把自己的专业学好了。可是这学期的线性代数就貌似失败了哎</p><p>不过还好，前面还能听懂，走一步看一步（<del>到时候准后悔</del>）</p><p>今天呢，把博客改了改，抄了抄一些大佬的作业，添加了个<strong>阅读进度</strong>。然后嘞把背景换成了我朋友给我发的花，很好看，但做背景似乎差了些，但看久了似乎也还好。就先用一段时间~~</p><p>后面的时间，想添加个栏目放我学习的时候一些练习demo，有时候也方便自己看一看啥的。然后更改一些不必要的和一些有问题的样式，如果后面有时间的话，可以把一些大佬的教程搬砖过来。</p><p>今天就这样嘞，下次日记等下次~~</p><blockquote><p>今日总结：添加了文章阅读进度，换了背景</p></blockquote><p style="float: right">2023年5月8日23:15:33</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>hexo博客-跳过渲染某些文件</title>
<link href="/posts/6073fc3a.html"/>
<url>/posts/6073fc3a.html</url>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>由于自己在练习HTML的时候写的一些静态网页，或者有时候存一些有趣的特效。</p><p>就想着部署在博客里，实现过程也很简单，这个文章只是简单记录下方法。</p><p>hexo有提供其不渲染指定文件或文件夹的方法<code>skip_render</code></p><p>所以我们只需要在<code>_config.yml</code>配置文件进行添加其路径即可。</p><p>下面是方法</p><h1 id="具体过程"><a href="#具体过程" class="headerlink" title="具体过程"></a>具体过程</h1><p>由于<code>skip_render</code>默认处理的路径是<code>source</code>目录下的文件，所以只需要添加路径就行。</p><p>1.单个文件夹下的全部文件：</p><p><code>skip_render: 文件夹名/*</code></p><blockquote><p>即表示为 source/demo/*</p></blockquote><p>2.单个文件夹里的指定文件：</p><p><code>skip_render: 文件夹名/xxx.html</code></p><p>3.单个文件夹下全部文件以及子目录:</p><p><code>skip_render: 文件夹名/**</code></p><p>4.多个文件夹以及各种复杂情况：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">skip_render:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'demo/*.html'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'demo/**'</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> hexo </category>
</categories>
<tags>
<tag> hexo </tag>
</tags>
</entry>
<entry>
<title>移动端开发 笔记</title>
<link href="/posts/17fc8d22.html"/>
<url>/posts/17fc8d22.html</url>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>本部分内容主要是以移动端为主，主要介绍了移动端布局的方式方法。</p><p>其实按理是写到CSS笔记里的，但寻思着CSS笔记太乱没整理来着，就另开一篇笔记来写这个内容吧。</p><p>其中用到的是新的布局方式<strong>flex</strong>布局，也叫弹性布局。</p><p>当然，这个也自然是为我复习而用，其内容不适合其他人查阅。</p><h1 id="1-移动端基础概述"><a href="#1-移动端基础概述" class="headerlink" title="1. 移动端基础概述"></a>1. 移动端基础概述</h1><p>移动端布局常用于在手机端或iPad等终端设备，因为较于PC端，其终端设备的分辨率不同，页面展示也就有所不同。故此需要进行另外的布局，以相应其移动端的布局。</p><p>PC端常见的浏览器多是360浏览器、谷歌浏览器、火狐、QQ、百度、搜狗、IE等浏览器，而移动端的浏览器大多也是基于其Webkit修改的内核，所以兼容性都是良好的。</p><p>由于其分辨率的不同展示想效果不同，所以调试方法就需要在移动端设备了，目前可使用一些浏览器的模拟手机调试功能，又或搭建本地web服务器，移动端使用局域网访问。</p><h1 id="2-视口"><a href="#2-视口" class="headerlink" title="2. 视口"></a>2. 视口</h1><p><strong>视口</strong>(<strong>viewport</strong>)就是浏览器屏幕显示页面内容的屏幕区域。视口可分为布局视口、视觉视口和理想视口。</p><h2 id="2-1-布局视口-layout-viewport"><a href="#2-1-布局视口-layout-viewport" class="headerlink" title="2.1 布局视口 (layout viewport)"></a>2.1 布局视口 (layout viewport)</h2><p>在一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题。</p><p>IOS、Android基本都将这个视口分辨率设置为980px，所以PC端的页面在手机端看上去会被缩放，其元素也看上去很小，故此需要进行拖放网页来进行查看。</p><h2 id="2-2-视觉视口-visual-viewport"><a href="#2-2-视觉视口-visual-viewport" class="headerlink" title="2.2 视觉视口 (visual viewport)"></a>2.2 视觉视口 (visual viewport)</h2><p>如同视觉二字，是用户正在看到的网站的区域，便是视觉视口。</p><p>我们可以通过缩放去操作视觉视口，但不会影响其布局视口，布局视口仍然保持其宽高。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230507152553644.png"></p><h2 id="2-3-理想视口-ideal-viewport"><a href="#2-3-理想视口-ideal-viewport" class="headerlink" title="2.3 理想视口 (ideal viewport)"></a>2.3 理想视口 (ideal viewport)</h2><p>顾名思义，为了使网站在移动端有最理想的浏览和阅读宽度而设定。</p><p>对设备来讲，理想视口是最理想的视口尺寸(<del>这好像是废话</del>)。</p><p>需要手动填写meta视口标签通知浏览器操作。</p><p>meta视口标签的主要目的：布局视口的宽度应该与理想视口一致，简单理解就是设备有多宽，布局视口就多宽。</p><p style="font-size: 12px; color: #666;">小知识：乔布斯提出的理想视口概念。</p><h2 id="2-4-meta视口标签"><a href="#2-4-meta视口标签" class="headerlink" title="2.4 meta视口标签"></a>2.4 meta视口标签</h2><p><strong>语法：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span> ></span></span><br></pre></td></tr></table></figure><p><strong>其属性解析：</strong></p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td><code>width</code></td><td>宽度设置的是viewport的宽度，可以设置device-width特殊值。</td></tr><tr><td><code>initial-scale</code></td><td>初识缩放比，大于0的数字。</td></tr><tr><td><code>maximum-scale</code></td><td>最大缩放比，大于0的数字。</td></tr><tr><td><code>minimum-scale</code></td><td>最小缩放比，大于0的数字。</td></tr><tr><td><code>user-scalable</code></td><td>用户是否可以缩放，yes或no (1或0)。</td></tr></tbody></table><p><strong>标准的viewport设置</strong>：</p><ul><li>视口宽度和设备保持一致。</li><li>视口默认缩放比1.0。</li><li>不允许用户自行缩放。</li><li>最大允许缩放比1.0。</li><li>最小允许缩放比1.0。</li></ul><h1 id="3-二倍图"><a href="#3-二倍图" class="headerlink" title="3. 二倍图"></a>3. 二倍图</h1><p>由于其设备的分辨率不同，其元素内容显示不同，因此在一些元素设置大小时需要进行放大处理。</p><h2 id="3-1-物理像素-amp-物理像素比"><a href="#3-1-物理像素-amp-物理像素比" class="headerlink" title="3.1 物理像素&物理像素比"></a>3.1 物理像素&物理像素比</h2><p>物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。</p><p>在开发的时候1px不是一定等于1个物理像素。PC端页面，1px等于1个物理像素，但是移动端就不尽相同。</p><p>一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。</p><h2 id="3-2-多倍图"><a href="#3-2-多倍图" class="headerlink" title="3.2 多倍图"></a>3.2 多倍图</h2><p>因分辨率不同，其在PC端显示的图片可能显示正常，但放其移动端设备会被放大，因此会造成图片的模糊，为了解决这样的问题，使用倍图来提高图片质量，解决在高清设备中的模糊问题。</p><p>通常使用二倍图，但由于其他设备的不同，也会存在三倍四倍的情况。</p><h2 id="3-3-二倍精灵图的做法"><a href="#3-3-二倍精灵图的做法" class="headerlink" title="3.3 二倍精灵图的做法"></a>3.3 二倍精灵图的做法</h2><ol><li>在firework里把精灵图等比例缩放为原来的一半。</li><li>之后根据大小测量坐标。</li><li><code>background-size</code>写精灵图原来的宽度的一半。</li></ol><h1 id="4-移动端开发选择"><a href="#4-移动端开发选择" class="headerlink" title="4. 移动端开发选择"></a>4. 移动端开发选择</h1><p>移动端常见的开发选择有两种，一种是另写移动端的页面、一种是写想响应式的页面，根据不同的宽度应用不同的样式效果（但制作麻烦）。</p><h2 id="4-1-CSS初始化-normalize-css"><a href="#4-1-CSS初始化-normalize-css" class="headerlink" title="4.1 CSS初始化 (normalize.css)"></a>4.1 CSS初始化 (normalize.css)</h2><p>移动端CSS初始化推荐使用</p><p>其特点：</p><ul><li>保护了有价值的默认值。</li><li>修复了浏览器的bug。</li><li>是模块化的。</li><li>拥有详细的文档。</li></ul><p>官网地址：<a href="http://necolas.github.io/normalize.css/" title="normalize.css">normalize.css</a></p><h1 id="5-移动端常见布局"><a href="#5-移动端常见布局" class="headerlink" title="5. 移动端常见布局"></a>5. 移动端常见布局</h1><p><strong>移动端布局和PC端布局：</strong></p><ol><li>单独制作移动端页面<ul><li>流失布局（百分比布局）</li><li><code>flex</code> 弹性布局</li><li><code>less</code>+<code>rem</code>+媒体查询布局</li><li>混合布局</li></ul></li><li>响应式页面兼容移动端<ul><li>媒体查询</li><li><code>bootstarp</code></li></ul></li></ol><h2 id="5-1-流式布局（百分比布局）"><a href="#5-1-流式布局（百分比布局）" class="headerlink" title="5.1 流式布局（百分比布局）"></a>5.1 流式布局（百分比布局）</h2><p>流失布局也就是百分比布局，也称非固定像素布局。</p><p>将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定的宽度限制，内容向两侧填充。</p><p>流式布局方式是移动Web开发使用比较常见的布局方式。</p><p>但因为可伸缩的问题，盒子里面的内容会因为盒子变小，且内容被挤压换行。故此引入了<code>max-width</code>和<code>min-width</code>代码，前者是表示盒子最大宽度不超过的值，后者表示盒子最小宽度不低于的值。</p>]]></content>
<categories>
<category> 笔记 </category>
</categories>
<tags>
<tag> Web </tag>
</tags>
</entry>
<entry>
<title>养花日记(意外停止)</title>
<link href="/posts/2328893b.html"/>
<url>/posts/2328893b.html</url>
<content type="html"><![CDATA[<h1 id="派大星的养花日记"><a href="#派大星的养花日记" class="headerlink" title="派大星的养花日记"></a>派大星的养花日记</h1><p>挺懒的，较上一篇文章也有了差不多17天了…<del>很勤劳</del></p><p>我的花很不幸的在4月22号晚上从阳台坠了下去，不知道是谁不小心还是咋给弄下去了。当天晚上我去浇水的时候发现花不在阳台了，还寻思着谁给我收了，想着室友睡觉便没有去询问，但那时候还是有预感可能掉下去了（当时天黑，看不清楼下便认为是被收起来了）。</p><p>第二天，早早的起床看楼下，刚好看到了花盆摔碎的的身姿与那一抹绿。确实掉了，然后呢我想着去收，抢救几株，可还是慢了一步，被保洁大爷骂骂咧咧下扫进了撮箕里了….救不了<del>大哭</del></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E5%93%88%EF%BC%8C%E8%BF%98%E8%83%BD%E7%9C%8B%E5%88%B0%E4%B8%80%E6%A0%AA%E6%AE%8B%E4%BD%99.webp" alt="还能看到些许土和一株残余"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E4%BE%9D%E7%A8%80%E8%BF%98%E8%83%BD%E7%9C%8B%E5%88%B0%E4%BA%9B%E8%AE%B8%E6%AE%8B%E7%95%99.webp" alt="它还是很绿的"></p><p>问了被谁弄下去的，但也没人承认，只能认为是不小心以至于没察觉吧。</p><p>至此，养花第一阶段以失败而告终，没见到花开，又想到曾经的朋友和我说的话，<strong>与其一开始就知道没有任何结果，不愿意看花凋落，不如不栽花，不如不开始。</strong></p><p>是的嘛，一开始我也是抱着期待的心去栽培它，满怀期待等待着花开，谁能想到外在的因素导致突然掉落呢？能说伤心吗？能诉苦吗？貌似也不能，没有人记得这一盆花，只有养花的人才会为此伤心。可惜可惜，原因在于养花人，高看了一盆花在阳台的存在感，将其放在不安全的地方，也万幸当时是在晚上，人流较少，并没有砸到人。</p><p>不过还好的就是当天有移栽了几株，只是很不幸，不知道是土壤的问题还是我当时起苗的问题，从22号移栽之后到现在已经死了几株，还有几株勉强苟活，但我也不太看好…..<del>毕竟真的蔫了吧唧的</del></p><p>在过几日吧，重新买土，重新开始。这次做好准备，以防万一。也希望盆里那几株能够坚持坚持，本来是在劳动节假期的时候就买土的，但由于有事，就耽误了嘞。<del>其实去玩去了</del></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04_23%E6%8B%8D%E6%91%84%E7%9A%84%E7%A7%BB%E6%A0%BD%E5%90%8E%E7%9A%84.webp" alt="这是4月23号移栽的，请珍惜现在的样子"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/05_06_%E8%94%AB%E4%BA%86%E5%90%A7%E5%94%A7%E7%9A%84%E8%8A%B1.webp" alt="这是今天拍的，已经蔫了吧唧的了，也死了几株"></p><p>过了的这几天，我也一直在丢水给它们，只能说是土壤的问题了，这土透水性太强了，且还因为杂草多，疏水性也有些，所以好像就导致存不住水分，花就萎了…..</p><p>当时买的土是说是种植多肉的<del>多肉不需要水的嘛？？？</del></p><p>我以为也可以种植盆栽就买了，怪我怪我….</p><p>啊，今天就写到这吧，养花日记也等我重新种的时候再敲了。五一的时候有出去玩了一转，可以写写记录记录，不过最近也有在学习<del>虽然不太认真</del>。时间过得真快，转眼半年都快过去了，五月下旬还有个比赛需要去，挺好的不需要出市外，只在主城区嘞。</p><p>到时也可以写一个比赛感想吧，比赛参加了很多次了，这还是第一次写比赛感想嘞。其次也有很多想写的，但又感觉时间不够我来糟蹋，我想挣钱，所以想要快快的学习专业技能，能快速变现。</p><p>又想来点轻松愉快的活，写写文章，看看书，写写感想….什么都想，什么都做不了。</p><p>我又想啊想，想写本书，关于我这几年看的落日与朝霞啊什么的。又想学学单片机玩玩硬件<del>毕竟每次晚上作息最晚的人关灯好容易忘记，想要个远程关灯</del>。</p><p>好想好想，不太对，写日记写着写着容易软弱了些，语气突然就变得受里受气的….枯燥。</p><p style="float: right">2023年5月6日21:40:56</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 养花日记 </tag>
</tags>
</entry>
<entry>
<title>养花日记 4</title>
<link href="/posts/333e3b5d.html"/>
<url>/posts/333e3b5d.html</url>
<content type="html"><![CDATA[<h1 id="派大星的养花日记"><a href="#派大星的养花日记" class="headerlink" title="派大星的养花日记"></a>派大星的养花日记</h1><p>又又又是一周了，今天19号，明天就20号了，日子过得真快，草也长得真茂盛。</p><p>它长得越发的膨了，第二阶段的新芽已经长得很大一叶了。每次上完课回寝室瞄一眼都能发现新的惊喜，就是它的密集程度让我很担心。</p><p>之前也说了买工具和盆来移栽些，但买了商家也一直没发货，就导致了那些后来居上的芽死了一些….<del>伤心</del></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-19_%E5%BF%AB%E9%95%BF%E5%87%BA%E6%9D%A5%E4%BA%86.webp" alt="绿绿的，养眼！"></p><p>虽然说，这密集看着也很好看，可还是个祸根，得换家咯。校园里也有些花开了，路边多是些小野菊叫什么蒲儿根，很是好看，和我的雏菊差不多。可能它也能算是雏菊吧，毕竟都是菊科嘛。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-14_%E8%BF%99%E6%98%AF%E8%92%B2%E5%84%BF%E6%A0%B9.webp" alt="是不是很好看！虽然加了点滤镜，但是真的好看，我的雏菊是白色花瓣！"></p><p>对了，还有一张拍到根部的照片，就是特别杂乱了已经，可以看到一些被挤得出来，挤得斜着长了…..可怜的家伙，都怪我））</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-19_%E5%8F%AF%E8%A7%81%E7%9A%84%E6%AD%AA%E5%85%AB%E6%89%AD%E4%B8%83.webp" alt="可见的歪八扭七"></p><p>记录完毕！</p><p style="float: right">2023年4月19日23:29:11</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 养花日记 </tag>
</tags>
</entry>
<entry>
<title>养花日记 3</title>
<link href="/posts/ad5aaefe.html"/>
<url>/posts/ad5aaefe.html</url>
<content type="html"><![CDATA[<h1 id="派大星的养花日记"><a href="#派大星的养花日记" class="headerlink" title="派大星的养花日记"></a>派大星的养花日记</h1><p>一周了，时间过得很快很快，突然发现只要自己忙碌起来，时间就很快很快，反而闲下来的时候总是胡思乱想，度日如年。</p><p>小雏菊生长的很快很凶，一周已经成长到与盆边对齐了。</p><p>然鹅它长势越发凶猛，我就越发担心后来居上的会因为太密集而被挤出来））</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-10_%E8%B6%8A%E6%9D%A5%E8%B6%8A%E7%BB%BF%E5%95%A6%EF%BC%8C%E4%B9%9F%E8%B6%8A%E6%9D%A5%E8%B6%8A%E5%AF%86%E4%BA%86.webp" alt="因为长势凶猛，所以被挤来挤去的"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-10.webp" alt="放大拍摄，很好看"></p><p>果然，在11号的时候，我发现了这样的问题了，已经有了一些芽被挤出土来，死在了角落…..</p><p>看来移植计划得提前了，需要买工具准备。也不知道移植了会不会成活，不然只能拔掉一些了~</p><p>在这段时间，室友也买了两盆种(忘了叫啥了)，之前他说让我给他买西瓜来种的，只是我觉得西瓜种植麻烦便拒绝了。</p><p>11号的时候我发现已经冒新芽了，按我的话来讲就是升级成第二层段啦。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-11.webp" alt="新芽新芽...之旅"></p><p>可以说是愈来愈好了，就是太密了….再有下次一定不再撒这么多了。当初也只认为成活率不一定高，没想到嘞。</p><p>等买的园艺工具以及土到了，就再种一盆。</p><p style="float: right">2023年4月13日22:29:11</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 养花日记 </tag>
</tags>
</entry>
<entry>
<title>养花日记 2</title>
<link href="/posts/da5d9e68.html"/>
<url>/posts/da5d9e68.html</url>
<content type="html"><![CDATA[<h1 id="派大星的养花日记"><a href="#派大星的养花日记" class="headerlink" title="派大星的养花日记"></a>派大星的养花日记</h1><p>距离上一篇也差不多快一周了，其实很想直接记录的，但总的想想还是一周一写吧。</p><p>很出乎意料，前一天早上播种，第二天下午就冒绿了，让我很惊讶于大自然的神奇！绿绿的芽弯沉的埋在土里，像翡翠的一边，像突兀的绿色小桥。<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-03_土冒新绿如拱桥.webp" alt="这个要放大仔细看嘞，在这土里好像翡翠边边" style="zoom:50%;" /></p><p>04月03日才冒的绿，04日就从土里抬起头了，冒出两片叶头。仔细数了数总有9只冒了叶头，抬起了头，其他的还在土里没出来呢。真的可爱！<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-04_%E8%8D%89%E8%8D%89%E8%8D%89.webp" alt="这个就不用放大看了，肉眼可见！"></p><p>以前和妈妈去菜地种菜也不见得又这么快的发芽，但仔细想想家里碰了水的土豆也冒芽的快嘞，很快就是释怀了。</p><p>时间呢很快就来到了06日，其实05日就已经冒许多了，但由于太忙了就忘记拍了~</p><p>可以很清楚的看到越发的多了起来，这样就才两天时间就发生了如此大的变化了，真的奇妙。</p><p>原谅我没提供好的地带给你，啊我的草）））</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/04-06_%E5%B0%8F%E8%8D%89%E5%88%9D%E9%95%BF%E6%88%90.webp" alt="2倍放大版 哎嘿"></p><p>可以预测到的，我当时播种的种子那么得多，如此未来会长得很密….</p><p>没头脑种花也没头脑… 看来得过段时间看看能不能移栽一些。不过还是很高兴，看到了神奇的存在，很想看着它出土发芽的全过程啊，也就只能看看延时摄影来解解馋，总觉得还是亲眼望着更有感觉，奈何草儿总是夜晚悄悄成长嘞。</p><p style="float: right">2023年4月06日23:19:01</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 养花日记 </tag>
</tags>
</entry>
<entry>
<title>CSS 笔记</title>
<link href="/posts/196ce872.html"/>
<url>/posts/196ce872.html</url>
<content type="html"><![CDATA[<h1 id="认识CSS"><a href="#认识CSS" class="headerlink" title="认识CSS"></a>认识CSS</h1><p>CSS又称<strong>层叠样式表</strong>，一般用于给HTMl结构文档添加样式效果，如：颜色、宽度、高度、背景等。</p><h1 id="CSS是如何运行的"><a href="#CSS是如何运行的" class="headerlink" title="CSS是如何运行的"></a>CSS是如何运行的</h1><p>当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。</p><ol><li>浏览器载入 HTML 文件（比如从网络上获取）。</li><li>将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。</li><li>接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。</li><li>浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。</li><li>上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。</li><li>网页展示在屏幕上（这一步被称为着色）。</li></ol><p>结合下面的图示更形象：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230404144817125.png"></p><h2 id="关于DOM"><a href="#关于DOM" class="headerlink" title="关于DOM"></a>关于DOM</h2><p>一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。</p><p>对于 DOM 的理解会很大程度上帮助你设计、调试和维护你的 CSS，因为 DOM 是你的 CSS 样式和文件内容的结合。当你使用浏览器 F12 调试的时候你需要操作 DOM 以查看使用了哪些规则。</p><h2 id="一个真实的DOM案例"><a href="#一个真实的DOM案例" class="headerlink" title="一个真实的DOM案例"></a>一个真实的DOM案例</h2><p>不同于很长且枯燥的案例，这里我们通过一个 HTML 片段来了解 HTML 怎么转化成 DOM</p><p>以下列 HTML 代码为例：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> Let's use:</span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>Cascading<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>Style<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>Sheets<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><p>在这个 DOM 中，<code><p></code>元素对应了父节点，它的子节点是一个 text 节点和三个对应了<code><span></code>元素的节点，<code>SPAN</code>节点同时也是他们中的 Text 节点的父节点。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">P</span><br><span class="line">├─ "Let's use:"</span><br><span class="line">├─ SPAN</span><br><span class="line">| └─ "Cascading"</span><br><span class="line">├─ SPAN</span><br><span class="line">| └─ "Style"</span><br><span class="line">└─ SPAN</span><br><span class="line"><span class="code"> └─ "Sheets"</span></span><br></pre></td></tr></table></figure><p>上图就是浏览器怎么解析之前那个 HTML 片段——它生成上图的 DOM 树形结构并将它按照如下输出到浏览器：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230404145126885.png" alt="image-20230404145126885"></p><h2 id="应用CSS到DOM"><a href="#应用CSS到DOM" class="headerlink" title="应用CSS到DOM"></a>应用CSS到DOM</h2><p>接下来让我们看看添加一些 CSS 到文件里加以渲染，同样的 HTML 代码：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> Let's use:</span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>Cascading<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>Style<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>Sheets<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><p>以下为 CSS 代码：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span> {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid black;</span><br><span class="line"> <span class="attribute">background-color</span>: lime;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>浏览器会解析 HTML 并创造一个 DOM，然后解析 CSS。可以看到唯一的选择器就是<code>span</code>元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<code><span></code>标签上，然后渲染出图像到屏幕。</p><p>现在的显示如下：</p><iframe class="sample-code-frame" title="应用 CSS 到 DOM sample" id="frame_应用_css_到_dom" width="100%" height="60" src="https://yari-demos.prod.mdn.mozit.cloud/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works/_sample_.%E5%BA%94%E7%94%A8_css_%E5%88%B0_dom.html" loading="lazy" style="box-sizing: content-box; border: 1px solid var(--border-primary); max-width: 100%; width: calc((100% - 2rem) - 2px); background: rgb(255, 255, 255); border-radius: var(--elem-radius); padding: 1rem; color: rgb(27, 27, 27); font-family: Inter, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></iframe><h1 id="CSS的用法"><a href="#CSS的用法" class="headerlink" title="CSS的用法"></a>CSS的用法</h1><p>CSS在HTML里有三种引入方式，分为内嵌式、行内式、外链式。</p><p>一般比较常用于内嵌和外链式。接下介绍各方法的使用：</p><ul><li><p><strong>内嵌式</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="comment">/* css注释 */</span></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 结构为选择器与样式 */</span></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* .box为类选择器 */</span></span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><span class="line"></span><br></pre></td></tr></table></figure><p>内嵌式在<code>head</code>标签内起一行写<code>style</code>标签，<code>style</code>标签是双标签，标签内容为样式内容。</p><p>其中<code>.box</code>为标签选择器，其含义为寻找类名叫<code>box</code>的标签使用其<code>{}</code>花括号中的样式。</p></li><li><p><strong>行内式</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</span> <span class="attr">style</span>=<span class="string">"width: 100px; height: 100px; background: pink;"</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><p>行内式在标签内部添加属性值<code>style="[样式]"</code>其中在<code>""</code>范围内的样式格式为<code>属性名: 属性值;</code>各个属性值之间需要分号隔开。</p><p>其样式内容与内嵌式例子相同，为设置宽度和高度为100像素，背景颜色为粉色。</p></li><li><p><strong>外链式</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/style.css"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><span class="line"></span><br></pre></td></tr></table></figure><p>其中<code>style.css</code>的内容为</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>外链式比较常用，代码<code> <link rel="stylesheet" href="css/style.css"></code>为引入css里的<code>style.css</code>的样式文件。</p><p>其一般项目结构为单独建立<code>image</code>文件夹存放图片素材，<code>css</code>文件夹存放样式文件，<code>js</code>文件夹存放<code>javascript</code>文件。</p><p>例图：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230404135615107.png" alt="image-20230404135615107"></p></li></ul><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>CSS样式一般用于给HTML文档设置样式效果，如颜色、字体大小、背景等样式效果。</p><p>一般开发中三种使用方法灵活运用，但常用于外链式与内嵌式。</p><p>CSS的语法格式：</p><ul><li>每个规则集（除了选择器的部分）都应该包含在成对的大括号里（<code>{}</code>）。</li><li>在每个声明里要用冒号（<code>:</code>）将属性与属性值分隔开。</li><li>在每个规则集里要用分号（<code>;</code>）将各个声明分隔开。</li></ul><h1 id="CSS基础选择器"><a href="#CSS基础选择器" class="headerlink" title="CSS基础选择器"></a>CSS基础选择器</h1><p>选择器为查找HTML文档中的标签，为其设置样式。</p><p>选择器可分为：标签选择器、类选择器、id选择器、伪类选择器。</p><h2 id="标签选择器"><a href="#标签选择器" class="headerlink" title="标签选择器"></a>标签选择器</h2><p>标签选择器的结构为：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">标签 {</span><br><span class="line"> 属性名: 属性值;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>如某css文件中：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> {</span><br><span class="line"> <span class="attribute">color</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>其含义为文档中的所有<code>p</code>标签的字体颜色为<code>pink</code>色。</p><h2 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h2><p>类选择器的结构为：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">color</span>: red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>其HTML文档结构为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/style.css"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><span class="line"></span><br></pre></td></tr></table></figure><p>其中在HTML文档中定义了一个类名叫<code>box</code>的<code>div</code>标签，其css样式的含义为查找类名叫<code>box</code>的标签，HTML文档有一个标签符合，该标签使用其样式，字体颜色为红色<code>red</code>。类选择器可重复定义与重复使用，HTML文档中可以有多个叫<code>box</code>的标签，都可以使用其样式。</p><p>类选择器可以继承，如在css中定义了一个<code>red</code>的类名和一个<code>bgColorPink</code>的类名，那我们可以这样使用：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.red</span> {</span><br><span class="line"> <span class="attribute">color</span>: red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bgColorPink</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>其文档结构为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/style.css"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"red bgColorPink"</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><span class="line"></span><br></pre></td></tr></table></figure><p>可以看到文档中的<code>div</code>标签的类名设置了两个，其用了空格隔开，标签在使用类的时候可以定义多个类，其使用也是多个类的样式，文档中的<code>div</code>使用两个类的样式。根据样式看这个标签设置了字体颜色为红色，背景颜色为粉色，宽度高度均为100像素。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230404142455623.png" alt="image-20230404142455623"></p><h2 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h2><p>id选择器结构：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#box</span> {</span><br><span class="line"> <span class="attribute">color</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>其HTML文档结构为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/style.css"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">id</span>=<span class="string">"box"</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><span class="line"></span><br></pre></td></tr></table></figure><p>其功能和类选择器相似，不同之处为类选择器可以重复使用，id选择器只能唯一，也就是说HTML文档中只能有一个<code>id</code>为<code>box</code>的标签。</p><h2 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h2><p>可以查找拥有特定元素属性的元素标签使用其样式。</p><p>CSS结构：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[id]</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>HTML结构：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/style.css"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">id</span>=<span class="string">"box"</span>></span>1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>2<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><span class="line"></span><br></pre></td></tr></table></figure><p>其含义为查找具有<code>id</code>属性的<code>div</code>元素标签。故此第一个<code>box</code>使用其样式。</p><h2 id="多元素选择器"><a href="#多元素选择器" class="headerlink" title="多元素选择器"></a>多元素选择器</h2><p>可以选择多个元素标签并为它们添加统一的样式效果，将不同的选择器用逗号隔开：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span>, <span class="selector-tag">li</span>, <span class="selector-tag">h1</span> {</span><br><span class="line"> <span class="attribute">color</span>: red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>其中的选择器均可以使用标签、类、id选择器。</p><h2 id="选择器的权重"><a href="#选择器的权重" class="headerlink" title="选择器的权重"></a>选择器的权重</h2><p>在页面中使用 CSS 选择器选中元素时，经常都是一个元素同时被多个选择器选中。如果两个选择器设置的样式不一致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样元素到底要应用那个样式呢？CSS 中会默认使用权重较大的样式，权重又是如何计算的呢？</p><h3 id="权重的计算"><a href="#权重的计算" class="headerlink" title="权重的计算"></a>权重的计算</h3><p>不同的选择器有不同的权重值：</p><ul><li>!important：优先级最高 但不能提升继承的优先级。</li><li>行内样式：1000</li><li>ID：100</li><li>类、伪类、属性：10</li><li>元素、伪元素：1</li><li>继承：0</li></ul><p>当多个选择器应用于同一元素时，它们之间将按照上述规则进行比较</p><p>假如权重相同，则选择最后的样式。</p><p>例如：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> <span class="selector-tag">h1</span> {</span><br><span class="line"> <span class="attribute">color</span>: red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h1</span> {</span><br><span class="line"> <span class="attribute">color</span>: blue;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>在上面这个例子中，<code>h1</code> 元素将应用红色颜色，因为 <code>body h1</code> 的权重值为 <code>101</code>（100 + 1），而 <code>h1</code> 的权重值为 <code>1</code>。</p><h2 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h2><p>根据HTML标签的嵌套关系， 选择父元素后代中的元素。</p><p>语法：父代选择器 后代选择器 {css}</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">div</span> <span class="selector-tag">p</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>0<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>1<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>2<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>3<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <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><span class="line"></span><br></pre></td></tr></table></figure><p>其中，<code>div</code>后面的<code>p</code>都会应用到样式。</p><h3 id="子代选择器"><a href="#子代选择器" class="headerlink" title="子代选择器"></a>子代选择器</h3><p>根据HTML标签的嵌套关系，选择父元素的子代元素。</p><p>语法：父选择器>子选择器 {css}</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">div</span>><span class="selector-tag">p</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>太好了我是粉色的<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">em</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>我好像不能变成粉色哎<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">em</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>太好了我也是粉色的<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <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><p>如此只会根据<code>div</code>下面的<code>p</code>元素应用样式，但由于18行的<code>p</code>是<code>em</code>子元素，所以不能被应用样式。</p><h3 id="并集选择器"><a href="#并集选择器" class="headerlink" title="并集选择器"></a>并集选择器</h3><p>同时选择多组标签设置样式。</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>,</span><br><span class="line"><span class="selector-tag">p</span> {</span><br><span class="line"> <span class="attribute">color</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="并集选择器-1"><a href="#并集选择器-1" class="headerlink" title="并集选择器"></a>并集选择器</h3><p>选择多个选择器选中的元素。</p><p>如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 如果要选择第二个p标签，可以使用交集 */</span></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">p</span><span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"box"</span>></span>我是box的p<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>我没有类名哎<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span>我是有box的div<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><h3 id="结构伪类选择器"><a href="#结构伪类选择器" class="headerlink" title="结构伪类选择器"></a>结构伪类选择器</h3><p>能在HTML中快速定位元素，常用于查找某个父选择器下的子元素。</p><p>例如：</p><table><thead><tr><th>选择器</th><th>说明</th></tr></thead><tbody><tr><td><code>E:first-child {}</code></td><td>选择父元素下排序后的第一个E元素</td></tr><tr><td><code>E:last-child {}</code></td><td>选择父元素下排序后的最后一个E元素</td></tr><tr><td><code>E:nth-child(n) {}</code></td><td>选择父元素下排序后的第n个E元素</td></tr><tr><td><code>E:nth-last-child(n) {}</code></td><td>选择父元素下倒数第n个E元素</td></tr><tr><td><code>E:nth-of-type(n) {}</code></td><td>选择父元素下的E元素，先寻找再排序</td></tr></tbody></table><p>n可以为公式，常见公式如下：</p><table><thead><tr><th align="center">功能</th><th align="center">公式</th></tr></thead><tbody><tr><td align="center">偶数</td><td align="center">2n、even</td></tr><tr><td align="center">奇数</td><td align="center">2n+1、2n-1、odd</td></tr><tr><td align="center">找到前五个</td><td align="center">-n+5</td></tr><tr><td align="center">找到从第五个往后</td><td align="center">n+5</td></tr></tbody></table><p>注意：不带类型<code>type</code>的选择器会进行排序序号，先排序再寻找。</p><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">section</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>一<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</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>三<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</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><p>当<code>nth-child()</code>进行排序序号，<code>p</code>标签序号就会为<code>1</code>，后面的标签往后继续排序，当排序完成后，开始寻找序号为<code>1</code>的<code>div</code>标签。</p><p>因为<code>1</code>为<code>p</code>标签所以没有匹配到，样式没生效。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230423214306915.png"></p><p>而<code>nth-of-type</code>会先寻找到指定元素在排序。</p><h3 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h3><p>用伪元素可在标签元素左右插入内容，且不需要HTML标签，简化HTML结构。</p><table><thead><tr><th>伪元素</th><th>作用</th></tr></thead><tbody><tr><td><code>::before</code></td><td>在父元素内容的最前添加一个内容</td></tr><tr><td><code>::after</code></td><td>在父元素内容的最后添加一个内容</td></tr></tbody></table><p>伪元素需要设置<code>content</code>属性才生效。</p><p>伪元素默认是行内元素。</p><h1 id="CSS常记样式"><a href="#CSS常记样式" class="headerlink" title="CSS常记样式"></a>CSS常记样式</h1><h2 id="字体样式-font-family"><a href="#字体样式-font-family" class="headerlink" title="字体样式 font-family"></a>字体样式 font-family</h2><p>选择元素的<strong>字体</strong>，常见的字体系列有非衬线字体（<strong>sans-serif</strong>）、衬线字体（<strong>serif</strong>）、等宽字体（<strong>monospace</strong>）。</p><p><code>font-family</code>可以设置多个值，可以为字体，也可为字体系列。其取用的规则为当用户计算机本地有安装此字体，则使用，如没有则往下取值，直至适配。</p><p>例如：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">"Microsoft YaHei"</span>, 黑体, 宋体, serif;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>如果字体名称中存在多个单词，推荐使用引号包裹。</p><p>最后一项字体系列不需要引号包裹。</p><h2 id="字体样式-font复合写法"><a href="#字体样式-font复合写法" class="headerlink" title="字体样式 font复合写法"></a>字体样式 font复合写法</h2><p>利用<code>font</code>属性将多个属性一并写上。</p><p>取值格式：<code>font: style weight size family</code></p><p>只能省略前两个的值，省略了即相当于设置了默认值。如果需要同时设置单独和连写形式，要么单独的样式写在连写下面，要么写在连写里面。</p><p>例如：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">font</span>: </span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">p</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">font</span>: italic <span class="number">700</span> <span class="number">12px</span> serif;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">p</span>></span>这里是测试字体样式的<span class="tag"></<span class="name">p</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><p>图例：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230406211218911.png"></p><h2 id="文本样式-text-align"><a href="#文本样式-text-align" class="headerlink" title="文本样式 text-align"></a>文本样式 text-align</h2><p><code>text-align</code>可以作用于<code>span</code>、<code>a</code>、<code>input</code>、<code>img</code>标签，需设置在父元素作用于子元素。</p><h2 id="文本样式-text-decoration"><a href="#文本样式-text-decoration" class="headerlink" title="文本样式 text-decoration"></a>文本样式 text-decoration</h2><p>用于修改文本样式，如添加下划线或去除<code>a</code>标签的下划线。</p><p>属性值：</p><table><thead><tr><th align="center">属性值</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">underline</td><td align="center">下划线</td></tr><tr><td align="center">line-through</td><td align="center">删除线</td></tr><tr><td align="center">overline</td><td align="center">上划线</td></tr><tr><td align="center">none</td><td align="center">无装饰线</td></tr></tbody></table><h2 id="文本样式-line-height"><a href="#文本样式-line-height" class="headerlink" title="文本样式 line-height"></a>文本样式 line-height</h2><p>修改文本段落之间的行高。</p><p>取值可为像素，如单写数字则为倍数，例：<code>line-height: 1.5;</code></p><p>行高可用于<code>font</code>的复合写法，如：<code>font: style weight size/line-height family;</code></p><p>行高可用于垂直居中，值与父元素高度时则垂直居中。</p><h2 id="背景-background"><a href="#背景-background" class="headerlink" title="背景 background"></a>背景 background</h2><p>设置背景图片可使用<code>background-image</code>。</p><p>设置背景平铺可使用<code>background-repeat</code>，其属性值有：</p><table><thead><tr><th align="center">属性值</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">repeat</td><td align="center">水平和垂直方向都平铺</td></tr><tr><td align="center">no-repeat</td><td align="center">不平铺</td></tr><tr><td align="center">repeat-x</td><td align="center">沿着水平方向平铺</td></tr><tr><td align="center">repeat-y</td><td align="center">沿着垂直方向平铺</td></tr></tbody></table><p>设置背景位置可使用<code>background-position</code>，其属性值有：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230409170159716.png" alt="image-20230409170159716"></p><h3 id="背景属性的连写形式"><a href="#背景属性的连写形式" class="headerlink" title="背景属性的连写形式"></a>背景属性的连写形式</h3><p>顺序：<code>background: color image repeat position/size;</code></p><p>可以按照需求省略。</p><h3 id="background-size-属性"><a href="#background-size-属性" class="headerlink" title="background-size 属性"></a>background-size 属性</h3><p>设置背景图的大小。</p><p>语法：<code>background-size: 宽度 高度;</code></p><p><strong>其常见的属性值：</strong></p><table><thead><tr><th align="center">取值</th><th align="center">场景</th></tr></thead><tbody><tr><td align="center">数字+px</td><td align="center">简单方便。</td></tr><tr><td align="center">百分比</td><td align="center">相对当前盒子自身的宽高百分比。</td></tr><tr><td align="center">contain</td><td align="center">包含，将背景图片等比例缩放，直到不会超出盒子的最大；如果和盒子的宽或高尺寸相同，即另一个方向停止缩放。</td></tr><tr><td align="center">cover</td><td align="center">覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白；要保证宽或高和此盒子相同，不然图片显示不全。</td></tr></tbody></table><h3 id="精灵图"><a href="#精灵图" class="headerlink" title="精灵图"></a>精灵图</h3><p>可以将项目中的多张小图片合并成一张大图片，这张大图片叫做精灵图。这样做可以减少服务器发送次数，减轻服务器的压力，提高加载速度。</p><p>利用<code>background-position</code>属性设置背景图片的位置，取值可为正负数。</p><h2 id="边框-border"><a href="#边框-border" class="headerlink" title="边框 border"></a>边框 border</h2><p>为元素添加边框。</p><p>属性值：单个取值的连写，取值之间以空格隔开。</p><ul><li><code>border: 10px solid red;</code></li></ul><p>边框样式可设置实线(<strong>solid</strong>)、虚线(<strong>dashed</strong>)、点线(<strong>dotted</strong>)。</p><h1 id="CSS继承"><a href="#CSS继承" class="headerlink" title="CSS继承"></a>CSS继承</h1><p>能影响文字的样式都基本能继承给后代元素，但超链接<code>a</code>与<code>h</code>标签不能被父元素的样式继承。</p><h1 id="CSS层叠性"><a href="#CSS层叠性" class="headerlink" title="CSS层叠性"></a>CSS层叠性</h1><p>给同一个标签设置相同的样式，会被层叠覆盖，最终写在后面的样式会生效。</p><p>给同一个标签设置不同的样式，会被层叠叠加，共同作用于标签上。</p><h1 id="CSS初始化"><a href="#CSS初始化" class="headerlink" title="CSS初始化"></a>CSS初始化</h1><p>在开发网页时，经常会将一些元素自带的样式设置为方便开发的样式，例如把<code>a</code>标签的下划线以及字体颜色设置为其他，<code>li</code>标签左侧圆点设置为清除等等样式。故此需要以需求设置初始化加载样式，以方便开发网页。</p><p>例如：</p><p><strong>照顾低版本浏览器，如果图片外面包含了链接，则会有边框的问题，取消图片底侧有空白缝隙的问题：</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> {</span><br><span class="line"> <span class="comment">/* 清除边框 */</span></span><br><span class="line"> <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="comment">/* 清除缝隙 */</span></span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>清除<code>li</code>标签的左侧圆点：</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span> {</span><br><span class="line"> <span class="attribute">list-style</span>: none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>又比如，在网页开发时需要设置指定的字体，那么在设置初始化的时候可以为其设置，但由于编码问题导致的中文不兼容，在使用中文字体例如宋体、黑体等中文字体时，就需要用<code>Unicode</code>编码字体来表示其中文字体。</p><p>如：黑体<code>\9ED1\4F53</code></p><h1 id="盒子模型的问题"><a href="#盒子模型的问题" class="headerlink" title="盒子模型的问题"></a>盒子模型的问题</h1><h2 id="盒子被撑开问题"><a href="#盒子被撑开问题" class="headerlink" title="盒子被撑开问题"></a>盒子被撑开问题</h2><p>当定义了一个固定宽高的盒子，设置了边框(<strong>border</strong>)或者内边距(<strong>padding</strong>)的时候，需要计算减掉其边框与内边距的大小。否则盒子宽高将被撑开。</p><p>可以利用<code>box-sizing: border-box;</code>实现自动计算多余大小，在内容中减去。</p><h2 id="外边距塌陷现象"><a href="#外边距塌陷现象" class="headerlink" title="外边距塌陷现象"></a>外边距塌陷现象</h2><p><strong>合并问题</strong></p><p>当两个块级元素处于垂直排列时，上下的<code>margin</code>会合并。且两者的距离为<code>margin</code>的最大值。</p><p>解决方法：只给其中一个盒子设置即可。</p><p><strong>塌陷问题</strong></p><p>当互相嵌套的两个元素，给子代元素设置外边距会造成塌陷问题。</p><p>例如下面的情况，父元素是天蓝色大盒子，子元素是粉色小盒子。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.father</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.son</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"father"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"son"</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></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><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230411215157137.png" alt="" />当我给小粉添加上或左外边距时就变成下面这样：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.son</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230411215301334.png"></p><p>小粉并没有像想象中被推开，而是带着父元素一起移动。</p><p>这样的问题我们称为塌陷问题。</p><p><strong>解决方法：</strong></p><ol><li>给父元素设置<code>border-top</code>或者<code>padding-top</code>（分隔开父子元素）。</li><li>给父元素设置<code>overflow: hidden</code>，这个方法比较完美。</li><li>转换为行内块元素。</li><li>设置浮动。</li></ol><h2 id="行内标签内外边距问题"><a href="#行内标签内外边距问题" class="headerlink" title="行内标签内外边距问题"></a>行内标签内外边距问题</h2><p>通过<code>margin</code>和<code>padding</code>设置行内标签的的垂直位置是无效生效的。</p><p>例如<code>margin-top</code>、<code>margin-bottom</code>、<code>padding-top</code>、<code>padding-bottom</code>。</p><h1 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h1><p>我们在设置两个块级元素在同一行时，可能会想到将块级元素设置为<code>inline-block</code>，当设置时，我们会发现在两个块级元素之间会遗落一个空格，如下：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.father</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.son</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"father"</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">"son"</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></pre></td></tr></table></figure><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230412142702582.png"></p><p>这是因为在代码23~24行之间两个块级元素进行了换行，所以在变成<code>inline-block</code>或`时，浏览器会将换行渲染成空格。如果要避免需要将换行删除，共同一行，但这样代码可读性差，所以最好的方法就是用浮动。</p><p><strong>浮动的特点：</strong></p><ul><li><p>当元素设置了浮动，那么它会脱离标准流，在标准流中不再占用位置。</p></li><li><p>浮动元素比标准流元素高，它会覆盖标准流中的元素。</p></li><li><p>浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。</p></li></ul><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.boxA</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.boxB</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.boxC</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: green;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"boxA"</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 class="attr">class</span>=<span class="string">"boxB"</span>></span>B<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">"boxC"</span>></span>C<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></pre></td></tr></table></figure><p>在上面的代码中显示了三个盒子，依次小到大以列排序。<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230412144358461.png"></p><p>当我给B盒子添加了浮动时，那么它会脱离标准流，即情况会是B盒子浮动，C盒子会跑道B盒子位置且被B盒子覆盖，如图：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230412144601653.png"></p><p>那么浮动找浮动是怎么一回事呢？例如我们给C盒子添加浮动，那么C盒子也会脱离标准流浮动，且浮动位置在上一个浮动元素的左右。例如：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230412144849168.png"></p><h2 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h2><p>有时候设置元素的宽高我们通常为了方便添加新内容，会不给高度，那么这时如果给子元素设置了浮动，父元素会因为子元素的浮动导致父元素的高度为零。这时候我们就需要清除浮动带来的影响。</p><p>常见的清除浮动的方法有三种：</p><h3 id="第一种-额外标签法："><a href="#第一种-额外标签法：" class="headerlink" title="第一种 额外标签法："></a><strong>第一种</strong> 额外标签法：</h3><p>在父元素内容的最后添加一个块级元素，再给添加的块级元素添加<code>clear: both;</code>。</p><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.bigBox</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">400px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="comment">/* height: 400px; */</span></span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.bigBox</span> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"bigBox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</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">"box"</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></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><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230413215629337.png"></p><p>可以看到代码中设置一个没有高度的大盒子，其放入两个小盒子，这时因为 小盒子设置了左浮动效果所以脱离标准流，导致了大盒子没有了高度(1.6为边框高度)。</p><p>那么当我们在给浮动元素的最后一处添加一个标签，且在标签样式设置<code>clear: both;</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.bigBox</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">400px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="comment">/* height: 400px; */</span></span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.bigBox</span> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.clear</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">clear</span>: both;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"bigBox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</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">"box"</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">"clear"</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></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><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230413215842432.png"></p><p>这时我们可以看到父元素有了高度，这个方法需添加的标签为块级元素。</p><h3 id="第二种-单伪元素清除法"><a href="#第二种-单伪元素清除法" class="headerlink" title="第二种 单伪元素清除法"></a>第二种 单伪元素清除法</h3><p>和额外标签方法类似，同样是使用标签来隔断，但用伪元素来代替额外的标签。</p><p><strong>基本写法：</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><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></pre></td></tr></table></figure><p><strong>补充写法：</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><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 class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">visibility</span>: hidden;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>将需要清除浮动的标签使用即可。</p><h3 id="第三种-双伪元素清除法"><a href="#第三种-双伪元素清除法" class="headerlink" title="第三种 双伪元素清除法"></a>第三种 双伪元素清除法</h3><p>和单伪元素类似，只不过增加了<code>before</code>。</p><p><strong>基本写法：</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearFix</span><span class="selector-pseudo">::after</span>,</span><br><span class="line"><span class="selector-class">.clearFix</span><span class="selector-pseudo">::before</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>: table;</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">clear</span>: both;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>这个方法简单，比单伪元素的写法简洁好记。</p><p><code>before</code>的作用是用于外边距塌陷的问题。</p><h3 id="第四种-overflow方法"><a href="#第四种-overflow方法" class="headerlink" title="第四种 overflow方法"></a>第四种 overflow方法</h3><p>直接给需要清除浮动的元素设置<code>overflow: hidden;</code></p><p>这个方法方便，但会导致盒子里的内容超出时被隐藏。</p><h1 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h1><p>定位可以使元素层级变成最高并且脱离标准流，直接页面定位。</p><p><strong>定位的方式：</strong></p><p>设置定位方式</p><p>属性名：<code>position</code></p><p>常见的属性值：</p><table><thead><tr><th align="center">定位方式</th><th align="center">属性值</th></tr></thead><tbody><tr><td align="center">静态定位</td><td align="center">static</td></tr><tr><td align="center">相对定位</td><td align="center">relative</td></tr><tr><td align="center">绝对定位</td><td align="center">absolute</td></tr><tr><td align="center">固定定位</td><td align="center">fixed</td></tr></tbody></table><p>当确定了定位方式，就可设置偏移值来设置元素的位置，</p><p>偏移值设置分为两个方向，水平和垂直方向各选一个。</p><p>例如要设置距离左边的10px：<code>left: 10px;</code>，数值可以为负，则是为反方向。</p><p>常见属性：<code>left</code>、<code>right</code>、<code>top</code>、<code>bottom</code>。</p><p>如果<code>left</code>和<code>right</code>共同存在则以<code>left</code>为准，垂直也一样为<code>top</code>为准。</p><p>下面将逐一介绍<code>position</code>的定位方式的使用:</p><h2 id="相对定位-relative"><a href="#相对定位-relative" class="headerlink" title="相对定位 relative"></a>相对定位 relative</h2><p>相对定位是对于自身元素对于浏览器窗口的位置，并且不改变元素自身的显示模式。对于相对定位的元素，会保留在标准流的位置。</p><h2 id="绝对定位-absolute"><a href="#绝对定位-absolute" class="headerlink" title="绝对定位 absolute"></a>绝对定位 absolute</h2><p>绝对定位先查找有定位的父级以上的元素并以其为参照物定位；如果没找到具有定位的父级以上的元素，则按照浏览器窗口定位。</p><p>绝对定位会脱离标准流，不在标准流保留位置，并且会改变元素的显示模式，变成行内块元素。</p><p>当使用了绝对定位的盒子就不能使用<code>margin: 0 auto;</code>来居中。</p><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.left</span>,</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.right</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.left</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.right</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">right</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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">"right"</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></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><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230417165245801.png"></p><h3 id="案例-子绝父相水平居中"><a href="#案例-子绝父相水平居中" class="headerlink" title="案例 子绝父相水平居中"></a>案例 子绝父相水平居中</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-left</span>: -<span class="number">150px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-top</span>: -<span class="number">150px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><h3 id="案例-位移居中"><a href="#案例-位移居中" class="headerlink" title="案例 位移居中"></a>案例 位移居中</h3><p>解决上一案例的问题，当盒子大小改变，则定位偏移值也需要更改。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><h2 id="固定定位-fixed"><a href="#固定定位-fixed" class="headerlink" title="固定定位 fixed"></a>固定定位 fixed</h2><p>相对于浏览器进行定位移动。</p><p>例如一些网页里的返回顶部或者导航栏固定到某个位置。</p><p>固定定位脱标，不保留位置。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: fixed;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">right</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><h1 id="元素层级关系"><a href="#元素层级关系" class="headerlink" title="元素层级关系"></a>元素层级关系</h1><p>文档中的层级关系为：标准流 < 浮动 < 定位。</p><p>定位中的层级关系相同，且层级顺序为书写顺序。</p><p><code>z-index</code>可以设置将元素的层级权重，属性值位数字，数字越大层级越大，定位元素默认层级为0。此属性只可配合定位生效。</p><h1 id="装饰样式"><a href="#装饰样式" class="headerlink" title="装饰样式"></a>装饰样式</h1><h2 id="vertical-align-属性"><a href="#vertical-align-属性" class="headerlink" title="vertical-align 属性"></a>vertical-align 属性</h2><p>用于更改元素的基线对齐方式。</p><p><strong>因为浏览器遇到行内和行内块元素会当做文字处理，默认文字是按基线对齐，所以会导致位置差异。</strong></p><p><strong>常见的属性值：</strong></p><table><thead><tr><th align="center">属性值</th><th align="center">效果</th></tr></thead><tbody><tr><td align="center">baseline</td><td align="center">默认，基线对齐</td></tr><tr><td align="center">top</td><td align="center">顶部对齐</td></tr><tr><td align="center">middle</td><td align="center">中部对齐</td></tr><tr><td align="center">bottom</td><td align="center">底部对齐</td></tr></tbody></table><p>这个属性可以配合行高<code>line-hight</code>来实现图片垂直居中。</p><h2 id="cursor-属性"><a href="#cursor-属性" class="headerlink" title="cursor 属性"></a>cursor 属性</h2><p>可以更改鼠标光标在元素上显示的样式。</p><p> <strong>常见的属性值：</strong></p><table><thead><tr><th align="center">属性值</th><th align="center">效果</th></tr></thead><tbody><tr><td align="center">default</td><td align="center">默认值，通常是箭头</td></tr><tr><td align="center">pointer</td><td align="center">小手效果，提示用户可以点击</td></tr><tr><td align="center">text</td><td align="center">工字型，提示用户可以选择文字</td></tr><tr><td align="center">move</td><td align="center">十字光标，提示用户可移动</td></tr></tbody></table><h2 id="overflow-属性"><a href="#overflow-属性" class="headerlink" title="overflow 属性"></a>overflow 属性</h2><p>可以实现元素内容的可视状态。</p><p><strong>常见属性值：</strong></p><table><thead><tr><th>属性值</th><th>效果</th></tr></thead><tbody><tr><td>visible</td><td>默认值，溢出部分可见</td></tr><tr><td>hidden</td><td>溢出部分不可见</td></tr><tr><td>scroll</td><td>无论是否溢出，都显示滚动条</td></tr><tr><td>auto</td><td>根据是否溢出，自动显示或隐藏滚动条</td></tr></tbody></table><h2 id="元素本身隐藏"><a href="#元素本身隐藏" class="headerlink" title="元素本身隐藏"></a>元素本身隐藏</h2><p>使某些元素不可见。</p><p>常见属性：<code>display: none;</code>、<code>visibility: hidden</code>。</p><p><code>visibility</code>会使元素保留位置，但元素隐藏。</p><p><code>display: none</code>会使元素完全隐藏，不占位。</p><p><code>visibility</code>常见属性值：</p><table><thead><tr><th>属性值</th><th>效果</th></tr></thead><tbody><tr><td>visible</td><td>元素框可见</td></tr><tr><td>hidden</td><td>元素框不可见，但仍然影响常规布局</td></tr><tr><td>collapse</td><td>对于<code>table</code>将会隐藏其指定行列，且不占用空间，但对于其他元素将视为与<code>hidden</code>相同。</td></tr></tbody></table><h2 id="opacity-属性"><a href="#opacity-属性" class="headerlink" title="opacity 属性"></a>opacity 属性</h2><p>可以改变元素自身以及内容(包括子元素)的透明度。</p><p>属性值为0`1之间的数字，0表示完全透明，1表示完全不透明。</p><h1 id="盒子阴影"><a href="#盒子阴影" class="headerlink" title="盒子阴影"></a>盒子阴影</h1><p>给盒子添加阴影效果。</p><p>属性名：<code>box-shadow</code></p><p><strong>取值：</strong></p><table><thead><tr><th>参数</th><th>作用</th></tr></thead><tbody><tr><td><code>h-shadow</code></td><td>必须，水平偏移量，允许负值。</td></tr><tr><td><code>v-shadow</code></td><td>必须，垂直偏移量，允许负值。</td></tr><tr><td><code>blur</code></td><td>可选，模糊度。</td></tr><tr><td><code>spread</code></td><td>可选，阴影扩大。</td></tr><tr><td><code>color</code></td><td>可选，阴影颜色。</td></tr><tr><td><code>inset</code></td><td>可选，将阴影改为内部阴影。</td></tr></tbody></table><p><strong>写法：</strong></p><p><code>box-shadow: 5px 10px 20px 10px red;</code></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230418120339816.png"></p><h1 id="过渡动画效果"><a href="#过渡动画效果" class="headerlink" title="过渡动画效果"></a>过渡动画效果</h1><p>让元素的样式产生过渡效果，一般配合<code>hover</code>使用，增强网页交互感。</p><p>属性名：<code>transition</code></p><p><strong>常见取值：</strong></p><table><thead><tr><th>参数</th><th>取值</th></tr></thead><tbody><tr><td>过渡的属性</td><td><code>all</code>: 所有能过渡的属性都过渡、具体属性名如:<code>width</code>则只有<code>width</code>过渡。</td></tr><tr><td>过渡的时长</td><td>数字+ s （秒）</td></tr></tbody></table><p><strong>注意事项：</strong></p><ol><li>过渡需要：默认状态和<code>hover</code>状态样式不同，才能有过渡效果。</li><li><code>transition</code>属性给需要过渡的元素本身加。</li><li><code>transition</code>属性设置在不同状态中，效果不同。<ol><li>给默认状态设置，鼠标移出移入都有过渡效果。</li><li>给<code>hover</code>状态设置，鼠标移入有过渡效果，移出没有。</li></ol></li></ol><p>例：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">10%</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>: box-shadow <span class="number">2s</span>, width <span class="number">2s</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">box-shadow</span>: <span class="number">5px</span> <span class="number">10px</span> <span class="number">20px</span> <span class="number">10px</span> red;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><p>如果<code>transition</code>设置到元素自身就为移入移出都为过渡效果。</p><p>若是给<code>hover</code>添加，则只有移入有过渡效果。</p><p>以上案例设置的是元素自身，并且阴影和宽度发生过渡变化。</p><h1 id="CSS3-滤镜效果"><a href="#CSS3-滤镜效果" class="headerlink" title="CSS3 滤镜效果"></a>CSS3 滤镜效果</h1><p><code>filter</code>将其模糊或颜色偏移等图形效果应用于元素。</p><p>语法: <code>filter: 函数();</code></p><p>例如：<code>filter: blur(5px);</code> blur模糊处理 数值越大越模糊。</p><p><code>filter</code>有许多属性值，具体可查看手册。</p><h1 id="CSS3-calc函数"><a href="#CSS3-calc函数" class="headerlink" title="CSS3 calc函数"></a>CSS3 calc函数</h1><p>可以在声明CSS属性值的时候执行一些计算。</p><p><code>width: calc(100% - 30px);</code>可以实现比父元素小30px。</p><p>可以进行加减乘除等四则运算。</p><h1 id="transform-2D转换效果"><a href="#transform-2D转换效果" class="headerlink" title="transform 2D转换效果"></a>transform 2D转换效果</h1><p><code>transform</code>是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。</p><p>2D转换是改变标签在二维平面坐标系的位置。</p><h2 id="translate-位移效果"><a href="#translate-位移效果" class="headerlink" title="translate 位移效果"></a>translate 位移效果</h2><p>实现元素在页面的x/y轴移动。</p><p>语法格式：<code>transform: translate(x, y);</code></p><p>或者分开写：<code>transform: translateX(n);</code> <code>transform: translateY(n);</code></p><p><code>translate</code>的特点不会影响到其他元素的位置，且保留位置。但对于行内元素不生效。</p><p><code>translate</code>的值可以为百分比，其会根据元素自身大小进行移动。</p><p>配合定位使用<code>translate</code>可以设置为<code>50%</code>的值变成居中效果。</p><br><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>)<span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>: all <span class="number">1s</span> ease;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">30px</span>, <span class="number">30px</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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">"box"</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><h2 id="rotate-旋转效果"><a href="#rotate-旋转效果" class="headerlink" title="rotate 旋转效果"></a>rotate 旋转效果</h2><p>该样式可以让元素在二维平面进行顺时针旋转或者逆时针旋转。</p><p>语法：<code>transform: rotate(n);</code></p><p><code>n</code>为数值，可为正负，且单位为<code>deg</code>。正为顺时针，负为逆时针。默认旋转中心点是元素中心点。且效果不影响布局。</p><p><code>rotate</code>还有其他语法效果，例如：</p><ul><li><code>rotateX(n)</code>则是以X轴为中心进行旋转，<code>rotateY(n)</code>同理。</li><li><code>rotate3d(x, y, z);</code>则是以三轴进行旋转。</li></ul><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>: all <span class="number">1s</span> ease;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: green;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">360deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</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><h2 id="transform-origin-设置中心点"><a href="#transform-origin-设置中心点" class="headerlink" title="transform-origin 设置中心点"></a>transform-origin 设置中心点</h2><p>此样式可以设置元素转换的中心点。</p><p>语法：<code>transform-origin: x y;</code></p><p>注意点：</p><ul><li>x y 默认值为元素的中心点(50% 50%)。</li><li>可以给x y 设置像素或者方位名词(top bottom left right center)。</li></ul><h2 id="scale-缩放效果"><a href="#scale-缩放效果" class="headerlink" title="scale 缩放效果"></a>scale 缩放效果</h2><p>实现元素缩放，进行放大或者缩小。</p><p>语法：<code>transform: scale(x, y);</code></p><p>注意点：</p><ul><li><code>transform: scale(1, 1); </code>宽高放大一倍，相对于没放大。</li><li><code>transform: scale(2, 2);</code>宽高都放大了2倍。</li><li><code>transform: scale(2);</code>只写了一个参数，第二个则统一样。</li><li><code>transform: scale(0.5, 0.5);</code>缩小。</li><li>最大的优势可设置转换中心点缩放，默认中心点缩放的，而且不影响其他元素。</li></ul><h2 id="transform-连写"><a href="#transform-连写" class="headerlink" title="transform 连写"></a>transform 连写</h2><p>可以实现多个效果的连写。</p><p>例如：<code>transform: translate(50px, 50px) rotate(180deg);</code></p><p>但要注意的是，其连写有顺序问题，执行的效果会被顺序影响（先旋转会影响到坐标轴方向）。故此当同时有位移和其他属性的时候，记得要将位移放到最前。</p><h1 id="transform-3D转换效果"><a href="#transform-3D转换效果" class="headerlink" title="transform 3D转换效果"></a>transform 3D转换效果</h1><p>可以实现元素在三维的效果，也就是比2D多了一个坐标值。</p><ul><li>x轴：水平向右，x右边正值，左边是负值。</li><li>y轴：垂直向下，y下面是正值，上面是负值。</li><li>z轴：垂直屏幕，往外面是正值，往里面是负值。</li></ul><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230505210611170.png"></p><h2 id="translate3D-位移效果"><a href="#translate3D-位移效果" class="headerlink" title="translate3D 位移效果"></a>translate3D 位移效果</h2><p>比2D多了个z轴</p><p><code>transform: translate3d(x, y, z);</code></p><p>其在书写过程，如有需要省略则填写0px。</p><p>z轴需要带透视才能看见效果。</p><h2 id="perspective-透视效果"><a href="#perspective-透视效果" class="headerlink" title="perspective 透视效果"></a>perspective 透视效果</h2><p>在2D平面产生近大远小视觉立体，但只是二维。</p><p>透视的单位是像素。</p><p>透视写在被观察元素的父盒子上面的，d就是视距，z是z轴，物体距离屏幕的距离，值越大物体越大。</p><h2 id="3D旋转-rotate3d"><a href="#3D旋转-rotate3d" class="headerlink" title="3D旋转 rotate3d"></a>3D旋转 rotate3d</h2><p>3D旋转可以让其元素在三维平面内沿着x, y, z轴或自定义轴进行旋转。</p><p><strong>语法</strong>：<code>transform: rotate3d(x, y, z, deg);</code></p><p>沿着自定义轴旋转，deg为角度。</p><p>例如：</p><ul><li><code>transform: rotate3d(1, 0, 0, 45deg);</code>表示沿着x轴旋转45deg。</li><li><code>transform: rotate3d(1, 1, 0, 45deg);</code>表示沿着对角旋转45deg。</li></ul><p><strong>语法</strong>：<code>transform: rotateX();</code></p><p>沿着X轴旋转，Y轴，Z轴同理。</p><h2 id="3D呈现-transfrom-style"><a href="#3D呈现-transfrom-style" class="headerlink" title="3D呈现 transfrom-style"></a>3D呈现 transfrom-style</h2><p>控制子元素是否开启三维立体环境。</p><p><code>transform-style: flat</code>子元素不开启立体空间，默认的。</p><p><code>transform-style: preserve-3d;</code>子元素开启立体空间。</p><p>需要用给父级元素，但是影响的是子元素。</p><h2 id="3D案例效果-两面翻转的盒子"><a href="#3D案例效果-两面翻转的盒子" class="headerlink" title="3D案例效果 两面翻转的盒子"></a>3D案例效果 两面翻转的盒子</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.bigBod</span> {</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>: all <span class="number">1s</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">180deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">line-height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, <span class="number">#f5a1ff</span>, <span class="number">#a0f1ea</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> <span class="selector-class">.front</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom right, <span class="number">#f5a1ff</span>, <span class="number">#ffb357</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(-<span class="number">1px</span>) <span class="built_in">rotateY</span>(<span class="number">180deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"bigBox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"front"</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">"back"</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></span><br><span class="line"> <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><h2 id="3D案例效果-正方体旋转"><a href="#3D案例效果-正方体旋转" class="headerlink" title="3D案例效果 正方体旋转"></a>3D案例效果 正方体旋转</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>如何搞懂3d<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 启用子元素3d效果 */</span></span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 鼠标移动则开始动画 */</span></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">animation</span>: rotation <span class="number">10s</span> linear <span class="number">0s</span> infinite alternate;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 旋转动画开始 */</span></span></span><br><span class="line"><span class="language-css"> <span class="keyword">@keyframes</span> rotation {</span></span><br><span class="line"><span class="language-css"> <span class="number">0%</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotate3d</span>(<span class="number">1</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0deg</span>) <span class="built_in">rotateX</span>(<span class="number">0deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="number">100%</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotate3d</span>(<span class="number">1</span>, <span class="number">1</span>, <span class="number">0</span>, <span class="number">360deg</span>) <span class="built_in">rotateX</span>(<span class="number">360deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 旋转动画结束 */</span></span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 四面盒子样式 */</span></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">line-height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 四面盒子位置 */</span></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.top</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to bottom, <span class="number">#2980b9</span>, <span class="number">#6dd5fa</span>, <span class="number">#ffffff</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">50px</span>) <span class="built_in">rotateX</span>(<span class="number">90deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.left</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(</span></span><br><span class="line"><span class="language-css"> to left bottom,</span></span><br><span class="line"><span class="language-css"> <span class="number">#1fa2ff</span>,</span></span><br><span class="line"><span class="language-css"> <span class="number">#12d8fa</span>,</span></span><br><span class="line"><span class="language-css"> <span class="number">#a6ffcb</span></span></span><br><span class="line"><span class="language-css"> );</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50px</span>) <span class="built_in">rotateY</span>(<span class="number">270deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.bottom</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to right bottom, <span class="number">#00c9ff</span>, <span class="number">#92fe9d</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">50px</span>) <span class="built_in">rotateX</span>(<span class="number">270deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.right</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to left top, <span class="number">#304352</span>, <span class="number">#d7d2cc</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">50px</span>) <span class="built_in">rotateY</span>(-<span class="number">270deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.back</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to top, <span class="number">#ee9ca7</span>, <span class="number">#ffdde1</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(-<span class="number">50px</span>) <span class="built_in">rotateX</span>(<span class="number">180deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.front</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to bottom, <span class="number">#1fa2ff</span>, <span class="number">#cfa6ff</span>, <span class="number">#c2f78c</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">50px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"top"</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">"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">"bottom"</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">div</span> <span class="attr">class</span>=<span class="string">"front"</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">"back"</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></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><p>其效果GIF：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E7%AB%8B%E4%BD%93%E6%95%88%E6%9E%9C-1683368207141-2.gif" alt="立体效果（压缩后）"></p><h2 id="3D案例效果-旋转相册"><a href="#3D案例效果-旋转相册" class="headerlink" title="3D案例效果 旋转相册"></a>3D案例效果 旋转相册</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>旋转相册效果<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> user-select: none;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">150px</span> auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">perspective</span>: <span class="number">800px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="keyword">@keyframes</span> rotation {</span></span><br><span class="line"><span class="language-css"> <span class="number">0%</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">0deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="number">100%</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">360deg</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">ul</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">animation</span>: rotation <span class="number">10s</span> linear infinite;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">list-style</span>: none;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span> <span class="selector-tag">img</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">300px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">60deg</span>) <span class="built_in">translateZ</span>(<span class="number">300px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">120deg</span>) <span class="built_in">translateZ</span>(<span class="number">300px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">180deg</span>) <span class="built_in">translateZ</span>(<span class="number">300px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">5</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">240deg</span>) <span class="built_in">translateZ</span>(<span class="number">300px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.contentContainer</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">6</span>) {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">300deg</span>) <span class="built_in">translateZ</span>(<span class="number">300px</span>);</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</span> <span class="attr">class</span>=<span class="string">"contentContainer"</span>></span></span><br><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><br><span class="line"> <span class="tag"><<span class="name">img</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1682334288172-88e43f2d7d59?ixid=Mnw0MjI2NjN8MHwxfHRvcGljfHxibzhqUUtUYUUwWXx8fHx8Mnx8MTY4MjkyNDU0NQ&ixlib=rb-4.0.3&w=300&h=150&fmt=webp"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1682370992900-d2ba92e09d7b?ixid=Mnw0MjI2NjN8MHwxfHRvcGljfHxibzhqUUtUYUUwWXx8fHx8Mnx8MTY4MjkyNDU0NQ&ixlib=rb-4.0.3&w=300&h=150&fmt=webp"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1682343161292-abeebabf3e86?ixid=Mnw0MjI2NjN8MHwxfHRvcGljfHxibzhqUUtUYUUwWXx8fHx8Mnx8MTY4MjkyNDU0NQ&ixlib=rb-4.0.3&w=300&h=150&fmt=webp"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1682364284611-b3201041f7d8?ixid=Mnw0MjI2NjN8MHwxfHRvcGljfHxibzhqUUtUYUUwWXx8fHx8Mnx8MTY4MjkyNDU0NQ&ixlib=rb-4.0.3&w=300&h=150&fmt=webp"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1682007049179-ea0223283a90?ixid=Mnw0MjI2NjN8MHwxfHRvcGljfHxibzhqUUtUYUUwWXx8fHx8Mnx8MTY4MjkyNDU0NQ&ixlib=rb-4.0.3&w=300&h=150&fmt=webp"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1681829495534-f118398aca40?ixid=Mnw0MjI2NjN8MHwxfHRvcGljfHxibzhqUUtUYUUwWXx8fHx8Mnx8MTY4MjkyNDU0NQ&ixlib=rb-4.0.3&w=300&h=150&fmt=webp"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <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><span class="line"> <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><span class="line"></span><br></pre></td></tr></table></figure><p>其效果GIF：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E6%97%8B%E8%BD%AC%E7%9B%B8%E5%86%8C%E6%95%88%E6%9E%9C.gif" alt="旋转相册效果"></p><h1 id="CSS3动画效果"><a href="#CSS3动画效果" class="headerlink" title="CSS3动画效果"></a>CSS3动画效果</h1><p>动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。</p><p>相比较过渡，动画可以实现更多变化、控制、连续自动播放等效果。</p><p><strong>动画的基本使用</strong>：</p><ul><li>先定义动画</li><li>再使用动画</li></ul><p><strong>使用<code>keyframes</code>定义动画</strong>：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyframes</span> name {</span><br><span class="line"> <span class="number">0%</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span></span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="number">100%</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>name</code>为动画名称。0% ~ 100%是动画序列，前者是开始，后者是完成。在<code>@keyframes</code>中规定了某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。</p><p>较常用百分比来规定变化的时间，或用<code>from</code>和<code>to</code>，等同于<code>0%</code>和<code>100%</code>。其次动画序列的时间为<strong>序列×时间</strong>得出其动画帧时。</p><p>例如定义了<code>25%</code>，其动画持续时间为10s，则<code>25%</code>的帧时为2.5s。</p><p><strong>元素调用动画</strong>：</p><ul><li><p><code>animation-name: 动画名称;</code>来调用动画。</p></li><li><p><code>animation-duration: 持续时间;</code>设置动画的持续时间。</p></li></ul><p><strong>动画常见效果</strong>：</p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td><code>@keyframes</code></td><td>规定动画</td></tr><tr><td><code>animation</code></td><td>动画属性的简写属性，除了<code>animation-play-state</code>属性</td></tr><tr><td><code>animation-duration</code></td><td>规定动画完成一个周期所花费的时间</td></tr><tr><td><code>animation-timing-function</code></td><td>规定动画的速度曲线，默认是<code>ease</code></td></tr><tr><td><code>animation-delay</code></td><td>规定动画何时开始</td></tr><tr><td><code>animation-iteration-count</code></td><td>规定动画被播放的次数，默认是1，还有<code>infinite</code></td></tr><tr><td><code>animation-direction</code></td><td>规定动画是否在下一个周期逆向播放，默认是<code>normal</code>，<code>alternate</code>逆播放</td></tr><tr><td><code>animation-play-state</code></td><td>规定动画是否正在运行或暂停。默认是<code>running</code>，还有<code>pause</code></td></tr><tr><td><code>animation-fill-mode</code></td><td>规定动画结束后状态，保持<code>forwards</code>回到起始<code>backwards</code></td></tr><tr><td><code>animation-name</code></td><td>规定动画的名称</td></tr></tbody></table><h2 id="animation-动画简写"><a href="#animation-动画简写" class="headerlink" title="animation 动画简写"></a>animation 动画简写</h2><p><code>animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;</code> </p><h2 id="animation-timing-function-速度曲线调节"><a href="#animation-timing-function-速度曲线调节" class="headerlink" title="animation-timing-function 速度曲线调节"></a>animation-timing-function 速度曲线调节</h2><p><code>animation-timing-function</code> 规定动画的速度曲线，默认是<code>ease</code>。</p><p><strong>常用值</strong>:</p><table><thead><tr><th>值</th><th>说明</th></tr></thead><tbody><tr><td><code>linear</code></td><td>动画从头到尾的速度是相同。匀速</td></tr><tr><td><code>ease</code></td><td>默认。动画以低俗开始，然后加快，在结束前减慢。</td></tr><tr><td><code>ease-in</code></td><td>动画以低速开始</td></tr><tr><td><code>ease-out</code></td><td>动画以低速结束</td></tr><tr><td><code>ease-in-out</code></td><td>动画以低速开始和结束</td></tr><tr><td><code>steps()</code></td><td>指定了时间函数中的间隔数量(步长)</td></tr></tbody></table><p>使用<code>steps()</code>可以实现文字打字出现效果。</p><p>例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br><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.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">0px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="comment">/* 强制在一行 */</span></span></span><br><span class="line"><span class="language-css"> <span class="attribute">white-space</span>: nowrap;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">animation</span>: step <span class="number">4s</span> <span class="built_in">steps</span>(<span class="number">28</span>) forwards;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="keyword">@keyframes</span> step {</span></span><br><span class="line"><span class="language-css"> <span class="number">0%</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="number">100%</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">338px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</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">div</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><h1 id="浏览器私有前缀"><a href="#浏览器私有前缀" class="headerlink" title="浏览器私有前缀"></a>浏览器私有前缀</h1><p>浏览器私有前缀是为了兼容老版本的写法，新版本的浏览器无需添加。</p><p><strong>私有前缀</strong>：</p><ul><li><code>-moz-</code> ：代表firefox浏览器私有属性。</li><li><code>-ms-</code> ：代表ie浏览器私有属性。</li><li><code>-webkit-</code> ：代表safari、chrome私有前缀。</li><li><code>-o-</code> ：代表Opera私有前缀。</li></ul><p><strong>提倡的写法</strong>：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">-moz-<span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">-webkit-<span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">-o-<span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br></pre></td></tr></table></figure><h1 id="笔记总结"><a href="#笔记总结" class="headerlink" title="笔记总结"></a>笔记总结</h1><p>关于CSS的内容是非常多的，在前端的学习中需要大量的查阅官方文档，了解其用法和相关属性。目前这篇笔记是以我的复习思路写的，且内容是以<a href="https://www.bilibili.com/video/BV14J4114768/?p=1" title="比较好的教程视频">pink老师</a>的教学视频跟进的，学习html+css的时候也是跟的pink老师，比较适合我查阅，因此内容也较为混乱，各个内容章节都是无序的 ，故此并不适合其他人。此篇笔记往后还会继续添加更新内容。</p>]]></content>
<categories>
<category> 笔记 </category>
</categories>
<tags>
<tag> Web </tag>
</tags>
</entry>
<entry>
<title>养花日记 1</title>
<link href="/posts/9bceec2a.html"/>
<url>/posts/9bceec2a.html</url>
<content type="html"><![CDATA[<h1 id="派大星的养花日记"><a href="#派大星的养花日记" class="headerlink" title="派大星的养花日记"></a>派大星的养花日记</h1><p>在经历了种种事后，心血来潮的想到自己买花种子种花，经过了深思熟虑(半秒的考虑)之后选中了我心中的太阳花——雏菊。主要吧，雏菊皮实，好打理，不需要花费太大时间精力去管它，只需要适当时期浇浇水即可。啊，那这样是不是没种花的体验了呢？</p><p>也不能这样讲，我给它播种了，它发芽了，我看在眼里，那即是收获，即是体验嘛，新手初养花能选到喜欢且好养的花是多么幸运的的事嘞（其实就是自己认得到的，经常见的也只有雏菊…）。</p><p>下午嘞就把种子拿到手了，一个小包裹有着鞋盒的一半的宽度，一杯柠檬水的高度。里面包含了花盆（一加仑）、种子本体五百粒（商家商说的五百粒）、一袋泥炭土、一袋有机肥、一张说明书。<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/盒子.webp" alt="鞋盒一半宽，柠檬水一样高的盒子" style="zoom: 67%;" /></p><p>商家还是蛮好的，给配了一张说明书，可说明书上写的却是大面积播种教程…..那可能小面积播种也是一样的道理！</p><p>按照说明书上二维码里的视频来看，首先是温水泡种子一晚上，充分的让它喝够水，然后就直接放土里就行！如此简单，简朴，真的太适合我了。在我准备就绪之前，我顿住了，哎嘿，这小小一袋种子五百粒，我要放多少种子嘞？我仔细想了会儿，突然回想起那商家给的视频教程里人家全放！简单至极啊！</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/泡水后的种子.webp" alt="泡水后的种子" style="zoom:50%;" /><p>泡了一晚上水的种子表面起了一层透明薄膜，也许生物书上有写了这为什么。百度上说嘞，种子起薄膜是吸水过多导致的，自身分泌的啥啥啥保护自身，讲的很少，也没讲明白，估计等我多看看多了解说不准就知道了嘞。</p><p>雏菊的种子很细小，像芝麻似的，感觉用手轻轻一捏就烂成粉了一样。我大概泡了一半的种子吧，也不知道这种子成活率高不高，要是长得很密了就很糟糕了。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E6%92%AD%E7%A7%8D.webp" alt="播种"></p><p style="float: right">2023年4月19日23:29:11</p><br><p>盆很小，土也少，等发芽了，就得试着移栽了。</p><p>期待着嘞。</p><p style="float: right">2023年4月02日23:59:37</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 养花日记 </tag>
</tags>
</entry>
<entry>
<title>HTML 笔记</title>
<link href="/posts/f901e9b7.html"/>
<url>/posts/f901e9b7.html</url>
<content type="html"><![CDATA[<h2 id="HTML-笔记"><a href="#HTML-笔记" class="headerlink" title="HTML 笔记"></a>HTML 笔记</h2><h1 id="1-网页"><a href="#1-网页" class="headerlink" title="1. 网页"></a>1. 网页</h1><h2 id="1-1-什么是网页"><a href="#1-1-什么是网页" class="headerlink" title="1.1 什么是网页"></a>1.1 什么是网页</h2><p><strong>网站</strong>是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。</p><p><strong>网页</strong>是网站中的一页，通常是HTML格式的文件，他要通过浏览器来阅读。</p><p><strong>网页是构成网站的基本元素</strong>，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以<code>.html</code>或<code>.htm</code>后缀结尾的文件，因此将其俗称为<strong>HTML文件</strong>。 </p><br><h2 id="1-2-什么是HTML"><a href="#1-2-什么是HTML" class="headerlink" title="1.2 什么是HTML"></a>1.2 什么是HTML</h2><p>HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它是 web 开发的基础，用于定义网页的结构和内容。HTML 使用标记来描述文档的结构和语义，以便浏览器能够正确地显示文档。HTML 文件通常由文本、图像、链接、音频和视频等元素组成。</p><br><p>其结构：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span> <span class="comment"><!-- 文档类型声明 --></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span> <span class="comment"><!-- 根元素 --></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span> <span class="comment"><!-- 文档头部 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span> <span class="comment"><!-- 字符编码 --></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>页面标题<span class="tag"></<span class="name">title</span>></span> <span class="comment"><!-- 页面标题 --></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span> <span class="comment"><!-- 文档主体 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>标题<span class="tag"></<span class="name">h1</span>></span> <span class="comment"><!-- 标题 --></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>段落<span class="tag"></<span class="name">p</span>></span> <span class="comment"><!-- 段落 --></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.example.com"</span>></span>链接<span class="tag"></<span class="name">a</span>></span> <span class="comment"><!-- 链接 --></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"image.jpg"</span> <span class="attr">alt</span>=<span class="string">"图片"</span>></span> <span class="comment"><!-- 图片 --></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><span class="line"></span><br></pre></td></tr></table></figure><ul><li><code><!DOCTYPE html></code> 声明了文档类型，告诉浏览器这是一个 HTML5 文档。</li><li><code><html></code> 元素是 HTML 文档的根元素，它包含了整个文档的内容。</li><li><code><head></code> 元素包含了文档的元数据，比如页面标题、字符编码等。</li><li><code><meta charset="UTF-8"></code> 声明了文档的字符编码为 UTF-8，以支持更多的字符集。</li><li><code><title></code> 元素定义了文档的标题，会显示在浏览器的标题栏上。</li><li><code><body></code> 元素包含了文档的主要内容，比如文本、图像、链接等。</li><li><code><h1></code> 元素定义了一个大标题，它的级别从 1 到 6，依次递减。</li><li><code><p></code> 元素定义了一个段落。</li><li><code><a></code> 元素定义了一个链接，它的 <code>href</code> 属性指向链接的目标地址。</li><li><code><img></code> 元素定义了一张图片，它的 <code>src</code> 属性指向图片的地址，<code>alt</code> 属性定义了图片的替代文本，以便在图片无法显示时显示。</li></ul><br><h1 id="2-常用浏览器"><a href="#2-常用浏览器" class="headerlink" title="2. 常用浏览器"></a>2. 常用浏览器</h1><p>浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐、谷歌、Safar和Opera等。</p><p><strong>浏览器内核</strong></p><p>浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页额显示方式并显示页面。</p><table><thead><tr><th>浏览器</th><th>内核</th><th>备注</th></tr></thead><tbody><tr><td>IE</td><td>Trident</td><td>IE、猎豹安全、360极速浏览器、百度浏览器</td></tr><tr><td>fierfox</td><td>Gecko</td><td>火狐浏览器</td></tr><tr><td>Safari</td><td>Webkit</td><td>苹果浏览器</td></tr><tr><td>Chrome/Opera</td><td>Bline</td><td>Blink其实是Webkit的分支</td></tr></tbody></table><br><h1 id="3-Web标准"><a href="#3-Web标准" class="headerlink" title="3. Web标准"></a>3. Web标准</h1><p><strong>Web标准</strong>是由W3C组织和其他标准化组织制定的<strong>一系列标准的集合</strong>。W3C(万维网联盟)是国际最著名的标准化组织。</p><br><h2 id="3-1-为什么需要Web标准"><a href="#3-1-为什么需要Web标准" class="headerlink" title="3.1 为什么需要Web标准"></a>3.1 为什么需要Web标准</h2><p>浏览器不同，它们显示的页面和排版就有差异。</p><br><h2 id="3-2-Web标准的结构"><a href="#3-2-Web标准的结构" class="headerlink" title="3.2 Web标准的结构"></a>3.2 Web标准的结构</h2><p>主要包括<strong>结构</strong>、<strong>表现</strong>、<strong>行为</strong>三个方面。</p><table><thead><tr><th align="center">标准</th><th align="left">说明</th></tr></thead><tbody><tr><td align="center">结构</td><td align="left">结构用于对网页元素进行整理和分类，现阶段主要是HTML</td></tr><tr><td align="center">表现</td><td align="left">表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS</td></tr><tr><td align="center">行为</td><td align="left">行为是指网页模型的定义及交互的编写，现阶段是指JavaScript</td></tr></tbody></table><p><strong>结构类似身体结构</strong>，表现类似装饰，行为类似行动动作。</p><br><h1 id="4-HTML-语法规范"><a href="#4-HTML-语法规范" class="headerlink" title="4. HTML 语法规范"></a>4. HTML 语法规范</h1><h2 id="1-1-基本语法概述"><a href="#1-1-基本语法概述" class="headerlink" title="1.1 基本语法概述"></a>1.1 基本语法概述</h2><ol><li>HTML 标签是由<strong>尖括号包围</strong>的关键词，例如<code><html></code>。</li><li>HTML 标签<strong>通常是成对出现</strong>的，例如<code><html></html></code>，我们称为<strong>双标签</strong>。标签对中的第一个标签是开始标签，第二个标签是结束标签。</li><li>有些特殊的标签必须是单个标签（极少情况），例如<code><br /></code>，我们称为<strong>单标签</strong>。</li></ol><br><h2 id="1-2-标签关系"><a href="#1-2-标签关系" class="headerlink" title="1.2 标签关系"></a>1.2 标签关系</h2><p>双标签关系可以分为两类：<strong>包含关系</strong>和<strong>并列关系</strong>。</p><p><strong>包含关系</strong>：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span> // 父标签</span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span> // 子标签</span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure><p><strong>并列关系</strong>：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure><br><h1 id="5-HTML-基本结构标签"><a href="#5-HTML-基本结构标签" class="headerlink" title="5. HTML 基本结构标签"></a>5. HTML 基本结构标签</h1><p>每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基础本标签上书写的。</p><table><thead><tr><th>标签名</th><th>定义</th><th>说明</th></tr></thead><tbody><tr><td><code><html></html></code></td><td>HTML标签</td><td>页面中最大的标签，我们称为跟标签</td></tr><tr><td><code><head></head></code></td><td>文档的头部</td><td>为网页渲染提供额外的信息</td></tr><tr><td><code><title></title></code></td><td>文档的标题</td><td>定义浏览器工具栏中标题</td></tr><tr><td><code><body></body></code></td><td>文档的主体</td><td>定义文档的主体</td></tr></tbody></table><br><h1 id="6-HTML标签学习"><a href="#6-HTML标签学习" class="headerlink" title="6. HTML标签学习"></a>6. HTML标签学习</h1><h2 id="1-1-排版标签"><a href="#1-1-排版标签" class="headerlink" title="1.1 排版标签"></a>1.1 排版标签</h2><h3 id="1-1-1-标题标签"><a href="#1-1-1-标题标签" class="headerlink" title="1.1.1 标题标签"></a>1.1.1 标题标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h1</span>></span>1级标题<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h2</span>></span>2级标题<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>3级标题<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h4</span>></span>4级标题<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h5</span>></span>5级标题<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h6</span>></span>6级标题<span class="tag"></<span class="name">h6</span>></span></span><br></pre></td></tr></table></figure><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230327211646309.png" alt="" style="zoom:50%;" /><blockquote><p>特点：块级标签。</p></blockquote><br><h3 id="1-1-2-段落标签"><a href="#1-1-2-段落标签" class="headerlink" title="1.1.2 段落标签"></a>1.1.2 段落标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> 可以放文字，此标签会自动换行，且是块级标签，段落之间有间隙</span><br><span class="line"><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><br><h3 id="1-1-3-水平标签"><a href="#1-1-3-水平标签" class="headerlink" title="1.1.3 水平标签"></a>1.1.3 水平标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">hr</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>特点：属于单标签，且为块级标签，在页面显示一条水平线。</p></blockquote><br><h3 id="1-1-4-换行标签"><a href="#1-1-4-换行标签" class="headerlink" title="1.1.4 换行标签"></a>1.1.4 换行标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">br</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>特点：属于单标签，可在标签换行或段落文字之间换行。</p></blockquote><br><h2 id="1-2-文本格式化标签"><a href="#1-2-文本格式化标签" class="headerlink" title="1.2 文本格式化标签"></a>1.2 文本格式化标签</h2><table><thead><tr><th align="left">标签</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">b</td><td align="left">定义粗体文本</td></tr><tr><td align="left">em</td><td align="left">定义着重文字</td></tr><tr><td align="left">i</td><td align="left">定义斜体字</td></tr><tr><td align="left">small</td><td align="left">定义小号字</td></tr><tr><td align="left">strong</td><td align="left">定义加重语气</td></tr><tr><td align="left">sub</td><td align="left">定义下标字</td></tr><tr><td align="left">sup</td><td align="left">定义上标字</td></tr><tr><td align="left">ins</td><td align="left">定义插入字</td></tr><tr><td align="left">del</td><td align="left">定义删除字</td></tr></tbody></table><p><strong>HTML”计算机输出”标签</strong></p><table><thead><tr><th align="left">标签</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">code</td><td align="left">定义计算机代码</td></tr><tr><td align="left">kbd</td><td align="left">定义键盘码</td></tr><tr><td align="left">samp</td><td align="left">定义计算机代码样本</td></tr><tr><td align="left">var</td><td align="left">定义变量</td></tr><tr><td align="left">pre</td><td align="left">定义预格式文本</td></tr></tbody></table><p><strong>HTMl 引文，引用，及标签定义</strong></p><table><thead><tr><th align="left">标签</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">abbr</td><td align="left">定义缩写</td></tr><tr><td align="left">address</td><td align="left">定义地址</td></tr><tr><td align="left">bdo</td><td align="left">定义文字方向</td></tr><tr><td align="left">blockquote</td><td align="left">定义长的引用</td></tr><tr><td align="left">q</td><td align="left">定义短的引用语</td></tr><tr><td align="left">cite</td><td align="left">定义引用、引证</td></tr><tr><td align="left">dfn</td><td align="left">定义一个定义项目。</td></tr></tbody></table><br><h2 id="1-3-媒体标签"><a href="#1-3-媒体标签" class="headerlink" title="1.3 媒体标签"></a>1.3 媒体标签</h2><h3 id="1-3-1-图片标签"><a href="#1-3-1-图片标签" class="headerlink" title="1.3.1 图片标签"></a>1.3.1 图片标签</h3><blockquote><p>场景：在网页中显示图片。</p><p>代码：<code><img src=" " alt=" " ></code></p><p>特点：单标签，对应效果可使用标签属性进行设置。</p></blockquote><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230327214356473.png"></p><p><strong>img属性解析</strong></p><ol><li><code>src</code>为路径。</li><li><code>alt</code>但图片加载不出时的占位符。</li><li><code>title</code>标题属性，当鼠标悬停在图片时，显示标题，可在其他标签使用。</li><li><code>width & height</code>宽度与高度属性，当其中缺少一个值时，将等比例缩放。</li></ol><p><strong>注意点：</strong></p><ol><li>标签的属性写在开始标签内部。</li><li>标签上可以同时存在多个属性。</li><li>属性之间以空格隔开。</li><li>标签名和属性之间必须以空格隔开。</li><li>属性之间没有顺序之分。</li></ol><br><h3 id="1-3-2-路径"><a href="#1-3-2-路径" class="headerlink" title="1.3.2 路径"></a>1.3.2 路径</h3><blockquote><p>场景：页面需要加载图片，需要先找到对应的位置中的图片。</p></blockquote><p><strong>绝对路径</strong></p><blockquote><p>指目录下的绝对位置，可直接到达目标位置，通常从盘符开始。</p></blockquote><p>例如：</p><p><code>E:\Code\Bl</code></p><p><strong>相对路径</strong></p><blockquote><p>从当前文件开始出发找目标文件的过程。</p></blockquote><p>分为：同级目录，下级目录，上级目录。</p><ol><li><p>同级目录：当前文件和目标文件在同一目录。</p><p><code>src="a.img"</code></p><p><code>src="./a.img"</code></p></li><li><p>下级目录：目标文件在当前文件的目录中的另一目录。</p><p><code>src="./img/a.img"</code></p></li><li><p>上级目录：目标文件在当前文件的上一级目录。</p><p><code>src="../img/a.img"</code></p></li></ol><br><h3 id="1-3-3-音频标签"><a href="#1-3-3-音频标签" class="headerlink" title="1.3.3 音频标签"></a>1.3.3 音频标签</h3><blockquote><p>场景：在页面中插入音频。</p></blockquote><p>代码：<code><audio src="./music.mp3" controls></audio></code></p><p><strong>常见属性：</strong></p><table><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>src</td><td>路径</td></tr><tr><td>controls</td><td>显示播放控件</td></tr><tr><td>autoplay</td><td>自动播放（谷歌浏览器可配合muted实现静音播放）</td></tr><tr><td>loop</td><td>循环播放</td></tr></tbody></table><br><h3 id="1-3-4-视频标签"><a href="#1-3-4-视频标签" class="headerlink" title="1.3.4 视频标签"></a>1.3.4 视频标签</h3><blockquote><p>场景：在页面中插入视频元素。</p></blockquote><p>代码：<code><video src="./video.mp4" controls></video></code></p><p>常见属性与音频标签类同。</p><br><h2 id="1-4-链接标签"><a href="#1-4-链接标签" class="headerlink" title="1.4 链接标签"></a>1.4 链接标签</h2><blockquote><p>场景：点击之后，从一个页面跳转到另一个页面。</p></blockquote><p>代码：<code><a href="./Home.html">超链接</a></code></p><p>特点：</p><ul><li>双标签，内部可包裹内容。</li><li>如果需要a标签点击之后去指定页面，需要设置a标签的href属性。</li></ul><p>示范：[百度一下](<a href="https://www.baidu.com/">百度一下，你就知道 (baidu.com)</a>)</p><p>空链接：<code><a href="#">超链接</a></code></p><p><strong>属性解析：</strong></p><blockquote><p>属性名：target</p><p>属性值：目标网页的打开形式。</p></blockquote><table><thead><tr><th align="center">取值</th><th align="center">效果</th></tr></thead><tbody><tr><td align="center"><code>_self</code></td><td align="center">默认值，在当前页面跳转</td></tr><tr><td align="center"><code>_blank</code></td><td align="center">在新窗口中跳转</td></tr></tbody></table><p>例：<code><a href="#" target="_blank" >点击一下</a></code></p><br><h2 id="1-5-列表标签"><a href="#1-5-列表标签" class="headerlink" title="1.5 列表标签"></a>1.5 列表标签</h2><blockquote><p>场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等。</p><p>特点：按照行的方式，整齐显示内容。</p></blockquote><h3 id="1-5-1-无序列表"><a href="#1-5-1-无序列表" class="headerlink" title="1.5.1 无序列表"></a>1.5.1 无序列表</h3><blockquote><p>场景：在网页中表示一组没有顺序之分的列表，如：新闻列表。</p></blockquote><p><strong>标签组成：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">ul</td><td align="center">表示无序列表的整体，用于包裹<code>li</code>标签</td></tr><tr><td align="center">li</td><td align="center">表示无序列表的每一项，用于包含每一行的内容</td></tr></tbody></table><p><strong>显示特点：</strong>列表的每一项前默认显示圆点标识。</p><p><strong>注意点：</strong></p><ul><li><code>ul</code>标签中只允许包含<code>li</code>标签。</li><li><code>li</code>标签可以包含任意内容。</li></ul><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><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">ul</span>></span> </span><br></pre></td></tr></table></figure><p>代码实现：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230328224521437.png"></p><br><h3 id="1-5-2-有序列表"><a href="#1-5-2-有序列表" class="headerlink" title="1.5.2 有序列表"></a>1.5.2 有序列表</h3><blockquote><p>场景：在网页中表示一组有顺序之分的列表，如：排行榜。</p></blockquote><p><strong>标签组成：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">ol</td><td align="center">表示有序列表的整体，用于包裹<code>li</code>标签</td></tr><tr><td align="center">li</td><td align="center">表示有序列表的每一项，用于包含每一行的内容</td></tr></tbody></table><p><strong>显示特点：</strong>列表的每一项前默认显示序号标识。</p><p><strong>注意点：</strong></p><ol><li><code>ol</code>标签汇总只允许包含<code>li</code>标签。</li><li><code>li</code>标签可以包含任意内容。</li></ol><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><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">ol</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">ol</span>></span></span><br></pre></td></tr></table></figure><p>代码实现：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230328225141088.png"></p><br><h3 id="1-5-3-自定义列表"><a href="#1-5-3-自定义列表" class="headerlink" title="1.5.3 自定义列表"></a>1.5.3 自定义列表</h3><blockquote><p>场景：在网页的底部导航中通常会使用自定义列表实现。</p></blockquote><p><strong>场景案例：</strong></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230328230247778.png" alt="image-20230328230247778"></p><p><strong>标签组成：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">dl</td><td align="center">表示自定义列表的整体，用于包裹dt/dd标签</td></tr><tr><td align="center">dt</td><td align="center">表示自定义列表的主体</td></tr><tr><td align="center">dd</td><td align="center">表示自定义列表的针对主体的每一项内容</td></tr></tbody></table><p><strong>显示特点：</strong><code>dd</code>前会默认显示缩进效果。</p><p><strong>注意点：</strong></p><ul><li><code>dl</code>标签中只允许包含<code>dt/dd</code>标签。</li><li><code>dt/dd</code>标签可以包含任意内容。</li></ul><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>帮助中心<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>联系客服<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>技术支持<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>保障<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"><span class="tag"></<span class="name">dl</span>></span></span><br></pre></td></tr></table></figure><p>代码实现：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230328234114936.png"></p><br><h2 id="1-6-表格标签"><a href="#1-6-表格标签" class="headerlink" title="1.6 表格标签"></a>1.6 表格标签</h2><blockquote><p>场景：在网页中以行+列鹅单元格的方式整齐展示数据，如学生成绩表。</p></blockquote><p><strong>基本标签：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">table</td><td align="center">表格整体，可用于包裹多个<code>tr</code></td></tr><tr><td align="center">tr</td><td align="center">表格每行，可用于包裹<code>td</code></td></tr><tr><td align="center">td</td><td align="center">表格单元格，可用于包裹内容</td></tr></tbody></table><p><strong>注意点：</strong>标签的嵌套关系：table > tr > td</p><p><strong>常见属性：</strong></p><table><thead><tr><th align="center">属性名</th><th align="center">属性值</th><th align="center">效果</th></tr></thead><tbody><tr><td align="center">border</td><td align="center">数字</td><td align="center">边框宽度</td></tr><tr><td align="center">width</td><td align="center">数字</td><td align="center">表格宽度</td></tr><tr><td align="center">height</td><td align="center">数字</td><td align="center">表格高度</td></tr></tbody></table><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</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><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>年龄<span class="tag"></<span class="name">td</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><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><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>19<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1班<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><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>19<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1班<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">table</span>></span></span><br></pre></td></tr></table></figure><p>代码实现：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230329132311047.png"></p><br><h3 id="1-6-1-表格标题和表头单元格标签"><a href="#1-6-1-表格标题和表头单元格标签" class="headerlink" title="1.6.1 表格标题和表头单元格标签"></a>1.6.1 表格标题和表头单元格标签</h3><blockquote><p>场景：在表格中表示整体大标题和一列小标题。</p></blockquote><p><strong>其他标签：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">名称</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">caption</td><td align="center">表格大标题</td><td align="center">表示表格整体大标题</td></tr><tr><td align="center">th</td><td align="center">表头单元格</td><td align="center">表示一列小标题，通常用于表格第一列</td></tr></tbody></table><p><strong>注意点：</strong></p><ul><li><code>caption</code>标签书写在<code>table</code>标签内部。</li><li><code>th</code>标签书写在<code>tr</code>标签内部。</li></ul><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">caption</span>></span>班级表<span class="tag"></<span class="name">caption</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">th</span>></span>姓名<span class="tag"></<span class="name">th</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><br><span class="line"> <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">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><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>19<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1班<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><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>19<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1班<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">table</span>></span></span><br></pre></td></tr></table></figure><br><h3 id="1-6-2-表格的结构标签"><a href="#1-6-2-表格的结构标签" class="headerlink" title="1.6.2 表格的结构标签"></a>1.6.2 表格的结构标签</h3><blockquote><p>场景：让表格的内容结构分明，突出表哥的不同部分（头部、主体、底部），使语义更加清晰。</p></blockquote><p><strong>基本标签：</strong></p><table><thead><tr><th align="center">标签</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">thead</td><td align="center">表格头部</td></tr><tr><td align="center">tbody</td><td align="center">表格主体</td></tr><tr><td align="center">tfoot</td><td align="center">表格底部</td></tr></tbody></table><br><h3 id="1-6-3-合并单元格"><a href="#1-6-3-合并单元格" class="headerlink" title="1.6.3 合并单元格"></a>1.6.3 合并单元格</h3><blockquote><p>场景：将水平或垂直多个单元格合并成一个单元格。</p></blockquote><p><strong>合并单元格步骤：</strong></p><ol><li><p>明确合并哪几个单元格。</p></li><li><p>通过左上原则，确定保留谁保留，删除谁。</p><ul><li>上下合并 > 只保留最上的，删除其他的。</li><li>左右合并 > 只保留最左的，删除其他的。</li></ul></li><li><p>给保留的单元格设置：跨行合并(rowspan) 或者跨列合并(colspan)</p><table><thead><tr><th align="center">属性名</th><th align="center">属性值</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">rowspan</td><td align="center">合并单元格的个数</td><td align="center">跨行合并，将多行单元格垂直合并</td></tr><tr><td align="center">colspan</td><td align="center">合并单元格的个数</td><td align="center">跨列合并，将多列单元格水平合并</td></tr></tbody></table></li></ol><p><strong>注意点：</strong>只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨thead、tbody、tfoot）。</p><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">caption</span>></span></span><br><span class="line"> 班级表</span><br><span class="line"> <span class="tag"></<span class="name">caption</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">thead</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">th</span>></span>姓名<span class="tag"></<span class="name">th</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><br><span class="line"> <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">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thead</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">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><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">rowspan</span>=<span class="string">"2"</span>></span>19<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1班<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><br><span class="line"> <span class="comment"><!-- <td>19</td> --></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1班<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">table</span>></span></span><br></pre></td></tr></table></figure><p>代码实现：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230329134657122.png"></p><br><h2 id="1-7-表单标签"><a href="#1-7-表单标签" class="headerlink" title="1.7 表单标签"></a>1.7 表单标签</h2><blockquote><p>场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页。</p></blockquote><br><h3 id="1-7-1-input系列标签的基本介绍"><a href="#1-7-1-input系列标签的基本介绍" class="headerlink" title="1.7.1 input系列标签的基本介绍"></a>1.7.1 input系列标签的基本介绍</h3><p>input标签可以通过<code>type</code>属性值的不同，展示不同效果。</p><p><strong>type属性值：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">type属性值</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">input</td><td align="center">text</td><td align="center">文本框，用于输入单行文本</td></tr><tr><td align="center">input</td><td align="center">password</td><td align="center">密码框，用于输入密码</td></tr><tr><td align="center">input</td><td align="center">radio</td><td align="center">单选框，用于多选一</td></tr><tr><td align="center">input</td><td align="center">checkbox</td><td align="center">多选框，用于多选多</td></tr><tr><td align="center">input</td><td align="center">file</td><td align="center">文件选择，用于上传文件</td></tr><tr><td align="center">input</td><td align="center">submit</td><td align="center">提交按钮，用于提交</td></tr><tr><td align="center">input</td><td align="center">reset</td><td align="center">重置按钮，用于重置</td></tr><tr><td align="center">input</td><td align="center">button</td><td align="center">普通按钮，默认无功能</td></tr></tbody></table><p>具体使用效果请转到菜鸟查看<a href="https://www.runoob.com/html/html-forms.html">HTML 表单 | 菜鸟教程 (runoob.com)</a></p><br><h4 id="1-7-1-1-text-文本框"><a href="#1-7-1-1-text-文本框" class="headerlink" title="1.7.1.1 text 文本框"></a>1.7.1.1 text 文本框</h4><p><strong>常用属性：</strong></p><table><thead><tr><th align="center">属性名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">placeholder</td><td align="center">占位符。提示用户输入内容的文本</td></tr></tbody></table><br><h4 id="1-7-1-2-radio-单选框"><a href="#1-7-1-2-radio-单选框" class="headerlink" title="1.7.1.2 radio 单选框"></a>1.7.1.2 radio 单选框</h4><p><strong>常用属性：</strong></p><table><thead><tr><th align="center">属性名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">name</td><td align="center">分组，有相同name属性值的单选框为一组，一组中只能一个被选中</td></tr><tr><td align="center">checked</td><td align="center">默认选中</td></tr></tbody></table><p><strong>注意点：</strong></p><ul><li>name属性对于单选框有分组功能。</li><li>有相同name属性值的单选框为一组，一组中只能一个被选中</li></ul><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">性别：<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">"sex"</span> <span class="attr">id</span>=<span class="string">"man"</span> /></span>男</span><br><span class="line"> <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">"sex"</span> <span class="attr">id</span>=<span class="string">"woman"</span> <span class="attr">checked</span> /></span>女</span><br></pre></td></tr></table></figure><br><h4 id="1-7-1-3-file-文件选择"><a href="#1-7-1-3-file-文件选择" class="headerlink" title="1.7.1.3 file 文件选择"></a>1.7.1.3 file 文件选择</h4><p><strong>常用属性：</strong></p><table><thead><tr><th align="center">属性名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">multiple</td><td align="center">多文件选择</td></tr></tbody></table><br><h4 id="1-7-1-4-button-按钮"><a href="#1-7-1-4-button-按钮" class="headerlink" title="1.7.1.4 button 按钮"></a>1.7.1.4 button 按钮</h4><p><strong>属性值：</strong></p><table><thead><tr><th align="center">属性名</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">submit</td><td align="center">提交按钮，点击之后提交数据到后端服务器</td></tr><tr><td align="center">reset</td><td align="center">重置按钮</td></tr><tr><td align="center">button</td><td align="center">普通按钮</td></tr></tbody></table><p><strong>注意点：</strong></p><ul><li><p>如果需要实现以上按钮功能，需要配合<code>form</code>标签使用。</p></li><li><p><code>form</code>使用方法：用<code>form</code>标签把表单标签一起包裹起来即可。</p></li><li><p>谷歌浏览器中的<code>button</code>默认是提交按钮。</p></li><li><p><code>button</code>有双标签使用。</p><p>例如：<code><button>这是个按钮</button></code></p></li></ul><br><h4 id="1-7-1-5-form-标签"><a href="#1-7-1-5-form-标签" class="headerlink" title="1.7.1.5 form 标签"></a>1.7.1.5 form 标签</h4><p><strong>常用属性：</strong></p><table><thead><tr><th align="center">属性名</th><th align="center">值</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">action</td><td align="center">地址</td><td align="center">表单提交的后端地址</td></tr><tr><td align="center">method</td><td align="center">post/get</td><td align="center">定义表单数据提交方式</td></tr><tr><td align="center">autocomplete</td><td align="center">on/off</td><td align="center">规定输入字段是否应该启用自动完成功能</td></tr></tbody></table><br><h4 id="1-7-1-6-select-标签"><a href="#1-7-1-6-select-标签" class="headerlink" title="1.7.1.6 select 标签"></a>1.7.1.6 select 标签</h4><p><strong>属性和标签：</strong></p><table><thead><tr><th align="center">属性/标签</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">select标签</td><td align="center">下拉菜单的整体</td></tr><tr><td align="center">option标签</td><td align="center">下拉菜单的每一项</td></tr><tr><td align="center">selected</td><td align="center">下拉菜单默认选中</td></tr></tbody></table><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">select</span> <span class="attr">name</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">""</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">value</span>=<span class="string">""</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">value</span>=<span class="string">""</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">value</span>=<span class="string">""</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">select</span>></span></span><br></pre></td></tr></table></figure><p>代码实现：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230329231720699.png"></p><br><h4 id="1-7-1-7-textarea-文本域标签"><a href="#1-7-1-7-textarea-文本域标签" class="headerlink" title="1.7.1.7 textarea 文本域标签"></a>1.7.1.7 textarea 文本域标签</h4><blockquote><p>场景：在网页中提供可输入多行文本的表单。</p></blockquote><p><strong>常见属性：</strong></p><table><thead><tr><th align="center">属性</th><th align="center">说明</th></tr></thead><tbody><tr><td align="center">cols</td><td align="center">规定文本域内可见的宽度</td></tr><tr><td align="center">rows</td><td align="center">规定文本域内可见的行数</td></tr></tbody></table><p><strong>注意点：</strong></p><ul><li>右下角可以拖拽改变大小。</li><li>实际开发时针对央视效果推介使用css样式。</li><li><code>placeholder</code>可使用。</li></ul><br><h4 id="1-7-1-8-label-标签"><a href="#1-7-1-8-label-标签" class="headerlink" title="1.7.1.8 label 标签"></a>1.7.1.8 label 标签</h4><blockquote><p>场景：常用于绑定内容与表单标签的关系。</p></blockquote><p><strong>使用方法：</strong></p><ol><li>使用<code>label</code>标签把内容包裹起来。</li><li>在表单标签上添加id属性。</li><li>在<code>label</code>标签的<code>for</code>属性中设置对应的id属性值。 、</li></ol><p><strong>或者：</strong></p><ol><li>直接使用<code>label</code>标签把内容和表单标签一起包裹起来。</li><li>需要把<code>label</code>标签的<code>for</code>属性删除即可。</li></ol><p><strong>代码示例：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">性别：</span><br><span class="line"><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">"sex"</span> <span class="attr">id</span>=<span class="string">"man"</span>></span><span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"man"</span>></span>男<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"><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">"sex"</span> <span class="attr">id</span>=<span class="string">"woman"</span>></span><span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"woman"</span>></span>女<span class="tag"></<span class="name">label</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">性别：</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">"sex"</span> <span class="attr">id</span>=<span class="string">"man"</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">"sex"</span> <span class="attr">id</span>=<span class="string">"woman"</span>></span>女<span class="tag"></<span class="name">label</span>></span></span><br></pre></td></tr></table></figure><br><h2 id="1-8-语义标签"><a href="#1-8-语义标签" class="headerlink" title="1.8 语义标签"></a>1.8 语义标签</h2><blockquote><p>场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。</p></blockquote><p><strong>标签：</strong></p><table><thead><tr><th align="center">标签名</th><th align="center">语义</th></tr></thead><tbody><tr><td align="center">header</td><td align="center">网页头部</td></tr><tr><td align="center">nav</td><td align="center">网页导航</td></tr><tr><td align="center">footer</td><td align="center">网页底部</td></tr><tr><td align="center">aside</td><td align="center">网页侧边栏</td></tr><tr><td align="center">section</td><td align="center">网页区块</td></tr><tr><td align="center">artice</td><td align="center">网页文章</td></tr></tbody></table><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230331175221732.png"></p><br><h1 id="7-结语"><a href="#7-结语" class="headerlink" title="7. 结语"></a>7. 结语</h1><p>大体是还有很多标签没写上，这份 HTML 笔记是为助我复习和巩固 HTML 知识而作，简单记载了些常用的标签，及部分基础知识，不甚详备使用方法。于常规开发，不宜死记硬背，识得便足，遗忘时再上网搜搜文档，查阅使用方法。HTML 的标签实属不止于此，其语法与功能多采多姿，足以创造有趣的网页。</p>]]></content>
<categories>
<category> 笔记 </category>
</categories>
<tags>
<tag> Web </tag>
</tags>
</entry>
<entry>
<title>Blog上传报错问题解决</title>
<link href="/posts/0.html"/>
<url>/posts/0.html</url>
<content type="html"><![CDATA[<h3 id="1-问题记录"><a href="#1-问题记录" class="headerlink" title="1. 问题记录"></a>1. 问题记录</h3><p>当上传时，<code>hexo s</code>与<code>hexo g</code>都会报错，报错详情如图：</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230317174229199.png"></p><p>错误代码：<code>Nunjucks Error: _posts/Java Notes.md [Line 91, Column 39] tag name expected</code></p><h3 id="2-解决方法"><a href="#2-解决方法" class="headerlink" title="2. 解决方法"></a>2. 解决方法</h3><p>按照官网文档描述(<a href="https://hexo.io/docs/troubleshooting">Troubleshooting | Hexo</a>)</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230317174801224.png"></p><p><strong>其他方法</strong></p><p><strong>其他方法</strong></p><p><code>{ {</code>和<code>} }</code>之间<strong>加上空格</strong>变成<code>{ {</code>和<code>} }</code> （这里看不出区别，知道这个意思就行…） <code>{ %</code>和<code>% }</code>之间<strong>加上空格</strong>变成<code>{ %</code>和<code>% }</code></p>]]></content>
<categories>
<category> Blog </category>
</categories>
<tags>
<tag> Blog </tag>
</tags>
</entry>
<entry>
<title>全国大学生课外学术科技作品竞赛 填写申报</title>
<link href="/posts/f9e15e6d.html"/>
<url>/posts/f9e15e6d.html</url>
<content type="html"><![CDATA[<h3 id="1-作品撰写的目的和基本思路"><a href="#1-作品撰写的目的和基本思路" class="headerlink" title="1.作品撰写的目的和基本思路"></a>1.作品撰写的目的和基本思路</h3><p>企业办公信息化管理系统是一种综合应用技术的信息化系统，旨在帮助企业完成各类信息化需求，包括但不限于日常办公、业务管理、数据存储和查询等功能。该系统采用了Spring Boot、Vue.js、Element-UI等技术，通过前后端分离、分布式、RBAC权限控制设计等技术手段，实现了系统的可扩展性、安全性和稳定性。并且提出了构建立体、全面、便捷的办公管理信息化工程体系的重要性，针对传统线下办公管理与网上办公管理的异同，通过实践具体分析行业需求，初步探讨大环境下IT技术如何切实服务地方企业发展，并构建完成了具体的企业办公管理信息化系统。研究表明，随着数字化、移动化趋势的加速发展，以在线办公为代表的灵活工作模式将持续创新发展。同时，随着以5G、大数据、物联网、人工智能等为代表的新型基础设施建设的不断加快，在线办公服务的响应速度、存储能力、功能适用性等服务性能将不断提升。与线下办公相比，线上办公具有灵活性、协作性和数据管理等优势，这些优势可以通过该系统的在线办公功能得以实现。在线办公的优势在于不受时间和空间限制，可以方便地共享和协作信息，减少沟通成本，同时采用数字化方式进行数据存储和管理，可以方便地查询和分享，减少了数据管理的难度。此外，该系统的在线办公功能还具有其他优点，比如方便的异地办公和远程协作等方面。尤其是在当前疫情的背景下，在线办公功能更是发挥了重要作用，许多企业可以依靠该系统实现远程办公和在线协作，保证业务的正常运转和员工的安全健康。该系统的优势不仅体现在在线办公方面，系统的可扩展性、安全性和稳定性也是企业所追求的。该系统采用了分布式架构，可以方便地进行扩展和升级，同时也提供了强大的RBAC权限控制，保证了系统的安全性和稳定性。同时，随着数字化、移动化趋势的加速发展，在线办公服务的响应速度、存储能力、功能适用性等服务性能也将不断提升。在未来，企业应该加强对信息化工程的建设和应用，积极引入先进的在线办公技术和管理模式，提高企业的信息化水平和核心竞争力，适应未来信息化时代的发展趋势，而该系统提供的功能可以帮助企业更好地实现在线办公，提高企业的生产效率和经济效益。因此，企业可以通过使用该系统，更好地实现在线办公，提高企业的生产效率和经济效益，适应未来信息化时代的发展趋势。</p><h3 id="2-作品的科学性、先进性以及独特之处"><a href="#2-作品的科学性、先进性以及独特之处" class="headerlink" title="2.作品的科学性、先进性以及独特之处"></a>2.作品的科学性、先进性以及独特之处</h3><p>该作品的科学性和先进性在于它采用了当前最流行的技术和设计模式，旨在满足企业信息化需求的同时，尽可能地提高系统的效率、安全性和稳定性。同时，该作品的独特之处在于采用了Python模拟人工操作，实现了媒体内容的自动分发，提高了效率和准确性。此外，采用RBAC权限控制设计，保护了数据的安全性。</p><h3 id="3-作品的实际应用价值和现实意义"><a href="#3-作品的实际应用价值和现实意义" class="headerlink" title="3.作品的实际应用价值和现实意义"></a>3.作品的实际应用价值和现实意义</h3><p>该作品的实际应用价值和现实意义在于，它可以帮助企业实现信息化，提高效率、降低成本，同时保护企业数据的安全性。通过该系统，企业可以实现信息化管理，促进企业的发展和成长。</p><h3 id="4-思路解析（可参考）"><a href="#4-思路解析（可参考）" class="headerlink" title="4.思路解析（可参考）"></a>4.思路解析（可参考）</h3><p>以前后端常见技术（SpringBoot、Vue）编写的一个CRUD操作的系统。以数据支持看向目前社会面对线上办公的广泛应用，结合习近平总书记在网络安全和信息化工作座谈会中提出的我国互联网事业“为了谁发展”“实现什么发展目的”“怎么发展”和“如何发展好”等几个关键重要论题探讨办公软件行业的方向。较目前传统企业办公管理中的痛点与不足从而实现构建立体、全面、便捷的办公化管理信息化工程体系。</p><p>基本思路：</p><ol><li>需求分析：首先，需要对企业办公信息化管理系统的需求进行分析，明确系统的功能和用户需求。</li><li>架构设计：根据需求分析，选择适合的技术栈和架构设计。本项目设计使用了SpringBoot、Vue、element、Python、MySQL等技术。</li><li>数据库设计：设计数据库结构，确定数据表和字段，保证数据的完整性和一致性。</li><li>前后端开发：采用Vue.js作为前端框架，Spring MVC作为后端框架，前后端分离开发，降低了耦合性，提高了系统的可维护性和可扩展性。</li><li>安全和权限管理：系统需要考虑用户权限管理和数据安全保障，设计安全机制和权限控制模块。</li><li>部署和运维：完成系统开发后，需要进行部署和运维工作，保证系统的稳定运行。</li></ol><p>该系统在设计和实现过程中，注重了架构设计、数据库设计、安全机制和性能优化等方面，实现了企业办公信息化管理系统的基本功能，具有良好的稳定性和可扩展性，可为企业提供高效、便捷的信息化管理平台。</p><p><strong>线上办公与线下办公分析（可参考）：</strong></p><p>线下办公的一些不足之处，例如：</p><ol><li>时间和空间限制：线下办公需要人们到特定地点进行工作，因此受时间和空间的限制，这可能导致效率低下和工作延迟。</li><li>信息共享困难：线下办公通常需要人们面对面交流，信息的共享和交流受到限制，无法高效地与他人协作完成任务。</li><li>数据存储和管理难度：线下办公通常使用纸质文档或电子表格等方式进行数据存储，这种方式不仅占用空间，而且数据管理也容易出现混乱和错误。</li></ol><p>线上办公具有以下优势：</p><ol><li>灵活性：在线办公不受时间和空间的限制，可以随时随地进行工作，提高了工作效率。</li><li>协作性：在线办公可以方便地共享和协作信息，加快了团队之间的协作和决策，同时减少了沟通成本。</li><li>数据管理：在线办公采用数字化方式进行数据存储和管理，可以方便地查询和分享，减少了数据管理的难度。</li></ol><h4 id="提点（提取点）："><a href="#提点（提取点）：" class="headerlink" title="提点（提取点）："></a>提点（提取点）：</h4><p>本论文从改善传统企业办公管理中的痛点与不足入手，论述构建立体、全面、便捷的办公管理信息化工程体系的意义，结合习近平总书记在网络安全和信息化工作座谈会中提出的我国互联网事业“为了谁发展”“实现什么发展目的”“怎么发展”和“如何发展好”等几个关键重要论题，比较传统线下办公管理与网上办公管理的异同，通过实践具体分析行业需求，初步探讨大环境下IT技术如何切实服务地方企业发展，并构建完成具体的企业办公管理信息化系统，论述未来可能会出现的业界变革。</p><p><strong>研究背景：</strong>时至今日，在“万物互联”的IT浪潮下，我国在线办公用户规模达3.81亿，较2020年12月增长3506万，网民使用率为37.7%。在线办公细分应用持续发展，在线视频/电话会议、在线文档协作编辑的使用率均为23.8%。一方面，随着企业数字化转型不断推进，以在线办公为代表的灵活工作模式将持续创新发展。另一方面，随着以5G、大数据、物联网、人工智能等为代表的新型基础设施建设的不断加快，在线会议、文档编辑等在线办公服务的响应速度、存储能力、功能适用性等服务性能将不断提升。</p><p>办公软件正在成为巨头们新的“角逐场”。2021年8月24日晚，金山办公发布了2021年半年度财报。报告显示，金山办公上半年营收15.65亿元，同比增长70.9%。归属于母公司所有者的净利润5.49亿元，同比增长53.54%。</p><p>可以看到，金山办公总体保持了高速增长的态势，这是多种因素合力的结果。其实纵观整个中国的办公软件行业，在近年来都取得了一定程度的发展。一直以来，中国的办公软件行业都处于一种不温不火的状态，说好听些是“深藏功与名”，实质上就是不够引人注目。</p><p>然而中国市场对办公软件的需求实际上非常强烈，疫情的到来放大了这一需求，使得各类办公软件迅速得到了用户、资本等来自各个方面的青睐。加之数字化、移动化的趋势和一些新技术的推动，更使其迎来的爆发式的发展。</p><p>在这样的趋势中，巨头们也看到了办公软件行业的商机，并就此展开了激烈的争夺。由此可以预测，办公软件将成为新风口，行业的发展状况也将因此更上一层楼。</p><p><strong>技术现状：</strong>新冠肺炎疫情的爆发，让很多企业不得不开始接受居家办公，该模式推广的可行性也得到了充分验证。全球各大公司都开始重新评估对办公空间的长期需求，也有不少报道聚焦于选择终止办公室扩建项目或大幅削减空间需求的公司，引发部分猜测认为传统办公模式或将就此消逝。</p><p>办公场所并不会消失，而是在不断演进——许多公司已纷纷选择让部分员工采用混合办公模式。而当下热议的“元宇宙”概念也在未来办公形态中显露雏形，前沿观点认为，元宇宙或将彻底变革办公室工作模式，其虚拟办公场景将在未来办公形态之中占据一席重要之地。</p><p>据了解，国内大量中小型公司或传统企业或机构的办公管理仍然沿用具有普适性、功能单一的信息化管理系统，这些系统仅帮助公司进行考勤、工作汇报、审批等公司日常事务的处理。</p><p><strong>市场需求：</strong>2020年初，突如其来的新冠肺炎疫情席卷全国，传播速度之快、波及范围之广，对我国经济社会发展带来的冲击前所未有。在以习近平亲自部署、亲自指挥下，全国人民众志成城、顽强拼搏，疫情防控向好的态势进一步巩固，经济社会运行逐步趋于正常。目前，在统筹推进疫情防控和经济社会发展工作过程中，要充分认识和科学研判各类市场主体特别是中小微企业面临的困境，着力帮扶它们渡过难关，提高其生存和发展能力，维护经济发展和社会稳定大局，确保完成决战决胜脱贫攻坚目标任务，全面建成小康社会。</p><p>民营企业、中小微企业、个体工商户受到的冲击最大。它们规模小，资金储备少，抗风险能力弱，生产经营困难多，受疫情影响，很多企业订单减少，原材料涨价，资金周转困难，不少已关门歇业甚至倒闭。</p><p>政策鼓励与业内企业发力，让在线办公迎来了新的发展期。2020年7月，国家发改委等13部门联合印发《关于支持新业态新模式健康发展激活消费市场带动扩大就业的意见》，提出鼓励发展便捷化线上办公，打造“随时随地”的在线办公环境，推动完善电子合同、电子发票、电子印章、电子签名、电子认证等数字应用的基础设施，为在线办公提供有效支撑。</p><p>在线办公市场继续保持活跃发展，用户规模稳步增长，服务生态不断拓展。《报告》显示，在线办公用户规模一年间增长了91.2%。2021 年上半年，在线会议日均使用时长36分钟。截至2021年6月，在线视频或电话会议的使用率为23.8%，在线文档写作编辑的使用率为23.8%，相比2020年12月分别提升1.0个和2.6个百分点。</p><p><strong>使用的技术栈：</strong>前端使用了Vue.js、Element-UI。后端使用了Spring Boot构建项目数据控后端、Python实现模拟人工操作，实现媒体内容的自动分发、MySQL作为后端数据库存储业务数据。</p><p><strong>设计模式：</strong>1.前后分离；2.分布式；3.RBAC权限控制设计。</p>]]></content>
</entry>
<entry>
<title>神奇动物在哪里之水蛛篇</title>
<link href="/posts/6e871d44.html"/>
<url>/posts/6e871d44.html</url>
<content type="html"><![CDATA[<h1 id="神奇动物在哪里之水蛛篇-📔"><a href="#神奇动物在哪里之水蛛篇-📔" class="headerlink" title="神奇动物在哪里之水蛛篇 📔"></a>神奇动物在哪里之水蛛篇 📔</h1><p>今天开新的标签——《神奇动物在哪里》，用以记录在网上冲浪看到的神奇动物，在去年就已经对这个标签有想法了，但由于今年遇到的事情有些多没缓过来，所以今天开始一篇一篇的开始写啦。</p><p>今天的主角是蜘蛛，一生都在水中生活的蜘蛛，这是我在B站看国家地理视频时看到的<a href="https://www.bilibili.com/video/BV1q14y1J7CL/">《找到了！一生都在水下生活的蜘蛛》_</a>，感觉甚是神奇，所以在此记录，在跟随着 “狐主任” 小亮老师的旁白介绍了要去内蒙古锡林郭勒寻找中国的水蛛。</p><p>据视频介绍，水蛛以前是单独一个科，现在分到了卷叶蛛科水蛛属里，且也只有这么一种，本期视频的目的，探讨水蛛生存的环境。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315130359900.png" alt="风景好美啊"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315130623018.png" alt="黑翅长脚鹬"></p><p>跟随镜头，小亮老师介绍了在草原上寻找湿地的小方法，只要看天上哪片的鸟多，下方就有很大可能是片湿地，因为湿地里有着大量的水生物以及昆虫吸引着鸟类在此觅食。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315172455898.png"></p><p>随便一翻石头就是蜘蛛，不愧是大佬，记得小时候翻石块下面一般都是一窝西瓜虫，密密麻麻的。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315172715748.png" alt="占国家三分之一的皿蛛"></p><p>聊着聊着就抓到了一只蜻蜓——褐带赤蜻，自从长大了，就好像没抓过蜻蜓了，还记得以前小时候遇到蜻蜓就想着去抓，总觉得蜻蜓很漂亮，像飞机一样。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315172945573.png" alt="褐带赤蜻"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315173129215.png" alt="咱主角水蛛的亲戚——卷叶蛛"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315173236219.png" alt="花蟹蛛"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315173403425.png" alt="狡蛛，可以在水面行走"></p><p>在以前一些湖面上啊，都经常有跑的特别快的像蜘蛛一样的昆虫，那时候还不知道叫什么，那脚又特别的细，小时候就叫它水蜘蛛，长大了才知道原来是水黾。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230315173912236.png" alt="豹蛛，可以短暂的潜入水中"></p><p>虽然能潜入水中，但唯一能在水中长时间生存的还是得咱的主角——水蛛。接下来是水蛛抓捕行动</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316181155631.png"></p><p>水蛛是要住在气泡巢里，这个气泡巢是用蛛丝和叶片繁密的水草搭建的，所以水蛛就特别依赖沉水植物。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316181346758.png" alt="水蛛遗弃的巢，像个蚕茧一样"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316181506506.png" alt="水蛛：出门溜达，家被偷了，衣服也没了"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316181632759.png" alt="主角亮相"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316181711950.png" alt="可以说很可爱"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316181755046.png" alt="毛茸茸的尾部"></p><p>可以从上方的图来看，水蛛的尾部长满绒毛，这样的绒毛有很强的疏水性，可以让其表面生成一个气泡膜，刚好呢，水蛛的呼吸器官在尾部可以在气泡中呼吸，水蛛腿上有着长长的“腿毛”能让水蛛成为游泳健将。水蛛以什么为食呢，它能捕食湖泊钩虾，水虿（蜻蜓的稚虫）。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316182341592.png" alt="水虿"></p><p>蜻蜓目常见的有蜻，蜓，蟌三大类。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316182448633.png" alt="蜻的稚虫"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316182510129.png" alt="蟌的稚虫"></p><p>啊，上面都是水蛛的食物。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316182712263.png" alt="仰蝽"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316182845702.png" alt="潜蝽"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316182925535.png" alt="龙虱"></p><p>捞了一箱子，小小的水泡子可以捞这么多的生物，生物多样性嘞。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316183128700.png" alt="咱们的主角水蛛，一雌一雄"></p><p>水蛛的筑巢行为，首先在水草间结一个小网</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316183301971.png"></p><p>然后再把腹部露出水面，再往下一拉，就能拉出来一个水泡</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316183407963.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316183437761.png"></p><p>再把气泡放在网里，再弄几趟就弄好了，水蛛的小房间就弄好了，可以在里面生活，交配，产卵，休息，吃饭。而且这巢还能根据渗透压的原理自动补氧气，但水的补氧始终跟不上水蛛的耗氧，所以在一段时间水蛛要返回水面给巢补充新鲜氧气。<br><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316183541959.png"></p><p>当捕到食物，发现食物没有房间大，水蛛会当场装修，直到房间能装进食物。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316183937594.png"></p><p>水蛛会在冬天在水里冬眠，这时候会跑进螺里，度过冬天。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230316184016465.png"></p><p>这一篇就结束啦，水蛛真的很神奇嘞，能自己扩大房间面积，还能在水里生存。接下来考虑考虑是不是应该把植物也弄上，不过这段时间想尝试着养花，具体养啥还在考虑，到时候嘞就写养花的历程，如果养好了，就写篇养花攻略。</p><p style="float: right">2023年3月14日10:59:27</p><br>]]></content>
<categories>
<category> 神奇动物在哪里 </category>
</categories>
<tags>
<tag> 神奇动物在哪里 </tag>
</tags>
</entry>
<entry>
<title>回信，记录</title>
<link href="/posts/10d0e2b4.html"/>
<url>/posts/10d0e2b4.html</url>
<content type="html"><![CDATA[<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="抱歉, 这个密码看着不太对, 请再试试." data-whm="抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容."> <script id="hbeData" type="hbeData" data-hmacdigest="6090c52ee25c491572f2998d08fd652590396488db93224272eb9d313e42145f">0fce45f9018127161724d7c793e0b9ebd5ae8f1666a120c6dd7165bd2400cb1458fbe333883b70721cf0ca21fe6191700078b6ba620b4d898d955a74249ba24c13f23dbb97e98aa0c01c9117f22de5faf170e8e89359adf550032b140d274eb87a7d9fea37623705bb66fba5868fd0cdb89780a09a5c34093e88441223cf0f3f9583836efa7799445bbd10e7b3992e4187488de543979b183966cea50f10fdf7ebb3111e7c6e2488435b3db2b8c1af8cd65b61ad4d14d9566eb745e7e9b796d07df741a731407ed11f6e6d4af8b309cb78ad0368a7d9e32c2dfafa0b6b7f585a11c683198216f00d5d897004e5044ee5fafa3aa9719b0da1d2f7a0059aa0a554a556cc088d8df5bfdad82926b94af5a2d9dd5ff16a0bec20bdb3b14c674095978e31bc7f7d3e9e030b7b4dae48d2f41d464d2f578f42a283024ade8d2100113b4b29b541a1fce9cd13ccc705620c5d74dcff0c1378aa1df1c7f30343f79d317601cd24d04b63a97257f38069be815581d5c0497ec4d577a37f240c532117c7463226aba4fffabf448fd80d7c9260b13cb125c981f168bb81e9f77cf808b1119cb8597e5bf8128a3862cb4185f31ec928a9a5806381c3c2feae52e20afe619f4e1265d635c3ccad105aa9c94d7cfe69be906060cc9e5b0b4aabab2f2ce7bc7d779a02fccde1384bbf2751d4d4ca3a15d77ff987881541abff1b0a7a86f3554e2c0ead045181afa2d5435be871e87067a6a1a85ae5654fc5212d70ba3b01334d08ff32805ba4f701c96f776ffbe86f1c4bedd4a8c6e8fb4ea678f1db1d55253d091479f21170d08157f7dc9d7ba6895fb6c6eda6f8f91d401e30c0c1ba64517076f9aa98d588afbbf361daaeaf6389d14c97bb121754528050117a5ace0604d6ceb0dfb4bdcf8b15a5a002d2fd40af34666c4f075191badff5632c073f443ea2a7ca765deb13cb114ce644bead9884a4037e0efec6ef33f5c89fda48a8cf28e120208bad87b5cf420bb41d2cba402598fca52fb7fb519b1b1d17c3b7082cefd4ba34371906dd5ca07bfd66b45d3ee59d5885ad3c1a4e3dc76973f47844d4f004451cd941641242c42ca085ef67d009c2854222d02001f888abb6fc425a2b6e31812025eb75f48dae7527c58ab4bb8baabbf32b6085f62d3bb14898f9f2729e19fc4cac8f0aaf24a50fa9cd85f904982df59e90b910fd2cbb8cb2f525397c0b8c5b518abbb11d31e8e2de182ab34a3d8bfedbe339173c2736d8274c00ceff19cde51685a7cf358fe6ab9fb0e3d50fc111d2effb1bd8c95a3a9d8034e14ead19efba698a55f216bc649272d112d174ca775bcddd0dbb847bfe33ed692c555a3b759404c0e8a57bd6d41a730c1886e07e95e379d9363a6f493f20aa127349b0b3cd11e71aa6f4e0fce8943c7a792414410fe9b43e1b96e6137f19e5a369908369cad255d6f5f7365d3a1e3ddc304e7cf866378cb4175a31f9c25fb83f5e620718c3c073cb0648a407621f3619be3160fb6bee4faab285e4843c9723a611b5c42628b9c66f3daa657acc9bc5aadbecb3b7c92e98ac23f36b58adcac5023e4f1d4910eb2e96f833a1f48df2705e282b20895989bdd376900aad198ac6473f4824cc14be51e6411a25ec1bcbe1fb26e4fd87bcd05ec13d207f22dfeecb59c9bc73c04212bc0fae2a20b6d1dcd7997ac1a4e80ae4f29498a221f6b8a0ca0f95983973c50887c8aa32de12fb80466c8e701aa820665642a21b4807f81ca5a6b708224945a9ddd53b4ce7b91c5b0f71a8d04e8b038effb259a639e46fb7be1ab52372e97fd32b544c7f36159b54d13424f92c666ebe6c52aba87b14cb86ab302f3b3aece2c0619002fe2a913c9b06dc3325ce2ff48f6124cfd992b0138d9e166554a51c8c83c38ed574a3f314070f7395bf479db8a3641e3e8054e0a98349b413ab02386021bbdd77648656dc90c458ac425ec34584c692da79875db0e6f3f0b5a78a5eef87adf448af849b8503524898ca5bcca1eb9a80a984ef6cb8aa704de2a2add5e137c6dd4f120e38638fbb8be39dae564f32da7e39e0a490ed2c2a5d47db565e7539644fbc44323acf0030a488a069467fbfefe3c9aefb9cb512128a7bc3b9e093744b317c64455392fca1b72afa1300bf7608dd723391594ffa20d3d05e6f804c040defcde3abfcabe486b97231d3a2d8a9981ca7264ebf135437a993e5f3af89fb2f4b2247ac20048a87564a9fe495e01c5beb767bb26a823e955fbd004218237b953ed7fada98369fbd94db0c57a4fc83b6a5800aef798217687a2af0eae931fb6b27ebb29bf1737fab1a1e41c6060374ee71432ca6ff539b5708d09ae2d14275542a852c030dfeff15f7db6d066f48d5e36ed06168c1929359cd1a9a781b64dc86225ee89428643c7fedcf7bd9cfb7d646896c4a6d51d41bbdbdff2365ff7c373bcffefc3a99ca3105950c261db0b16c3f159fa5f3b6c5a39c4f02b77b7e11475398cb999aafe30e2d8e48eae7373ac8258985b6a96dd01047a14f4ac3b9902cae4655bbc81a0aa205161fb8c7ee823cf1915a640bcddb574d5755dfdb87fa92f69d5fb6b1fff31a0fccfcb55f9ff2f05d4f7a1f48c4566e948eee49378b1271713c2f87012bd8513db635c90c5365b69d8f26561fdf70d56b3c8919fca28c72156bbc0bc2de15e35c2650a4edac6c1d8d605057bbfc4eb924da8b53935e294cb39967d79555043c7a35f145a84a1ebadcdb9832eef373acd3c4faeb89a2c98ebd85d2ff3c5bda123465d7d1d32f1f7f92c366bd45d12d9d05215fcf203485f97b1f82845eb03d6d07b3ba726f0e94f1abc325bc67b48e5f62b2704e61523cd44a1abe5ee60f125d3aa66b711b733f35ebfe2d4b2e432d87b07eebe90c0294f00bbb1df290fd3c94de80833ec62d0c5d60e25a05459d5a588754229db8614b2460d43e29eca6f79f33d78cad0ba005956c2b91bca73b886c29c896122184d327a739c78f3421408b3dc146abd5aa9e998c48ba31e8e4eeca3c6b26761714c616092358bcde2dac0ac62dc558e652c04c31de32d647531a8b1857bf08cd12a5d87d68133070ef5dc1c14a21e9c514318b2a918a94a04f9f6de281c51a0789c24b580737b1c0d9842f332e50ce3c179c857707e108ffe3951acdd69434410d8670d3f3a0bfd85dbd950d8cb72d2aa3412f86a85d3a9d9f00a2e314b68a24e93423ff3c8de919c7ba2bb2f028f707762f673bb15a421525b2032831074f68603994963ae8ccd4e1cd92216d9df96a0926c1812f30cfa3388d1b808ce3979fd9dca389ac9fa2fe2678023c43a06c72a36fd09e60ea4e48c176d9f7c758f1e3906800fc4236ed3d5bf0d7c5d4d593ea10ff1f52d0c475e802b9aa6320484c6ec7b2f25c39b726ba416a56ae00ce434c31b8b9a022c1cba7762c77573335d097b44c342b63c35adfe2d3145dd0a7034a17288f813b3f276235b99f60b653cf6d7c86865857e0d4ad345da1cb83f4b00075700e1eb682eacb42921d669d7401eda88de166c84414df3345b1ebe54b43494cac2b21f95b35a294bc192e90fbc74a7008470098845e7836d7a736a5c6c6980b41b6bee5b4e0dd7007ae3c0d6956c1dd72eb50f701c8fae0b64abeb83b7ae48ff045207a7be2fb0ff7e8cd2462d6c93b03c5fe5baf2f65e4d93f56f58cb913f0f9ef0b0936aeaacfc1aeface580774a605b42e5069a554329e043b55ee6c2128e417650a5ed09f7059dc1259cd4e0cf93ec33a0d6e676424733e7b2f7f58b66ebb06f8d54c38f71c24f24c1213df4da44e14150b6f575e96a8752b07554fa405bb0055c1bb82c9333c65cfc7366c49857835a454f3caa4b3bb3534ef928a1c3dcfb73a1bc2357e8e461490c7a3f830fddf3b850293223dc0464adc270c856f047e5aadf4302676e7c86158f2524acbeac9b40c016f77bce61eb7dd9ad14ee2b2b472edc8a3a213059c9db6e5071ac69ab062207b6711cc8891e65d83d7efd7242af6957fabd3f635c116dc1ce27797e07ee55d74d5fe56c7fea1cd201ceb4fece9b3df085cf64b8a3c34b37b34dc6a36d34fdad664e3d495dfff26a12eed60d72afa2e536ab72b79f8c384e6f23b3aa65580a6dd15c5693ee4b2a7795e1d144b5ee3c636445b6ee717942ad34ca552c9fc26f52e502cca005a727014e60c4362685551f2a010f0cbec9c7b08e8ac9982ec729c4fa1ed3b132c0d536ebcb4693f54f451d92d4fddcc689609488cd713a06b8e4e91207c26c39a34e88f135dc3e1aa722315d5f600f277a71efac4e58db3789af481400361efbc6bf8b2631ae9ced36c9bb3b98fefa7b8907a2e3e531d1c1f20babfd2ff598d852300d2b9fe1779cef1ed6d9e476cd84d0578b04b7e2af8298a2a3b1e18141f04f798f35aee07ab5ce37b254463ed705ad9d5df33fb79f88325049e4a591870b528146375f7f59ab7d35b9546d01a72a47b09921d35116338a237a14595575c5dd98eef954c26803e9f2f7c1cb7f668d3d5063a796e0d69b96ab6e3fa71bc4fbc094aeb75d083707e4749249cfaf0f8ed17ee2c2a35f207020127a1585c5f2606d23fb098f874abbaf07f96875cdb411b6250f58fd8868fccc49ad13710c8d668a33eeb2bc61e216805235ee5dd5096dfce28df56cb2417625231c52997eca63481bf6481d39f667c8179bc7262615a8fa254d5e36d1669d956b0c5196fd6f729973db81480ef113a10c739431c0a479732e81ce724509a1cf162936f1420bb216eb5f18fd8f3ce44c57503202f8aa7d2d35447c7205bc2a1ae8b36e12e5757feaf05c6ff907767bd9a7c1dc7c5a264d38977f5f48b4f12bd9db3084dbd1ddcc496feead3314042fd31970d95f85e0bbe1d8561294162b81503f6aaf01f94be759f912c3fb0bd5c38625c0d3c0e824d490067ea04658ba700f8b7dc20c1fe21d9bb2fdd7d4b0156f1a8ba38bcddca5f36b12c6e0bdfe7de15e5e35d9e5242a085da43d6919be89893b095aca391fa40c5c10a2bc78d0d854adb7a0b1758d4d165f92838385f48e3e420fb5be4435bd576900aaa083b2f9a8bc2165e2e543ed41f2f72dde58e7fdf21d87d1272ea8d9dd7cedb0031a61e5086c5e561b2a531b7717b20ea5c823bf372c2bb46a975dfc1fafb6cab078d480dcd1e978c0f9850ce5076feb80e49621c9d926d74fff04b7c6e308ac2160c64c1cdcd5019543b9f6ce2dcc9f29df6ec969080e55af1e0c2f34299462286c3b0d99cd713f9133c15bed4cbe84103d8b100cfa9a6853edab150eda187198d1a8bba73b5a9cbbe264974a3862d28841bd2010b9e2e25174604c1e03544430ba0efc7191afd2609835749bafff9bd68815514f4b7a66397e021d6ea27a0c2ff9e72938734378a295b0c603278a719b1f881d1c1d541d2de230a66c60a64e3e178e203e75582d33d697f537e985fe32107a262228df23f9c36f3376d0fdc87906576ea401f67507abd0a608246fea8904449d0bf743903371856a562e88c59bc1ce51077606d8621113c589c4e9af37c416a4bcd1860dad3c0a356f0792fda55c8b8f8d798e8616a2adfda004abe55dd7eadd48ab4c2865dc6d69a07da9498a2e31b0a6ca730f777702f7818564fdfcd6c2572c688dfd8f85e290d0b64286d76f05a52f8aab80302f4490a241eccf64513e2a6a68b17229487590afebc346c3d495e144b8a5be747b6fc4fc321def7c8bcc770c5f6dea0ee16a6026ddd8fbec4c061c868d2c97493d0adf6d0b599b721f1903bfebd07c48d9f2f4ecb26e2e197ab4b677fca69901c4b3111faf1a2a478c69f26ce53ab55de4d5497faef5968af740cd87133fdba7cf933fdc8300f4860fbc252efe23cc027f59cd19194071b8c7ede6b598e399508b1ca82b8c89cf999d5313061f92520d0addd00ac8e665623ed141e68459c73800dfcb6c385d200ba7676c8036d73df0cdc4c7bae689143bf4fe469fda5e95b9543cec3a8c3a0f9ffb38411bc1deae7caf3e62f05f5adf64469447a02026b1d00a9ac816cda3810a0cf998aa5072bfcfdcccd8cfe817a6a44a95c160e3974ac558b7e5124c24654ab18952491d3f5e0c89bc2e7e71bc316003212b5420fd66ab5815886163361ffd295122c5a1fbbb1dd7b6c41cd762c9c8719280b15b20890d76e3427a4651ee6a8401f1e9807ce41ea8c6b151771ce6f28bc7b62d14dc92b56719ab084775f54c1fbd288a7ab7d6d078d1277f086fceb957acc580116525479d2a74539e9ea917ed6e5dbc8fceca01e53a65174e247c3be2028e2518abb17b2c1f6e5c6277b184e5e6a3a9a4dff31a10cf0b516bf00c3f3d23db7c4ddeb0650427a9ea1ce2deb0a4f087e8b292533ebcccfb427394f8b7dfd41449d1d863a7621550e844695a3739a8f901dae4452ec09209a5d9c1ad2188725968ff730f1df5627de3541fe7340f8ad808131f68cc1e629846144376e0c9fe0f373bae88e9e8220fd39ded54f6643cf9541005479712d247d31e0ecc93b77413218daf0a98d1827380d495d1143f11a1cbd1e9004d65e0999f2fb3af455e8a10a4e6427bc2448b4664c1e5bb05f03b3d435e69b187fe837df6657af6d97fce52d9602174fe8efaad7f6ce7462a2f3e842ba26cfaab482ca74fe4d23445b91df9924609bb57aa702457dbec86812595ba97793ff66aa8c2f7f0242364ccb744733817464bd1204cb7e9a8cb576e14678017b90b4e76562772cdddf33f5ed48244d25f2ca6b94341f0bb54f8ea981f958f549fbb005cf0e5f006e66ec76828ae2ef168df242d1a0ca1e0fe39718370995d535c8f4cdc2015fb2e8c883d6fe54f1bc532a6786909694706fe331948ace477913adf8088c144024113cb1a75e8aa31b36286dfa0c6232a279d61fa927719bfc46cd443080e9a89a14b37b1aea26705327058e3f9ca02816d45e2327938d9401b02e7cefac9296be0f279342778c061015a9fe426666aceab133f8d1c0e88781fcfd6264ea524b8a55d7f7d67231443b79224f0dba658c1462019428f80460abf2dc6c07b58f0fa310a2c165c68574c3c44e22b43cd197bf45f73e7c2351cb666077ef0abcb3a43fb6623e578da14daaa8497dc98ce0aad00b09b52d004c2330e7371b4454daa4ea2823e82c7cce1b4e977faa70cd9dcc2e842c305ab73ae5a07efbc18bc61282453e2385960b08ea116d3c04b26cce01203dbaab7d2b2c385c5d8f24d663452c8556cfdd7e5bd34243631c56738d2952e15fe467ca0e15afc8567cfbdeb96e0398ae7394357e96becea43b1a3a4c44651fa02e20746715334b65e7e7d3a0e5ba206f6ca748cd8936fddc665f28dbf372187abd4c2aec53d29ab2884494aef781dac22aab498478eeeec8f147b579ee29a1e5cbc18c2141993449d84aa383a2f20ffa1a3fdfb9961ccaffcc8977632d54d26881aa57cc90b463d82b3c50051c0503a428b328e115235f89b2c8e53d9210683157100671b10555ec58e099e23013df1e8becb441282cd365ef807d07a831a9dd0d5dfd00f857b59dcb9dd434957465d038a355fb71b416303e27144463a3a6f4543f75c0741e5e82db47775b7910d3cd99cdd7206285d46fa53cd283e4e4ed95e78ee3b8c48ae4ab56085e84c3d8b3526baf3d12c9497ef1834131b091b838f912f0bee049e98ab42ba7636be6e1110125cd6642a5c13f29d6b84f807b573dc59fc24d64fba61ac2208f47b741d9d0be01a78ee6a037fc6e0775f32dccbe29b7412ac6b30fdc2cb264383427d4c2ce8c527e70fa6a9fee3a0d1ca6421bdd7fdc083d9e4caf97cc633324c298a0c7086007f92fd1460f970f8eb57c932c8ac2f7eda988ce8a45a56621501b8a6cb94ca700395f89293e234f9167d76b4d52ad56d2f2c72deebe3df0165682d1bec438e539695075bc0258bbb107d56d33ed756c6e07e147e6e906128333ce33a446e24ade8b2de552c37d0c2de6cc3f4647cbf40b73f07fda84df70c9c785a64adacbbe6832e7dadd84b2916371107785db856ab8c106f17c8c4cf7c9c3de86d60f5abf7fe616a76ce76283aabe929252ad7c69f02b27ce5e75850a418b911fcedc82da7b8836117c8da61d3a60e3de162c203426337da54f87a57883d9879d55708cff07f3bad223f77c6fcc2ab11ac27ac88c790dc7cc76392ad3a5296b07b3cc821b0a92fb8fc74e4ed7f361a95ad0e004db4547b7f754435ba19ed6cf9c3474421cebe2bbdb75393d05476f382ece0a72f756af15965105a116006f5448c6f853a992a5ecd3d918b1dc4bdbe3f671ece95a6a3906ba2fda2905426b8cf76fa55864b10aca4b77067defde0b60d77c00ab42bf9b6f44fe683efdbf28d758038d8bb713c5b78d4dd5b4a57bd8c95725da3b4adc3d52ed429f0c88ff3f13895a1adc1d2766598596b291c7a7f7a218d3da4ed559b804e8d90a3aa603c3dca303a9bffeda5900db321f0cfa19a69e9700f45da97594baf888c6c95ca701c5b8e9f9bca52bf0e407e53bb3c5db4b0493327a71acfd36e01001c9d85c38e8bfa74a3e2ed0e10b4a1592e36a1a898caa54a6cfd1a548472f863c95c56ccfeee6e480418bad02582e51b9f1c723b18d2305dce9c4476d498d8140a1b1da3b699f5bdd2c6c0fe217f1baef7f30017566a7b42a99d0dee80b3e65727fa15fcb1064109eb9574a61d0f2dcb787722672636ec33dbd6f941b098e00370afaa0dd4729c4e6ab80b064526bd24f8d330f0d3122fe275eca38db5fe3b202f5e71408962a0de1880d35cebcaaa3955165b4c3610ced1e650cb76f03692f492762c1086f1525ab7416be501e7f0440b4cc7bcbc95d484e638f3b1653cb2d2614c594811de52517af2e97eb51d8064f1702a34251410874dd41b7183ed70b6d00beb19af2dfa6dc7fe2f3fbc83e8f37c5503a6ac1d56e175abe4f59854663db3909837cdd083e3fb3361a72df7bf13ab4b174ec07ea84f2abc6a2a6699a405dc2aac06438394ca72d7a523b3d92985198c26e014fbfbf163f2e5d6b8c64086ff968b30f0881c4960ed227ade28a1cc9405a4bec7b9dde4c40f0a6319312464e166e21eac597dc38046ee4fc14d23720712bb4ec6f5ecd6d5bd912df3b1eeaeca0ca7c2b13f110ff21a666319312709a8eab21ad958644a81d54512c3656f5014d92a9805ec16ffe71f88b426f50a820d59cdab2b5de570f58fc59ab374bee1328cdf902540c259ae7248c6100eab6210d1823ce73fb7bd6de19c3184a05e36699a703519198a01b54eba481f4bd89c664416ffb7b6da67ab1a00d5e6a22106e25d6512a148662555a34fd3375e2866ff2d8d14f59e128f27547e5ca0b74c19dff58414b9e86047e3a44f98baf67f5cb6bc58a8e57ec65f26c28dc6724f50b17e8cfca7f3563ad76fbfc288bb53f6751bb691d766db5054d4cbf6cc7db23466c5b0a91861c4a58014e1f078458c99f47c3a2ad989b2769d6a8919116063f1026c72ae9b3131a017e6e4c8ca23e46b7de6761238a9e2fc91979bff739a849be44156b559f707e07fcbc1b2aa323c5ffcac8d44d88f728730549611e7f437920e7a51e94a95d8cf95264c31d5fd41d76b103bd48a171a042f107105f164734b491a64d83956e70dcf4ee304dd9239c7cabca44e70eb989595290511552d66d7efc8b90734a545609c3ba9d82a7286c049a6ccfde3ff62effa5cd5e94ba870aecb6809b9334defee26a6cc393185c2e4f5c6ac28cd29da1f261e1b8ad4826093cde6be620e70916ba888e74a6816dc33627fe73952e1fe5de13bc2f827605593a0fc323ce09891195078c0ccf58467099b5889a62ff68ba87471eda42d80f0cd8b9661fceba18b389fde071ce09cb5de14f7c423eed94aaf2e32beef7482a80e23128b98ea8ab9e48dc0deb13c8eec77f8c8314578d312fdb5a04ceb040f038c2b0e429c3aed94809e47dbec0442b73faa6a44c26867aa1961c332f5d02901382b3fa94b31db6eeb57237af274131e19d9ad656c94d7d139239181513aae03b50cdb08fea58c5dc4572e8273612f93fba47014b0f6b823dc2ac37771c0966012fb489db2961222891cc4a95978b2b949decfa02f513869113e05eb97560f3588f48f426696a3f8b19ffa10423337bb805dc1954b0191d2c6488c4a70349d810c7186ae63691fd13db3152864c9bdd6fef9845febcf7adc3837a03b8729e0008c3b527488849bf8529604607761c9c9f993b83383126e59e379cb5c5df325d1096fc047cebaf539731d5a09656e5b5e5618513d161be31e03b6616125abe3b107592caea0521f7f051e6e5c1abac5a10150688b698cef2572cc29d1bbee48236d5f9530a61781a51b866f0ec0c27cb82614d3ddec531e2a970ab894f78cfb81ff286428e3e245f2ceec1b4f4ef271242cf17d02263da74870a208c71b5069d80e3c9416fa261a4a63e076abf0cc7324cfb04bb5ded0b5057e77652015e3f80796680ae018e9e0928c77ef1db5743b9fbf3d546d687f397b2267d2bc790b2505f35abfdab19e4d78e708827aff2b8b3bc22454eed691f7ef73095d5a00464734e094d880e3ad0a18625b3796f96769c2d3b19f69bf3dd48818f4cb7cf3dfdba7fefcc615c1908b48793786737a04cd42fbe0d82a1e66c7621abadd7ca6b2850db79c621fa2fe29174dd241a18c89bcfdba4894f280e411a3d60f0f148964e902394d5e0cfd749baba5dc92a7f69a8a31242457e7c01b2fe42bc65be826f9148f17c40ddeb01a7042da72d3b1fa2d128b8f6241181420a69ae7be547fc7860be1dfac899581558c0cc51d22ce91d8760985d4854842109aa8ba655388de81d3b9912da5789ceeebf172b1c25f4738feb43228df49e7f96ecd4e975da98740f0489d65973cb13f91edff72e21a617e7811b09babde3f46c14e9fea586b5328788e5100c5756bb2a62bdc0354ba238e7dde1ee72437394c1f2b7ac91a3bbc21b5b6d5c7860b93e1507b423f6c77da15450ab2f30180668a51d2a89507548ac5dccf0bb16d57428ae61a7834069072dd5f43a23a6a6126ee221346dc5426c036168e2aa8f7e45bf1436b20bd526ca7ed903cf525f6fa80540b4ab8c818a6b101b3671ddae7915c49585097e766e4522d9dd260ada15bedd9808cb1e2e4a8cf636529fca10dacd679050cd6e46a5da3d263a31f5c0cfce79b26b1fb51f94b4392caf52335c3998fabbb60f0d8f3a8f1a8699e6e00780f85f2d67895d0c112a61f5e307c33d1ad2e8f5a0998134a5b15a822c3ee8a5ede084ce7d4585ea2622f99abebd011d5ef9b76311a3aa396985304daff2bc9e6c64b26cea6f7a0baf103e2d58ebdb19822b59374efbfe2e14f753ed596ea663292ff064a9f9544441d5cebd9ec9383558dd5e4c2d4809e777d1b12ca1213b3611ea688fad290d1be96aa84ae700546609717d701a303a68bd41cf4d011df68ef0831b6236ae1b7147463aefcab41d569e298ed8dd2dfb7249a3a194586f2aa32c5860e7096f0bd1b47e27fc2fb64bb479700288dcb666c12948b8d89cad2fbaab64d75b309d80a10b95068828ff44b2ce4173d669fd4982f4682725be9f7b419530e5bb1fe6a88c380a68165077be1ec9e84652b391c0df305e30ad149cadd4ffb1b7830f469264611b6f08b509ac1de49cc1f72795ca8679d5073c0ea15d0d83e8f0481f6a742b12c0839219c1c27ef3f65320a747d932f8ca4a9cbaa8f4f40a4c6267c9d719a1148f1e32ea74aa0c95c2c7bb1289bc93a78b79ff16f1109691ac438d1974db481abebb87dec4376d0bb295eb4fa3fb0848d3202fce7df1cd8f5cc42d68deda47e91cc38b5d3c4f0fa12f68b0540dcaeb7d2b678e4794df7a07702aef4891e29c0f3228545e2ac62201acd269cab0b6568503588c687da690465ea45d0ec623552d30591d5b8fd268581292e424e82501f347de63172fbce8c2fb690003f8294a234540643c4addacfe115558dd03bbb314e011c78bc4262a823f98b0a89574912571f089e8f293305bbb4416d229fdd1fbf9e1664ab497b0a6249a073033be8c7b8b83d690c6c9e25ee41b3b0f98f19c234e31e3ef9b6db7a8788a376577ce8cddb0314f4efe1f45e1f9d537960a2066f43298c9a4dead0deacf52f4cc3607dc8eca84deeab31e99efc5cbab2338b88fe1295c1af56656f7c10c062843924cec8fc601e05f87074d56e9f73a76aa4f47e852391527b20275647eda6dd6e9ee8dbabb4b94df83add8b19aded47550eb93cae0a61b18738ecb331a821068ca5567d12cfe95ad7ecc9b6ce861fd1d9c3ed36a11b333ee06fed78c026971f34b82a4f822605d132b32e4b5b79404426df7c8071fea41ce9e2cea91d4d0aed3f352e050fda9ea90c2f6359d72806802be08921e25995f36e8c5dcc257745dad752581003495bbd4a923aaee333a4bf50ef1a5889e9f0ec9f8fff28d67e81e57b725a7de5ca45970068cd39a31bffdd215610297f6564925006c64701a517165f3f851dc3604c36b37d551cee8a9e16ad823acec4f2f99d6933fbd2ea236bd4d45a31591eaf97570f4abc2ac3e72985d5aac510bc3c47f8e18685a43e98de1a2602ab3be4afe59d8c34b0ee800d80fb92381c0e8e6ba3dd3f4d0360c9b7ac1f77677ac749f513c58e5c48380a28fa84b7386d66b7bc6258190e557fe3d942cedc3d12eab9d8e9bb3f9b5ac84856b9b2e8c3d1687d463413947b928b4ea78dc41c7e9d265a0e0e254a6c91ccce6c5f0cfc4d0a1c1cc51313784eeaed909c3352da9eefc5fee7196d7aaf9fcbd4e329c4b9e618d7d4ccf702a142833ba8b1a9c5368ad43783bf3f9777e989f5c506c47c6e3920941f404dcd1569680238991963589f90261dd5bb6c8487cd36750f5ea01b07a1501b2644d34f766b43f7bb3a5f20d4effcfd2d2cff78b728bcdeb13680921123a663c9b83043c22125c6ce0fd340673766d14e3315c0ebd975661cdbbabde93ef0d80e7a8278d5a2d61c907cf3eabcb3c76cba8e4ea503bbb565f117825124eb073f6df2eb0393c15b37a96b31e54c189065eb52718f3713b23cd0918ebd00ffca5d4da43fede557da20a29397627d4cf0ede34b5e0f1f6bb41ac2986ffdd18bb47566de230c3254e99d0ad2293e394025135121df38ce1f5c40ed337fc1af5057fbd212372e2c7cd512bc5273df225dadf0d6cb55eb253cb8b824f5ff3c8870a7a7952e0faa051c5939db6153cc3c7ec65c007663f8de055c8183159fd7a4f4d47c18cd44c20f63d1641e4fed2712d2289672c0088cc9fdfec2ef36802078d1a961805b7bb61938c2d72d0e236925076b757d6aaa2e4c99fd99d05087212d1afd081a8de82c017a2477bf12fdde666edaf440d0bb8c6ee2d42e695dcad43b64c37991ea600897e5aea299641cddd5d0346f75a98eefb92c757ce9511658ea4998bbfe7d80020dede90591759c36485a28765f84f6d2afe530519c6935d7e4c15b6eafc99b1e892eb1e331312224df74c8a3e7e1abdf35cbeb7960d83631f5ea9fe6e75144785f5277ad445f61b5d4a754b894391126c589a1d6462e3dd76ac7321740e78a16dd60532eb43538ab1b254e7b3d7ac77da38f0de8aaf7777e9f79cb30b4c04203dd52dca1c03cc3f259876f595619d5ab281a2c79aaadae16d017bd181bfe6a37a67be1799639b2ae75c8fd1f591723d26ab2942b060a277dba106bcc7e9c79460bc0e6f119320ee3898302d4340f8caaddf6806840167d535e3d9405e1c9fbfc00d4d2456251b95f30de2971c006040098aa598f2f851834f84746d683fc2dab91fdbc83643731d470743e92a496ea72769dc80d3842ec81c4c01a992747f4b12e11e39853d5bd4c242b8ca1a3b513f8426ea5d31d42d96a5e1dc432e3b1f63988cbc321b565583e0cacd8e0afad66fc1c19c7a73195b7997401cf90e82c254423511fd281d82534c97580a09610707e862e9837af62a317f0c883e31f807bad4540b0ecfb3fe0a38ebb6f57e487c16f8400988fbb1dc4d520572dfe4c4298fa003f71e016ff48ea4c41c0c4e1ed86bf195d3a54633516b034c88a74e1e1c33119875610c419eff5048f4119fd5717ab442b9b514b5dfd1e425976219d11fd26393758b8e2d859a29c83de7015e0ff30c3110f623b9cbd9bd7cbeb4b207a14c0c08332e986730292b589969b4a16375aabcfa7585fda39882c554f2d3d0cea3b9b972b34f31a08b26e14df65e8c6217df4cdaba17d261115338e5037d4dc653ffc74c36fb33142b1bdc48c2e35d09be22f49162be9ae8edbd5d46a18100bc342d4494360e5b5f741de3f65144f42ba06c982dc77f5f8e48d76481a6f874551a0aafdaeedb75a6f8ddd9324b54c4a307ec7158c751aac9881d55bf6440654d9f64eb3bde23e8baa98dee973098c81c2195824a4e04b7f692a8b273162214293a4a9f2273b1107f2f1fd61784d0147f0e3001b35f320b558c35e791179ee2c470d9d54cf6efb2ed9eea172d8c7de1281702b041dfb9052ff10eb9ae08182b276568adad9768c0ff02df2c51f395a01f71183cab62c8f811192a6bcf7a833b72be6ba64305e478eec824569befabb0dbd27e5c577c7a7b683a9a91189b28ef34794c672c78f6bc9176e3349a8e32d25b8def9eecc4b7385f4149887dfe5292f7fd6d49056d44f5bf9c3a25adc63e68d3f9a13a50aeaf2435f0f61db8c4cf386a0802d76f6ee5d88bc6ecc7b5c44b5359108f731358ec1bb71ee8fe9b978812c023390799dbd960d4d41491199f73845e28e3244d0288d16deeb8a75409c6d0a88e27be3faea4fb70eb01f637ef82f998fc7299805ab19325ec5e68770f1b8f55fd010b88ee2897baab9cc8b96dca80db35bab561736d1fdb0a795c2473808cfc0906521f170511c5138de2f763bb9be4d6de62566f575cac815fcb1223a9d60144e28bfc73d271e8197e03dabf496281add7d1000530c137558ddd982a33e5ed552956276584e14156394a09725166f3849d397793997d6b6db5fd1414bb46d92d12dcc79b0017d937fe6a8904c40c4bd6852585d7d414a565846b856e15d2accab4531728e3462efc2e62701abd6b616350326e661d36c620f71b87f1f8120def8414dcd1e89bd6bec2896c0538aa5719b202a87427c72d5d7fb36ab268dc9c67cb2d4a35881acb94dd66cab16ce40edd65461d2f088ebee4d1a734edd2484da15c87cdf6f087c7f8bf2e2cedf5f788a82d37ce2e609985d489a708c90381f93bc3bf90680c91694c7e225843870f8a97b93c9f6b53e0a74b82fafe09860e01b9a4c4013f7e82326d482d5d588657ce55e2014ecb2a10bbe0bccda50f08708671a6bba698e5a45787b3754545f11c24663e3dbd4c33bcba302af0b248a8da632340cfca1ad274b802eee2f454160ad8aeefdf6e7f4ee69f54c54d87507cea5440db2047d3bd51e5b60bf091d781e8979bb4d7f2c9bbb88b6fe27d819ff616fd99a1de9a2a4d7a41a95d4cd878f250be5183ba80ee5f29aa</script> <div class="hbe hbe-content"> <div class="hbe hbe-input hbe-input-xray"> <input class="hbe hbe-input-field hbe-input-field-xray" type="password" id="hbePass"> <label class="hbe hbe-input-label hbe-input-label-xray" for="hbePass"> <span class="hbe hbe-input-label-content hbe-input-label-content-xray">您好, 这里需要密码.</span> </label> <svg class="hbe hbe-graphic hbe-graphic-xray" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"></path> </svg> </div> </div></div><script data-pjax src="/lib/hbe.js"></script><link href="/css/hbe.style.css" rel="stylesheet" type="text/css">]]></content>
<categories>
<category> 其他 </category>
</categories>
<tags>
<tag> 其他 </tag>
</tags>
</entry>
<entry>
<title>告别书，记录</title>
<link href="/posts/859b3997.html"/>
<url>/posts/859b3997.html</url>
<content type="html"><![CDATA[<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="抱歉, 这个密码看着不太对, 请再试试." data-whm="抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容."> <script id="hbeData" type="hbeData" data-hmacdigest="38f7027068dc60d7e83691afaec97e1794f1120fcdc8078151bac37a14aa066e">0fce45f9018127161724d7c793e0b9ebd5ae8f1666a120c6dd7165bd2400cb14bf1c26018327de535380c9cfc68d0303626b57170c65cd1a7439dcb1d6746cfa354f39c524ac2402302497b21764eeb375b338873e1889f90da535c1ffcbb051660bb431609166c3b44973fcc7d67af65f7ca3b9b481d0c5efd845b406d6e00cac0492882a3baf8fe49c707831c771fbca35e48c6fec4be0708c2e13518832a1261db2b2aeceff5c3cedc6cab02e1c4f3477c852b76160bf8c243e1dd4d1e5640f342354fa708532876f34a78a9859de33c5271f902c2cb81042b0c576b47d1e49e542b0705f2c6cc38ebd219e152f4e5676d521c3c751f356ca80fb3c62428e6467b12aeb8ae1947cc37bc9b9a0a9403f6dd93d7dea0f1fb8107ad3e162b0418761628bfc951a7cde7c2d4a9c030ca21b54de292adb844ad40795953af61161280385415cef2a01178fb2ab2ec5a8f186505c2a5b8285a01346c58a856d42a7d9099a753e1d5537b211c4a86d106450a108f03f5584349b4aaaa3c7a256d46c4672d9a043f851652f0029c2e9c558dc82a72388cc561e8c009afcfa19c843b79b4e04699c4734fbb8fd5094283c79bfb3d6c2880f9878c50106717144d7e3c6bd29347857872ba9c0fc0d5c0aec1c5839dbf165ba70699a1195a86a17575871b84bf4412e9f8db6052f9d95fcdcb0ae02986f36ca228a639f4a75ef9b520b2b21d423740c347156ab05902c4b2eacfa6d1c9f96541a122e53b15460ab0ba9951ee342834cd0c42421dbd25175c388e20937b149c296bb7dba1510b2a7a9b3054dfda33f936b0ae89e26bda22f18dfb6195100d2b53854cb7e835bd174c32ad31242f582ba9e6f77553ee62e112178d3572e2b47615e29359893862c4bf2064621a25d3b96c8514c6590c6c2c488ce52be1deb3a1ac3e5bfae02d448cd78fbdabcc5206e028ab1817d5dbbe3c15864a685fc6d62b1eb2d0a5098cfa5f5a62f494ea18933e427c5d6b9b226df359703a7962063145b3840b5204d339c175211fb8051782794de8863073df9554dd48029c1188d174db8827791c299501653faea287ba5078b5a3aef56facd7ba2a3b794466cb44db32f79a82332528b50ad377f6a774287aee60e9d8d26614bff972e5a5127e619ffb5f2f630987e7dc7121a419a64d6b62338fbf815ffe096a4738de731847b2db2740393330c43f43d7071c05add4cdbef0c3a0e0562b24d3fe0ef18d989bf027b926c5de72b643fdb9f395f89329afef6b00b57a844d883cde2158c58c59cdbfa7ed32bf26c6b06568a9cb92c60ebbcc67a3239fadc59e98508f9570a75ee6ba286c63ca6faaa7902ea64efc4ebcd150290be307a6da390fc3a72d2da0f577cc28b436877028b7b13855d6ced45f4a41be6bea0b12898b33bd1c0a5ae8f8e4feaac21ae4c02a8a266b2f5bccfdcce117b69029513b689b26ba97db8cec3114a91bf88939f3ae31552d2e1252e37680ad9a693f019dfd4d2ff4551b31500af7e3c9b49960931b643ad2f0a580232196b4a74275e1e56296c7d1769c4dbbe0347c077cd3d49dea69378dc97ae99dbc6cbaa307afe4b999a79374a7793ce836d0eb569af4c798d57d8c7780272378eff8ff210021882ad0241b12c4340b86e60fbf5043efcc55f214d9a93e5a2715c1376bb42833b17cafacb3522f2f932793438c74ab9f25af3cd5b6074a2f2951198317982c3c76c87780a4e507debcc3c48059e8c38dedf40a48d1bd09f7ff084948ec990624a2512cd5aa7de5b90c485847e2d3212365f5c6503732f664fbb668051b24be2500b2db49d5970650a16930ed0f5889ff4a16e0e10ef40f879702c725c518c27fc95c54015406bfa4527d02854d49c8f09c314a519d8b0a1368913d5cbb2683804927be468bac4f1c31b70cc14a41a1e581e63a862bb75c9795041a5667308338277d82c2bab4c458fb5ff40a9ea705d0d01bb49b5aad0fa9bbdb8052432597943fd5146230094d36f26c4a1c7534f79840aaca4ecfe28097dec36021296fd597f73e5ffbf945c7d877314b8e667670d2e385f20100e47069cc073b5ffc8e9c39187df6fd485c112a62967f016ef8b6d36aca6dfb57b4476cb63cbf0418fef9398f84053aaa80db72a472ec7ffb110457c56da3464c4929e8366b7a00e5678c1b928b794489a83af0f8b7248f15e910482b27321bd528e0060088fc93d7f7ca7a2d57bb83d4f5c9260ec20a4f2b0229c59eaaaf5fdc039690861213e4d808e54f4dcf59ef523db297d98ca4660b73f1e2f72f8b0e197614fb9846468dfc3b6c9b3cb28711d90196f5bcd4409fdf440bcd08becd8e554b7207ca99ba763872555bd5099154cab5006c7e781c9c7322b9f91f2a32cabcd5b6d1373e3224df32a46af1c62ca685b72ddea1aea9c29eb5df77d298a5a4a99ad7dc006d9dc405cc01403d5ce705f5193a5164a0bb52d63d548b60a12187f840309f65818cf26eb5a203947fefa1e4fd777d44c4cd093ef4bd77c1166491d57fefe183c3c30a8f1494f0587d94074c1a20c9f0fced7c07581905c7b48822d029d65b904ab33975eb33ca9eee136bd68b78733d7cfd27cddd3d500ee4e0e0b035d0c84f71d8cd4c2bb1c634ca0902a0bbc390493e499074b25c20ea54209ecdf3583640e69440f52acbd14d0075e33d34f993ac9c21c8e6560d4d59923f89d50d82cc66279bb3de6e54bb40678a24f5b2e07b5562cdcf49964f562018df63f6907c1d54ce31e566c399c543830f967688aeab2c6eaf182f8d5189f39e6238dfceb743a2aca18164973bd14219a6a7c97f8a47b46cae87686277cd11cfe034a706b966d56d049236495f511566acb9ff9759a4ba7e381660b2cb40d6ea52b2edfd99dbcfa9d1cf432f79973607171a9d46a9158621cb4e36a0e3ca33c0452d6fdd744a041439881543a79701977dfc6473e5d761b18b4184ce6df59f0158ac1e0352348fa197dc3c7c7d4c93f4814e977cc9fe0cb183464e3085d7b4b2093dcda22cd4bb7e6b2f5ac85aa527cf3a17489d1cc4d3dd8e3708e0e6fd992848cf92bb923cb0e4b2b34082648fff29ea9fd6f8182b89c273358fc0b3feb523575f3efa3b50483689b9085ca80a919f59b09d788c24f5791d442756046531290be8aec16cc73ae9fbac3ab0d4af64580ee3c9c1ea031621c28ad9e844c9e8b989a15245002cd59f87e9020a1e88cebc9c7586d439c65a99348e22eaf5d19893963c44ced947e8aba90983d0325f8c3e993c0a1af4d9b6ae6a2807557c97a183783b0bacc15fd5a59d438e06b5c79af7efca259063fff863ba1c6f8975a4560c46f97e7b7dc8ecbdf6789eb4079e5eaeb1fb18a05c57895dc133b7a6893665873d30f2b9c97608a677c8eb68981e0727c25806b3253ee0b407f783b50e4894cd87f3ebe218e4f18f4ecb221a3b95eeb9422ac9f7d1f63c9ede75e5e6e4afd1aea35f772865e748ee88ac40162d3dc85106fd15c23458fd49f53b2f9dfb6167c44054e8b7cce7b9a5e55fc866bb8b9df936337aa4936c6d1d6699bfc7b05046daa9f49c37844b3a4f5fd5f889a7474bd89797dac2fa18aefc3b267d7c5cabc023e3055cd20ded5376dc1c6c4bbdbcd2ef01c37b6d241a00afaa496e49b8679039791c55dd562edeada298b67978f23e1ba8e1e9cb55cb7219b8e4214e6e81003ec13fa60ec8d2e6ff8e29bd08bcf1edaf9f22400b0662e3b8b5c55e59d8acd2a03fe2b0a7a26cc26e1e69cb641d54458875efd3a4b750fc8dd4684fc2db7cd92067b5fed711ec4f4e4222dac04fde94caad623d64407a8feba440cdc850470dcebb75d2860c9ecb0daf8681d3ebfbac341553cec7b86dd7fab6ca2bb5887005aa63bb00ac67dd431bc39ce86e4b508906460df511b423e20958363b183550ba009eabc1584dba7e8dbe07c2b237496290c15eed4161ae1fc740f76eb33173ec61cba03c991a2a12f2450b4f4db606816e99e5c5499ae254d331559ff631315b53cf249f33325329104c9aa082c5d0df5f5de64f1a9ddd78d6c092ae6fc836e3f7036b9fc1d63803bebd416d331cfd854570fb359d851234aff04db78836f9727b497061e75b9a152f8e1ea2032ccd6a41901183f54adac2288f3883a84e9d55ad320478afb19331dc8194e605c4190fb7430630be20c278610fa8546987f6b0e29ab4f892011984b54efb771591dcc9aa33c42a42bb5cbc988cca9c30c1f72b375145ede775cc01070781531fc3533407bab5c757d82254f4cd5e2a8509e21379eacadd66bffbc007001e7a0fa62e28daae6a36db3ab7d14aeae9505a052e7a1cd72f01e8b9c36a64ce277cb6d4d90537d5270ee93a5209ed5f07917354b13600934b4cee856962a29705d58d5ea4fe7817ee25c0ce04034101f8a77539d59db117b24390f3f2ce67a59c09f0caab1021545320b837d2c2810774c0892f3fc52b735bef0698da6c6892b876df712b091b18b89ffea85d4d167286926ac5761f5ed05d28de64d9a8361e2e556f5fa5042f1559dccea085df718f1816886ddca2c95de52ba368876846fb7b55b967555caaa271ec00beae1ac12d7fc764d69d7d7f0690a8764ccd2285f4643f82d4e65eee4a838d719a9e488f85f5bddabd47fac190c3fb0e3c5f56276a4f97651518f8bbfdaa0d7823c72bdc5cf014e52de7ee26eaae49c98cb7da977d191093b4ab2dd0e818c16709b31c0e6d94959f1a11a00c4324fa38e1ea760fde0c0ed039bd265db0d9f8090c04963fc6a2b9b03f9d6ad87aeace5d0f439d0948056113cc5eacb9673c7721bcac87b4782586d7059062647cd8463d8db65b5fae074cd7911dba796046cd6547b39e677cab605194792735857f1de8ef5af94f68e8913c87f26ea822464aaacdc88a91ef8885db83501f21188250b729dad947a6b219d306e7caf25ae4dedc29e7bc9a907786727df7560fdda60fff2e82d8f3e8efb02627102d3a243182b7d5b5fc0310249296fc3517a5bc3e23d410c5ffb0fae750f5b369fc01dca2eae76639022d0920d9b2cd67b852e6f826744c8888737d5535910e404b4cc1dd30974b9b0c798deaff86177151f22fbef36aa6653c3d352ae8d1b46941af72c8810965c8fba01b7bbe410a5d5a4b5c43391c2c4c6e97d4f27c30025cc6c804ce12771d9b52b85e8830799e93fc66fc74bf3f7a862dccfb0083be8d518c267fb156a39722b6d3e859f2797477a74e6964dc4e68ba3f8a4a91c3c7eff30a0829db653a379b5e8d413f1dd53f311f319ae05bc6eaaef51ae8e8b31fdd6f450368263bbac84b64d829ca65f5589bd16a58ac8345f1fe44f4a2f0f28a2de77cb8cec811d17a6b1e186da4943784e8fb90b7e7d0cb6d5f13e3cc7b3b3dedbcd61484c8b01c80adc14f387e8d8d63552431095c6e0c3e0ed2df3fb9847285858babd0320e45f5a7aa633136ef9389bd59dc7f0a3fff68d5074c3bd8953e2ceefe51a2810de41431807396d35a00b582f8488fc39b9f0759f7977376b25a1698cb9ff4af8fd613f1a7b7c4798221530280912135beaf4fe36450e98e2ba0999ba9220d657847f850651796c29bb6676119c6a7107739ab8fca6e74eec61d68b0a0dc740b1406de460b9753b19a22e6a06113600f0fe41069612506593bbe1cc5dc4a344005331d63d968ed29699d4224423161f83cc977aa7bc4291db9a9a1383795b39073d570046439b9887f090ee42457008ee1d785b3c31b81e4d5d82cdc4cb85f03fe64d9522354edfcfc24425ac2bca5b7f1c881db971c515364e4371a2d34b6d2e7b87191851826552170abdbcf5609f6bc345f9578eba4eaf895d6093c2a7415527af3dd14870ea74cb9a55640e1e6ce2665f9abcf79719b87db9872f3babd9b8856706634ead088b505b1f2d339ebccf5a90fd3be9d16bb495416a1110714dd65e8943be00ea10eb55c74cbde2ae67d078cf664fc4b7ea6ef789b9526c55cf62f96f1d963307707073e473928040534280355bd71c8f3a4700f2038b1eb03d31ab55380224048635736bab4fdabd590c908214f7d0d38282e463e9aadf431955f7632f536bb8674e9b2c8d399d9ad01d2da920d567e4a886064ef1f7e9c54a54b0b22d80eaafc396c78e825a3a8ae4346036d28ebc352f04c2a06b1c3c6dcbefa0126e5726bab6b46aac51a06a2cc294b3ab79a20a8962a8e8d3aedf26e4edc6cfc6f59f6536e31f100bf405372dbad6c5ce79819a408444fbe2887d6966d435910a4043d3f3faeb12f61d0e43dda03528bb324e0da60878da87256a4e199e7cada32eb75eec382eacff41b3d716ff5321c1048f5251e20ac23b8462a494030e1bedbe3ba8b955796b7608fe0ecbd17a41915a9ef16d90b31ec98b1b0d528ec2ac770afb192ff36b948d4b1862eff805a9968705a22cc69af4547ff919328910005add8f69e8c80a472539ca99345e16429430e721f4bc646f650756699dd4e9e599851a0c33ad83b53d0950fb18b9d8545d0fb6f6a6b8933aee94a5f69263e0d41fcb7192f03bc9d6009a8ac304403dc890a6668e4c23cb7889adb2ebb55ed6172b9ddeb5ae5f87899131883851b553896144a9fbe4f447e2551b4814e5fd4bc213de348400c65e92952fc5cf541f15d625a9083292599226a2b30bc0fa24e651f671e64bc002a25d03c0a1f3790552f9ba0f8ea7d4180f8a386e1710b78dcd41d27fbc4a789621f49cb1166c702dc0ffdc436fc1d62865ce63cd4effab65a6986441da5fb6564022009fcb8f73aa87241d3cdd5c3d51294903e876adb905457238cad8c0b1b68447a5e35cffadafa469d028ab143d92ac8e8c9a9b1ed571484248a1a3b6b952dd7b507befb6fa1a7c86026fc3099648089545a40fcfa323483a316390e82222fad364dc1c5cb2f6037c22ed319c6d83240376f3eed52089e5c5834be9c7e5b8cdff1b84a44ae7e5c3fb4839989a7eafdaceda7397c608711760ed918c21c92a76b21cfc2ebe710bf5e288d425939e6ec0ae7b61a2e95a2bb5f860dd2e30bf5bd4f2ac449e48409a58b954a77dd65dacad1bf83704eae476088a6202d3b65061f3488c0d541c0843b4f44c56c9022e0ec744dac796480f331b57e98df8404acc6e96188cf02f638b968c09c87db3cd3d965335ef4b03191b158c73f3b03371e987514871922020a2cb09b961fa93f19955a88bcb88c2cc78ba7251f9a0dd11d9842fb56e67bc3b4c03bfc0b602e9fb23cdfa932cf0a83fcbdbc46c0d1b1019dfdcbbaaccda323a829cd27816e20e01ad05a0f0173d59eab1f0aedbecb8d5ff12fe77b9c373bba077593fb66217e0fac7e1166e444b381cdf6b5f9f270d2f9adf623278b4cd111afc17097b35db35798b3ab401a6abb7ef89c74ad118aaf845d989df7ec085ff7af12484efe34cfe746f271a1cf21b51395e5b5ae98c292279cb7bb14d4f52eda14b3865b3a93c9c43c4f6430c17645a78c296825313d56df0a3996ab213e8ec61dbcddff8bf85dcc01a3fcdbef5e252119bb8b1fab7d986c70f714f44aa43952f3fffd464338ff57ed0858b6174404cc43f7dedec6c028aed1b3277dd5a3fa5481e7a94d5639c990e8976784ab3ac30f4e6a86cc835c4109423e75af02722cde01466dd8cc4dd2ed32cc8d1ca9dfc5a2e2e59d955964f3d36cb2ab21123343df6b531c0e8bd78a2ea9642ae33ed134e931dd8aaa19dfc462a3805e8774f016228162d5992098923dac0efc5d6cf212c6dff1ac070286b480c0dd5c7cc98fe0dfb5b908ae829d2338eee5c355fadf2dcfbf0be7ec16cabdbf28f7022462d079bbd7f7f75b8cf8aba14cc82c9ae68b8a6f7d01cbc8fc46866b9f81ecbeb1194b4186def09b0d402f2de9b5455467424d6198a3f590635901e518a20eae90012a40bc57c1bd36d40395672cec082203d392dddab0eae42e4d807ca1850ef6ed987c1635571437473df6e0122e54783b6da7e9cea3fa71eff801ddc4f90f4c42c99a5e15862196af0b846dce0826a45b80280719ddea47f63d154b33cb9ca145ef7c9f5d465e05914b93b1a97fd0546267d3a661b6737f7be992d29313234448e5f8540f5fd2a03db4c64c0f39bbcdb9ea5ade60e8328b9b8bca9bac698698ef519294ad80efaa28009fea5e823ab36ae5cb59e292494fbd3cffbe0bc855e543997431c39b35c8905714aaa09cb0f8e1d52709dc6330421aab1f0ced7bb266c0303ee6d1fdddb6a64f2968b21e91266d7ec214bea9514e4aeed1edecf07a43947ebf1581f0846ac1d4151fee2e0da9c3fa484ee5c1994b228005d12bb9ac6ffe22dbc68781e74a4444f8c0a7e259a579ecd4605f5317fc439779c21583c7c5f1c31052118cdf3fd579ed99057f2ba4b4755dec85e968010145d83b0dd2d53c356db2ababc3e554685fb4015d4be54f52b50677f05c3ad58beb6c035a3714d62423a4bdb28b41c28a4fe6ca5ff290ada08fa1c3974e4f31e5ca74d3a065adce164f5c7fc7bf0fb2d5f01f993140becbdd3e2725c005a60c6c99c18183bef1601237c6b5999b1269a2fd14e5faca34b3dd22eed36e8dd0c7ae03acada825efa0780a6761961aa61a3f29ef35d875eb2c792e99a807b7fa06beae47106c8d25c7c6de532158f9e05117bbd6784e8100bc555159f5ca2d74da6b162f2903d83e45af74f32de2db90cb214d0903f7bb4ba9d8335f96dd4ea2f5566bb9fee7addee84cc0fc5b3f43e1cac380d7daf16ea52eba2b40683d301fbac7ef23c4c4d41f9ed2a90b28c7ddf498eaf19d1a04d1f430e2e0b3b8c1a39870263157eb05c712e45ec5ff9c5dfb63900072f81f27bcccc7281814600ae3c9e61f3f717465a9ed40e63ba4f7717fb031b5516b8661fe950aa8923ba4eadc49a09eabd60897377cf85909c919eaadc421d30c482f86b281dc3c4d9f7928f51e9f09e15bc10517f73c84fe1d99771e979f616442a63d5dd54547b977f027fd84bdf7760c52c6db80120ad34a4e8e139d6e376ef583bc6762df87a33dd73dc86bed6884b828e34411d705771d551189d31700febddb962fe5d8315ce88a9c1e783b20fa1227cb1b23e8932755e783880296fbf22a72a75c0807dfcccb7b4eca606abbf0981f33adc1985d908f202f57876ea66713b8b022a755362603eb7fd87c8fc15e1dff2022c51ec6ccd5170bdd9c9f69afac78292634a23fef062e70706030e68a7d825bd281cda32582ffba23b4ce625ab24e3345f2fa3cce272a8cdf6eaafcab10d47e7479d3c6b12bcc5d5eb805288747c9cc7ed06fcbc29a88b28a459f21378b03f01e352af36ffc95f81302b21bba11c306d35bc3d1b85f58da0f5c89fdb4f5cdc6500029b875e16674cb1f5c265aec5087218182f35c71d37e53fa24c478328d07768ba6fda87f21cb9c4b81dcc09b0ad8b9164b2d050487add00dd02e32ec73b6ac790ae01756dbb0ee5b7e6ae1912f3a60cf10a389e152b89a2b25b3b3fd46e8e3a623b9ceb9475d31234a07bc49c06f97fc87fd2f8b94c880cd4607e91c33a41297a1dd1f1a6f340f2be4807b920963d978fcfba092867d9cc20c88cce1d5dcc5f426568599b0b325da9833c5524d76e0a81c81c207aaeb5a8eed5e25aacefcda910b543649d53d81abaee7603cf5a42228f17b8c136c7a2fc0103ac9a9a9b5e5cae40e786451b13679cda3bd085e8d84ee0894b36630dbd85e06ea1e124fb616d5519b5df0d2cd80b09345f43b95c60125c058af153e57aa2957d5273baeff40159e21ccdf4af9cb0c3bf182b6380f8b4844eebd4f59b6b90b6af6ded0d25a339f667ca228cf4101dffdbdee322f5e8eb2665bb59529623612e0aecccd94ac026f9b9db109b753a780e71ce2592dfc34114a91437bb9c7d19826a8fe0a34a724dd8ab0c50c5de8f56b8c19a</script> <div class="hbe hbe-content"> <div class="hbe hbe-input hbe-input-xray"> <input class="hbe hbe-input-field hbe-input-field-xray" type="password" id="hbePass"> <label class="hbe hbe-input-label hbe-input-label-xray" for="hbePass"> <span class="hbe hbe-input-label-content hbe-input-label-content-xray">当前文章加密了哦，不可看。</span> </label> <svg class="hbe hbe-graphic hbe-graphic-xray" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"></path> </svg> </div> </div></div><script data-pjax src="/lib/hbe.js"></script><link href="/css/hbe.style.css" rel="stylesheet" type="text/css">]]></content>
<categories>
<category> 其他 </category>
</categories>
<tags>
<tag> 其他 </tag>
</tags>
</entry>
<entry>
<title>失眠的星星数着还没睡的人 23/02/11 📘</title>
<link href="/posts/d343725d.html"/>
<url>/posts/d343725d.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-02-x2F-11-📔"><a href="#派大星的日记-23-x2F-02-x2F-11-📔" class="headerlink" title="派大星的日记 23/02/11 📔"></a>派大星的日记 23/02/11 📔</h1><blockquote><p>天气：一会阴天一会晴天，应该是晴转多云吧</p></blockquote><blockquote><p>心情：可以说是很糟糕的</p></blockquote><p>这应该不是日记了，算周记吧hhhh。已经很久没写了，这段时间发生的事情太多了，打了个措手不及，真的很不开心，我思来想去，想了很多很多，有懊悔，有醒悟，最大的得到就是失去。从上一篇日记起，就已经有了势头了，老爸去体检，和张大头发生了情感问题，也就几天时间，事情就被我搞得一团糟，我和她也完完全全的结束了，说起来也是自己咎由自取，提前的结束了这段关系。老爸体检呢，查出来了心脏有问题，具体问老妈，就说心脏病，可心脏病也得分很多种啊…..</p><p>我一直觉得，老爸身体很健康的，除了历年以来检查出有些血脂高，真的不知道怎么就突然心脏有问题了。这几年，我在上学也很少和老爸沟通交流，不是学业繁忙，是我没想着去联系，作为儿子也挺失败的，很对不起他，常年一人在外工作，身为儿子的自己也没怎么去关心，他怕打扰到我上学，哪怕想我也是询问我妈我最近可好。自己都已经二十了，老爸也五十了，时间过得很快很快，从我们一家回重庆后，一家人团聚的时间也很少了，都说以后上班了，都很少回家，可我现在上学也很少回家….基本都每年过年的时候一家子才得以团聚。现在想想，等我工作了之后，想来连过年回家的时间都会被剥夺吧。</p><p>这几天的不好的事接踵而至，一起又一起，情绪也一直低落。喜欢上了张大头，又因为没脑子，失去了张大头，是很难受，连朋友都没得做了。</p><p>缘尽则散。</p><blockquote><p>今日总结：</p><p>明日期望：</p></blockquote><p style="float: right">2023年2月11日23:59:37</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 23/01/31 📘</title>
<link href="/posts/b9b16171.html"/>
<url>/posts/b9b16171.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-01-x2F-31-📔"><a href="#派大星的日记-23-x2F-01-x2F-31-📔" class="headerlink" title="派大星的日记 23/01/31 📔"></a>派大星的日记 23/01/31 📔</h1><blockquote><p>天气：晴天☀️</p></blockquote><blockquote><p>心情：一般</p></blockquote><p>今天早上爸妈和老妹去吃饭，我没去，不喜欢去串门吃饭。中午简单吃了点，下午老妹就回家了，告诉我老妈带着老爸去医院做体检了。下午老妹又去亲戚家吃饭了，我又在家自己弄了吃。到了晚上，爸妈还没回家，打了电话问说是在医院，不回家了，问怎么了，老妈也没说。希望家人平平安安的。</p><blockquote><p>今日总结：厨艺涨了点经验，希望一家人平平安安的</p><p>明日期望：开开心心快快乐乐。</p></blockquote><p style="float: right">2023年1月31日23:59:37</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 23/01/27 📘</title>
<link href="/posts/b9b56171.html"/>
<url>/posts/b9b56171.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-01-x2F-27-📔"><a href="#派大星的日记-23-x2F-01-x2F-27-📔" class="headerlink" title="派大星的日记 23/01/27 📔"></a>派大星的日记 23/01/27 📔</h1><blockquote><p>天气：晴天☀️</p></blockquote><blockquote><p>心情：一半一半的开心</p></blockquote><p>今天早上起了个大早去电影院。想着起的早就去看排片早的《流浪地球2》，我很早就到了电影院了，一路走走停停，在去电影院的路途中，发现了在这个小县城里滴滴打车貌似不咋能打到车，下次试试其他平台。看着路不远就跑着去，三公里，跑着去…….</p><p>很快，我在距离《流浪地球2》开播前早到了20分钟，结果票卖没了。所以只好买了中午12:15的《深海》，看着还有两小时，我顿感不知道去哪，就想着去吃饭吧。看着路边的繁杂的人群和摆在店口的露天帐篷，店里时不时还飘着味，我太饿了，饿的下意识想着去吃顿好的，但理智战胜，我去吃了顿羊肉粉便回去坐等电影开播。</p><p>下午14:15 ，电影看完，感触挺大的，故事剧情前期有些无聊，但胜在视觉效果很好，也能耐着看，戴着3D眼镜看着自己看完还带晕，往前都很少晕3D的，这会看到深海的视觉特效居然晕了。看完电影，老爸电话打过来，让我领着一袋自家玉米打的爆米花回家。我便扛着一袋爆米花回了家。</p><p>在25号张大头听了我的话拉黑了我，晚上写了一封邮件给张大头，不知道她看到没有，提及了今天的电影感观，希望她解除拉黑吧。</p><blockquote><p>今日总结：看了电影，吃了饭，坐了车，共计69元。</p><p>明日期望：开开心心快快乐乐。</p></blockquote><p style="float: right">2023年1月27日23:48:37</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 23/01/24 📘</title>
<link href="/posts/b9b56172.html"/>
<url>/posts/b9b56172.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-01-x2F-24-📔"><a href="#派大星的日记-23-x2F-01-x2F-24-📔" class="headerlink" title="派大星的日记 23/01/24 📔"></a>派大星的日记 23/01/24 📔</h1><blockquote><p>天气：晴天☀️</p></blockquote><blockquote><p>心情：无奈</p></blockquote><p>今天本打算去看电影的，都已经准备好了，结果被拉去串门吃饭去了，一呆就是一天，直到晚上吃完晚饭才回家。由于没带充电器所以手机关机了一下午。晚上的时候张大头伙同立婷姐试探我，张大头问我是不是喜欢她，问我要不要和她在一起，我慌不择路，没在一定时间内回答，关系僵硬，目前被拉黑状态。</p><blockquote><p>今日总结：社恐，在亲戚家吃饭还是放不开。自己有些笨了。</p><p>明日期望：开开心心快快乐乐。</p></blockquote><p style="float: right">2023年1月25日21:20:37</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 23/01/15 📘</title>
<link href="/posts/5e0498dc.html"/>
<url>/posts/5e0498dc.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-01-x2F-15-📔"><a href="#派大星的日记-23-x2F-01-x2F-15-📔" class="headerlink" title="派大星的日记 23/01/15 📔"></a>派大星的日记 23/01/15 📔</h1><blockquote><p>天气：今天下雪啦</p></blockquote><blockquote><p>心情：挺高兴</p></blockquote><p>今天下雪啦，一起床就看到窗外白茫茫的，就迫不及待的下床打开窗看雪，挺厚的，得估计昨晚上就在下了。吃了早饭就穿上鞋子去玩雪去啦</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116202538533.png" style="height:300px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116202643946.png" style="height:300px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116202716316.png" style="height:300px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116202807872.png" style="height:240px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">白茫茫的雪哎</div></center><p>因为我家在山上，所以基本都是一年一次雪，但基本都是两天就化了，今天的雪下得比以往的都要大，也下的比往年早，下了一天了，直至我睡觉都还在下。去年都是2月份下雪，今年还没到2月就下了，可能今年比较冷吧。等下了雪，年一过，2月18日我就开学啦！不知道会不会阳，开学之后就军训了<del>哭</del></p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116204048864.png" alt="" style="zoom:10%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116204131388.png" alt="" style="zoom:10%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116204403515.png" alt="每年下雪保留节目：打雪仗，堆雪人（不会），雪上写字" style="zoom:16%;" /><hr><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116204546550.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230116204930643.png" alt="山上雪景老漂亮了"></p><p>今天日记就写到这啦，主要是记录今年的第一次下雪！</p><blockquote><p>今日总结：是个爱心人士，写字比去年好。</p><p>明日期望：开开心心快快乐乐。</p></blockquote><p style="float: right">2023年1月15日21:48:37</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 23/01/12 📘</title>
<link href="/posts/5e0498f0.html"/>
<url>/posts/5e0498f0.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-01-x2F-12-📔"><a href="#派大星的日记-23-x2F-01-x2F-12-📔" class="headerlink" title="派大星的日记 23/01/12 📔"></a>派大星的日记 23/01/12 📔</h1><blockquote><p>天气：今天天气温度大降，感觉要下雪咯</p></blockquote><blockquote><p>心情：挺好</p></blockquote><p>今天早上起得挺早，吃了昨天包的抄手，感觉不咋地，煮的久了，口感味道都不行。早上呢就看了会电视，洗衣服（洗衣机在前几天被我残忍拆开，然后坏了），然后爸妈去外面忙，等他们回来就带着我去理发，表示我的头发太长了，要剪短<del>大哭</del>好不容易蓄发这么久，居然要去剪了，不过运气好，去理发没去成，因为车子没电了！</p><p>于是嘞中午吃完饭，就带着我去山上砍竹子，老累了，身体太虚了，砍了十根竹子就气喘吁吁的~<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230112224303259.png" alt="" style="zoom:33%;" /></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230112224534925.png"></p><p>砍了一下午竹子，整整两捆，虽然我砍得不多，但还是能用的。半路捎回去的时候顺道给我爷爷带回去。</p><p>到了下午四五点的时候，跑去修灯去了，家里厕所的灯接触不良还是咋，不亮了。花了两小时时间终于修好了~</p><p>现在就差洗衣机，我房间的灯，家里的门还没修了，明天修门。</p><blockquote><p>今日总结：砍竹小能手，修灯小能手。</p><p>明日期望：开开心心快快乐乐。</p></blockquote><p style="float: right">2023年1月12日21:30:31</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 23/01/09 📘</title>
<link href="/posts/d9136e44.html"/>
<url>/posts/d9136e44.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-23-x2F-01-x2F-09-📔"><a href="#派大星的日记-23-x2F-01-x2F-09-📔" class="headerlink" title="派大星的日记 23/01/09 📔"></a>派大星的日记 23/01/09 📔</h1><blockquote><p>天气：最近天气老好了，晴天！</p></blockquote><blockquote><p>心情：不太好。</p></blockquote><blockquote><p>此篇日记时间区间定位22年26号到23年09号。</p></blockquote><p>作为今年的第一篇日记，我很庆幸，我写日记也有人催着，以至于我不会错更多少，可能再拖拖得拖到过年了。从26号起，日记更新也慢下来了，便是前几日赶写的年终总结也是匆匆忙忙的写出来的。我以为年终总结很好写，却没想到想记录的事情有很多，导致我到现在都没有记录完，还需要更新一些。写年终终结的时候才发现时间过得好快啊，总以为记忆中的事情才发生没多久，在我回忆的时候才发现那时已经过去半年之久了。</p><p>这几天发生事情挺多，今天也考完了最后两门课程，也放假了，从尝试了n次的八段锦再到高数，可谓是历经了种种困难。至于会不会挂科只能听天由命了（学渣信天不认命）。</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230110121548327.png" alt="尝试n次的八段锦,这辈子就不是能跳舞的料" style="zoom:67%;" /><p>在3号的时候，张大头被猫暗杀，导致手被刀砍伤，刚开始还以为只是小伤，了解之后才知道伤口老严重老吓人了。据说已经见骨了，距离她受伤嘞也有快一周了，希望她早点恢复健康。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230109225001991.png" alt="老吓人了，心疼心疼"></p><p>我老妈老妹也在这期间也阳好了，不知道为什么我没有阳，可能要把第一次留给学校吧。</p><p>把年终总结写完之后，总感觉生活平平淡淡的，也让我的日记越拖越晚，直到今天张大头说让我直播写日记给她看，我才猛然惊起，日记已经有差不多两周没写了<del>大哭</del> ，写日记确实需要坚持下来，但不知为什么即使我改成一周一记，我也不知道怎么写。可能真的不会写日记，写日记总感觉是在写文章似的，想要好的文笔，又想要好的内容，可惜我的生活不是处处都精彩。要说这生活，我这周和妈妈和妹妹把家里面打扫收拾了，从客厅，到厨房，再到各自的房间，打扫卫生挺累的，需要搬这搬那的。不过收拾干净，看着还是很舒服的，小家里就是平平淡淡哎，无事逗妹玩，有事喊声妈~~ </p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230109225059471.png" alt="劳动最美"></p><p>日记嘛，反正都改成一周一记，那我能不能再改改，改成遇到有趣的再记嘞<del>大笑</del>。</p><p>1月5日的时候呢，成为了B站的主播，新人娱乐主播当天就被封了一天，解封后，很勤劳连续直播了三天，马上成为大主播了，张大头已经是我的忠实女粉丝了。</p><p>1月7日的时候呢，和张大头聊了点情感上的问题，总感觉我和她之间的关系怪怪的，不过仅此战役，也差不多说清楚了，既然亮出武器了那就战斗到底。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230109225144540.png" alt="“大”主播"></p><p>日记呢，就水完了！那么新的一年，祝我祝大家快快乐乐。</p><blockquote><p>近日总结：没有开销，在努努力就能把自己忽悠成大主播了。</p><p>明日期望：开开心心快快乐乐。</p></blockquote><p style="float: right">2023年1月9日22:40:31</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>2022年终总结</title>
<link href="/posts/60824.html"/>
<url>/posts/60824.html</url>
<content type="html"><![CDATA[<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><div class="note info simple"><p>对于我来说，2022年是一个普通又神奇的一年，发生了很多事儿，但总的说我还是对这一年没什么特殊的情绪在里面。。生活还是如同以往平平淡淡的，认识了新的朋友，步入了大学。仔细想想，这一年能记录的也不少。反正吧，这一年还是浑浑噩噩的一年，啥也没干成。疫情算上今年已经持续了差不多两年了，可能对我的日常生活有所影响，但大多也没太大影响，今年也算稍有停顿了，从今年年末彻底放开，各地来往也不层层加码了，也开始要为自己的健康负责了。 </p></div><h3 id="值得记录的事情"><a href="#值得记录的事情" class="headerlink" title="值得记录的事情"></a>值得记录的事情</h3><div class="timeline undefined"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-08 <mark class="hl-label blue">出去游玩，偶遇奇痰，污我可乐</mark></p></div></div><div class='timeline-item-content'><p>这一天，还是可以纪念纪念，在这一天我损失了一瓶可乐。我忘了这一天我具体干了啥，但依稀还记得是我和浩宇合谋着出去玩，然后顺带了个朋友（忠铭）一起去。早上一早就出门打车去了北碚双碑那边吃自助串，结果人家不做生意，关门转让了…..不得已就带着两人一起到处逛看看哪有啥好吃的，且在途中买了瓶可乐，我把可乐往天上一甩再接住的招式，结果没接住掉在地上，遭到别人吐在地上的痰玷污了瓶口，这样我损失了一瓶还剩半瓶的可乐…..谁怎么混蛋没素质，随地吐痰，丫的没素质。我们到处逛，都没找到什么吃饭的店，要么太贵吃不起，要么关门歇业中，于是乎我们的城市男孩忠铭在手机上找了一家吃火锅的网红店。待我们进去之后，什么丫的网红店，就整一副要倒闭的样子，到处都乱的很，就这样我们的忠铭同学还时执意要在这家店里吃，于是嘞，吃了一顿没吃饱的火锅。就这，忠铭还觉得很棒。</p><p>吃完午饭，就到处逛，到处走，期间忠铭同志一直在嚷嚷着要回学校，我和浩宇同学就没理他，让他自己回去，继续逛啊逛啊，到了晚上六点多，去了超市买了些东西，且买了一堆烧烤回到了学校。从那时起，我就发誓，以后出门再不带忠铭同学了，太扰人兴致了。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-11 <mark class="hl-label blue">高中突然有钱举办活动</mark></p></div></div><div class='timeline-item-content'><p>这一天就厉害了，我们学校举办了很多活动，不知道是有钱了还是咋。白天举办了游园活动，校园的每个角落都有人摆着游戏和摊位，摊位有卖手工艺品的，有卖吃的。很兴奋，我那天一分钱没花，在外面蹭了些别人玩游戏赢来的零食。讲实话，我个人对这些活动还是不咋感兴趣。到了晚上学校搭了舞台，表演了一系列节目，老好玩了。期间还遇到了隔壁班的隔壁班的女同学的班主任的儿子，胖乎乎的老可爱了。</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105232350924.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105234623095.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105234723352.png" style="height:150px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">舞台与集会活动</div></center><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105235114229.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105235204893.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105235407562.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230105235442718.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106140733468.png" style="height:150px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">晚上的舞台与小孩以及表演</div></center></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-13 <mark class="hl-label blue">放寒假啦，这也是我高中生涯最后一次寒假了</mark></p></div></div><div class='timeline-item-content'><p>这一天，室友们都一个一个的拖箱带包的回家了。寝室乱糟糟的，像个垃圾场似的，一个寝室12个人，东西堆得都堆不下了。临近毕业自然是把能带的都带走，不能带的，垃圾桶里。而我把东西收完之后，被子啥的寄了回家。我整个高中生涯，都勤俭节约，具有高尚品德，自知寝室狭小，就为了室友，并没有买过很多东西堆着<del>是因为穷</del>。14号我就回家啦！</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106141702466.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106142646752.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106142709748.png" style="height:150px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">杂乱的寝室以及回家的我</div></center></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-16 <mark class="hl-label blue">回家的我，奔赴火锅的路上，遇一石子，蹦出血光之灾</mark></p></div></div><div class='timeline-item-content'><p>这一天，是2022年的第一例血光之灾。回到家的我，想着去吃火锅，于是便骑着电动车，滑向了超市准备买菜，吃火锅。奈何天冷路滑，道路崎岖，愣是被一石子给碰倒在地，带着口罩的我，下巴着地，蹦出血色。我第一时间把车扶起，然后便坐在路边，回想是怎么摔的。在我发楞之际，一位好心大哥，开着车，载着一位可爱妹妹，停下车关切问候，想拉着我送医或拨打120，我想着不麻烦大哥，耽误人家事儿，就婉拒了，大哥见状，就拿了医疗包给我简单包扎。哎，不禁感叹，这大哥人真好，真心祝福他一家子平平安安，发大财。临别之际，小妹妹还向我说道：哥哥，以后小心点。于是乎，我就骑着车，慢悠悠的去往了医院。到了医院，医生说要缝针。在我缝针的时候，我妈妈也赶来了，问我怎么回事，我不要面子的把锅全甩给了路边的石头。看着妈妈那急切的样子，不禁感叹，母爱伟大，感谢妈妈。相继缝了针，没打麻药挺疼的，还好能忍住，主要那医生老头说这点疼都忍不住，还不如小姑娘呢，是可忍，孰不可忍？于是我愣是一声没哼，还笑嘻嘻的嚷嚷着等会吃顿火锅犒劳自己。</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106144748966.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106144815214.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106144842171.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106144908264.png" style="height:150px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">手上残留的血以及摔了后，缝针后~</div></center></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-24 <mark class="hl-label blue">再见旧友，狼入虎口</mark></p></div></div><div class='timeline-item-content'><p>这一天，去年分道扬镳的一位朋友，在这一天不知道哪根筋搭错了，跑来找我。以关心我学习为借口，将我推入深渊。把我推给了一位伪装男同性恋的变态，为什么说是伪装呢，因为后面发现这个逼崽子居然有女朋友。瞧着这个变态，说的逆耳之言，真是大逆不道，西红柿炒萝卜——犯贱。当时我并不清楚张大头为什么加我好友并做出这种恶劣的事。直至现在我也不清楚为什么要加我好友，可能正值无趣吧。现在想想，其实时隔几个月她也没啥大变化，早些这个时候还人小鬼大的活泼女孩，后面似乎也少了一份兴趣。</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155227117.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155337873.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155436399.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155523204.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155603328.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155644066.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155740974.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106155828290.png" style="height:150px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">我仍觉得这是一个张大头的桃花坑，我被带进去了</div></center></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>02-02 <mark class="hl-label blue">纪念童年，看喜看灰</mark></p></div></div><div class='timeline-item-content'><p>这一天，喜羊羊与灰太狼出的新电影，我期待很久，是一部关于篮球题材的。很可惜没有像以往的十二生肖系列，十二生肖从羊年年之后就再无续集，太可惜了。这一部，因为堵车，导致我到场之后呢就已经放了半场了。很好看，灰叔很帅。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106160709445.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106160723393.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>02-04 <mark class="hl-label blue">冬奥会开幕式</mark></p></div></div><div class='timeline-item-content'><p>这一天，是冬奥会的开幕式！！！</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106161614030.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106161631961.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>02-06 <mark class="hl-label blue">下雪啦</mark></p></div></div><div class='timeline-item-content'><p>这一天，我家这小地方，下雪啦，很是好看，还写了张大头的名字和用脚踩的画。距离成为画画大家更进一步。</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106161238498.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106161254592.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106161311055.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106161339950.png" style="height:150px"/></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>02-26 <mark class="hl-label blue">和朋友（浩宇）去往北碚一游</mark></p></div></div><div class='timeline-item-content'><p>这一天，我们两个人玩的很开心。知道为嘛一直和浩宇出去玩吗？~~因为能蹭吃蹭喝~~~</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106162912601.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106162926479.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106162947093.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163002440.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163016362.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163036541.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163111013.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163055263.png" style="height:150px"/><center><div style="font-size:14px;color:#C0C0C0;border-bottom: 1px solid #d9d9d9;display: inline-block; padding: 2px;">北碚区人民政府附近</div></center></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>03-03 <mark class="hl-label blue">拍毕业照，去年的比赛证书终于拿到啦</mark></p></div></div><div class='timeline-item-content'><p>这一天，拍了毕业照，马上也要高考啦。2021年年初参加的比赛证书今天拿到啦。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>03-05 <mark class="hl-label blue">参加理论考试</mark></p></div></div><div class='timeline-item-content'><p>这一天，是高考的理论考试。春季高考分为专业理论实操以及文化，这一次是专业理论以及文化。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163738942-1672994309056-5.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163755436-1672994318797-8.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106163807557-1672994326583-11.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>03-12 <mark class="hl-label blue">专业实操考试因疫延期</mark></p></div></div><div class='timeline-item-content'><p>这一天，原本是专业实操的考试，但结果嘞。因为考点突发疫情，延期了。前一天还在准备着呢，到了晚上说延期了。春天来咯，学校的树大把大把的掉叶子。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106164523334.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>03-21 <mark class="hl-label blue">画了一对情侣头像，客机失事</mark></p></div></div><div class='timeline-item-content'><p>这一天，画了一对情侣头像，起因是张大头要换头像，于是我发挥我的画画技能为她创作。得到了我朋友的一致好评，得到了她朋友的一致差评。后面为了突显我的作品是完美的，于是我便也用上了，但她不让我用，所以我也重新画了改良了一下，变成了情侣头像。</p><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106165737894.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106165758938.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106165815848.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106165835621.png" style="height:150px"/><img class="inline-img" src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106165857212.png" style="height:150px"/><p>这一天，突发事件，一架客机在广西坠毁。<strong>致哀</strong></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106170047137.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>04-27 - 05-02 <mark class="hl-label blue">赌博有风险，远离赌博</mark></p></div></div><div class='timeline-item-content'><p>这一天，我脑子抽抽了，和张大头打赌，并弄了赌约。现在她还搞了个合同。感觉被玩坏了。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106174838394.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106174905641.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106174919787.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>06-25 <mark class="hl-label blue">参加高考，专业实操考试</mark></p></div></div><div class='timeline-item-content'><p>这一天，高考最后一项，专业实操考试。考完就回家啦。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106170800324.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>07-14 <mark class="hl-label blue">科目一拿下</mark></p></div></div><div class='timeline-item-content'><p>这一天，科目一高分拿下！</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106171118984.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>07-31 <mark class="hl-label blue">又创佳作</mark></p></div></div><div class='timeline-item-content'><p>这一天，因人所托，又画了一对情头。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106171349436.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106171358199.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>08-01 <mark class="hl-label blue">再再再创佳作</mark></p></div></div><div class='timeline-item-content'><p> 因张大头想要猫猫头像，于是我再再再创佳作。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106172430355.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106172444310.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>08-04 <mark class="hl-label blue">我的破嗓子居然有人夸</mark></p></div></div><div class='timeline-item-content'><p>这一天，和菜菜同学交流病情，她说我声音好听。这说的我心花怒放，于是我跑最右配音。</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106173717807.png" alt="" style="zoom:33%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106173731673.png" alt="" style="zoom:33%;" /></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>08-05 <mark class="hl-label blue">不打学时与有对象，谁更气人？</mark></p></div></div><div class='timeline-item-content'><p>这一天，菜菜和我炫耀她驾照快考完了，且不用打学时。于是我为了打击她，用出了忽悠大法，告诉她我有对象了，欺负她单身狗。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106172940978.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>08-07 <mark class="hl-label blue">收到录取通知书啦</mark></p></div></div><div class='timeline-item-content'><p>这一天，收到大学录取通知书啦。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106173255798.png"></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>08-11 <mark class="hl-label blue">科目二过啦</mark></p></div></div><div class='timeline-item-content'><p>科目二，过啦。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>09-02 <mark class="hl-label blue">科目三过啦</mark></p></div></div><div class='timeline-item-content'><p>科目三，过啦。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>09-24 <mark class="hl-label blue">开学啦</mark></p></div></div><div class='timeline-item-content'><p>这一天，因疫情延迟开学，这会我终于来到了学校，认识了辅导员和新室友。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>10-29 <mark class="hl-label blue">与朋友单向奔赴，动物园一游</mark></p></div></div><div class='timeline-item-content'><p>这一天，学校解封，我和朋友约了今天出去玩，于是乎我打车去往他学校，一路都高高兴兴的。见到了朋友，一路上有说有笑的，说着各自学校的趣事，从早上一直聊到中午才想起去吃饭，于是就找了家店吃了饭。下午呢，因为之前就想去动物园了，但一直没机会去，且还答应了张大头要给她看重庆大熊猫。于是嘞，这一天就愉快的跑去动物园逛了逛，见了很多动物，大熊猫啊，小熊猫啊，长颈鹿啊…..</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106175940367.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106175958480.png" alt="image-20230106175958480"></p><p>此外，有时间会出一文来详细贴出所有游玩照片，敬请期待~</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>10-31 <mark class="hl-label blue">参加了大学的第一个比赛</mark></p></div></div><div class='timeline-item-content'><p>这一天，看到辅导员在群里问有没有参加职业技能竞赛的，于是嘞我就报名了。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106180348258.png"></p><p>其中经历可以看这个日记嗷>><a href="http://xiaoload.github.io/posts/9593.html">派大星的日记 22/11/22 📘 | 派大星的🍊石头屋~</a></p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>12-07 <mark class="hl-label blue">比赛拿了三等奖</mark></p></div></div><div class='timeline-item-content'><p>这一天，比赛结果出来啦，评比给评了个三等奖。</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230106184648398.png"></p></div></div></div><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><div class="note red icon-padding simple"><i class="note-icon fas fa-fan"></i><p>2022年呢，发生的事很多，但是嘞，苦于我早期还没写日记，所以我大多细节也记不清了，时间轴也就记这么点。有了新朋友，没了旧朋友，在我身上也没什么成长，没诞生优点，缺点也一如既往，性格方面也不知道是否有了变化，可能有也可能没有。总结一下，2022年，完成了科目一，科目二，科目三，只剩下科目四留给了2023年。2022年有了个要揍我的人，有了个留给未来的赌约。</p></div><hr><h3 id="2023年的目标-计划"><a href="#2023年的目标-计划" class="headerlink" title="2023年的目标 计划"></a>2023年的<del>目标</del> 计划</h3><div class="note blue icon-padding simple"><i class="note-icon fa fa-taxi"></i><p>成功拿到驾照！</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>英语考个级，管它什么级别</p></div><div class="note pink icon-padding simple"><i class="note-icon fa fa-female"></i><p>找到个女朋友</p></div><div class="note green icon-padding simple"><i class="note-icon fa fa-paper-plane"></i><p>去旅游</p></div><div class="note red icon-padding simple"><i class="note-icon fa fa-pencil"></i><p>参加更多的比赛</p></div><p style="float: right">2023年1月6日19:13:20</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 年终总结 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/26 📘</title>
<link href="/posts/451.html"/>
<url>/posts/451.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-12-x2F-26-📔"><a href="#派大星的日记-22-x2F-12-x2F-26-📔" class="headerlink" title="派大星的日记 22/12/26 📔"></a>派大星的日记 22/12/26 📔</h1><blockquote><p>天气：今天出了点太阳，不暖和，还很冷</p></blockquote><blockquote><p>心情：很开心!</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; } .text_color { background-color: yellow; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天是12月26日，12月份过得很快哦，2022年也快过去了，也就差个五天了。不知道对比去年我又有了多少成长，步入大学了，也要好些努力，对得起自己，父母。这几天也没什么特别的事儿，细数了少许，放在这里说说。这几天，算是一些课的考试周吧，考了《思法》、《中国近代史》、《计算机网络基础》。《高数》、《大学英语》、《Java》，被拖到了明年的1月9日考，也快了。不过比较头疼还是《爱情心理学》的期末考核，是个小组作业，之前我经历的小组基本都是些竞赛类，从来没有过这种小组作业，这次经历之后才发现，组的时候不能马虎了事，丫的现在组的这个全是一个寝室的，结果都在摆烂无所谓。讲道理，这个期末考核也蛮有病，在学校还行，拍个关于爱情的微视频，人都聚的起；现在疫情开放之后，人人都阳，也不能聚在一起，还让拍.... 没办法，只好用腾讯会议开个会议露露脸聊聊爱情，但一寝室六个人，一个慧眼识珠，早跑了、一个摆烂打游戏，其他人全阳。拖啊拖啊，拖到了23号，终于随便扯了点素材，剪在一起。在25号交了上去，结果被打回，要求我们重新搞....</p><p class="main">其实，细扒，这事儿也只能怪自己。少部分怪，人傻非得组个摆烂组；大部分还是怪自己组织不起来，在这方面如同张大头说的我确实不行。哎！只得重新搞了，这回组个腾讯会议聊爱情吧。再说说社交这块吧，疫情开放后，很多朋友都阳了，我妈妈，妹妹都阳了，同在一屋，过了一周多了，我反而没有啥事儿，据网友说这可能是我太虚了，抵抗力太差，身子没折腾起来。但我还是觉得估计运气好，这毒没挨我。张大头也阳了，阳的时候还喝了酒，算了算也有十几个阳了的朋友，还蛮多。21号的时候，张大头好了，但被我气着了，原因是我反骨~目前无响应状态。和其他人聊聊聊，epic送游戏也送了许许多多，26号送了个《死亡搁浅》，早些时候我蹲点抢时还是导演剪辑版，结果服务器崩了我没领到，早上起床的时候已经变成标准版了，只能说太可惜了，我早些时候已经买了标准版了.....也没玩多长时间。呜，这些时候，也把一些游戏玩了，《泰拉瑞亚》打通关啦！！！很棒，虽然用了辅助类mod，但还是打通关了，《泰拉瑞亚》真的超级好玩！！！通关之后我便买了个《植物大战僵尸年度版》打了中文补丁，便开始肝，花了两三天多的时间，熬着夜，查着攻略，把它打完了，并且拿了全成就！</p><p class="main">快新年啦，看看今年要不要写个年度总结，但仔细想想，也没什么写的吧，驾照也没拿到，科四还没考嘞，Java还没学完嘞，啥啥啥都没完嘞，不过挺好，刚进大一，就拿了个市级赛第三名~ 也算有点收获。还有学了几年的男伪男，貌似有了进展~</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221227001425075.png" alt="发了个，居然说像了！" style="zoom:50%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221227001611227.png" alt="尝试了下，貌似成了一丢丢" style="zoom:50%;" /><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="https://music.163.com/outchain/player?type=2&id=566436427&auto=1&height=66" auto="1"></iframe><blockquote><p>近日总结 ：买了个游戏花了我4块钱。学了点新东西，打算买域名，给博客换上，但好像没啥钱哎。暂时搁置，等跨年买！</p><p>明日期望：希望家人，朋友，谁谁都身体健康~</p></blockquote><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/QQ图片20221227001747.gif" alt="" style="zoom: 50%;" /><p style="float: right">2022年12月26日23:00:57</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>Java学习笔记</title>
<link href="/posts/9845.html"/>
<url>/posts/9845.html</url>
<content type="html"><![CDATA[<h1 id="Java-Notes"><a href="#Java-Notes" class="headerlink" title="Java Notes"></a>Java Notes</h1><h2 id="1-数组"><a href="#1-数组" class="headerlink" title="1.数组"></a>1.数组</h2><ul><li><strong>数组</strong>：是一种容器，可以用来存储同种数据类型的多个值。</li></ul><h4 id="1-1-数组的定义格式"><a href="#1-1-数组的定义格式" class="headerlink" title="1.1 数组的定义格式"></a>1.1 数组的定义格式</h4><ol><li><p>数据类型[] 数组名</p><p><code>int[] array;</code></p></li><li><p>数据类型 数组名[]</p><p><code>int array[];</code></p></li><li><p>完整格式：数据类型[] 数组名 = new 数据类型[] {1,2,3..};</p><p><code>int[] array = new int[]{111,22,33};</code></p><p><code>double[] array2 = {11.1,22.2,33.2};</code></p></li><li><p>简化格式：数据类型[] 数组名 = {元素1,元素2,元素3…}</p><p><code>double[] array = {1,2,3,4};</code></p></li><li><p>数组有索引下标从0开始且数组长度 - 1</p></li></ol><h4 id="1-2-数组的动态初始化"><a href="#1-2-数组的动态初始化" class="headerlink" title="1.2 数组的动态初始化"></a>1.2 数组的动态初始化</h4><ol><li><p>初始化时至指定数组长度，由系统为数组分配初始值。</p><blockquote><p>格式：数据类型[] 数组名 = new 数据类型 [数组长度];</p><blockquote><p>范例：<code>int[] arr = new int[3];</code></p></blockquote></blockquote></li><li><p>数组默认初始化值的规律：</p><blockquote><p>整数类型：默认初始化值0；</p><p>小数类型：默认初始化值0.0；</p><p>字符类型：默认初始化类型’/u0000’ 空格;</p><p>布尔类型：默认初始化值 false;</p><p>引用数据类型：默认初始化值 null;</p></blockquote></li><li><p>数组的空间可以共用，两个数组指向同一个空间的内存图。</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span>{</span><br><span class="line"> <span class="type">int</span>[] arr1 = {<span class="number">11</span>,<span class="number">22</span>};</span><br><span class="line"> <span class="type">int</span>[] arr2 = arr1;</span><br><span class="line"> </span><br><span class="line"> System.out.println(arr1[<span class="number">0</span>]);</span><br><span class="line"> System.out.println(arr2[<span class="number">0</span>]);</span><br><span class="line"> </span><br><span class="line"> arr2[<span class="number">0</span>] = <span class="number">33</span>;</span><br><span class="line"> </span><br><span class="line"> System.out.println(arr1[<span class="number">0</span>]);</span><br><span class="line"> System.out.println(arr2[<span class="number">0</span>]);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//输出结果为： 11 11 33 33</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="1-3-数组的遍历"><a href="#1-3-数组的遍历" class="headerlink" title="1.3 数组的遍历"></a>1.3 数组的遍历</h4><ol><li><p>idea 自带的数组遍历快速写法</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组名.fori</span></span><br><span class="line">arr1.fori;</span><br><span class="line"><span class="comment">//for(数组类型 变量 : 数组名)</span></span><br><span class="line"><span class="keyword">for</span>(<span class="type">double</span> s : arr5){</span><br><span class="line"> System.out.println(s);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>数组的遍历:</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">int</span> i;</span><br><span class="line"><span class="type">int</span> arr1[] = {<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>}</span><br><span class="line"><span class="keyword">for</span>(i = <span class="number">0</span>;i < arr1.length){</span><br><span class="line"> System.out.println(arr1[i]);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h2 id="2-随机类-Random"><a href="#2-随机类-Random" class="headerlink" title="2.随机类 Random"></a>2.随机类 Random</h2><h4 id="2-1-Random-格式"><a href="#2-1-Random-格式" class="headerlink" title="2.1 Random 格式"></a>2.1 Random 格式</h4><ol><li><p>导包</p><p><code>import java.util.Random;</code></p></li><li><p>创建</p><p><code>Random random_number = new Random()</code></p></li><li><p>调用</p><p><code>int a = random_number.nextInt(参数范围)</code></p></li><li><p>注意事项：参数范围 填写一个值 = 首与尾;</p><p>例如：<code>int a = random_number.nextInt(100)</code>则是0~99范围</p></li><li><p>范围值形同数组长度-1；若要定义范围则要减去或增加对应数：</p><p>例如：<code>int a = random_number.nextInt(100) + 1</code> 则为1~100</p></li></ol><h2 id="3-Java-的内存分配"><a href="#3-Java-的内存分配" class="headerlink" title="3.Java 的内存分配"></a>3.Java 的内存分配</h2><ol><li><p>栈 方法运行时使用的内存，比如main方法运行，进入方法栈中执行。</p></li><li><p>堆 存储对象或者数组，new 来创建的，都存储在堆。</p></li><li><p>方法区 存储可以运行的class文件。</p></li><li><p>本地方法栈 JVM在使用操作系统功能的时候使用，和开发无关。</p></li><li><p>寄存器 给CPU使用。</p></li></ol><h2 id="4-方法"><a href="#4-方法" class="headerlink" title="4.方法"></a>4.方法</h2><h4 id="1-1-方法"><a href="#1-1-方法" class="headerlink" title="1.1 方法"></a>1.1 方法</h4><ul><li>方法是程序中的最小执行单位。</li></ul><ol><li><p>方法简单定义：</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">test</span>{</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span>{</span><br><span class="line"> <span class="comment">//调用方法</span></span><br><span class="line"> playgame();</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//定义方法</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">playgame</span><span class="params">()</span>{</span><br><span class="line"> System.out.println(<span class="string">"方法1"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>方法可以嵌套：</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">day_10_Method_test_2</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> Method();</span><br><span class="line"> System.out.println(<span class="string">"main~"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">Method</span><span class="params">()</span>{</span><br><span class="line"> Method_1();</span><br><span class="line"> System.out.println(<span class="string">"这是方法0"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">Method_1</span><span class="params">()</span>{</span><br><span class="line"> System.out.println(<span class="string">"这是方法1"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h2 id="5-二维数组"><a href="#5-二维数组" class="headerlink" title="5.二维数组"></a>5.二维数组</h2><h4 id="1-1-二维数组的静态初始化"><a href="#1-1-二维数组的静态初始化" class="headerlink" title="1.1 二维数组的静态初始化"></a>1.1 二维数组的静态初始化</h4><ol><li><p><code>int[][] arr = new int[][]{{11,22},{33,44}};</code></p></li><li><p>``int[][] arr = {{11,22},{33,44}};`</p></li><li><p><code>int arr[][] = {{11,22},{33,44}};</code></p></li><li><p>优化格式：</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">int</span>[][] arr3 = {</span><br><span class="line"> {<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>},<span class="comment">//第一个一维数组</span></span><br><span class="line"> {<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>}<span class="comment">//第二个二维数组</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure></li></ol><h4 id="1-2-二维数组的元素获取与遍历"><a href="#1-2-二维数组的元素获取与遍历" class="headerlink" title="1.2 二维数组的元素获取与遍历"></a>1.2 二维数组的元素获取与遍历</h4><ol><li><p>获取元素</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">System.out.println(arr3[<span class="number">0</span>]);<span class="comment">//表示获取阿arr3的第一个二维数组。但不获取其元素，因此返回第一个一维数组的地址值</span></span><br><span class="line">System.out.println(arr3[<span class="number">0</span>][<span class="number">5</span>]);<span class="comment">//表示获取arr3的第一个一维数组的索引为5的元素</span></span><br><span class="line">System.out.println(arr3[<span class="number">1</span>][<span class="number">5</span>]);<span class="comment">//表示获取arr3的第二个一位数组的索引为5的元素</span></span><br></pre></td></tr></table></figure></li><li><p>遍历元素</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">int</span>[][] arr3 = {%</span><br><span class="line"> {<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>},</span><br><span class="line"> {<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>}</span><br><span class="line">%};</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="type">int</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>; i < arr3.length; i++){ <span class="comment">//获取二维数组里的一维数组</span></span><br><span class="line"> System.out.println(<span class="string">""</span>);</span><br><span class="line"> <span class="keyword">for</span>(<span class="type">int</span> <span class="variable">j</span> <span class="operator">=</span> <span class="number">0</span>; j < arr3[i].length; j++){ <span class="comment">//获取一维数组中的元素</span></span><br><span class="line"> System.out.println(arr3[i][j] + <span class="string">" "</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h4 id="1-3-二维数组的动态初始化"><a href="#1-3-二维数组的动态初始化" class="headerlink" title="1.3 二维数组的动态初始化"></a>1.3 二维数组的动态初始化</h4><ol><li><p>初始化格式</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">int</span>[][] arr = <span class="keyword">new</span> <span class="title class_">int</span>[<span class="number">3</span>][<span class="number">5</span>]; <span class="comment">//表示二维数组长度为3，可以装3个一维数组，每个一维数组的长度为5</span></span><br></pre></td></tr></table></figure></li><li><p>因二维数组的动态初始化的内存图中来看，二维数组里可存放地址值，故此我们可将数组写成</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">int</span>[][] arr = <span class="keyword">new</span> <span class="title class_">int</span>[<span class="number">2</span>][];</span><br><span class="line"> <span class="type">int</span>[] arr1 = {<span class="number">11</span>,<span class="number">22</span>};</span><br><span class="line"> <span class="type">int</span>[] arr2 = {<span class="number">44</span>,<span class="number">55</span>,<span class="number">66</span>};</span><br><span class="line"> </span><br><span class="line"> arr[<span class="number">0</span>] = arr1;</span><br><span class="line"> arr[<span class="number">1</span>] = arr2;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>优化写法</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">int</span>[][] arr = {</span><br><span class="line"> {<span class="number">22</span>,<span class="number">33</span>,<span class="number">44</span>},</span><br><span class="line"> {<span class="number">22</span>,<span class="number">66</span>,<span class="number">77</span>}</span><br><span class="line"> };</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h2 id="6-面对对象"><a href="#6-面对对象" class="headerlink" title="6.面对对象"></a>6.面对对象</h2><h4 id="1-1-类和对象"><a href="#1-1-类和对象" class="headerlink" title="1.1 类和对象"></a>1.1 类和对象</h4><ol><li>类：是共同特征的描述（设计图）；</li><li>对象：是真实存在的具体实例。</li><li>类名首字母建议大写</li><li>一个Java文件中可以定义多个class类，且只能一个类是public修饰，而且public修饰的必须是文件名</li></ol><h4 id="1-2-使用对象"><a href="#1-2-使用对象" class="headerlink" title="1.2 使用对象"></a>1.2 使用对象</h4><ul><li><p>对象.成员变量</p></li><li><p>对象.成员方法(…)</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建类</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">GirlFriend</span> {</span><br><span class="line"> <span class="comment">// 属性</span></span><br><span class="line"> String name;</span><br><span class="line"> <span class="type">int</span> age;</span><br><span class="line"> String gender;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 行为</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">sleep</span><span class="params">()</span> {</span><br><span class="line"> System.out.println(<span class="string">"女朋友在睡觉"</span>);</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">eat</span><span class="params">()</span> {</span><br><span class="line"> System.out.println(<span class="string">"女朋友在吃饭"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h4 id="1-3-获取对象并使用"><a href="#1-3-获取对象并使用" class="headerlink" title="1.3 获取对象并使用"></a>1.3 获取对象并使用</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> class 类名 {</span><br><span class="line"> 成员变量(代表属性)</span><br><span class="line"> 成员方法(代表方法)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// main 里面</span></span><br><span class="line">类名 对象名 = <span class="keyword">new</span> 类型(); </span><br></pre></td></tr></table></figure><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">GirlFriendTest</span>() {</span><br><span class="line"> <span class="comment">// 创建女朋友的对象</span></span><br><span class="line"> <span class="type">GirlFriend</span> <span class="variable">gf1</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">GirlFriend</span>();</span><br><span class="line"> gf1.name = <span class="string">"肖德华"</span>;</span><br><span class="line"> gf1.age = <span class="number">19</span>;</span><br><span class="line"> gf1.gender = <span class="string">"男"</span>;</span><br><span class="line"> </span><br><span class="line"> System.out.println(gf1.name);</span><br><span class="line"> System.out.println(gf1.age);</span><br><span class="line"> System.out.println(gf1.gender);</span><br><span class="line"> <span class="comment">// 使用方法</span></span><br><span class="line"> gf1.eat();</span><br><span class="line"> gf1.sleep();</span><br><span class="line"> </span><br><span class="line"> System.out.println(<span class="string">"======================"</span>);</span><br><span class="line"> <span class="type">GirlFriend</span> <span class="variable">gf2</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">GirlFriend</span>();</span><br><span class="line"> gf2.name = <span class="string">"肖烊千玺"</span>;</span><br><span class="line"> gf2.age = <span class="number">20</span>;</span><br><span class="line"> gf2.gender = <span class="string">"女"</span>;</span><br><span class="line"> </span><br><span class="line"> System.out.println(gf2.name);</span><br><span class="line"> System.out.println(gf2.age);</span><br><span class="line"> System.out.println(gf2.gender);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="1-4-封装"><a href="#1-4-封装" class="headerlink" title="1.4 封装"></a>1.4 封装</h4><blockquote><ol><li>对象代表什么，就是封装对应的数据，并提供数据相应的行为</li><li>告诉我们如何正确的设计对象的属性和方法</li></ol></blockquote><h4 id="1-5-private-关键字"><a href="#1-5-private-关键字" class="headerlink" title="1. 5 private 关键字"></a>1. 5 private 关键字</h4><ul><li>是一个权限修饰符</li><li>可以修饰成员(成员变量和成员方法)</li><li>被<strong>private</strong>修饰的成员只能在本类中才能访问</li></ul><ol><li><p>使用方法</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">day_12_GirlFriend</span> {</span><br><span class="line"> String name;</span><br><span class="line"> <span class="keyword">private</span> <span class="type">int</span> age;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="comment">//自我介绍</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">selfIntroduction</span><span class="params">()</span> {</span><br><span class="line"> System.out.println(<span class="string">"我叫"</span> + name);</span><br><span class="line"> System.out.println(<span class="string">"今年"</span> + age + <span class="string">"岁"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">//年龄校验</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">setAge</span><span class="params">()</span> {</span><br><span class="line"> <span class="type">Scanner</span> <span class="variable">sc</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Scanner</span>(System.in);</span><br><span class="line"> <span class="keyword">while</span> (<span class="literal">true</span>) {</span><br><span class="line"> System.out.println(<span class="string">"请输入年龄："</span>);</span><br><span class="line"> <span class="type">int</span> <span class="variable">a</span> <span class="operator">=</span> sc.nextInt();</span><br><span class="line"> <span class="keyword">if</span> (a >= <span class="number">18</span> && a <= <span class="number">30</span>) {</span><br><span class="line"> age = a;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> System.out.println(<span class="string">"非法数据，请重新输入"</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>main 调用 </p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">day_12_GirlFriend</span> <span class="variable">girl</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">day_12_GirlFriend</span>();</span><br><span class="line"> <span class="type">Scanner</span> <span class="variable">sc</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Scanner</span>(System.in);</span><br><span class="line"> System.out.println(<span class="string">"请输入姓名:"</span>);</span><br><span class="line"> girl.name = sc.next(); <span class="comment">// 输入传递给girl.name</span></span><br><span class="line"></span><br><span class="line"> girl.setAge(); <span class="comment">// 年龄</span></span><br><span class="line"> girl.selfIntroduction(); <span class="comment">// 开始自我介绍</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221123102250672.png" alt="" style="zoom:67%;" /></p></li></ol><h4 id="1-5-This-关键字"><a href="#1-5-This-关键字" class="headerlink" title="1.5 This 关键字"></a>1.5 This 关键字</h4><h6 id="1-5-1-局部变量和全局变量"><a href="#1-5-1-局部变量和全局变量" class="headerlink" title="1.5.1 局部变量和全局变量"></a>1.5.1 局部变量和全局变量</h6><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">GirlFriend</span> {</span><br><span class="line"> <span class="keyword">private</span> <span class="type">int</span> age; <span class="comment">// 全局变量</span></span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">method</span><span class="params">()</span> {</span><br><span class="line"> <span class="type">int</span> <span class="variable">age</span> <span class="operator">=</span> <span class="number">10</span>; <span class="comment">// 局部变量 </span></span><br><span class="line"> <span class="comment">// System.out.println(age); 此时调用的是局部变量 就近原则</span></span><br><span class="line"> System.out.println(<span class="built_in">this</span>.age); <span class="comment">// 此时调用的是全局变量</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="1-5-构造方法"><a href="#1-5-构造方法" class="headerlink" title="1.5 构造方法"></a>1.5 构造方法</h4><blockquote><ol><li>构造方法也叫构造器，构造函数</li><li>作用： 在创建对象的时候给成员变量进行初始化的</li></ol></blockquote><ol><li><p>构造方法的格式</p><blockquote><ol><li><p>方法名与类名相同大小写也一致</p><pre><code> 2. 没有返回值类型，连void都没有 3. 没有具体的返回值(不能由return带回结果数据) 4. 构造方法的重载，带参构造方法，和无参构造方法，两者方法名相同，但是参数不同，这叫做构造方法的重载 5. 推荐无论是否使用，都手动书写无参数构造方法，和带全部参数的构造方法</code></pre></li></ol></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">public class Stundet {</span><br><span class="line"> 修饰符 类名(参数) {</span><br><span class="line"> 方法体;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Stundet</span> {</span><br><span class="line"> <span class="keyword">private</span> String name;</span><br><span class="line"> <span class="keyword">private</span> <span class="type">int</span> age;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">public</span> <span class="title function_">Student</span><span class="params">()</span> {</span><br><span class="line"> ... <span class="comment">// 空参构造</span></span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">public</span> <span class="title function_">Student</span><span class="params">(String name,<span class="type">int</span> age)</span> {</span><br><span class="line"> ... <span class="comment">// 带参构造</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行时机：</span></span><br><span class="line"><span class="comment">// 1.创建对象的时候由虚拟机调用，不能手动调用构造方法</span></span><br><span class="line"><span class="comment">// 2.每创建一次对象，就会调用一次构造方法</span></span><br></pre></td></tr></table></figure></li><li><p>构造实例</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Student</span> {</span><br><span class="line"> <span class="keyword">private</span> String name;</span><br><span class="line"> <span class="keyword">private</span> <span class="type">int</span> age;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 如果没有写任何构造方法</span></span><br><span class="line"> <span class="comment">// 那么虚拟机会自动加一个空参构造方法</span></span><br><span class="line"> <span class="comment">// 如果定义了构造，则不会自动加</span></span><br><span class="line"> <span class="keyword">public</span> <span class="title function_">Student</span><span class="params">()</span> {</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">public</span> <span class="title function_">Studnet</span><span class="params">(String name,<span class="type">int</span> age)</span> { <span class="comment">// 接受有参</span></span><br><span class="line"> <span class="built_in">this</span>.name = name; <span class="comment">// 全局变量的 name = 局部变量的 name</span></span><br><span class="line"> <span class="built_in">this</span>.age = age;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">StundentTest</span> {</span><br><span class="line"> <span class="comment">// 创建对象</span></span><br><span class="line"> <span class="comment">// 调用的空参构造</span></span><br><span class="line"> <span class="comment">// Student s = new Student();</span></span><br><span class="line"> <span class="type">Student</span> <span class="variable">s</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Student</span>(<span class="string">"张三"</span>,<span class="number">23</span>); <span class="comment">// 传递有参</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h4 id="1-6-标准的-Javabean-类"><a href="#1-6-标准的-Javabean-类" class="headerlink" title="1.6 标准的 Javabean 类"></a>1.6 标准的 Javabean 类</h4><ol><li>类名需要见名知意</li><li>成员变量使用 <strong>private</strong> 修饰</li><li>提供至少两个构造方法<ul><li>无参构造方法</li><li>带全部参数的构造方法</li></ul></li><li>成员方法<ul><li>提供每一个成员变量对应的setXxx()/getXxx()</li><li>如果还有其他行为，也需要写上</li></ul></li><li>Alt + insert 可以快捷生成</li></ol><h4 id="1-7-Java内存分配介绍"><a href="#1-7-Java内存分配介绍" class="headerlink" title="1.7 Java内存分配介绍"></a>1.7 Java内存分配介绍</h4><ul><li><strong>栈</strong></li><li><strong>堆</strong></li><li><strong>方法区</strong></li><li>本地方法栈</li><li>寄存器</li></ul><p>注意：</p><p>从JDK8开始，取消方法区，新增元空间。把原来方法区的多种功能进行拆分，有的功能放到了堆中，有的功能则放到了元空间中。</p><p><strong>示例：</strong></p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建Student类</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Student</span> {</span><br><span class="line"> String name;</span><br><span class="line"> <span class="type">int</span> age;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">void</span> <span class="title function_">study</span><span class="params">()</span> {</span><br><span class="line"> System.out.println(<span class="string">"好好学"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建Test类</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">TestStudent</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title function_">main</span><span class="params">(String[] args)</span> {</span><br><span class="line"> <span class="type">Student</span> <span class="variable">s</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">Student</span>();</span><br><span class="line"> System.out.println(s);</span><br><span class="line"> System.out.println(s.name + <span class="string">"..."</span> + s.age);</span><br><span class="line"> s.name = <span class="string">"阿强"</span>;</span><br><span class="line"> s.age = <span class="number">23</span>;</span><br><span class="line"> System.out.println(s.name + <span class="string">"..."</span> + s.age);</span><br><span class="line"> s.study();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h5 id="创建一个对象的内存运行图"><a href="#创建一个对象的内存运行图" class="headerlink" title="创建一个对象的内存运行图"></a><strong>创建一个对象的内存运行图</strong></h5><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/Snipaste_2023-03-03_15-53-11.webp"></p><ol><li><p><strong>加载class文件</strong></p><p>将StudentTest.class的字节码文件加载到方法区内。此后加载main方法到栈内存。之后代码运行到创建对象，又将Student类的字节码文件加载到方法区。</p><img src="Java Notes.assets/Snipaste_2023-03-03_15-53-11-1677830597074-2.webp" alt="Snipaste_2023-03-03_15-53-11" style="zoom:50%;" /></li><li><p><strong>申明局部变量</strong></p><p>在main方法创建对象的变量 <strong>s</strong></p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/main方法导入创建对象的变量.webp" alt="main方法导入创建对象的变量" style="zoom:50%;" /></li><li><p><strong>在堆内存中开辟一个空间</strong></p><p>创建了Student对象，则在栈内存创建内存地址</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/在栈内存创建对象的内存.webp" alt="在栈内存创建对象的内存" style="zoom:50%;" /></li><li><p><strong>默认初始化</strong></p><p>读取成员变量的默认化值，因为没有定义所以为默认值</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E5%80%BC.webp" alt="没有定义值"></p></li><li><p><strong>显示初始化</strong></p><p>如果定义了值，则将定义的值传递到堆内存，将对内存的默认值覆盖</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E5%A6%82%E6%9E%9C%E5%AE%9A%E4%B9%89%E4%BA%86%E5%80%BC.webp" alt="如果定义了值"></p></li><li><p><strong>构造方法初始化</strong></p><p>因为没有设置有参构造，所以并没有将有参构造的值传递到栈内存进行覆盖</p></li><li><p><strong>将堆内存中的地址值赋值给左边的局部变量</strong></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E5%B0%86%E6%A0%88%E5%86%85%E5%AD%98%E7%9A%84%E5%AF%B9%E8%B1%A1%E5%9C%B0%E5%9D%80%E4%BC%A0%E9%80%92%E7%BB%99main%E6%96%B9%E6%B3%95%E7%9A%84s.webp" alt="将栈内存的对象地址传递给main方法的s"></p></li></ol><p>若栈内存里没有方法再指向堆内存里的对象，则对象清除</p><p>本节视频教学：<a href="https://www.bilibili.com/video/BV17F411T7Ao/?p=87">面向对象-07-三种情况的对象内存图</a></p><h5 id="两个引用指向同一个对象"><a href="#两个引用指向同一个对象" class="headerlink" title="两个引用指向同一个对象"></a>两个引用指向同一个对象</h5><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E4%B8%A4%E4%B8%AA%E5%BC%95%E7%94%A8%E6%8C%87%E5%90%91%E5%90%8C%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1.webp" alt="两个引用指向同一个对象"></p><p>当栈内存没有方法指向栈内存的对象，则对象清除</p><h4 id="1-8-基本数据类型和引用数据类型"><a href="#1-8-基本数据类型和引用数据类型" class="headerlink" title="1.8 基本数据类型和引用数据类型"></a>1.8 基本数据类型和引用数据类型</h4><p>基本数据类型：数据值是存储在自己空间的，赋值给其他变量，也是赋的真实的值。</p><p>引用数据类型：数据值是存储到其他空间的，自己空间中存储的是地址值。赋值给其他变量是给的地址值。</p><h4 id="1-9-this的内存原理"><a href="#1-9-this的内存原理" class="headerlink" title="1.9 this的内存原理"></a>1.9 this的内存原理</h4><p>this的作用：区分局部变量和成员变量。</p><p>this的本质：代表方法调用者的地址值。</p><p><strong>内存图：</strong></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/this%E7%9A%84%E5%86%85%E5%AD%98%E5%8E%9F%E7%90%86%E5%9B%BE.webp" alt="this的内存原理图"></p><p>当main里的<code>s.method();</code>调用了对象里的方法，则进入栈内存</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/%E8%B0%83%E7%94%A8%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E6%96%B9%E6%B3%95%E8%BF%9B%E6%A0%88.webp" alt="调用对象的方法，方法进栈"></p><p>此时调用者为 s，故此this则指向调用者s</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/this%E5%9C%B0%E5%9D%80%E4%B8%BA%E8%B0%83%E7%94%A8%E8%80%85s.webp" alt="this地址为调用者s"></p><h4 id="2-0-数组存放对象"><a href="#2-0-数组存放对象" class="headerlink" title="2.0 数组存放对象"></a>2.0 数组存放对象</h4><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230313172738719.png"></p><p>当创建对象的语句写在循环外面，则循环内的数据一直在更改的是同一地址的对象。</p><h2 id="7-键盘录入"><a href="#7-键盘录入" class="headerlink" title="7.键盘录入"></a>7.键盘录入</h2><p>第一套体系</p><p><code>nextInt()</code>接收整数</p><p><code>nextDouble()</code> 接收小数</p><p><code>next()</code> 接收字符串</p><blockquote><p>遇到空格，制表符，回车就停止接收。</p></blockquote><p>第二条体系</p><p><code>nextLine()</code> 接收字符串</p><blockquote><p>遇到回车停止接收，接收空格，制表符不会停止接收。</p></blockquote><p><strong>以上两个体系不能混用</strong></p><p><strong>先用<code>nextInt()</code>，再用<code>nextLine()</code>会导致下面的<code>nextLine()</code>额接收不到数据</strong></p><h2 id="8-API-amp-字符串"><a href="#8-API-amp-字符串" class="headerlink" title="8.API&字符串"></a>8.API&字符串</h2><p><strong>API(Application Programming Interface) : 应用程序编程接口</strong></p><h4 id="1-String概述"><a href="#1-String概述" class="headerlink" title="1.String概述"></a>1.String概述</h4><blockquote><p><code>java.lang.String</code> 类代表字符串，Java程序中的所有字符串文字都为此类的对象。</p></blockquote><h4 id="2-创建String对象的两种方式"><a href="#2-创建String对象的两种方式" class="headerlink" title="2.创建String对象的两种方式"></a>2.创建String对象的两种方式</h4><ul><li><p><strong>直接赋值</strong></p><ul><li><code>String name = "张大头";</code></li></ul></li><li><p><strong>new</strong></p><ul><li><table><thead><tr><th>构造方法</th><th>说明</th></tr></thead><tbody><tr><td>public String()</td><td>创建空白字符，不含任何内容</td></tr><tr><td>public String(String original)</td><td>根据传入的字符串，创建字符串对象</td></tr><tr><td>public String(char[] chs)</td><td>根据字符数组，创建字符串对象</td></tr><tr><td>public String(byte[] chs)</td><td>根据字节数组，创建字符串对象</td></tr></tbody></table></li></ul></li></ul><h4 id="3-String-在Java的内存模型"><a href="#3-String-在Java的内存模型" class="headerlink" title="3.String 在Java的内存模型"></a>3.String 在Java的内存模型</h4><p><strong>直接赋值的内存模型：</strong></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230314172624176.png"></p><blockquote><p>当使用双引号直接赋值时，系统会检查该字符串在串池中是否存在。不存在则创建新的，存在则复用。</p></blockquote><p>**new String 的内存模型： **</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230314172915380.png"></p><blockquote><p>每次new一次都会开阔一个新空间，不会复用。但在新版本java中貌似不会再开阔。</p></blockquote><h4 id="4-Java的常用方法（比较）"><a href="#4-Java的常用方法（比较）" class="headerlink" title="4.Java的常用方法（比较）"></a>4.Java的常用方法（比较）</h4><p><strong><code>==</code> 比较规则</strong></p><p>：基本数据类型比较的是数据值，字符串比较的是地址值</p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20230314173534197.png"></p>]]></content>
<categories>
<category> 笔记 </category>
</categories>
<tags>
<tag> Java </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/14 📔</title>
<link href="/posts/cc012c52.html"/>
<url>/posts/cc012c52.html</url>
<content type="html"><![CDATA[<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="抱歉, 这个密码看着不太对, 请再试试." data-whm="抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容."> <script id="hbeData" type="hbeData" data-hmacdigest="a98c635493aa2f13888b147ee0df125c5efb1cebcd3fe269e4d0974b187ad677">ab2a04d97389449cab2ea4aece86695c20509076711de51fd20de1c476368919bc1629106de12192ed1a78229f435658097eb3938e88e2dce61776c57dc7fd9a0f791867b7770745ff847623229d435b78ed54777255befa6a04cb3a5d692ee41381379f318694661ee23384696c83b92a45cca15d67332d3e28db5f9ea7b86565dcf1a92905548e15d0f407bb9bc625e3175e64c166b3b7d9e808f7bfe2eccd1e9555eeb13f08ffaca5a61721c70181715a358b435333a659b3c630c7caa7662c1ed07176f016528ae3781dc759d39f0e014c5444cb8e2a97251e9b586447dbbb96c2c0bf2a87d451e50b60e42b25da3ea1ea6666c24b3cb328e37816304e09919f04971d3d844a07f3567b12a255c98c0847f1a3e72324dc317f20d6ad5796ffc88657149374665873ad8583c756fbd561d1363eec9622ca1d82e6bdabe2cc6e7d2001bfc0f1dd3599be384a4f9b7165e65741c1097f2dac489169b77f674a8f01be457cda2f243812d06010a86e5351cae3d54e94692f717ae2a877f607028389f46392cc1c7cc9e7dd8b23130ca4c64e4b64e4e816eca7351a9974704f929af7ef8ba419d9aaf277436e80555b97d717ff88f89d88bf5c47df37bcb1b03aca64cd147cd678e0c60758146f2537f68264fa4a2d15b6bcf875eefcde2db27f7c23455286e75149bfff1d3e6f3a18e3b70e83117addaa8852566241ebfd832cc3654433f3b5d0afd34fe9ff4acf0e6170164eea6a853c5fa0441e54ef9cddf3d0e53a4625e8c390b08b0b5bba1a4cdc68e81b7582fa3168461b5320c76b94a5f80d9af9b31d9c2f8c5179633245fc839bf3672a07a003136029ea195c08465132adaee33d57291f215aba22c9703f1d5a9b390acfa4313283cd6788c3f5eabcfd1a24102dba22200c9dd06f83c944fb751bf736d85a21fd9b9e87f129bf33103ce94f2a831eeb63878e1dc0ca63599fcdf74a2a891bb7ac906c38411cb4b11f392b6da3c05a0d3369754aa5ccb505ea770b44dd3ef94fd938fdc51a1e4450bf99dc5d5c8d213edb2e1e77a377fc6832bfa4da3e67376dc98f83975b916f0d4d94779eff6d9d125e5bab88480be5e9aef619388ad31318ea2886807f66abf4860e1547e28b1cd9d766f865470acf96ff99ee7437b71f650d96837d2b54f90633535060588bcd83310a0bcaf1820d97b421883e1260da4b75e58ae53056c304582ce47e16baa4e946ee86cb26d62f121ec91f97f55333c270e477b2aee680e44de8ee0178b86d80751db071cc14fad752b7f9cf44eebcf23c4d96a754bcad60a3e5f6a8b131bed0b3aa3d60d5dfff83b138f3a8eedad35c2d90fed22b919e3b0179ee2a6b52d9d140a8113d3e53bf729cd0e3cd6d385f348e6732022dc1a47962c2f974ba2cd07d4ebebd5752ea1ff1d50d008db305aeba51a07f44466d17b77b407d6ecab7f3c9ef52b07b8ff0450926483e7c6152b930d76b5239d6673850a838d261a30084a2cc74421abefe8d15262f0611acf7f0438bbcb896c7bc4a94641cab2c1951112505de0c03d9c0bd4ee2b234c8c78e3338703ed8427a29f70349063bca0c06bf930671ff611ddd3d9f3272fb6d56c160ab4378a74dafff10a852eb38c1d38f09c7aad0d00501f491eaad8af585495076ae624abfc5f6c0e8f13453bc3944bfd5ce958005ebc3277b4fd6702b9f2dadce4f077234a7150a86b0666cfe32381a2630dc72d0d3c38f59a5d1d9de57d2c30e9824d098438f7071803690e1fa25b9aa8c9632a540b972daea01df49d99aa4ac27d2d82ade94c26f90522b16ffd639520eaa83116bc231f6957b16f44608ed43019ac7240500f2d7cecd6feac717e553d41b9987dde6922d8a918ebe85c11a843a2b2d8cd6701f7e1af7589dcb8445642a8d5f2a49e1516e0c393af578fb29070ddde2464c7e9b255cbf98fa1a32078adaf268d8a6a2acea3d4c71c777323023c89e67438b8fb36f48cc0a41aafb418e4d660d085d5de3e2a634322d8a5775ca063c4ff7239777f7c347e6d6cc28a1fb4c47c4079f38044aa8802e9c9883a018755f00367a44774113e3bfe8cf54cc53f6dc0832030ccd6357d4ee3e6474cc524a7f489e604261a1e0f2083674e221ca660cadaf9a65cc43b897c92703080e823c9ec050c800b1b968699d243bfe84c20d293deecb58ad953295187e01045667da43ffd0fe944d81b98ad1f3c4f424477982ead7060a7b12cc8e0a9a509235b70415ef485f3c9fd57d8e5d7d892da0441eb29dc38872b21a819c16824b125c3299524a23f1bacdec0abaf37c20f08d8a2d4bda7491f0b0e9786f843818f72c49b2e6f3f4679a3c934b6e3dba01c61fadcff0cc21af7afccd63adf2639801b52db9e727d9a41fff704c6691845fa0558eba0b869233f55392b9f0edd4afd82b8626985aa483dd0aa471c87d158f66c691756cac82b69118276ba471d1ee43cef46652048e79d5569e90975b2723628e61ec102357db16180cd8fb1a74d267c21e1716a1c5502928f354b9f306cc3e7a05dcf14b4aae62bb0f4bff2803082afcd062cde9f9e52aa6e1c0d059f4855480fe799b6d6e1a7d88987b82689c13eab2f8d5c5d7137a869f436bb3eca7d048d1e473511b0f369682bf1bd5d2393348b63d53df98f880add65b73940bc72b541f85ce5609b0e3731fbd0083721a2f35d7e225b78caf0fc23a4eeaca8777c994e49240208d1a34ff42167ea5271e3ca20ba8aab94f45dd8e624c1256ac32b66dc133818c390e150901a862c556b9e29ab7cd6776f35da0fa6abbcce414e2e246be0391a8bbdc75419bedc1120c346d5b90a7b81c54cda3505a687d27a1f089bbadcfc01336382d153a7f6293b94665ee60dab0bb3d9f39bc6e6e7caf52cd2f1fc8eed4735f2cfeea32b0c21ff0a7cc0d9e443556310b56c450cc3fdc00b0f969455e375b1e22bc5d70b0d5050bc4608f26def91a62301c714d819c663eff5c3143c82ac5527499e13794f4bc70a9bd93c65d3628a2c39813d19437d3eb03db193cfcacb4f09f92382e2c300cd8440725192e97ff38a246fd163ebd1903b45757e6b4da349c570aafb2a616df8a4d27e9bae45eb01146c979ad913c4d94c7bdb1dc144c7f2416b9cd698ee92264bfbc69b1d9587ac2ea3e6822d5aedfaa054181c90c3f7658ddefa12ff419ccaea8a1ec7eef3e5f49104eaacbfdcebc358463e8702657f2b9caddc7b5fb2e5426d436cbf933b6f6596603a96b7a83fbc4f32dfdadd18a71d9b99a27bdbbb7bfdd72a4acb6965abb654831a674a6757166e35960c91672bf0df5b87316f8095c4dd2ea2399f138fc82029883305069114dd052b1fec99b57fb785f2dd1772741a547c96b198d9d7b164dd619b9057fdd01f880dde982efd27fb69f2c41cd188dd6f12f753a75e1578e70f23f9dc6a5a9af164b575a480dc443f531c6bcd46f9a8af6c9f72c2688a697e77d0052415154dde6b509d196160ef242cc8dca52612a120fb9249002a8ecab37e59efd36ddbf4171d1cc39b3138a6f786305c1e79bed2f7ff47edfb3b9cfb8fdcb77751653329ad8af959a067b4e1a063f27cb52b3f0f1f18c237a94225a489de5eaa335e24988cbabecbec8ad9521d28ea034717928ba6810d1ce96ca08b36274f593e1c99a47cca037bc1adb7ede012a0b40a9b02287d6ec8d8a9fae3d7a9bcf11bfebbae9ce07fc7af9be2a247f46f44538b4bcaa079e9fc732de413db4902a46570d5aa346e72bc5ef8a84cb5fe6a696dd80f1f3130ae1fc7bdf7007ca1186553192431e630b802a6b8159d42393774b171725faf1d9a1be4542a9d14d138544132f8af3d7b43a46c89a8021accfd0dcddf29e9c0dba15355eed25abc89a5506a255983bf9d6aab6d119875399b4788000901b990c97e4aaf1d1790f5b96a6542dd930b7e0d00ed4cf68ac7382499296c5d5a94570482a8126ed92e0e06c6a0396e2b89210f80ed26dc15d177d27434332a6921ce1d7342235d92e46a4bc87fc5a53a0c0d2d57ad53d0f796f55df368a42edc5bb931f07339f5091de1f1002d353a04c0679463b582045c368278af58e7b2eddaf67e7b66a628072def1ed6241bda517ee08f638516dc1c3c1ec78cb62d3147eb3b4e325a2a29c11cb7392a22349e91d6398aebce2fe6bccde7e673af17aecc5c7053afc0798472575d2597073fa2fc31f74ec2a22c6865f414f1c07d332b0fe613252dfd0214d3424f79089e9a8a70f9fd77c8e21b0b439d7b231ebdb53bb9c164f0ebcf68a18fc4f9ccef59aea4422de1ceaca51df5fe6a428ec431ae111e7ce1cba0a036f01f8023df74292910fd7e9b3199f4d2a4d52a2c1fc7675c6b348ec43436582c77cf78c2dacb069e9bfab285011d882de57768efae85835833a9c48cd161ea1ab5508893a4f058370000ed0162cd300a44081deaf73a6e23f7384da8b6a652760aaa1bf16cfe27e280d805f4dc0d425d16dab9c7d9ae5d88f34407373be95b8a9b22278ca15d5e343a47ca8307154ff9041ec70a8ce38c3043eb2d84fee7253b53fdedbb70137e82b1c7be47c5ecaded5d0da9c957cfd077e8ae6c2631d3ef4e975648e2fa4721a95495f4e292b8af9359c939fb8d8bda137ae041ef82b8392dd3df65f0bc4248533f91255210ec60bcf4902806e9755d5107fdf350d49af733035070a010d479c661eb3d5b7644cd516f72d5f09f16bc0753891f4e30b7dd12b5c5d1197bb5d01d7f2060da804889cfcba3afe5ff3ef74b239d133672025a817267786623fdfe59ed2e29793d6368e13b375c143ee7006e1ddc4b755b9ae343dd98625b39b6080c9c6e03419f80fa6979832ff374421bdbf3f5c6e</script> <div class="hbe hbe-content"> <div class="hbe hbe-input hbe-input-xray"> <input class="hbe hbe-input-field hbe-input-field-xray" type="password" id="hbePass"> <label class="hbe hbe-input-label hbe-input-label-xray" for="hbePass"> <span class="hbe hbe-input-label-content hbe-input-label-content-xray">当前文章加密了哦，不可看。</span> </label> <svg class="hbe hbe-graphic hbe-graphic-xray" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"></path> </svg> </div> </div></div><script data-pjax src="/lib/hbe.js"></script><link href="/css/hbe.style.css" rel="stylesheet" type="text/css">]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/06 📔</title>
<link href="/posts/37967.html"/>
<url>/posts/37967.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-12-x2F-06-📔"><a href="#派大星的日记-22-x2F-12-x2F-06-📔" class="headerlink" title="派大星的日记 22/12/06 📔"></a>派大星的日记 22/12/06 📔</h1><blockquote><p>天气：很冷，阴天。</p></blockquote><blockquote><p>心情：开心</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; } .text_color { background-color: yellow; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天，早上很早起床，早餐是面，在家里呢除了面就是包子或者抄手了，容易吃腻歪。外面疫情还蛮严重不然可以去超市买点其他的。早上的课是思政课，讲了如何传承道德什么的，老师讲的比较快，我把它录了下来，结果一录就是十几个GB的大小，我的盘直接就红了，太恐怖了。</p><p class="main">中午，吃的两菜一汤，清清淡淡的蛮好的。吃完中午饭就睡了会中午觉，一下午都是计算机网络，也是这学期的最后一节了，想来也快放假了，后面的课就越来越少了。下午呢，并没有讲课，而是让我们考试。内容挺少，就理论和实操，实操难一些，但所占分值大，理论呢比较简单三十分钟就做完了。实操花了我三小时才搞定，也得亏以前有录屏的习惯，把老师操作的实操讲解部分给录了下来，勉强的完成了这次考试。</p><p class="main">晚上，作业完成了，也该吃饭了。晚饭也是两菜一汤，清清淡淡不带辣，我妈说少吃辣的，不然容易长痘。和老爸打了视频，老爸又在嘀咕我的头发，又长了该剪了，我寻思着天气冷了，留长了过东不好嘛，多暖和。记了单词，看了会css的选择器优先级。看了别人的项目直播，获益匪浅。和朋友聊聊天，她说要等我去她家乡，揍我。今天就结束啦，洗澡洗漱，上床睡觉</p><blockquote><p>今日总结 ：今日在家无任何消费，以后日记不日日所记了。在学校天天记也是因为封校在寝室想记录下来。当然也不是说以后不更新了，我会把有趣的日子记录下来的。</p><p>明日期望：希望安好</p></blockquote><p style="float: right">2022年12月6日22:22:50</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/03 📔</title>
<link href="/posts/49487.html"/>
<url>/posts/49487.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-12-x2F-03-📔"><a href="#派大星的日记-22-x2F-12-x2F-03-📔" class="headerlink" title="派大星的日记 22/12/03 📔"></a>派大星的日记 22/12/03 📔</h1><blockquote><p>天气：今天天气很冷，我感觉很热，难受</p></blockquote><blockquote><p>心情：虽然说今天回家，但我并没有好心情🌼</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; } .text_color { background-color: yellow; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天我睡得太死，并没有被闹钟叫醒，所以没领到早餐，还好我室友看到我没去领，他自己去领了。有时候，我总觉得我没醒，是因为闹钟没响，其实不然，闹钟是程序，即使手机关机，它都要把你叫醒，可惜你睡得太死，压根没听到，所以总觉得闹钟没响~早餐很好，沙糕和稀饭。挺好</p><p class="main">中午呢，我爹给我打电话说找到车了，我说没问题，今天做了核酸明天就能走就挂了电话，结果呢我妈也给我打电话，说她也找到车了，我人都傻了，为啥他们都不沟通的，两辆车总得鸽一辆，我妈说今天核酸结果出了，就可以走，于是乎我就选择了今天走。中午的饭是室友领的，饭不错，还是挺好的，吃了饭呢，我就开始和室友一起收拾行李，准备回家，寝室六个人都走，没人宁当守寝人。</p><p class="main">下午呢，就一直在等待，等待着核酸结果出来，就可以回家啦，可是让我没想到的是，这核酸愣是一下午都没出来，可恶。一直等啊等，打着游戏等，看着手机等，生怕错过了，愣是没等出来，可难受死了</p><p class="main">晚上，等啊等，我连学校最后一顿隔离饭都吃上了，还没等出来，我开始有点慌了，怕今天回不去，又得重新找车，重新铺床。等啊等，终于在19点整等到，这期间呢司机是问了很多次，但是嘞，她一直在等，看来他是很想赚我这笔。核酸一出，我就立马背着包，拉着箱，急匆匆的往下走，领了离校证明，走出了宿舍大楼，在19点18分时候我终于出了校门，校门的车特别多，我一辆一辆的看啊，找了车坐了上去，就走上了回家的路。一路上我都难受，司机拉了四个人，副驾驶一个，后排三个挤着坐，可把我热死了，又闷又热。一路上都很难受，难受了两小时左右，终于过收费站，下了车，登记。然后把我送到家门口，一下车我就吐了，司机开的很快，速度都不带停的，一路上弯弯绕，一路上晕乎乎。下了车，我就吐了，吐了一地。</p><p class="main">终于呢我在十点多的时候回到了家，回到家，交代了老妈把我吐的东西收拾一下，毕竟吐了人家门口，蛮不好的。回了家，洗漱，直接就奔床上了，晕晕乎乎的睡着了。明天早上还要等着社区的人来给我做核酸，还有居家隔离三天。</p><blockquote><p>今日总结 ：花销250元车费，因为今天回家，所以今天日记是4号写的。</p><p>明日期望：希望安好</p></blockquote><p style="float: right">2022年12月4日21:01:45</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/04 📔</title>
<link href="/posts/30286.html"/>
<url>/posts/30286.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-12-x2F-04-📔"><a href="#派大星的日记-22-x2F-12-x2F-04-📔" class="headerlink" title="派大星的日记 22/12/04 📔"></a>派大星的日记 22/12/04 📔</h1><blockquote><p>天气：家里很冷，体感温度都到了3℃了，老冷了</p></blockquote><blockquote><p>心情：回家啦，开心</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; } .text_color { background-color: yellow; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天是美好的开始，我回家了，也是我回家的第一天，日记篇幅也不会变长的，我在家和在寝室封着区别不大。我的生活不怎么有趣，能记录也是我想给我的生活做点什么，也许等我老了，还能有机会体验走马灯。</p><p class="main">早上，我很舒服的在温暖的大被子里醒来，太暖和了我都不想起床，但没办法，要起床洗漱吃早饭了，我妈早早地就起床出去买菜了，我呢因为居家隔离，在房间里不能出门。早上7点多，外面就很吵了，社区工作人员在举着喇叭吼着戴口罩，蛮热闹的。早上吃的面条，肉很多比学校的强的多了，老妈在家就是好啊。吃完早饭就开始上课啦，早上是选修课，中国史。</p><p class="main">下午，上完课，就吃中午饭啦，中午吃的一菜一汤，挺好的，就是饭有点硬。吃完中午饭，就在看我的博客准备补一下3号的日记，结果嘞，发现网站出问题了，进不去，又花了两小时的时间找bug，解决完之后，又玩了会游戏，看了看电视。终于把觉醒年代看到十六集了！</p><p class="main">晚上，晚上呢没什么有趣的事发生，我爸因为从河北去往云南，被强制隔离了，我妈很着急，拉着我问怎么办。我只好给她解释，给我爸打了电话，了解了情况，发现问题不大，隔离五天就好了。我妈便不怎么担心啦，和老妈老爸讲了我在学校的趣事儿，还有比赛的事儿。我妈就说要睡觉了，让我早点睡。现在才21点，对我来讲，还太早，所以我就开始写日记啦，写完日记，再打会游戏，就睡觉啦</p><blockquote><p>今日总结 ：今日在家无任何消费，看了觉醒年代，感觉自己思想升华了。复习了单词，看了别人写直播写项目，颇有收获。</p><p>明日期望：希望安好</p></blockquote><p style="float: right">2022年12月4日21:22:50</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/02 📔</title>
<link href="/posts/4174.html"/>
<url>/posts/4174.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-12-x2F-02-📔"><a href="#派大星的日记-22-x2F-12-x2F-02-📔" class="headerlink" title="派大星的日记 22/12/02 📔"></a>派大星的日记 22/12/02 📔</h1><blockquote><p>天气：今天天气还是很冷，重庆大降温啦，有些地方都下雪啦。</p></blockquote><blockquote><p>心情：一半一半小开心🌼</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; } .text_color { background-color: yellow; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天，早上起床领了早餐，早餐是方便面和一个蛋，学校在这方面越来越花哨了，吃完了早餐，就开始上课，高数，还是懵逼状态，数学，杀了我吧！</p><p class="main">中午呢，饭是室友领的，和往常一样的盒饭，还行，吃完了盒饭，就看见辅导员一直在催我们回家，一直催，生怕我们不回家什么的，但我们何尝不想回家呢，重庆整个都不太好，车站都没通车，公共交通也没恢复，我们回去很困难的，所以直到现在也只是有那些家住主城区的回家。</p><p class="main">下午，课程是英语课，上完课之后呢，就是研究怎么回家，车站没通车，那只能拼车，坐私家车回家，看了下价格都贵的离谱，一个人三百多，真离谱，平常也就只要一百。。。。我的室友，都在讨论怎么回家，一直在和家里打电话，其实他们都不想回去的，但是学校说过几天饭就不免费了，他们一听，就嚷嚷着要回家了。我没法只好和爸妈汇报一下，老妈让我不要担心，他们来安排；我其实都不担心，回不回家都行，在学校待着我倒觉得还安全些。</p><p class="main">晚上，晚饭吃的盒饭，也是室友领的。寝室群啊，班级群啊一直在催回家的事儿，让我们只要有办法回家就立刻回家，我朋友的学校都准备恢复线下课了，而我学校一直催着学生回家，这也应该是因为学校有阳性的原因(女生寝室楼真惨，已经有几十例了),也就是高风险地区了，重庆虽然很多地方已经解封但是也只是低风险才解封的，学校管不动，只好让学生都回家，分流一些，轻松一些。日记写完啦，估摸着要是能找到车，我后天就能回家啦</p><br><p class="img_text">学校催着回家~</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221202232617662.png" alt="" style="zoom:33%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221202232647201.png" alt="" style="zoom: 50%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/20221202232911.gif" style="zoom: 25%;" /><blockquote><p>今日总结 ：今天没有花销，总结了问题，回家没车~</p><p>明日期望：能回家吧</p></blockquote><p style="float: right">2022年12月2日23:20:52</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/12/01 📔</title>
<link href="/posts/9038.html"/>
<url>/posts/9038.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-12-x2F-01-📔"><a href="#派大星的日记-22-x2F-12-x2F-01-📔" class="headerlink" title="派大星的日记 22/12/01 📔"></a>派大星的日记 22/12/01 📔</h1><blockquote><p>天气：今天天气特别冷，早上都不想起床拿早餐 🥶</p></blockquote><blockquote><p>心情：开心 🌼</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; } .text_color { background-color: yellow; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天，早上特别冷，冷得我都不想起床领早餐了，今天的早餐是沙糕和蛋卷以及一袋核桃牛奶；味道很好，吃完我就继续躺床上了，今天一早上都没有课，于是乎我睡到了九点才起床，起床之后，就领到抗原进行核酸自测，很好，一条杠。核酸检测完之后呢，我打开了电脑看起了计算机网络之前的录屏，因为要考试了需要看看实操~</p><p class="main">中午呢，饭是室友领的，很好，特别好，从分封寝室之后，吃到的史无前例的，前所未有的一顿饭！！！太好了，终于改善了伙食，今天这顿吃的很饱！吃饱了呢，就睡了会觉</p><p class="main">下午，课程是信息技术，这门课对于我来说，简单的不要不要的，讲的是word，Excel操作；所以把老师布置的作业完成之后呢，我就开始研究我的js了。这段时间一直有在听说重庆有解封的动作，我不太信，但学校却突然告知可以放我们回家了，但一些有阳性的楼层不行，恰好我们楼是仅剩下的安全点，并没有被疫情侵害，可以回去。可惜啊，重庆的车站并没有通车，我还是回不去~</p><p class="main">晚上，晚饭就没有中午的好吃了，和往常一样，我和爸妈说了可以回家了，我爸妈就在想办法找车啊找人把我拖回去，可重庆疫情严重，也没人敢上来，所以我爸妈也让我好好的在学校，等重庆车站通了在回去，我也这样想的。聊了天，就和室友玩了会泰拉瑞亚，这游戏真的蛮不错的，虽说新手入门有些不知所措，我还好，我室友带着我玩的，我一个人玩的话，大概率得死个几十次吧。今天就这样，洗洗漱，就睡觉啦，今天日记写的还挺早，十点多就写了，今天就早点睡！</p><br><p class="img_text">今天中午的饭~</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221201220954913.png" alt="" style="zoom:50%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/20221201221413.gif" style="zoom: 25%;" /><blockquote><p>今日总结 ：今天没有花销，总结了个小问题，回不了家啦</p><p>明日期望：疫情好转。</p></blockquote><p style="float: right">2022年12月1日22:05:20</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/30 📔</title>
<link href="/posts/616.html"/>
<url>/posts/616.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-29-📔"><a href="#派大星的日记-22-x2F-11-x2F-29-📔" class="headerlink" title="派大星的日记 22/11/29 📔"></a>派大星的日记 22/11/29 📔</h1><blockquote><p>天气：天气大降温啦，🌞太阳很少有了，今天特别特别冷，温度已经到个位数啦 🌡️</p></blockquote><blockquote><p>心情：开心 🌼</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天，早上很好的吃到了早餐，虽说昨天说有别的寝室核酸异常，但今天还是让我们走出寝室门下楼拿早餐；今早的早餐是包子饺子以及一袋核桃牛奶，还行，牛奶很好喝。今天呢，没有什么有趣的事情发生，一天天待在寝室里，除了打打游戏上上网，就没啥娱乐活动了，说实话蛮无聊的。有听到别人的学校放假回家了，但不是重庆的~早上是思政课和体育课，思政老师给咱讲了中国青年如何在共产党带领下啥啥啥，体育老师给咱讲了篮球怎么运，怎么停。一顿课程上完之后，就到了吃中午饭的时候啦，中午饭是我室友去领的，不知道那些老师是不是瞎搞，昨天说了只能室长去领取，今天又说可以室友去领，不过是好事、中午饭吃的还行，我没拍照、吃完饭就小睡了一会，迎接下午的课程。</p><p class="main">下午，下午的课程是Java程序设计，讲道理，这门课我都没咋听，全程只留意了老师布置的作业，专业课我一般都是在b站直接提前学，不怎么听老师讲，所以下午就在学 <strong>Javascript</strong> 我感觉我学习进度已经慢下来了，每次都是在理解和翻看回忆之前的笔记，在回忆中提出问题，又解决问题，导致我听课的速度就慢下来了，做了笔记我才知道我有点强迫症，喜欢把东西弄得很整齐，不然很不舒服。。。。下午四点的时候，听到通知，要我们使用抗原来自行检测核酸，这是我第一次使用这个，挺新奇的。做完核酸，下午就要结束啦</p><p class="main">晚上，晚上的饭还好，就是有些辣，现在不能说我能吃辣了，哎！顺便说一下今天有开支，今天凌晨2点的时候，我很痛苦的把泰拉瑞亚买了，花了 <span style="background-color: yellow; color: #000">18</span> 元，我之前是不想买的，主要觉得买了也没人陪我玩，啊对的，没错，我玩游戏，没人陪玩不下去的，我喜欢和朋友一起玩，但我没这样的朋友能陪我一起玩就很不快乐，每次自己玩游戏，都蛮孤单的；说到这，回想下以前，和朋友玩游戏，从我的世界到吃鸡啊gogo啊都玩的很快乐，但基本都会因为某些原因，半路弃坑，从来都没有玩到通关过....这次买了泰拉瑞亚，是觉得某一天，也许会有人找我一起玩，所以才买的。<span style="background-color: yellow; color: #000">小金库 -18</span> 我室友也买了陪我一起玩，但他没电脑，用的别人的，很感谢他带我入坑泰拉瑞亚，还是很好玩的。话说回来，和朋友打完游戏，就和老妈聊天，老妈又在嘱咐我多穿多吃多休息，让我照顾好自己，还叮嘱我不要用冷水洗头洗澡，我在想我到底是在她面前树立什么形象啊，怎么会有人大冷天的冷水洗澡啊，我可没那本事儿。聊了天就背单词啦，今天背了20个新单词，复习了以往的单词。</p><p class="main">今天就要结束啦，今天呢，我要给我博客的公祭日变灰时间表添上一笔，从小就在听的江爷爷，江泽民今天逝世了，享年96岁，从小熟识的人也慢慢离我们而去，从袁隆平，吴孟达啊等等，都一位一位的离开了，我们也长大了。</p><br><p class="img_text">抗原检查~</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221130232307865.png" alt="哎嘿，单杆没怀" style="zoom:50%;" /><p class="img_text">今天晚饭~</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221130232618410.png" alt="" style="zoom:50%;" /><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/20221130232944.gif" style="zoom: 33%;" /><blockquote><p>今日总结 ：今天花销 <strong>18</strong> 元，学了Javascript的新内容。</p><p>明日期望：疫情好转。</p></blockquote><p style="float: right">2022年11月30日23:26:41</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/29 📔</title>
<link href="/posts/23416.html"/>
<url>/posts/23416.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-29-📔"><a href="#派大星的日记-22-x2F-11-x2F-29-📔" class="headerlink" title="派大星的日记 22/11/29 📔"></a>派大星的日记 22/11/29 📔</h1><blockquote><p>天气：今天没太阳，还是厚厚的云 ☁️</p></blockquote><blockquote><p>心情：开心 🌼</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天，没有早八，早上领了早餐，和以往的不同，是四个小面包和和一袋核桃牛奶，不知道是食堂嬢嬢要休息还是咋，从包子居然成小面包了；吃完早餐，去做了核酸，然后上政治课，后面从班长那知晓了昨天的阳性是误报，于是我们寝室楼还是安全的，上完政治课便到了中午，午饭是室友去领的，领完回来告诉我以后领只能室长去领，我又成了长期带饭人了；今天的午饭味道可以，就是量少吃不饱，吃完了中午饭，就睡了会中午觉，下午继续上课，下午是计算机网络，上了课，把随堂作业完成，老师就让我们准备下周的期末考。</p><p class="main">下午的课上完，后面的时间就在学习，研究了算法，时间过得很快，我的思考忘却了时间的流逝，让人最难受的无非就是时间消耗了一大段，结果问题还没有解决，我想以后这样的情况也将长期出现，所以我要更加的奋斗学习，以便快速解决问题，给自己知识面扩展。顺带说一下，我已经开始着手研究博客的音乐集页面了，目前，在确定思路啦，相信在不久的未来就可以上线了；给博客的倒计时添加了样式，不咋好看，在寻求新的样式。</p><p class="main">晚上，晚上的饭也还可以，但没中午的好吃，吃完饭就和爸爸聊了天，我和爸爸说可能不能回家过年了，我爸说如果我都不能回家过年，那他也回不了了，我还没有告诉爸妈学校的疫情，以免他们担心。在和老爸聊天后，就得知了一个不好的消息，寝室楼有八个寝室的核酸结果有问题，所以我们不能出寝室了，在寝室都要戴口罩，我室友不屑一顾，认为戴了并无作用，我也这样认为；具体情况需要明天的核酸检验，如果确认为阳性，那么我获得小阳人体验卡的几率就越大了。今天日记就写到这吧！期待明天会更好 哎嘿，放个歌</p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="https://music.163.com/outchain/player?type=2&id=486855953&auto=1&height=66" auto="1"></iframe><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/20221130140140.gif" style="zoom:50%;" /><blockquote><p>今日总结 ：今天没有花销，总结出个大问题，我好像不能回家过年了</p><p>明日期望：疫情好转</p></blockquote><p style="float: right">2022年11月29日23:28:18</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/28 📔</title>
<link href="/posts/35449.html"/>
<url>/posts/35449.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-28-📔"><a href="#派大星的日记-22-x2F-11-x2F-28-📔" class="headerlink" title="派大星的日记 22/11/28 📔"></a>派大星的日记 22/11/28 📔</h1><blockquote><p>天气：今天没太阳，还是厚厚的云 ☁️</p></blockquote><blockquote><p>心情：开心 🌼</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main { margin: 0 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;} .img_text { text-align: center; margin: 0 !important; font-size: 12px; }</style><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p class="main">今天和昨天一样，起的早早地吃上了早饭，早饭是鸡蛋卷饼和烧麦以及一包核桃牛奶，感觉早饭都比中晚的饭值得期待。早上有一节爱情心理课，网课嘛，还是选修课，那就没必要听了~于是呢我就打开电脑看了会番剧《大理寺日志》，其实这个我看过了，且看完了，但这几天出了第二季，愚笨的我把第一季的内容忘了.....所以重新看了遍。</p><p class="main">今天中午的饭，不同往日，居然有鸡肉哎，特别好，这是这几天吃的最好的一顿了；今天呢，是朋友张大头的生日，祝她生日快乐、下午学习了一下午，很不错，又给笔记增添了许多内容；很喜欢的这样的感觉，很有成就感，我这小子，成就感就是如此易得。我已经可以运用自己的知识，来给自己的博客添砖加瓦啦，就昨天我给我博客设置了个倒计时以及音乐播放器、生日倒计时，例子就是以小张的生日为例，昨晚上很兴奋，我把倒计时添加在了博客的公告位置上，但倒计时结束便会蹦出生日快乐等字样；等我学习到后面，就弄一个日历模块，专门记录特殊节日在首页轮播倒计时，等到倒计时结束，则换博客主题或者其他东东；；；例如：在生日那天倒计时结束的那一刻，博客主题切换，然后嘞自动播放生日歌，屏幕跳出一个蛋糕，上面再有蜡烛，在蹦出字祝谁谁生日快乐，也可以运用到过年或者新年，那么我就需要给自己的博客写几套主题啦。学习还是有些枯燥的，有些地方开始慢慢的听不懂了，需要多听几遍了。等我有时间，就给博客加个进化时间线吧，在哪一时刻加了某些内容，然后都记录上，可能需要我学到后面吧，现在我还没有啥思路。</p><p class="main">晚上的饭和中午的一样，可以说今天的开心这两顿饭占据了重大贡献、和朋友讨论了C语言，她的C语言学到了指针，而我刚刚好没学指针，所以后面就帮不了她什么了；今天呢，没有做核酸，不知道什么原因，但晚上的时候，辅导员说我们寝室楼已经沦陷了，有小阳人，我很无奈，只能笑笑，小阳人限定体验卡上线~估计明天开始，饭啊什么的都需要用吊篮吊上来吧，从自主拿饭，到送饭上楼。日记呢，就写到这了，其实在寝室里封印，并没有什么有趣的事儿以记录。期待早日解封吧！</p><p class="img_text">这是今天的饭，中午和晚上的一样</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221128230805184.png" alt="" style="zoom:33%;" /><p class="img_text">和朋友聊天~</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221128231303225.png" alt="" style="zoom: 50%;" /><blockquote><p>今日总结：今天没有花销，今天是小张生日，祝她快乐！</p><p>明日期望：希望明天的饭和今天一样好吃~</p></blockquote><p style="float: right">2022年11月28日23:28:18</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/27 📔</title>
<link href="/posts/30073.html"/>
<url>/posts/30073.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-27-📔"><a href="#派大星的日记-22-x2F-11-x2F-27-📔" class="headerlink" title="派大星的日记 22/11/27 📔"></a>派大星的日记 22/11/27 📔</h1><blockquote><p>天气：今天的天气带点太阳，但是晒不到我，还是阴天吧 ⛅</p></blockquote><blockquote><p>心情：开心 🌼</p></blockquote><h3 id="日记主体："><a href="#日记主体：" class="headerlink" title="日记主体："></a>日记主体：</h3><p>今天是周日，早上七点很准时的起了床，领了早餐，是包子和烧麦还有一包牛奶(核桃味的)；吃完早餐就在床上待了会，便起床洗漱,开始新的一天，比赛结束之后，人都没这么累，不需要赶着学，跳着学；按部就班就好，今天其实没什么好记录的，主要都是在玩、中午的饭食不错，就是咸了些，有俩丸子；中午吃了饭，就睡了中午觉….睡到下午三点，就开始玩我的世界，自建农村小屋，有了光影加持，怎么建都好看，可惜我笔记本带不动更好的材质与光影。晚上呢的晚饭也很不错，今天也没干啥，把《凸变英雄 BABA》看了，一晚上刷完，其实我看了很多遍了；但主要还是拉着朋友一起看的。不过至此，让我有了新的想法，新的构思，但实现的前提必须要把前端学好，我会慢慢让我的博客更加丰富，当做我的小屋精心维护。</p><p>我想给我的博客加上一个页面，专门来放我喜欢的影视；加上一个页面，放我喜欢的歌(这个已经半实现，但我还是想要自己自定义的)；还想放一个页面用来记录世界上的神奇动物与植物，我的未来不足以让我看遍世界，但至少能记录世界（感谢互联网）！</p><p>明天是我朋友的生日，也是我能够祝福的第二个生日，想送她礼物，但条件限制，与之疫情原因，哪怕有想法也暂不能实现。</p><p>那么未来一定会实现的。</p><h3 id="今早的日出："><a href="#今早的日出：" class="headerlink" title="今早的日出："></a>今早的日出：</h3><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221127232821323.png"></p><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221127232834854.png"></p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="https://music.163.com/outchain/player?type=2&id=1850919746&auto=1&height=66" auto="1"></iframe><blockquote><p>今日总结：今天没有花销，玩了会。</p><p>明日期望：祝朋友明天开心！</p></blockquote><p style="float: right">2022年11月27日23:33:31</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/26 📔</title>
<link href="/posts/42104.html"/>
<url>/posts/42104.html</url>
<content type="html"><![CDATA[<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="抱歉, 这个密码看着不太对, 请再试试." data-whm="抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容."> <script id="hbeData" type="hbeData" data-hmacdigest="566f49ad36ec58397ca8efe26f2f731028bb7d4254a9b21651bc909f4fb66482">4630436162ade97ba2718b7d0c4b3b63cb3a3f659c5ca08b4bca0f5845928186a2a8cbac642ac0e64aaaccb0fc5da655ba70b863548b81088e3412ea8c6b0c1765376a259cb1c24066b5d725af1c44eb9537beb66a43c4717da998b9956a985d918c39ad03af52095f6e19634f845278cc5c818fc7ce25be90c763885fd146582d1867947fc2be703bed278c84248cf6ff3dc86b4912faa5336e27bd821c51817702f5de41b8542760a0b6263203a340f5874ae1edf6ca09f2d5080a2ed870e0cffcb8e5e799eb45659cadda3c6c421f4509daf95bb0ab5945b454a36d9e34587d60aaa50ffdc0ea279878996960aba27e65271febe765bb4092218386be9f2f99d49331ca258ec813e3cb023b6b53a2a67b64eefd77c68c50108aab5fc08ff488e853b1d5c4812c0dd7d190251b87d1af60af3a5b9c509c6c7a4966ba3bb99c6ce88104a0eb060e644927e91fac810f995ac3ffd494e5fc18cb75c6bbfbe3284e5e8509cb57d8126f6057507d081d71b4457f451d4211641981a2e13806dbb025a25d7b5046745f11532eb6d06a09a705aea3b51ed053217829ba91c9cfac34b6f204bcfc7ec08ff0f489a5cae6ddfb4424f306c3c119719bf1faaf148ded8b8c6cb8791a812cc73bc70d9db225812d689269849da5ad0a5aca10ad649e4c62dd4b32ba5fa7ebff5e83a9d675f615ac766bc1f11322e6c0c08b17702e5d9f713a43cee51242b8a628701979c7a27c5f1d1d9c782b3751f0506ea4cf0e29a45e5e42b33cff00d092a63408c8eea5304fc36a0b564bf386a623ca677120f55d918526945190e4f83e02a099d85de1c982c2d2406488749b9225f6c8ea8bdfeba6a1d6bd9061be0db7ebf2a3f06ab343629582814d08ed70c9cc39543d02d48c7b3a044a8d25621b7a60dbece1e22f36732a5924364b6a070c9a2cb791d79739e6afd682c1f01e0bc9cfd7bba88a389836ded3db117813562c0ce8e6b1860f9f604dc2110647ad9415c0823defd7c743d8d283eb04f860712edbb8e6e2286adcbc923c62a43271114f743c29c8d71db164b457034d2f1d8e0f8050c149d6c3135e4acc881145916a83c8398e4c3a49f848df46bcf41ad4e608ecedf52936c4bf9cdf3236a0a0009548075f1f66fbee8506541a8e4713d0841ead60a3563287438bd2e3678e4e186bb6408522eb78ca2f90e57bcbf345ec8cfaa956b232ed102d90f8556991b3cf69d8497fc5a839b6abf607660c6efc76e8e4fe34ed8dfbc4bc572120e5fbcb468f4f82d3f4737cdfacd6c83d520b58de6db50e6b6e9b9c7c1e999396a00fa720924ad9b1750ea1d801b3715aeb8f9833c780f3ae9189fce13c0a362657c556ee70c9e1aaa557b588ca3f456ab3d30e50d93beab67473e399fecb30fbb5226b41c20bbc1158f723ed9a45219456037085b4ef0587691e7575d91fcec0be137ca6af1f6ea3814fe79d218c041cd5afde8389a42752781eaa2df10fbc0bb5a9646d106780d91b922075cb8f25aaa484070a3f521489c1985405d8c44fd8c527e6c73e6482b8da7a2e14284678fb3b30b4827058b55dd59dfc8f82b2afe14be9aed5dc87c71c605ffcbc72440bec1e59c23d4e8eb82303e1f2d34fde7beedb5e7825f40527b2462731c487d2ff40bd3e493779b74d2de28bb1f48c41a40670431c219b027bd5bf0e7b9b5681adbb474c342c3d737e51388dc908c2c27db5b346984f16520ba45ffbb4a732bc89c8e49627e38a86f07a462a0c3599db0a852a314f8eef3db3088a954cd2c571dff721ad64b4fb7cc1cd61159e4eef1c903d8b02e0cd581051e7cdea3230dfc164fb99a24c8769c919bca5df25f37cc60252fd61ba49878302ba307fa093f51418085421eb6256ab08cab9c53f9a438b7c1bd536a0d70e844f1074f3cef8e2e296c19ddb218b6c58a24d8be8fad6770eeecd8c83bbc31e7937c13f815468ad1911e408c9c813f690b9bd9184b86e3c089f8f2b49786dbab2b4e50268bec1a4357a34de0abfdd1e656849d33cd42463fd19392b1bf3de8bf1e1a4645dd815a1ddc56ee3ddd0ec3d596de91d4fa6b4212d861cc9cb0670d45ebd37870a680921ebd46118c6bae2e36995fda772a204b8058e6755e8be0f6d92d6e91ed465877164d90e0a512ddb116b7fe654da8270cf3f8a2432717be2201e632da05c44cf59a406a79a0a35464aa1df88ba6a4779b20df33124fe0a17b7104d7ad530ec5c64d6e254050128581d30e5e000ece198a0a3ffd65acb512011057650086f1b1e6ef9f4d14e6135e3ccea60c4f7da41b03217fb90909b96796d34aaeb5997b7e37776e9bf66af45c3fdeb69a51fd7c803517f3e3deb62e4ae0ba1b84c3707cce74527a3baf443b3cbcf314cd337853a8b75822e056164b8afd932aabb94a8285cdc3376b4aca96e2f0d9c09cf3d6d6cad8eaa56a92e1b09fbc7001b51458ec468e728daf0278b61231af32ef628b4f74c798b43cdbbe9c7336892d6b9236b6654ccdaa9dd9fd61d76f7e54a83aaceb9204a9bcb9bc6c45a5eb676913d0775ce0957a2d5827050897dc84f612310c83196eae2b5b86279fbb71dcd78e535d09ba226e4655a0f9e684743bb0dff3fe6f96aa95e5b0860e2c6b275a0bcf0e6be4d4f144d4978906a2ef6b283b6d61789a988211aaf4ccbc1af26a27a13db5890bf4feb3c7b1742cad7d27af4d6c3df7b51c528c7faf320900d00f4a2775cd0500abd20772ceff877b284c460dc939452f5ab83879bc8fdb707b9322cec3f7c1e5227cf153a284a19c398d23fb535b3914d72ef58324bb6523b4cdeda544e312d08014ed7a49bbdf55118085d2c4a87ec106eaa97c8b1ae75b1b61f949d30b70eeada4cd67a10d3e7f023f74994b07f76c81853a22a81bd51ed53cd9084517e22dc495ca01a869a09d7478420dbb0bd0b5cdf8bd11bb34b74db1b30b4634cf3ceae23905704dde1a01e6b17ebdbfe04d8da4370e584fdefd742004725d8773a31892b30afb696c80f721a649927e3505791d102596a631b8e07307ad7cecd76eca3fa191f5b2ec78290889f4614630989e84ca421ec407ca872c1637f9b71768a6ae76b3e0e7b7ee60f4ff35a7a6e6c953f28f3504f8a277ab2c9bc184c5af12b67159cbedb9c2883524e5affa5c9fc636ee4a9a1c9ab4abb428610198ba0ca9f112aee08e0178cf0d22d2bdae97177976923409aec6b4614009337f32947440d439f5420a69fa2491a32930a0f871343841ff29a5de5ba08ec3e42b8c0a256bb6a568dbdc0baafa5abf812a0ecba9c3d5d0cf0285b6d90e9ef6c495db1e39c7e5ddf94344fd76098cee69b7b415ea5289e51de736067922090cdfe45691baa768b8664894e1647bd6d30aa1b15301c2a06a37330a7b8573f73b274bdec6fd55c19a8278d58cd4fd62b3fe835afde0ed3fc92c5d3db65f2227badff01037d9935a17ce65f611924b2d107d4452513b480355f8a750e4e60f439c6ebab3dd436f37024cc87d3029741e34fe19f074a3a2ef0772bb8b88c8712552f0cc609cfc899aef86a06a9e06ed1a1f61072586539484748539482b8bf9ef05f5f4c6cb93eb1dc9164d6e84691c1901e65580c9ff9fa94f88d4095f57863d8c31bfe824a14a30f653ab584e32296705e2881ee163d2470dbe8cc4914a87e29c5d1d2fc0d99ced0d93a984a0d65d7a265faf0ccdcef51cc8d2a5191293368b4ef088ec19ff8c4251a8eadf87ba42439780ec80947101988a5506b3faffbbbad79e5a1a268c495dd5fcd6bc63c7d01b3d34a0186b854ded5658c46f434c574ec515ecae5ea7176b076733facd161cfcbc19195d139c8ae36aec40ac884868bd98cb124cec7b5e667708597b8abde58cfcded38a7ed663ebc7897fdd116677e78e9106427ae2d487aa0bbc4badf7859d645afe3364413cfe20ec74eae45b2ce29afb499a843d91d433bed0ce44106222a378875a33bf765d19e4b6708d66cd57d01b326b7aa44eb9c531f4b3e8474c3675d1005c68d589014fd0c02557d8e11789bb740808b9e60b54aeec9b8b4d2fd1082e8e4d57b23e03b231ee9195b85ce5b61f41f790cc2bed0b1e036529d1f0bf8a0167e293ebe5868ff4095a5fc960194f73f9da1cea5f03f5cf8250d065129a577e39b19edf8410a23aad4c588edb824e10f050826e020826632f62fffbe0e2573615974d48cc08016944aa74cf7a180183dd250e749d1e221581bceadb1d135577fd56e2d84221b12aac0c17a7e36d0dd354173849dfe2d24f931c0b346934914d48793c988442b0f84227d64f09aec5a0a1a8ccb0ea07326e9b4a0c538df48f81dc77b8800d6d6c558b3789b3594374f17b935b2b9b8bf7ad98c1bdb70f2febfe14ee7344bac22e841434c7716fe0c19781fceea0d4927c11d1b34cf6db16969b7b11066a5c87473087f27c8a3f0d30101f687a01119fc7018959ba6ffd291f5990128ec41e920614416e4ca4f6d202c04affff7396dc92cec34997a93faaaa723b39d01aeb95d4b8136697664561d94a56bf0e772f0d3000a8d22f628de48fc93fe97238d48249195321e0d64ddf47f087202328fe1a030b41be67e4d496061b4052581a7e85f5e327c3d577e958a548b77861531eade8355a97704dfbf8ca32ecb5e402b42bd59d4429077bcfae00889155dd1e0f2d532de9ac057325ece823cc44c7e3a6462095cc4ce185569274bf6d939e4f249a5f72392bad5e7157896525234e2b071a990aab08f21ac3836e02e60a77e24fc4f43c3caed3833a09df215501d2dac685b2cfd19d0349ff04f0f29a5be09bd7e958832b9e10fe8071c04992d4fd724910a959869e798853b175cd180f29b935914045873d6015e98ed3edd442e79ea2e0c875a25e9e59afbb20b5a37fb06a807c73a98e8061b8ba05ddc515ead038c85bb175dfc598eb0bf82cf8be5326b529e365167cc80496d41a7426645f2d9e9bbcbb1f16991e68b0e2182bf259018ff105f990e2a725fa527ceb3e851c0ca0ac97cc0157da96f466dd6ad95c75ba517774bbb811249d013c68c5a2a936afcdd760773db20661981397ed417e62f92a7a99b335dd88b461471eef4e1bc1648628b9d822665e7d92f59063ed99336951147515e9721c902e30570c65daeb29c11bd0593fa9d775438a2a31e9cb3ab3d64f516c2930380702cd61a68465db50172ba31f4568efbeec5c5febd9013b3ddaf8a115e59ea311268f130fa66aa648b073a2e766ff0e059805cab7c98f7f8be7c301ef7ee5015496db94c69a506ecf7ffa741fec2db024642e87afbb2abbb67bec08ef8b4cca3191aa59a87823887c437e5708df0b6caf62114114bbfbad81d9e7d53a413b7ddeac734e7e14ef11fe0ca25d276a00e0696839fe835afe846267b80883a1210a4835979d4164aa592cbd0639e457deb0893aed2bc8362170726da303301e93bfd1ca62a76b50d0925d0b8b641e5e7eb2da5beacf08cf83065971fbe3b0fe443096a42dbfdd1cf64f23e808d6bd9b920536a6b4b641bca8ad2cfd05099880ffa972c17050de71c9d49183335dfd13af55e952c34cabd7e9213e31646c1779a4dab1b07975ce936024c6522937b60c5c4b6c2355ce0f2a4f1b66b9f992ae27ecfdee4d7fc65a7df1c67f9a243b907d59d054132739860c6991f023f6477c4fb5c58058369fb099ceb7564f29c8e3b20943a236b89b3dff9519ab445fde1cda18571c1c670bcafbae193db395d54dc438a529c621c20c10c557089bf12915325ab6f82f102103e977b314a9edb338e7475d1d70d9f6d6ab06abc97121c855140915388d593bccf6395e8b100ea01016afea8cc480fde8a7dd3122f8220e1a2a31a2fe4766a3dc7ec4aac7a2f7e0ef2bc06626f4c36cf437f7c80c0e764e2212027751b4bb541fdcbefcfe9b7e57dcb4724ee6213a38ea0f249913ec6caae63813eefe92701d8560a8049f112b01ac399dd4086f31f7c5982c6730c3eb20bbbb17033c6327258da35fe6e1fd1e218d1058eada832342c3b49ee0ca9c2b4dcc25595cb4aaad47ba0de45c6146e01a76922c8ddb8ce0c520f6a88b8f9c61e79bb18a1c1064b346583210294f970ef758f7f1933f22592315913471ef7d12457dc46bf24a80cb2664226989a0c8a1baa5bc251a671d8e64b93175d706b1631f6a2dca9ab4d113daa14f65ca0b7d330f61523f2b178059ef742a38162150ebb4e80d8074ee9a6ea3301105c655bcdb5c7a681bbd20092a8adf7f00340c3bc444f1e6c90c037ed2fe1fd48e52ac022342680c451dc07baaf0eb597f7e3ac8adc77651623c6abd4a774b25dd91d1b1d7e4a4b42cdeaaf4820f523a82d68a5adeeeb2933c976dde3c29bb9b130f85d5215255655fb17fd6bf6baf2a5494cabad13cdd374e42ea0a032cbf39f1cc1df8d73a2142395656b19d593ed5fe1ef84c33d24cd510bc8615200c6c7b4cf5d8b0c7845d9d213b31b0134dbdafdcd85d1d601de4d697f62fbab9d9b870e1593a78d47f99976974cbb58a93a309a64cab96a0bea3a36bc163c8aacdc88f1fa67213959cd717bf91c5efa36fa8044ba7318273da7a178a748910d424a387461d621f002d3c6d0b39ccd80c117f03cf9a683c8b6af7e31b8b50001e4beb5b804ddc2f169976b705ed80bcdfe68d4fc2545d05e6ffc8339887952d398238429780a65a2d1a9e946cb7738fdb24ea446ef247a0d4c4b97caea233d5c6b201e22df9d96c3a2b1f7c0cba3936f52c5b245743569dc5ce35228bbbfbb0ca91b31c9be6faffdc0929ef5b80af16383524d59aceffe115634d2e89d407342905ad47dc897f376e7779fab1f8a02f5b0be4314368de5c53ec0f1faca8704afb9cb7d87142b90e844d469cdb021c4b085dfd3100b74e9147c7ecb45df85171b3813d24ec7167e188d35dd34949b8930a355a557552a1dc0ea95c7aa763b1bb3dd6055b323d28e7b452a20d75216d694c0d1eae9b0e8fa0c616045a1aa6a16bdd5889c200f8e30854cdb03f7d3f45d034000efc0191c1f1cede711a91579eeb7fa52bf41805832fe8417bd3300afc415a7cc7c0d0187653dfe1af7c3700a79720381354654543f77e60f65cd0e1e494095800ed83d207d53954a7e6dd2fcbc92adf74f33963543d364e9fa3b90dd00a4af1f03dbf02fccbff777fbe957b1f6b3ae091af3cb6ecb761672a68d1cf5d4bd80f17cd6bec8a49a2f9b21511a4806dfc660515d454a49d38872a2044285970f2085cc4cf5dd66e14f56a060fd33e2aedb164e91a0702b2ca5bf876d57b0a438aca66527545332e76d69ff5d79a0ef914fb4c9ec5e735061f319034cf5f112a656179ec4244d241d2984b0ca558929390a5d286567de43f2a4d5d00835abe0814104b3f5d79b7d7db90aae1aabd1e19dc093420d85e3ae5486b75868b2ef630965092cd938469ccc0f633e5b1a486ddffb4de0a4b55fd3ae36750eb4f3dc89ce56dbaeb8c1cfb519b90fbf62b42a1dab2deda53d72e3ef34bb2256d694c1cbe6fc0553d2d88bec9b9e3eaf680ec759367ba46a9d28e725e5f9f5f25181c69da9100c4761f7e4dd12dd126c9d5fa48371634b6c8b69161a94b43c2978061bc0c0e4a03e7f44d1944f5684943c82694da45a8063b01b1546da5fdba22e6bc1dabfcfde61bc5bc91fe19bb3c884898e01514e3b2de9b46a35accdd4d2a4389840e7ab27e0bc2aef9cf5ddb5c1806554a37d2b8da08701c7bd568347337dd18807ff2d796095a41d093bb8d291ef149a26965e959e315d1e8853f4b14643f9b0d78c7574e4681917909ac6a08d7c550b39d96981f979697e7255b3a4527fc2ba84701bbc7b6cdeb3bb9dd9bef035ed6acf8f646235af34c75ebe980980c341ea32710de925437f6a59c8a6ca0a143f2380177863d6aced9488a65b4efba9367617a11c8f5a7ed7701dd503d93b7ca172ef4e3f2f616975e05355060b38a954a7af03e00267ae33b6bdfacf9d8e9d6f1c1ac787f34c30d66e57c74d6283f565da0d9a2560c5cfac2ca918bf46d97bf19430a0558e31eca9c056f4db8734fea3689d6672b16c03385a23687ddd8e0d91ed7df30821963a99775602ee1a43ddbe9eb8cff2970e117c4c984d880415346b630661cd17138dace825e8769ee7b9156a12ec63e3d25f7fca33187ec6641d6c043dc84a9cfa88cffc2e74897ebd43a88b019976613a80951ce1749f78d3c913bc7d1fc231c36093c69c28705b2dd3cbb30de32f162cbc55c38785adaa9af60f9263517a415991cbe099b59cfe55027a60a6ebc52f9bfb4ca76580f82dc6e4200598f499640f2ea67fd9d41f3f2e73c4eb58d96fe42168dfe40e668e4d1e25bac65e9de6eacbdeb504adf87e003ad84d5820c2e0a58c574adbc835590d7951f9d9024d6364fb0eac7f3dfdbee1d65a1eff26a46bfba8856064accb332a6bbf4fa213d4a3a86e2277b08c59858ab237cb10a1ba860f1b4872783daaba4b851d8631a8daa9f7616d919980eab34caaf0c860a132c62e9516f8654c8af7bf1c95bc6a6e3a4bc6d080df2eca15c1ebc36f151c3ae7abb821e1b050c17200027255bf6f84efe7f45ea206e5cb41ef77a672426bc6692b798deaa5f778c70cb1527e4e23b5fb7787cf11f971f416832ed488fb9a10c6467842f4f6de51af3df6884d74fd548d9174e5150d3d2185792689b04cf2c8b4cf5bfd1027607d1544ed55e685</script> <div class="hbe hbe-content"> <div class="hbe hbe-input hbe-input-xray"> <input class="hbe hbe-input-field hbe-input-field-xray" type="password" id="hbePass"> <label class="hbe hbe-input-label hbe-input-label-xray" for="hbePass"> <span class="hbe hbe-input-label-content hbe-input-label-content-xray">当前文章不可看哦，文章加密测试(密码：123456)</span> </label> <svg class="hbe hbe-graphic hbe-graphic-xray" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"></path> </svg> </div> </div></div><script data-pjax src="/lib/hbe.js"></script><link href="/css/hbe.style.css" rel="stylesheet" type="text/css">]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/25 📘</title>
<link href="/posts/37496.html"/>
<url>/posts/37496.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-25📘"><a href="#派大星的日记-22-x2F-11-x2F-25📘" class="headerlink" title="派大星的日记 22/11/25📘"></a>派大星的日记 22/11/25📘</h1><blockquote><p>天气：不知道哎，天气预报有说下雨，但我没感觉到，那就阴天吧⛅</p></blockquote><blockquote><p>心情：小开心吧🙃</p></blockquote><style>.main { text-indent: 2rem;}.dis { display: inline-block !important; margin: 0px; padding-top: 10px; vertical-align: -30px; } .w{ font-size: 8px; text-align:center; margin: 0px !important; } .light { background-color: yellow; }</style><p class="main">今天是25号，明天就要去比赛了，我有点害怕明天起不来，今早上很好，7点多就起床并且领了早餐，早餐是一杯豆浆和油条加上沙糕，刚领了早餐，楼下老师就在群里说不能喝豆浆，让我们把豆浆拿下去换牛奶，换了牛奶，早餐也吃完啦、就开始上早八。</p><p class="main">星期五的课总是枯燥无味，匆忙逝去的时间，把我带到了中午，中午的饭很不错，这次就不放图啦，吃完了中午饭后我就开始忙绿于给我的博客添砖加瓦，花了一下午时间把博客的评论弄出来了以及部分美化，当数据开始增多，我的博客加载速度也开始变慢，把我的博客弄了后呢，写了会作业，就吃饭啦，晚饭也还行，这次还是不放图了</p><p class="main">晚上，上大学了感觉时间不够用，完全不够用，我研究点东西，一研究时间就哗啦呼啦的流逝，不够用啊！忙完之后嘞，辅导员让我明天比完赛，帮同学带点东西，我答应了，说实话我以为是为我明天比赛准备的零食，哎、看来只好明天早上吃泡面滋养我四小时了，比赛四小时，费脑又费力，不知道能不能坚持下去，我都怕我饿晕了~</p><p>今天没什么大事发生，小事也太小不值得记录，于是乎今天就到此结束！</p><h3 id="！！！评论开放啦，评论不需要登录账号，快来评论吧"><a href="#！！！评论开放啦，评论不需要登录账号，快来评论吧" class="headerlink" title="！！！评论开放啦，评论不需要登录账号，快来评论吧"></a><strong>！！！评论开放啦，评论不需要登录账号，快来评论吧</strong></h3><blockquote><p>今日总结：今天没有任何花销，也没啥大的收获</p><p>明日期望：还是希望疫情好转~ </p></blockquote><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/234.gif" style="zoom: 25%;" /><p style="float: right">2022年11月25日23:17:41</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/24 📘</title>
<link href="/posts/17273.html"/>
<url>/posts/17273.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-24📘"><a href="#派大星的日记-22-x2F-11-x2F-24📘" class="headerlink" title="派大星的日记 22/11/24📘"></a>派大星的日记 22/11/24📘</h1><blockquote><p>天气：不知道哎，天气预报有说下雨，但我没感觉到，那就阴天吧⛅</p></blockquote><blockquote><p>心情：小开心吧🙃</p></blockquote><style>.main { text-indent: 2rem;}.dis { display: inline-block !important; margin: 0px; padding-top: 10px; vertical-align: -30px; } .w{ font-size: 8px; text-align:center; margin: 0px !important; } .light { background-color: yellow; }</style><p class="main">今天早上没有早八，我很如愿的错过了拿早餐的时间，身为室长的我为此感到些许愧疚<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221124214659829.png" alt="" style="zoom:45%;" class="dis" />，没能让他们吃上早饭，这是我下铺的错，他没有把我叫醒，哎、早上十点多起床，很健康；今天还是如同昨日，被封在宿舍不能出去，宿舍缺水已经有一段时间了，已经开始喝烧开的自来水了，味道还行。时间过得很快，在我洗漱之后，就到了11点了，可以下去领饭了，今天中午的饭食很好<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221124221657301-1669299455640-1.png" alt="饭食" style="zoom:30%;" /><p class="w"> 六个人的饭</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221124222054244.png" alt="六个人的饭！" style="zoom:33%;" /></p><p class="main">吃了中午饭之后，辅导员找到我，问我要不要去办公室调试调试比赛环境，woc，这我肯定答应啊，于是乎我待到 14 点做完核酸，就跑下去问了问能不能出去，防疫工作的老师很惊讶，表示他自己也拿不稳，暂时让我先等着，去联系书记，待书记指示后，我再去；就这样坎坎坷坷的，我出了寝室楼，去到了外面<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221124223039509.png" alt="安静的学校" style="zoom:47%;" /></p><p> 学校很安静安静，各个寝室楼都在组织做核酸；走了一会儿，就到了办公楼，去到了我的小房间，当我掏出钥匙开门时，里面居然传出了声音，我丢！！！里面居然有人，这是我当时的想法，震惊了！开了门，里面是老师，但不认识，他问我干什么的，我回答了他，他表示很遗憾，这房间被征用为老师的房间了，用作于休息睡觉；就这样我被赶去了辅导员办公室，没事，将就用吧，希望周六的比赛能顺利吧。在办公室待了很久，开了个赛前说明会之后，我以办公室的环境思考了我需要带的东西，我就离开了、在回去的路上，顺道去了趟超市，为解决寝室无水的情况，我买了四瓶 1L 的农夫山泉，花了 <span class="light">14</span> 元，我很顺利的回到寝室，拉拉扯扯，时间就到了晚上，拉了室友拿着我的证件去楼下领饭，回来的时候得知，寝室楼下可以开放桶装水购买了，烦！我才刚买的水，哎，生活总是能给我带来惊喜，早知道买吃的了....</p><p class="main"> 晚上很无趣，背背单词，看看书，时间就这样过去了；按照跑步规定今天是可以跑步的，体育的期末考核有要求我们跑满 20 次三公里，奈何我偷懒，只跑了十几次，差了几次，如今而见，是不能跑了，不知道啥时候能解封，不然我体育考核可能过不了啊☹️，我妈没找我，我爹也没找我，但我舅舅找我了，让我好好戴口罩，注意安全，重庆的疫情越发严重了，我家那边都已经开始静默管理了。。。时间差不多了，日记也写到这里结束了，我得洗漱睡觉啦~</p><h4 id="这里是办公室："><a href="#这里是办公室：" class="headerlink" title="这里是办公室："></a>这里是办公室：</h4><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221124230125450.png" alt="这里是办公室" style="zoom:50%;" /><h4 id="这是电脑摄像头下我的衣服："><a href="#这是电脑摄像头下我的衣服：" class="headerlink" title="这是电脑摄像头下我的衣服："></a>这是电脑摄像头下我的衣服：</h4><p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/Snipaste_2022-11-24_16-05-03.png"></p><blockquote><p>今日总结：今天花销 <strong>14</strong> 元，把 Java 的封装又多看了几次，复习了 Javascript 出去溜了一会儿</p><p>明日期望：还是希望疫情好转~ </p></blockquote><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/pdx.gif" style="zoom: 25%;" /><p style="float: right">2022年11月24日23:15:45</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/23 📘</title>
<link href="/posts/62584.html"/>
<url>/posts/62584.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-23-📘"><a href="#派大星的日记-22-x2F-11-x2F-23-📘" class="headerlink" title="派大星的日记 22/11/23 📘"></a>派大星的日记 22/11/23 📘</h1><blockquote><p>天气：小雨且冷</p></blockquote><blockquote><p>心情：一半的开心🙃</p></blockquote><style>.main { padding: 0; text-indent: 2rem;}.main li { margin: 1.5em 0 !important; line-height: 2em; font-family: '微软雅黑'; list-style-type: none !important;}</style><ul class="main"> <li>emm...怎么讲呢，今天并不是美好的一天，从今天早上七点多起床，准备去吃属于今天的早餐，结果不能出寝室！为什么呢，我也不知道，但大概能猜出来是因为某学生健康码有问题吧，我还是不大觉得，一直属于封校状态的我们会染上阳；学校很慌，马不停蹄的就把我们封印在寝室里，毕竟昨天我还能不戴口罩跑步呢~ 很遗憾，寝室没有什么物资了，连饮用水都没有，于是乎一个早上我很饿，边饿边上课，顺带把我学校封寝室这件事奔走相告~ 很不开心，饿了一阵子，学校才堪堪把餐送到。于是呢我在寝室里上了早八，上了课，写了会Java作业（这个作业我写了一早上）。</li> <li>中午其实也没吃到什么，就隔离餐吧，其实还好，也就是两荤一素的盒饭，草草解决了中午之忧，便在床上睡了会午觉，下午就开始了新的课程，在下午空余时间，我在学校公众号上得知了，封寝的原因——诞生了小阳人我老惊讶了，在两天一检的且封校的情况下，为何还会染上嘞，这让我感叹病毒的强大，也让我有些担忧，毕竟昨晚上我可是没戴口罩跑了步的！！！可想而知，风险还是很大的。</li><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/11231.jpg" alt="" style="zoom: 25%;" /> <li>我于是乎又把这一消息奔走相告（早上还在和朋友分析得阳了要封个把月，没想到下午就实现了，乌鸦嘴属性）、唉唉唉，我的比赛，我的年，咋比啊？咋跨啊？想想我比赛，困难重重啊，先是重庆疫情严重，导致变成线上赛，好不容易比赛环境搭建好，又被告知周六早上选修课考试，时间上撞了个大满贯；然后嘞，学校又来了小阳人，真是有够阻扰的、其实到目前为止，对这比赛，我已经开始摆烂了，毕竟四小时时间，还要不吃不喝，真的很难熬。</li> <li>今天事情很多，几段话还说不完，下午一直拖到了六点之后做了核酸之后才吃上饭</li> <img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/22-11-23.jpg" style="zoom:50%;" /> <li>很饿很饿，还带点渴，下午的饭也还好，符合我的胃口，就是没吃饱，到了晚上还得饿。寝室一直没有饮用水，向群里老师问了，结果没回复。时间就慢慢的到了晚上了，晚上我刷了会比赛的题，和老妈聊天，老妈让我多照顾自己，戴口罩，勤洗手，我一直都有在答应，可重庆的疫情原因老妈还总是不放心，我没把学校有阳性这件事告诉妈妈，怕她更担心，所以聊了聊就跑去记了记单词，打了会 csgo，结果上瘾了，愣是打了半小时，让我日记都没写， csgo误我，，，于是乎等我写完这篇日记呢，已经是12点14分了，那就只好明天上传咯，洗洗睡觉咯</li></ul><blockquote><p>今日总结：并没有记到新单词，在复习过往的单词；今天一分钱没花唉！盒饭免费！</p><p>明日期望：希望疫情好转~ </p></blockquote><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/20221124121912.gif" /><p style="float: right">2022年11月24日00:23:23</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>派大星的日记 22/11/22 📘</title>
<link href="/posts/9593.html"/>
<url>/posts/9593.html</url>
<content type="html"><![CDATA[<h1 id="派大星的日记-22-x2F-11-x2F-22-📘"><a href="#派大星的日记-22-x2F-11-x2F-22-📘" class="headerlink" title="派大星的日记 22/11/22 📘"></a>派大星的日记 22/11/22 📘</h1><blockquote><p>天气：多云且小冷</p></blockquote><blockquote><p>心情：一半一半的开心🙃</p></blockquote><p style="text-indent: 2em">今天是一个快乐一天，我很开心的赶上了今天早八，虽说是在寝室上网课，不知道为什么自从上网课以来，就很少吃早饭了....可能是，大概是太懒了</p> <p style="text-indent: 2em">今天呢是22号，自大学以来，总感觉时间过得特别快，转眼就已经快12月份了，也许是我目前比高中忙了吧，一天天的忙这忙那的，时间就天天的过~</p> <p style="text-indent: 2em;">今天中午，吃了二食堂的二荤两素，要了我<span style="background-color: yellow; color: #000">12</span>块钱，老贵了，贵的我不得不把价格加个高亮显示。</p> <p style="text-indent: 2em;"> 今天下午，事情就很多了，要去搭建比赛环境，为此辅导员还专门给我提供了豪华单间，内有空调与沙发，羡煞旁人；于是呢我很期待的跑去了办公楼准备待上一下午，结果嘞办公室里并没有老师在，可惜可惜，我只好等到下午两点半再去~~ </p> <p style="text-indent: 2em;"> 也许有人要问，为什么要分段分段的写，我也不知道哇，我只想写的好看些，写的漂亮些，这是我第一次写日记，难免有不知道咋写的情况，悲催！！！！活了十八年，连个日记都不会写，我真是白痴！愧对自己</p> <p style="text-indent: 2em;">讲道理，和辅导员交流还是让我很害怕的，毕竟看知乎总是看到得罪了辅导员会咋咋咋什么的，总是担心，哎！大学生了还没学会面对这些，继续继续，下午其实有课的，网络基础 我是没想到我学了四年的网络基础了到了大学还要继续学，不过这大学的网络基础有些新东西，还好还好，总的来说还是不错的，下午上到一半的课，看了看表，14点30分，太好了，我决定还是把时间往后延延，毕竟要去那边呆很久，还是不太舍得寝室。。 </p> <p style="text-indent: 2em;"> 经历了一顿挫折后呢，我成功的打开了豪华单间的门，很不错，真的有空调，真的有沙发，真的有两台电脑，看了看了电脑配置，太棒了居然还是i3处理器，这种处理器，真不愧是老学校，我都好久没见过i3的处理器了，居然能在这看到~~~环境还是不错的，起码是一个人，一个人就很舒服，检查了设备环境之后呢，就开始下载比赛需要的程序和完善比赛环境，环境呢，要求的不严苛，需要个摄像头，需要两台电脑，需要良好的网络环境；很遗憾，我没有摄像头，只好使用手机，不过这就需要支架了，于是聪明的我，寻求了辅导员帮助，借来了个手机支架，真不错，环境算是配置好了，就差软件了；电脑在我一番检查之后发现，这电脑居然没有扬声器😑等我发现时候，我已经把需要的软件都下载完了，结果才发现这电脑居然没有扬声器。。把我整傻了，浪费了一小时，结果白白了、、一下午啥也不是，还被那小房间给闷的不舒服、如此只好打道回府，回宿舍咯 </p> <p style="text-indent: 2em;"> 在回去路上，我惊喜的发现今天好像是跑步的时间，又可以运用我的运动细胞去跑步了，好耶！于是乎我就回到寝室学习了一小片刻的Js，很不错学会了一丢丢；时间呢，慢慢的就到了夜晚，六点啦，六点半啦，跑步去了，匆匆跑了三公里，跑去一食堂买了碗价值 <span style="background-color: yellow; color: #000">8</span>元的鸡杂小面，很不错，味道还行 <img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221122234958694.png" alt="鸡杂面" style="zoom: 20%; " /></p><p style="text-indent: 2em;">去超市买了<span style="background-color: yellow; color: #000">13</span>块钱的东西，一瓶脉动，一包口水娃、时间慢慢的流逝，在晚上的时间里，我和老妈交流了重庆疫情的发展，和朋友交流了重庆疫情的槽点，学习了css和js，背了会单词，又学会了些新东西；于是乎时间就匆匆的来到了现在，洗了个澡，就开始写日记，日记呢，花了半小时左右写完吧，也差不多一个小时了，写完发布就睡觉吧···第一次写日记，格式总是杂七杂八的，还望海涵。那么明天见~ </p><blockquote><p>今日总结：学了新东西，加强了社交，花了<strong>33</strong>元钱</p><p>明日期望：希望能多学新东西，过得开心</p></blockquote><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/QQ图片20221122235632.gif" style="zoom:25%;" /><p style="float: right">2022年11月22日23:35:14</p><br>]]></content>
<categories>
<category> 派大星的日记 </category>
</categories>
<tags>
<tag> 派大星的日记 </tag>
</tags>
</entry>
<entry>
<title>JavaScript学习笔记</title>
<link href="/posts/20244.html"/>
<url>/posts/20244.html</url>
<content type="html"><![CDATA[<h1 id="JavaScript学习"><a href="#JavaScript学习" class="headerlink" title="JavaScript学习"></a>JavaScript学习</h1><h2 id="1-声明变量"><a href="#1-声明变量" class="headerlink" title="1.声明变量"></a>1.声明变量</h2><h5 id="1-1-变量的声明"><a href="#1-1-变量的声明" class="headerlink" title="1.1 变量的声明"></a>1.1 变量的声明</h5><ol><li><strong>var</strong> 声明变量 <code>var name = '德华'</code></li><li><strong>console.log();</strong> 后台日志 <code>console.log(sss);</code></li><li>变量的命名规范<ul><li>由字母，数字，下划线，美元符号组成</li><li>区分大小写</li><li>不能以数字开头</li><li>不能是关键字，保留字</li><li>使用严格检查模式 <code>use strict</code> 预防JavaScript随意性导致出现问题 写在第一行</li><li>局部变量推荐使用<code>let</code>定义</li></ul></li></ol><h5 id="1-2-声明变量的案例"><a href="#1-2-声明变量的案例" class="headerlink" title="1.2 声明变量的案例"></a>1.2 声明变量的案例</h5><ol><li><p>案例1</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myname = <span class="title function_">proment</span>(<span class="string">'请输入你的名字'</span>);<span class="comment">//定义并存输入</span></span><br><span class="line"><span class="title function_">alert</span>(myname);<span class="comment">//输出</span></span><br></pre></td></tr></table></figure></li><li><p>声明多个变量</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明多个变量</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>,</span><br><span class="line"> name = <span class="string">'德华'</span>,</span><br><span class="line"> ge = <span class="number">2000</span>;</span><br><span class="line"><span class="comment">//若只声明不赋值结果是undefined 解释器也不知道里面存放的是什么</span></span><br><span class="line"><span class="keyword">var</span> sex;</span><br><span class="line"><span class="comment">//不声明,不赋值直接使用报错</span></span><br><span class="line"><span class="comment">//不声明直接使用赋值使用不会报错</span></span><br><span class="line">q = <span class="number">100</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(q);</span><br></pre></td></tr></table></figure></li></ol><h2 id="2-数据类型"><a href="#2-数据类型" class="headerlink" title="2.数据类型"></a>2.数据类型</h2><ul><li>Javascript 是支持变量的数据类型动态化</li></ul><h5 id="1-1-数字类型"><a href="#1-1-数字类型" class="headerlink" title="1.1 数字类型"></a>1.1 数字类型</h5><ol><li><code>var sum = 10;//数字型可包含整数和小数</code></li><li><code>var str = 'love';//字符串型</code></li><li><strong>prompt</strong> 取得的值为字符型</li></ol><h5 id="1-2-字符串类型-String"><a href="#1-2-字符串类型-String" class="headerlink" title="1.2 字符串类型 String"></a>1.2 字符串类型 String</h5><ol><li><p>Javascript可以用单引号嵌套双引号，或者双引号嵌套单引号</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> strMsg = <span class="string">'我是"高富帅"程序员'</span>;</span><br><span class="line"><span class="keyword">var</span> strMsg2 = <span class="string">"我是'高富帅'程序员"</span>;</span><br></pre></td></tr></table></figure></li><li><p>字符串转义字符</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str1 = <span class="string">"一二三四\n大大"</span></span><br></pre></td></tr></table></figure></li><li><p>检查获取字符串的长度 length</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'my name is link'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="property">length</span>);<span class="comment">//15</span></span><br></pre></td></tr></table></figure></li><li><p>多行字符串编写</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = </span><br><span class="line"> <span class="string">`hello</span></span><br><span class="line"><span class="string"> world</span></span><br><span class="line"><span class="string"> 你好</span></span><br><span class="line"><span class="string"> 您好ya`</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str);</span><br></pre></td></tr></table></figure><p>输出结果：</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221118173304809.png" alt="" style="zoom:67%;" /></li><li><p>模板字符串(ES6新特性)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'朋友'</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> msg = <span class="string">'您好呀,&{name}'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg);</span><br></pre></td></tr></table></figure></li><li><p>大小写转换 <strong>toUpperCase()</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'love'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name.<span class="title function_">toUpperCase</span>());</span><br><span class="line"><span class="comment">//> LOVE</span></span><br></pre></td></tr></table></figure><p>输出结果:</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221118174418949.png" alt="" style="zoom:67%;" /></li><li><p>获取指定下标位置 <strong>indexOf();</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'I Love You'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">indexOf</span>(<span class="string">'Y'</span>));</span><br><span class="line"><span class="comment">//> 7</span></span><br></pre></td></tr></table></figure></li><li><p>截取字符串 <strong>substring();</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'student'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substring</span>(<span class="number">1</span>));</span><br><span class="line"><span class="comment">//> udent</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substring</span>(<span class="number">1</span>,<span class="number">2</span>));</span><br><span class="line"><span class="comment">//> t</span></span><br></pre></td></tr></table></figure></li><li><p>字符串的拼接</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Love'</span> + <span class="string">'of'</span> + <span class="string">'my'</span> + <span class="string">'life.'</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'age'</span> + <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">20</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'我今年'</span> + age + <span class="string">'岁'</span>);</span><br></pre></td></tr></table></figure></li><li><p>Undefined || Null</p></li></ol> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)</span></span><br><span class="line"><span class="keyword">var</span> variable = <span class="literal">undefined</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(variable + <span class="string">'pink'</span>);<span class="comment">//undefinedpink</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(variable + <span class="number">1</span>);<span class="comment">//NaN</span></span><br><span class="line"><span class="comment">//一个声明变量给null值，里面存的值为空</span></span><br><span class="line"><span class="keyword">var</span> space = <span class="literal">null</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(space + <span class="string">'pink'</span>);<span class="comment">//nullpink</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(space + <span class="number">1</span>);<span class="comment">//1</span></span><br></pre></td></tr></table></figure><ol start="11"><li><p>进制 || 最值 || NaN || infinity || isNaN()</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="number">010</span>;<span class="comment">//表示八进制</span></span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">0x9</span>;<span class="comment">//表示十六进制</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MAX_VALUE</span>);<span class="comment">//获取数字类型的最大值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MIN_VALUE</span>);<span class="comment">//获取数字类型的最小值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MAX_VALUE</span> * <span class="number">2</span>);<span class="comment">//infinity 输出无穷大</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( - <span class="title class_">Number</span>.<span class="property">MAX_VALUE</span> * <span class="number">2</span>);<span class="comment">//-infinity 输出无穷小</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'pink'</span> - <span class="number">2</span>);<span class="comment">//NaN 输出非数字</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">isNaN</span>(<span class="number">12</span>));<span class="comment">//isNaN();来判断是否为非数字的类型</span></span><br></pre></td></tr></table></figure></li></ol><h5 id="1-2-获取数据类型-typeof"><a href="#1-2-获取数据类型-typeof" class="headerlink" title="1.2 获取数据类型 typeof"></a>1.2 获取数据类型 typeof</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'pink'</span>;</span><br><span class="line"><span class="keyword">var</span> flag = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">var</span> timer = <span class="literal">null</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> num);<span class="comment">//number;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> str);<span class="comment">//string;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> flag);<span class="comment">//boolean;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> timer);<span class="comment">//object;</span></span><br></pre></td></tr></table></figure><h5 id="1-3-数据类型的转换"><a href="#1-3-数据类型的转换" class="headerlink" title="1.3 数据类型的转换"></a>1.3 数据类型的转换</h5><ol><li><p>使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来讲就是把一种数据类型的变量转换成另外一种数据类型。</p><ul><li>转换为字符串类型</li><li>转换为数字类型</li><li>转换为布尔型</li></ul></li><li><p>转换字符串</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.把数字转换为字符串型 变量.toString();</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> str = num.<span class="title function_">toString</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> str);</span><br><span class="line"><span class="comment">//2.利用String(变量)转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">String</span>(num));</span><br><span class="line"><span class="comment">//3.利用 + 拼接字符串的方法实现转换效果 这种也称隐式转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num + <span class="string">''</span>);</span><br></pre></td></tr></table></figure></li><li><p>转换数字类型</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.利用parseInt();</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">parseInt</span>(<span class="string">'3.15'</span>));<span class="comment">//取整 3</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">parseInt</span>(<span class="string">'120px'</span>));<span class="comment">//120 会去掉px单位</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">parseInt</span>(<span class="string">'rem120px'</span>));<span class="comment">//NaN</span></span><br><span class="line"><span class="comment">//2.利用parseFloat(); 转换成浮点数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">parseFloat</span>(<span class="string">'3.14'</span>));<span class="comment">//可保留小数</span></span><br><span class="line"><span class="comment">//3.利用Number();</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'123'</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(str));</span><br><span class="line"><span class="comment">//4.利用算术运算 - * \</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'12'</span> - <span class="number">0</span>);<span class="comment">//结果为数字型12</span></span><br></pre></td></tr></table></figure></li><li><p>转换布尔型</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Boolean();</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="string">''</span>));<span class="comment">//false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="number">0</span>));<span class="comment">//false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="title class_">NaN</span>));<span class="comment">//false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="literal">null</span>));<span class="comment">//false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="literal">undefined</span>));<span class="comment">//false</span></span><br><span class="line"><span class="comment">//除了以上其他基本为true</span></span><br></pre></td></tr></table></figure></li></ol><h2 id="3-逻辑运算符-短路运算-逻辑中断"><a href="#3-逻辑运算符-短路运算-逻辑中断" class="headerlink" title="3.逻辑运算符-短路运算(逻辑中断)"></a>3.逻辑运算符-短路运算(逻辑中断)</h2><ul><li>用布尔值参与逻辑运算 <code>true && false == false</code></li><li><code>123 &7 456</code>是值 或者是 表达式 参与逻辑运算?</li><li>如果有空或者否定的为假 其余都为真 <code>' ' null undefined NaN</code></li><li>逻辑中段很重要，会影响程序的运行结果</li></ul><ol><li><p>短路与运算 如果表达式1为真则返回表达式2，如果表达式1为假则返回表达式1</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">123</span> && <span class="number">456</span>);<span class="comment">//456</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">0</span> && <span class="number">1</span> + <span class="number">2</span> && <span class="number">456</span> * <span class="number">56789</span>); <span class="comment">//表达式1 为假，则后续表达式不执行</span></span><br></pre></td></tr></table></figure></li><li><p>短路或运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1为假 则返回表达式2</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">123</span> || <span class="number">456</span>); <span class="comment">//123</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">0</span> || <span class="number">456</span>); <span class="comment">//456</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">123</span> || <span class="number">456</span> || <span class="number">789</span>); <span class="comment">//123</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">123</span> || num++);<span class="comment">//123</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//0</span></span><br></pre></td></tr></table></figure></li></ol><h5 id="1-4-数据类型案例"><a href="#1-4-数据类型案例" class="headerlink" title="1.4 数据类型案例"></a>1.4 数据类型案例</h5><ol><li><p>计算年龄案例</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//计算年龄案例 要求输入出生年份计算出年龄</span></span><br><span class="line"><span class="keyword">while</span> (<span class="literal">true</span>) {</span><br><span class="line"><span class="keyword">var</span> year = <span class="title function_">prompt</span>(<span class="string">'请输入您的出生年份:'</span>);</span><br><span class="line"><span class="keyword">var</span> nowYear = <span class="title function_">prompt</span>(<span class="string">'请输入今年的年份:'</span>);</span><br><span class="line"><span class="comment">//判断输入的出生年份是否小于今年年份</span></span><br><span class="line"><span class="keyword">if</span> (year <= nowYear) {</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">'您今年'</span> + (nowYear - year) + <span class="string">'岁了'</span>);</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> year + <span class="string">'\n'</span> + <span class="keyword">typeof</span> nowYear);</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">'数据有误！请重新输入'</span>);</span><br><span class="line"><span class="keyword">continue</span>;</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h2 id="4-分支选择结构-Switch"><a href="#4-分支选择结构-Switch" class="headerlink" title="4.分支选择结构 - Switch"></a>4.分支选择结构 - Switch</h2><ol><li><code>Switch(num)</code>num是全等的需要数据类型相匹配</li></ol><h2 id="5-数组"><a href="#5-数组" class="headerlink" title="5.数组"></a>5.数组</h2><h5 id="5-1-数组的创建"><a href="#5-1-数组的创建" class="headerlink" title="5.1 数组的创建"></a>5.1 数组的创建</h5><ol><li><p>利用 <em><strong>new</strong></em> 创建</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 数组名 = <span class="keyword">new</span> <span class="title class_">Array</span>();</span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(); <span class="comment">//创建一个空的数组</span></span><br></pre></td></tr></table></figure></li><li><p>利用数组字面量创建</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 数组名 = [];</span><br><span class="line"><span class="keyword">var</span> array = [<span class="string">'小白'</span>,<span class="string">'大黄'</span>,<span class="number">19</span>,<span class="string">'llll'</span>,<span class="literal">true</span>];</span><br><span class="line"><span class="comment">//数组的字面量的是方括号[]</span></span><br><span class="line"><span class="comment">//声明数组并赋值称为数组的初始化</span></span><br><span class="line"><span class="comment">//这种字面量方式也是常用的</span></span><br><span class="line"><span class="comment">//可以存放不同数据类型的元素 可以是字符串，数字，布尔值等</span></span><br></pre></td></tr></table></figure></li></ol><h5 id="5-2-获取和遍历数组的元素"><a href="#5-2-获取和遍历数组的元素" class="headerlink" title="5.2 获取和遍历数组的元素"></a>5.2 获取和遍历数组的元素</h5><ol><li><p>索引下标获取</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="string">'小白'</span>,<span class="string">'大黄'</span>,<span class="number">19</span>,<span class="string">'llll'</span>,<span class="literal">true</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr1);<span class="comment">//返回全部元素</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr1[<span class="number">0</span>]);<span class="comment">//返回小白</span></span><br></pre></td></tr></table></figure></li><li><p>遍历数组元素</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="string">'小白'</span>,<span class="string">'大黄'</span>,<span class="number">19</span>,<span class="string">'llll'</span>,<span class="literal">true</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < array.<span class="property">length</span>; i++){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(array[i]);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h5 id="5-4-数组中新增元素"><a href="#5-4-数组中新增元素" class="headerlink" title="5.4 数组中新增元素"></a>5.4 数组中新增元素</h5><ol><li><p>通过修改 <em><strong>length</strong></em> 长度</p><blockquote><p>注意：给 length 赋值，数组大小会发生变化，如果赋值长度过小，则数组元素丢失</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="string">'小白'</span>,<span class="string">'大黄'</span>];<span class="comment">//当前数组元素为2</span></span><br><span class="line">array.<span class="property">length</span> = <span class="number">5</span>;<span class="comment">//把数组长度修改到5,但新增元素没有值</span></span><br></pre></td></tr></table></figure></li><li><p>通过修改索引号来新增元素</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">11</span>,<span class="number">22</span>,<span class="number">33</span>];</span><br><span class="line">arr[<span class="number">3</span>] = <span class="string">'lv'</span>;</span><br><span class="line"><span class="comment">//此时追加了元素3,如果元素已有则覆盖替换</span></span><br><span class="line">arr = <span class="number">12</span>;</span><br><span class="line"><span class="comment">//不要给数组名赋值 否则清除数组所有元素</span></span><br></pre></td></tr></table></figure></li></ol><h5 id="5-5-数组案例"><a href="#5-5-数组案例" class="headerlink" title="5.5 数组案例"></a>5.5 数组案例</h5><ol><li><p>数组筛选</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//将数组中的大于10的数组选出来，并放入新数组中</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">71</span>, <span class="number">24</span>, <span class="number">1</span>, -<span class="number">2</span>, <span class="number">23</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.<span class="property">length</span>; i++) {</span><br><span class="line"><span class="keyword">if</span> (arr[i] > <span class="number">10</span>) {</span><br><span class="line">newArr[count] = arr[i]; </span><br><span class="line">count++;</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < newArr.<span class="property">length</span>; i++){</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr[i]);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>筛选方法2</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//将数组中的大于10的数组选出来，并放入新数组中</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">71</span>, <span class="number">24</span>, <span class="number">1</span>, -<span class="number">2</span>, <span class="number">23</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="comment">//刚开始的newArr的length长度为0</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.<span class="property">length</span>; i++) {</span><br><span class="line"><span class="keyword">if</span> (arr[i] > <span class="number">10</span>) {</span><br><span class="line">newArr[newArr.<span class="property">length</span>] = arr[i]; <span class="comment">//新增后长度+1</span></span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < newArr.<span class="property">length</span>; i++){</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr[i]);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>数组翻转</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">let</span> newArr = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = arr.<span class="property">length</span> - <span class="number">1</span>; i >= <span class="number">0</span>; i++){</span><br><span class="line"> newArr[newArr.<span class="property">length</span>] = arr[i];</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br></pre></td></tr></table></figure></li><li><p>冒泡排序</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array = [<span class="number">5</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">3</span>,<span class="number">0</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < array.<span class="property">length</span> - <span class="number">1</span>; i++){</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j < array.<span class="property">length</span> - i - <span class="number">1</span>; j++){</span><br><span class="line"> <span class="keyword">if</span>(array[j] > array[j + <span class="number">1</span>]){</span><br><span class="line"> <span class="keyword">let</span> temp;</span><br><span class="line"> temp = array[j + <span class="number">1</span>];</span><br><span class="line"> array[j + <span class="number">1</span>] = array[j];</span><br><span class="line"> array[j] = temp;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(array);</span><br></pre></td></tr></table></figure></li></ol><h2 id="6-函数"><a href="#6-函数" class="headerlink" title="6.函数"></a>6.函数</h2><h4 id="1-1-声明函数"><a href="#1-1-声明函数" class="headerlink" title="1.1 声明函数"></a>1.1 声明函数</h4><ol><li><p>第一种声明</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数名() {</span><br><span class="line"> <span class="comment">// 函数体</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) {</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Hi'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>函数表达式声明(匿名函数)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="keyword">function</span>(<span class="params"></span>){};</span><br><span class="line"><span class="keyword">var</span> fun = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'函数表达式'</span>);</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fun</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.fun 是变量名，不是函数名</span></span><br><span class="line"><span class="comment">// 2.函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而 函数表达式里面存的是函数</span></span><br><span class="line"><span class="comment">// 3.函数表达式也可以进行传递参数</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="1-2-函数调用"><a href="#1-2-函数调用" class="headerlink" title="1.2 函数调用"></a>1.2 函数调用</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">sayHi</span>();<span class="comment">// 函数调用</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Hi'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="1-3-带参数的函数"><a href="#1-3-带参数的函数" class="headerlink" title="1.3 带参数的函数"></a>1.3 带参数的函数</h4><ol><li><p>声明带参数的函数</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数名(形参<span class="number">1</span>,形参<span class="number">2.</span>..) {</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">cook</span>(<span class="params">aru</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(aru);</span><br><span class="line">}</span><br><span class="line"><span class="title function_">cook</span>(<span class="string">'德华'</span>);<span class="comment">// 存放实参</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// > 德华</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：</p><blockquote><ol><li>如果实参的个数多于形参的个数，则只会取到形参的个数</li><li>如果实参的个数小于形参的个数，形参则被看做没有被定义的变量 undefined 结果为 NaN</li></ol></blockquote></blockquote></li><li><p>函数可以互相调用</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) {</span><br><span class="line"> cosole.<span class="title function_">log</span>(<span class="number">11</span>);</span><br><span class="line"> <span class="title function_">fn2</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>) {</span><br><span class="line">cosole.<span class="title function_">log</span>(<span class="number">22</span>);</span><br><span class="line"> <span class="title function_">fn1</span>();</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fn1</span>();</span><br><span class="line"><span class="comment">// > 会进入无限循环</span></span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120112556650.png" alt="" style="zoom:67%;" /></p></li></ol><h4 id="1-4-函数的返回值"><a href="#1-4-函数的返回值" class="headerlink" title="1.4 函数的返回值"></a>1.4 函数的返回值</h4><ol><li><p>返回值的注意事项：</p><blockquote><ol><li>return 具有终止性</li><li>return 只能返回一个值，可利用数组来存放返回多个值</li><li>如果没有 return 则返回 undefined</li></ol></blockquote></li><li><p>返回值格式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数名() {</span><br><span class="line"> <span class="keyword">return</span> 返回的结果;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>例子</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getResult</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="number">123</span>;</span><br><span class="line">}</span><br><span class="line"><span class="title function_">getResult</span>(); <span class="comment">// getResult = 666;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getResult</span>());</span><br><span class="line"><span class="comment">// > 666</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">cook</span>(<span class="params">aru</span>) {</span><br><span class="line"> <span class="keyword">return</span> aru;</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">cook</span>(<span class="string">'德华'</span>););</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getSum</span>(<span class="params">num1,num2</span>) {</span><br><span class="line"> <span class="keyword">return</span> num1 + num2;</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getSum</span>(<span class="number">1</span>, <span class="number">2</span>));</span><br><span class="line"><span class="comment">// > 3</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="1-5-函数接受数组和返回数组"><a href="#1-5-函数接受数组和返回数组" class="headerlink" title="1.5 函数接受数组和返回数组"></a>1.5 函数接受数组和返回数组</h4><ol><li><p>求数组最大值：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getMax</span>(<span class="params">arr</span>) {</span><br><span class="line"> <span class="keyword">let</span> max = arr[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < arr.<span class="property">length</span>; i++){</span><br><span class="line"> <span class="keyword">if</span> (arr[i] > max){</span><br><span class="line"> max = arr[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> max;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arrayMax = <span class="title function_">getMax</span>([<span class="number">0</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">9</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrayMax);</span><br><span class="line"><span class="comment">// > 9</span></span><br></pre></td></tr></table></figure></li><li><p>求数的加减乘除：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getResult</span>(<span class="params">num1, num2</span>) {</span><br><span class="line"> <span class="keyword">return</span> [num1 + num2, num1 * num2, num1 \ num2, num1 - num2];</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getResult</span>(<span class="number">5</span>,<span class="number">4</span>));</span><br></pre></td></tr></table></figure><p>输出结果：</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221118214411803.png" alt="" style="zoom:67%;" /></li></ol><h4 id="1-5-arguments-的使用"><a href="#1-5-arguments-的使用" class="headerlink" title="1.5 arguments 的使用"></a>1.5 arguments 的使用</h4><blockquote><p>但我们不确定有多少个参数传递的时候，可以用 ==arguments== 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个==内置对象==，所有函数都内置了一个arguments 对象，arguments 对象中==存储了传递的所有实参==</p></blockquote><ol><li><p>使用</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>.<span class="property">length</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>[<span class="number">3</span>]);<span class="comment">// > 4</span></span><br><span class="line"> <span class="comment">// 我们可以按照数组的方式遍历 arguments</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="variable language_">arguments</span>.<span class="property">length</span>; i++){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>[i]);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fn</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>);</span><br></pre></td></tr></table></figure><p>输出结果：</p><img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221118221832692.png" alt="" style="zoom:67%;" /><blockquote><p>注意：</p><ol><li>伪数组，并不是真正意义上的数组</li><li>具有数组的 length 属性</li><li>按照索引的方式来进行存储的</li><li>它没有真正数组的一些方法 pop() push() 等等</li></ol></blockquote></li></ol><h4 id="1-6-函数的案例"><a href="#1-6-函数的案例" class="headerlink" title="1.6 函数的案例"></a>1.6 函数的案例</h4><ol><li><p>利用函数封装输入年份输出2月份天数</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 案例：输入年份，输出该年份的2月份有几天</span></span><br><span class="line"><span class="comment">// 返回年份天数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">backDay</span>(<span class="params"></span>) {</span><br><span class="line"><span class="keyword">let</span> year = <span class="title function_">prompt</span>(<span class="string">'请输入年份：'</span>);</span><br><span class="line"><span class="keyword">if</span>(<span class="title function_">isRunYear</span>(year)){</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">'当前年份是闰年，2月份有29天'</span>);</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">'当前年份是平年，2月份有28天'</span>);</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"><span class="title function_">backDay</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 返回平年闰年</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">isRunYear</span>(<span class="params">year</span>) {</span><br><span class="line"><span class="keyword">let</span> flag = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">if</span> (year % <span class="number">4</span> == <span class="number">0</span> && year % <span class="number">100</span> != <span class="number">0</span> || year % <span class="number">400</span> == <span class="number">0</span>){</span><br><span class="line">flag = <span class="literal">true</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">return</span> flag;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h2 id="7-作用域"><a href="#7-作用域" class="headerlink" title="7.作用域"></a>7.作用域</h2><blockquote><ol><li><p>JavaScript 代码名字在某个范围起效果 提高程序的可靠性和减少命名冲突</p></li><li><p>js 作用域 (es6) 之前：分全局作用域和局部作用域</p></li><li><p>全局：整个script标签，或者是整js文件</p></li><li><p>全局变量只有浏览器关闭的时候才会销毁，比较占内存资源</p></li><li><p>局部变量，但程序执行完毕之后就会销毁，节约内存资源</p></li></ol></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>; <span class="comment">// 全局作用域</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fun1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">20</span>; <span class="comment">// 局部作用域</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="1-1-全局变量"><a href="#1-1-全局变量" class="headerlink" title="1.1 全局变量"></a>1.1 全局变量</h4><ol><li><p>在全局作用域下的变量，在全局都可以使用</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'这里是外部:'</span> + num);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'这里是函数内部:'</span> + num);</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fun</span>();</span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120163944040.png" alt="" style="zoom:67%;" /></p></li></ol><h4 id="1-2-局部变量"><a href="#1-2-局部变量" class="headerlink" title="1.2 局部变量"></a>1.2 局部变量</h4><ol><li><p>在局部作用域下的的变量，后者在函数内部的变量就是局部变量</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> num1 = <span class="number">20</span>; <span class="comment">// 此时 num1 就是局部变量</span></span><br><span class="line"> num2 = <span class="number">30</span>;</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fun</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num2); <span class="comment">//如果在函数内部，没有声明直接赋值的变量也属于全局变量</span></span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120164800523.png" alt="" style="zoom:67%;" /></p><blockquote><p>注意： 函数的形参也可以看做是局部变量</p></blockquote></li></ol><h4 id="1-3-块级作用域-es6-新增"><a href="#1-3-块级作用域-es6-新增" class="headerlink" title="1.3 块级作用域(es6 新增)"></a>1.3 块级作用域(es6 新增)</h4><ol><li><p>目前暂无</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="number">3</span> < <span class="number">5</span>) {</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"><span class="comment">// 是可以调用的</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="1-4-链式作用域"><a href="#1-4-链式作用域" class="headerlink" title="1.4 链式作用域"></a>1.4 链式作用域</h4><ol><li><p>作用域链</p><blockquote><p>根据在内部函数可以访问外部函数变量的机制，用链式查找决定那些数据能被内部函数访问，就称为作用域链</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) { <span class="comment">// 外部函数</span></span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) { <span class="comment">// 内部函数</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 此时会链式查找，一层一层往上查找，结果为20</span></span><br></pre></td></tr></table></figure><p>查找原理：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120170156732.png" alt="" style="zoom:67%;" /></p><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120193753035.png" alt="" style="zoom: 67%;" /></p></li></ol><h2 id="8-JavaScript-预解析"><a href="#8-JavaScript-预解析" class="headerlink" title="8.JavaScript 预解析"></a>8.JavaScript 预解析</h2><h4 id="1-1-预解析"><a href="#1-1-预解析" class="headerlink" title="1.1 预解析"></a>1.1 预解析</h4><ol><li><p>Js 引擎运行 Js 分为两步：预解析，代码执行</p><blockquote><ol><li>预解析 js 引擎会把 js 里面所有的 <strong>var</strong> 还有 <strong>function</strong> 提升到当前作用域的最前面</li><li>代码执行，按照代码书写的顺序从上往下执行</li></ol></blockquote></li><li><p>预解析分为 变量预解析 (变量提升) 和函数预解析 (函数提升)</p><blockquote><ol><li>变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作</li><li>函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数</li></ol></blockquote><p>代码例子:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">// > undefined</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 预解析后执行顺序为：</span></span><br><span class="line"><span class="keyword">var</span> num; <span class="comment">// 先定义</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">// 然后输出 因为没有赋值，所以输出结果为undefined</span></span><br><span class="line">num = <span class="number">10</span>; <span class="comment">// 再赋值</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fun</span>();</span><br><span class="line"><span class="keyword">var</span> fun = <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">22</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 预解析之后相当于执行了：</span></span><br><span class="line"><span class="keyword">var</span> fun;</span><br><span class="line"><span class="title function_">fun</span>();</span><br><span class="line">fun = <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">22</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 因此函数表达式一定要先定义后调用</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="1-2-预解析案例"><a href="#1-2-预解析案例" class="headerlink" title="1.2 预解析案例"></a>1.2 预解析案例</h4><ol><li><p>案例-1</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="title function_">fun</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 预解析之后：</span></span><br><span class="line"><span class="keyword">var</span> num;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> num;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"> num = <span class="number">20</span>;</span><br><span class="line">}</span><br><span class="line">num = <span class="number">10</span>;</span><br><span class="line"><span class="title function_">fun</span>();</span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120200139054.png" alt="" style="zoom:80%;" /></p></li><li><p>案例-2</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 预解析之后：</span></span><br><span class="line"><span class="keyword">var</span> num;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> num;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">// > undefined</span></span><br><span class="line"> num = <span class="number">20</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">// > 20</span></span><br><span class="line">}</span><br><span class="line">num = <span class="number">10</span>;</span><br><span class="line"><span class="title function_">fn</span>();</span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120200533098.png" alt="" style="zoom:67%;" /></p></li><li><p>案例-3</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">18</span>;</span><br><span class="line"><span class="title function_">f1</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> b = <span class="number">9</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(b);</span><br><span class="line"> <span class="keyword">var</span> a = <span class="string">'123'</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//预解析之后：</span></span><br><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> b;</span><br><span class="line"> <span class="keyword">var</span> a;</span><br><span class="line"> b = <span class="number">9</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// > undefined</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// > 9</span></span><br><span class="line"> a = <span class="string">'123'</span>;</span><br><span class="line">}</span><br><span class="line">a = <span class="number">18</span>;</span><br><span class="line"><span class="title function_">f1</span>();</span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120201019434-1668946228035-1.png" alt="" style="zoom:67%;" /></p></li><li><p>案例-4</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">f1</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(c);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> a = b = c = <span class="number">9</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(b);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(c);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 预解析之后：</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> a;</span><br><span class="line"> a = b = c = <span class="number">9</span>;</span><br><span class="line"> <span class="comment">// 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当全局变量看</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// > 9</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// > 9</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(c); <span class="comment">// > 9</span></span><br><span class="line">}</span><br><span class="line"><span class="title function_">f1</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(c); <span class="comment">// > 9</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// > 9</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure><p>输出结果：<img src="https://typora-xjw.oss-cn-chengdu.aliyuncs.com/img/image-20221120201730938.png" alt="" style="zoom:67%;" /></p></li></ol><h2 id="9-对象"><a href="#9-对象" class="headerlink" title="9.对象"></a>9.对象</h2><h4 id="1-1-什么是对象"><a href="#1-1-什么是对象" class="headerlink" title="1.1 什么是对象"></a>1.1 什么是对象</h4><blockquote><p>万物皆对象 一个具体的事务，看得见，摸得着。例如，一本书，一辆汽车，一个人</p></blockquote><ul><li>属性：事物的<strong>特征</strong>，来对象中用<strong>属性</strong>来表示(常用名词)</li><li>方法：事物的<strong>行为</strong>，在对象中用<strong>方法</strong>来表示(常用动词)</li></ul><h4 id="1-2-创建对象的三种方式"><a href="#1-2-创建对象的三种方式" class="headerlink" title="1.2 创建对象的三种方式"></a>1.2 创建对象的三种方式</h4><ol><li>在 JavaScript 中，现阶段可以采用三种方式来创建对象(object)<ul><li>利用<strong>字面量</strong>创建对象</li><li>利用 <strong>new Object</strong> 创建对象</li><li>利用<strong>构造函数</strong>创建对象</li></ul></li></ol><h5 id="1-2-1-利用字面量创建对象"><a href="#1-2-1-利用字面量创建对象" class="headerlink" title="1.2.1 利用字面量创建对象"></a>1.2.1 利用字面量创建对象</h5>]]></content>