-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1363 lines (970 loc) · 61 KB
/
index.html
File metadata and controls
1363 lines (970 loc) · 61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#dd6600"><meta name="generator" content="Hexo 7.3.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#dd6600">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha256-XOqroi11tY4EFQMR9ZYwZWKj5ZXiftSx36RRuC3anlA=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
<script class="next-config" data-name="main" type="application/json">{"hostname":"dumbdaidai.github.io","root":"/","images":"/images","scheme":"Pisces","darkmode":false,"version":"8.20.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"copycode":{"enable":false,"style":null},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>
<meta name="description" content="DumbDaiDai的个人博客">
<meta property="og:type" content="website">
<meta property="og:title" content="素心阁">
<meta property="og:url" content="https://dumbdaidai.github.io/index.html">
<meta property="og:site_name" content="素心阁">
<meta property="og:description" content="DumbDaiDai的个人博客">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="DumbDaiDai">
<meta property="article:tag" content="摸鱼 划水 摆烂 投降">
<meta name="twitter:card" content="summary">
<link rel="canonical" href="https://dumbdaidai.github.io/">
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"index.html","title":""}</script>
<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>素心阁</title>
<noscript>
<link rel="stylesheet" href="/css/noscript.css">
</noscript>
<link rel="alternate" href="/atom.xml" title="素心阁" type="application/atom+xml">
</head>
<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
<div class="headband"></div>
<main class="main">
<div class="column">
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切换导航栏" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<i class="logo-line"></i>
<h1 class="site-title">素心阁</h1>
<i class="logo-line"></i>
</a>
<p class="site-subtitle" itemprop="description">不问垂云落霞处，一泓清影鉴素心</p>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger" aria-label="搜索" role="button">
<i class="fa fa-search fa-fw fa-lg"></i>
</div>
</div>
</div>
<nav class="site-nav">
<ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
<li class="menu-item menu-item-search">
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
</a>
</li>
</ul>
</nav>
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off" maxlength="80"
placeholder="搜索..." spellcheck="false"
type="search" class="search-input">
</div>
<span class="popup-btn-close" role="button">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div class="search-result-container">
<div class="search-result-icon">
<i class="fa fa-spinner fa-pulse fa-5x"></i>
</div>
</div>
</div>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-inner sidebar-overview-active">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
文章目录
</li>
<li class="sidebar-nav-overview">
站点概览
</li>
</ul>
<div class="sidebar-panel-container">
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
<p class="site-author-name" itemprop="name">DumbDaiDai</p>
<div class="site-description" itemprop="description">DumbDaiDai的个人博客</div>
</div>
<div class="site-state-wrap animated">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">104</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/">
<span class="site-state-item-count">7</span>
<span class="site-state-item-name">分类</span></a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">22</span>
<span class="site-state-item-name">标签</span></a>
</div>
</nav>
</div>
<div class="cc-license animated" itemprop="license">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-CN" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
</div>
</div>
</div>
</div>
<div class="sidebar-inner sidebar-blogroll">
<div class="links-of-blogroll animated">
<div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
链接
</div>
<ul class="links-of-blogroll-list">
<li class="links-of-blogroll-item">
<a href="https://zjutjh.github.io/" title="https://zjutjh.github.io" rel="noopener" target="_blank">精弘网络RSS看板</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://blog.mggo.xyz/" title="https://blog.mggo.xyz" rel="noopener" target="_blank">MangoGovo的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://hstardawn.github.io/" title="https://hstardawn.github.io" rel="noopener" target="_blank">StarDawn的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://meaquaowo.github.io/" title="https://meaquaowo.github.io" rel="noopener" target="_blank">Stellairs的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://zheyi.in/" title="https://zheyi.in" rel="noopener" target="_blank">折乙的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://missmoli.github.io/" title="https://missmoli.github.io" rel="noopener" target="_blank">Zihan的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://www.imjh.xyz/about" title="https://www.imjh.xyz/about" rel="noopener" target="_blank">mjh的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://fufffh.github.io/" title="https://fufffh.github.io" rel="noopener" target="_blank">fufffh的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://blog.minhan.host/" title="https://blog.minhan.host" rel="noopener" target="_blank">Minhan的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://blog.sugarmgp.cn/" title="https://blog.sugarmgp.cn" rel="noopener" target="_blank">SugarMGP的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://site.j10c.cc/zh-cn" title="https://site.j10c.cc/zh-cn" rel="noopener" target="_blank">J10c的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://www.f1nley.xyz/zh" title="https://www.f1nley.xyz/zh" rel="noopener" target="_blank">Finley Ge的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://blog.bluebird.icu/" title="https://blog.bluebird.icu" rel="noopener" target="_blank">青鸟的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://www.lonesome.cn/" title="https://www.lonesome.cn" rel="noopener" target="_blank">惜寞的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://blog.phlin.cn/" title="https://blog.phlin.cn" rel="noopener" target="_blank">望舒的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://zhul.in/" title="https://zhul.in" rel="noopener" target="_blank">竹林里有冰的博客</a>
</li>
<li class="links-of-blogroll-item">
<a href="https://situchengxiang.pages.dev/" title="https://situchengxiang.pages.dev" rel="noopener" target="_blank">司徒和丞相的博客</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<div class="main-inner index posts-expand">
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/4202/09/07/%E7%BB%99%E9%B8%BD%E4%BD%8D%E8%80%B6%E9%AC%BC%E8%BE%A3/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/4202/09/07/%E7%BB%99%E9%B8%BD%E4%BD%8D%E8%80%B6%E9%AC%BC%E8%BE%A3/" class="post-title-link" itemprop="url">给🕊位👻🌶</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：4202-09-07 12:46:38" itemprop="dateCreated datePublished" datetime="4202-09-07T12:46:38+08:00">4202-09-07</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E6%9D%82%E9%A1%B9/" itemprop="url" rel="index"><span itemprop="name">杂项</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>69</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>1 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>给🎼✌ 望✌ 🐱✌ 🦈皇 🧊✌ 涵✌ 童🔪 ⭐✌ 赵✌ 红✌ 折✌ 🥬✌ 等7️⃣他1️⃣🍉列✌端🍵🫗💧<br>🎲🐘🌶 ✋😭✋<br>给🕊位✌👻🌶</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2026/02/12/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2026/02/12/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/" class="post-title-link" itemprop="url">公众号排版进阶-WEB技术1引子：拿盒子画画的艺术</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2026-02-12 18:19:24" itemprop="dateCreated datePublished" datetime="2026-02-12T18:19:24+08:00">2026-02-12</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88/" itemprop="url" rel="index"><span itemprop="name">公众号排版</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>2.1k</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>4 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="1-什么是WEB技术"><a href="#1-什么是WEB技术" class="headerlink" title="1. 什么是WEB技术"></a>1. 什么是WEB技术</h2><p>WEB技术，浅显来说，就是<strong>做网站的技术</strong>。<br>听着吓人，其实呢，我们只需要学习它的冰山一角就可以了，其他的部分都跟我们没什么关系。<br>具体来说，我们学习的是<strong>HTML5</strong>和<strong>CSS3</strong>的一小部分✅️<br>为什么我们要学习WEB技术？<br>很简单，因为我们做的公众号图文本质上就是网站💻</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/5e7c9fa5ee8a31acf3cd26a75f3a382651bac4641f5a27b1886543090dbbc320.png" style="max-height: 300px" /></div>
<p>在图文编辑器中打开HTML功能，可以看到，所有东西本质上其实都是HTML。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/3eee25e0375bc54a7bbf8c4b7282f93c8ab059d1ca5b4f2c611bfe0bac46faea.png" style="max-height: 300px" /></div>
<p>因此，只要学会了这项技术，我们就可以做出各种各样的效果😍<br>可以修改、微调素材库中其他人做的组件，也可以按照自己的想法，定制出自己的组件😋</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/8028cecc478980dfc4358c8a238dda2a85a9f20f581013aabe515675fdc4dc18.png" style="max-height: 300px" /></div>
<h2 id="2-本系列教程包括哪些内容"><a href="#2-本系列教程包括哪些内容" class="headerlink" title="2. 本系列教程包括哪些内容"></a>2. 本系列教程包括哪些内容</h2><p>教程分为14个部分：</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/b9ac6a008fa527cef99ce240200b02876f829948be60b417dc87bd360d37b97e.png" style="max-height: 300px" /></div>
<p>有同学可能觉得，这也太多了，不想学了怎么办。其实，我们只会涉及到公众号图文排版用得上的内容，体量不会太大👌<br>不过也正因如此，教程中的所有结论都主要适用于公众号图文排版，不能完全推广到网站制作等领域。<br>另外，我们的教程大多是独立的，可以跳着学，也可以用到什么学什么，并不需要一次全部学完。<br>不过教程的前四篇属于基础，建议学一下，没完全学会的话也没关系，实践中自然就会了。</p>
<h2 id="3-如何学习这项技术"><a href="#3-如何学习这项技术" class="headerlink" title="3. 如何学习这项技术"></a>3. 如何学习这项技术</h2><p>学习技术和念书有很大的差别。念书是考什么学什么，考的东西都写在课本上，全学完了再去考；学习技术是用什么学什么，内容很广，细挖的话能挖很深，不可能全都学会，也不可能提前知道哪些知识会用到。<br>因此，任何教程都只是提纲挈领的“目录”，要想学好这项技术，一定要学会“查字典”。查<strong>搜索引擎</strong>、看<strong>手册</strong>、问<strong>AI</strong>、阅读<strong>前人</strong>的博客……离开了这些，我们什么也学不会。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/e3a34003610211239bd550eee579118632024e7d03522e816a4764fa30d82df0.png" style="max-height: 300px" /></div>
<p>推荐三个实用的参考网站：<br><strong>MDN手册：</strong><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web">https://developer.mozilla.org/zh-CN/docs/Web</a><br><strong>W3school：</strong><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/">https://www.w3school.com.cn</a><br><strong>菜鸟教程：</strong><a target="_blank" rel="noopener" href="https://www.runoob.com/html/html-css.html">https://www.runoob.com/html/html-css.html</a><br>再次强调，这些东西属于“字典”，属于参考资料，其中的大部分内容我们是用不上的，千万不能胡子眉毛一把抓，把里面的内容当课本啃，而是应当看菜吃饭，量体裁衣。</p>
<h2 id="4-初识HTML与Style"><a href="#4-初识HTML与Style" class="headerlink" title="4. 初识HTML与Style"></a>4. 初识HTML与Style</h2><h3 id="4-1-HTML"><a href="#4-1-HTML" class="headerlink" title="4.1 HTML"></a>4.1 HTML</h3><p><strong>HTML</strong>，全称<strong>HyperText Markup Language</strong>，即<strong>超文本标记语言</strong>。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/04ccea52c8b12365f21869bcdf20eb5763f1d2cde06f1abafd82708ef1dcfb00.png" style="max-height: 300px" /></div>
<p>超文本，其实就是“点一下就能跳转到别的地方”的链接，也就是这玩意⬇️</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/853875a58c47feb34c7a1bd1edb43dab67785f7ade81c0e8c4079c88f3576e1f.png" style="max-height: 300px" /></div>
<p>超文本根本不需要我们自己做，公众号平台会帮我们做好。所以，我们可以直接把HT划掉，只学ML就好啦✌</p>
<p>那么，ML，标记语言，又是什么东西呢？是英语俄语西班牙语那种吗？是Python Java C那种吗？是不是要学很多东西呀😨</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/fb2f1b541332a6ca811fb05c0b7e01e00e0cec5384cd0f3e146c0532ac5547b9.png" style="max-height: 300px" /></div>
<p>其实都不是，不要被它的名字吓到啦。标记，顾名思义，就是<strong>贴标签</strong>。<br>只要给我们的文字贴上标签，浏览器就能知道我们想要什么效果。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/120d2043b82bb4dfc3f39a13cbf3f3b26cddfa723c32662397968f824d52fb0d.png" style="max-height: 300px" /></div>
<p>但是我们手里只有键盘，没有标签，我们要如何<strong>用键盘表示标签</strong>呢？🤔<br>有同学说，很简单呀，我们在需要贴标签的地方，标注起止位置，不就可以了吗：</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/bb6e25c61b1e2ef5c51ee5b05fbb317fee48bca5f7e0c755f4e256f68e895ee3.png" style="max-height: 100px" /></div>
<p>看上去很合理，但这种方案存在歧义😵<br>我们无从知晓，“标签开始”“标签结束”究竟是<strong>标签位置的标志</strong>，还是<strong>标签内正文</strong>的一部分。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/9e8f141c7e36c9d83449910a4d79146d5fcd010566ca77fb676416a3ef1fda07.png" style="max-width: 300px" /></div>
<p>解决起来很简单😋只要用特殊的符号，包裹住我们的标志，就不会有歧义了。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/8b7200f43d075ef0d5f192f6e0f025f2ce307deb1d542d38748302d9daf98f12.png" style="max-height: 100px" /></div>
<p>被<strong>尖括号</strong>包裹的部分，就是标签开始和结束的标志；没有尖括号的部分，就原样显示。<br>非常清晰，再也不会弄混了！🫡</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/f16d5e1034fbf3474a52af44a2f6a19dd179d1fcd75ccf25f4080536b3a50c10.png" style="max-width: 300px" /></div>
<p>为了提高效率，我们可以使用<strong>英文</strong>，再改用特殊符号 <strong>“/”</strong> 来区分开始和结束👍</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/705b9ceefc155eb6f82152a064c5a7d73bad9feef10957a72a013841d69a4579.png" style="max-height: 200px" /></div>
<p>🍾恭喜你！发明了<strong>标记语言</strong>！</p>
<h3 id="4-2-CSS"><a href="#4-2-CSS" class="headerlink" title="4.2 CSS"></a>4.2 CSS</h3><p><strong>CSS</strong>，全称<strong>Cascading Style Sheets</strong>，即<strong>层叠样式表</strong>。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/8987a9835ab97f96195537e233b4e4f21d8e4b9e280d2241bbcc64920c17d183.png" style="max-height: 300px" /></div>
<p>别慌，我们不用学<strong>层叠</strong>，也不用学<strong>表</strong>，只需要学<strong>样式</strong>就好啦😄是不是简单多了？<br>我们现在已经学会了怎么写标签了，可是我们的标签还没有样式，相当于一个空白标签，贴与不贴毫无区别。<br>那么，我们要怎么把样式写进标签里呢？</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/c4ea89fe6f61a4dceeedd873b754c72e5ad439495eb5eb208d33d7c919d9cdda.png" style="max-height: 300px" /></div>
<p>很简单，照猫画虎就好啦。从最简单的方案开始，用<strong>英文引号</strong>划定边界，再把中文改成英文：</p>
<div align="center"><img alt="动图" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/427bd78b3400c8ea4792fc1e4ca1c45171e1b4927624d7b0019bb6a21b8edc23.gif" style="max-height: 400px" /></div>
<p>当当当当！完工啦🌶️</p>
<h3 id="4-3-实际写出来长什么样？"><a href="#4-3-实际写出来长什么样？" class="headerlink" title="4.3 实际写出来长什么样？"></a>4.3 实际写出来长什么样？</h3><blockquote>
<p>这是攻，这是防，这是苇名弦一郎。<br>这是乘，这是除，这是费马大定理。</p>
</blockquote>
<p>现在我们已经学会了HTML和Style的书写方法。<br>芜湖，结课！马上开始实战吧：</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/a5e35c0937ef8590ff014b40d68d46089d2cce5b26ad21cd80d25462dd0a4f1d.png" style="max-height: 300px" /></div>
<p>这叽里咕噜说的啥呀😵💫俺都看花眼了，现在退课还来得及吗？<br>哈哈，看来我们还有不少东西要学呢。<br>不过大家也不要被这一团代码吓到了。其实，我们的<strong>图文编辑器</strong>能够帮我们完成大部分工作，并不需要我们一个字一个字手敲。<br>我们要做的仅仅是一些微调工作，大部分时候只需要读得懂即可。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/1c921cf0b0c198e62d506e52b750e9e83b58898a490244238e4ef114f525b79d.png" style="max-height: 300px" /></div>
<h3 id="4-4-拿盒子画画-为啥一直在讲标签"><a href="#4-4-拿盒子画画-为啥一直在讲标签" class="headerlink" title="4.4 拿盒子画画 为啥一直在讲标签"></a>4.4 拿盒子画画 为啥一直在讲标签</h3><p>很简单：<strong>标签就是盒子 盒子就是标签！</strong><br>比方说一个这样的组件，有四张照片，右上角和左下角还有两个直角形状的线条装饰，它是如何完成的呢？</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/7a14c074441ebb0fe0753f41fc38c3c21a01beb1088efeb28fe3eeadeec5be3e.png" style="max-height: 300px" /></div>
<p>首先，我们贴一个巨大的标签，把这六张图片包装到一起。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/1f8d07ebc8c32f07d84756e38f09707c38645cdb931e325eeacc0220e23ab06b.png" style="max-height: 300px" /></div>
<p>然后我们在左下角和右上角贴上我们的线条装饰。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/fa7ae4ee4d16ead183a17ceb655c450def6de8937ab7777517b94d5e14aa0b0f.png" style="max-height: 300px" /></div>
<p>最后依次把我们的四张照片贴上去，就完工啦。</p>
<div align="center"><img alt="图片" src="/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%92%E7%89%88%E8%BF%9B%E9%98%B6-WEB%E6%8A%80%E6%9C%AF1%E5%BC%95%E5%AD%90%EF%BC%9A%E6%8B%BF%E7%9B%92%E5%AD%90%E7%94%BB%E7%94%BB%E7%9A%84%E8%89%BA%E6%9C%AF/8100bb898472706f2faa365061015edaaaf746107e2a3ab3b325fca131515c60.png" style="max-height: 300px" /></div>
<p><strong>大盒子装着小盒子，小盒子装着文字或图片</strong>，这就是HTML标签的结构。是不是非常清晰呢？</p>
<hr>
<p>引子的内容到这里就结束啦。在这篇教程中，我们对于后面要学习的内容有了简单模糊的认识，感受了HTML和Style大概的书写方式。</p>
<p>下一篇教程 <strong>《标签：抄起盒子搭建一切》</strong>，我们将具体学习HTML中的各类标签，开启我们的实战之旅。<br>其实我们要学的东西真的很简单，能够耐下心来看到这里，你已经成功了一半啦！打起精神，我们继续前进吧💪</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2026/01/02/%E6%97%A0%E9%A2%98%C2%B7%E9%97%B2%E5%9A%BC%E5%8D%8A%E6%9B%B2%E8%B5%A0%E4%BD%95%E4%BA%BA/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2026/01/02/%E6%97%A0%E9%A2%98%C2%B7%E9%97%B2%E5%9A%BC%E5%8D%8A%E6%9B%B2%E8%B5%A0%E4%BD%95%E4%BA%BA/" class="post-title-link" itemprop="url">无题·闲嚼半曲赠何人</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2026-01-02 23:16:12" itemprop="dateCreated datePublished" datetime="2026-01-02T23:16:12+08:00">2026-01-02</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E4%BB%BF%E5%8F%A4%E8%AF%97%E6%AD%8C/" itemprop="url" rel="index"><span itemprop="name">仿古诗歌</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>64</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>1 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>闲嚼半曲赠何人？软吁熬得懒灯尽。<br>宜共杯盏无共镜，易知眉眼难知心。<br>水墨流风吹醉醒，金石凝霭荡波平。<br>饮泪贪欢扮酩酊，陈霜旧雪沾袖襟。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2025/06/26/%E4%BB%95%E5%AD%90/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2025/06/26/%E4%BB%95%E5%AD%90/" class="post-title-link" itemprop="url">仕子</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2025-06-26 21:18:42" itemprop="dateCreated datePublished" datetime="2025-06-26T21:18:42+08:00">2025-06-26</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E4%BB%BF%E5%8F%A4%E8%AF%97%E6%AD%8C/" itemprop="url" rel="index"><span itemprop="name">仿古诗歌</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>64</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>1 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>朗朗乾坤云作镜，纷纷烟雨众成林。<br>一场闹剧一出景，几般生意几门心。<br>萍水阡陌无义信，鱼龙江湖有明清？<br>莫笑孔孟绝踪影，谁云老庄欲安宁！</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2025/06/19/%E6%97%A0%E9%A2%98%C2%B7%E6%B9%96%E6%B2%B3%E6%84%BF%E6%B2%BB%E7%BB%88%E6%9C%89%E5%87%80/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2025/06/19/%E6%97%A0%E9%A2%98%C2%B7%E6%B9%96%E6%B2%B3%E6%84%BF%E6%B2%BB%E7%BB%88%E6%9C%89%E5%87%80/" class="post-title-link" itemprop="url">无题·湖河愿治终有净</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2025-06-19 12:58:37" itemprop="dateCreated datePublished" datetime="2025-06-19T12:58:37+08:00">2025-06-19</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E4%BB%BF%E5%8F%A4%E8%AF%97%E6%AD%8C/" itemprop="url" rel="index"><span itemprop="name">仿古诗歌</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>64</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>1 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>湖河愿治终有净，血骨欲饮独无清。<br>金峰玉海千重岭，凝霜雾月百丈冰。<br>痴云足托周君鼎，疑烟不显秦王镜。<br>世间万难俱有解，一难无解在人心。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2025/06/04/%E7%81%B5%E9%9A%90/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2025/06/04/%E7%81%B5%E9%9A%90/" class="post-title-link" itemprop="url">灵隐</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2025-06-04 08:21:49" itemprop="dateCreated datePublished" datetime="2025-06-04T08:21:49+08:00">2025-06-04</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E4%BB%BF%E5%8F%A4%E8%AF%97%E6%AD%8C/" itemprop="url" rel="index"><span itemprop="name">仿古诗歌</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>64</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>1 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>一分古气居灵隐，百般禅机在深林。<br>飞来奇峰非仙岭，请去佛缘须素心。<br>空舟不渡盈囊意，净莲难采浊世音。<br>莫使人心对明镜，明镜无处问凡情。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2025/05/04/%E4%BA%94%E5%9B%9B/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2025/05/04/%E4%BA%94%E5%9B%9B/" class="post-title-link" itemprop="url">五四</a>
</h2>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2025-05-04 20:41:12" itemprop="dateCreated datePublished" datetime="2025-05-04T20:41:12+08:00">2025-05-04</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E4%BB%BF%E5%8F%A4%E8%AF%97%E6%AD%8C/" itemprop="url" rel="index"><span itemprop="name">仿古诗歌</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>32</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>1 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>山雷日海风炉铁，泥霜雾月骨泪尘。<br>五四烟炬今尚在，不见当年传火人。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
<link itemprop="mainEntityOfPage" href="https://dumbdaidai.github.io/2025/04/30/%E7%BE%BD%E5%8C%96%E4%BB%99/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="DumbDaiDai">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="素心阁">
<meta itemprop="description" content="DumbDaiDai的个人博客">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="undefined | 素心阁">
<meta itemprop="description" content="">
</span>