-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyuyihua.html
1240 lines (672 loc) · 38.1 KB
/
yuyihua.html
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 class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">
<script src="/lib/pace/pace.min.js?v=1.0.2"></script>
<link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="html,">
<meta name="description" content="前言HTML是超文本标记（Hyper Text Markup Language）的缩写，在网页设计中又把它称为网页的结构层。它的学习很简单，只要多利用业余时间去记忆、练习，一到两天时间就能掌握，并写出一个简单页面。 这里推荐一个快速入门的网址：http://www.w3school.com.cn/ 一、对于html的学习1. 首先是对html的整体结构的认识，即&lt;!DOCTYPE htm">
<meta name="keywords" content="html">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML语义化">
<meta property="og:url" content="http://yoursite.com/yuyihua.html">
<meta property="og:site_name" content="林敏强的博客">
<meta property="og:description" content="前言HTML是超文本标记（Hyper Text Markup Language）的缩写，在网页设计中又把它称为网页的结构层。它的学习很简单，只要多利用业余时间去记忆、练习，一到两天时间就能掌握，并写出一个简单页面。 这里推荐一个快速入门的网址：http://www.w3school.com.cn/ 一、对于html的学习1. 首先是对html的整体结构的认识，即&lt;!DOCTYPE htm">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-12-13T11:34:54.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML语义化">
<meta name="twitter:description" content="前言HTML是超文本标记（Hyper Text Markup Language）的缩写，在网页设计中又把它称为网页的结构层。它的学习很简单，只要多利用业余时间去记忆、练习，一到两天时间就能掌握，并写出一个简单页面。 这里推荐一个快速入门的网址：http://www.w3school.com.cn/ 一、对于html的学习1. 首先是对html的整体结构的认识，即&lt;!DOCTYPE htm">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/yuyihua.html">
<title>HTML语义化 | 林敏强的博客</title>
</head>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left page-post-detail">
<div class="headband"></div>
<header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">林敏强的博客</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">study hard, play hard.</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-主页">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br>
主页
</a>
</li>
<li class="menu-item menu-item-标签">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
标签
</a>
</li>
<li class="menu-item menu-item-分类">
<a href="/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br>
分类
</a>
</li>
<li class="menu-item menu-item-归档">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
归档
</a>
</li>
<li class="menu-item menu-item-关于">
<a href="/about/" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br>
关于
</a>
</li>
<li class="menu-item menu-item-search">
<a href="javascript:;" class="popup-trigger">
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
搜索
</a>
</li>
</ul>
<div class="site-search">
<div class="popup search-popup local-search-popup">
<div class="local-search-header clearfix">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
<div class="local-search-input-wrapper">
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
</div>
</div>
<div id="local-search-result"></div>
</div>
</div>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/yuyihua.html">
<span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="LMQ">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/daima.png">
</span>
<span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="林敏强的博客">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">HTML语义化</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-07-10T08:35:11+08:00">
2017-07-10
</time>
</span>
<span class="post-category">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
<a href="/categories/前端技术/" itemprop="url" rel="index">
<span itemprop="name">前端技术</span>
</a>
</span>
</span>
<span class="post-meta-divider">|</span>
<span class="page-pv">
<span class="busuanzi-value" id="busuanzi_value_page_pv"></span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a><strong>前言</strong></h2><p><strong>HTML是超文本标记（Hyper Text Markup Language）的缩写，在网页设计中又把它称为网页的结构层。它的学习很简单，只要多利用业余时间去记忆、练习，一到两天时间就能掌握，并写出一个简单页面。</strong></p>
<blockquote>
<p>这里推荐一个快速入门的网址：<a href="http://www.w3school.com.cn/" target="_blank" rel="noopener">http://www.w3school.com.cn/</a></p>
</blockquote>
<h2 id="一、对于html的学习"><a href="#一、对于html的学习" class="headerlink" title="一、对于html的学习"></a><strong>一、对于html的学习</strong></h2><p><strong>1. 首先是对html的整体结构的认识，即<!DOCTYPE html>的声明、html标签、head标签、body标签；</strong></p>
<p><strong>2. 其次是对head里面的标签的认识和使用，如meta、link、title、script、style等，在网页的优化上特别重要；</strong></p>
<p><strong>3. 最后是对body里面的标签的认识和使用，这也是网页上面呈现的内容，学html大部分时间都要花在这上面。要对常用标签的含义、用法、性质以及自带的属性都要熟练掌握，不常用标签能知道含义以及用法。</strong></p>
<p><strong>要掌握的精髓就在于在什么样的情况下运用哪个标签才能达到最好的效果。</strong></p>
<h2 id="二、标签语义化"><a href="#二、标签语义化" class="headerlink" title="二、标签语义化"></a><strong>二、标签语义化</strong></h2><p><strong>1. 其重要作用在于：</strong></p>
<p><strong>2. 网页结构合理 ；</strong></p>
<p><strong>3. 利于开发调试和后期维护（让自己和别人能够比较容易看懂代码）；</strong></p>
<p><strong>4.利于搜索引擎SEO优化。搜索引擎不能识别内容，只能识别标签语义从而知道这部分是什么内容（让搜索引擎能看懂）。有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；</strong></p>
<p><strong>5.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）。</strong></p>
<p><strong>但是，必须认识到，并不是说我们只能使用有语义的标签，而应当是在需要有语义，需要被SEO识别的情况下才必须使用有语义标签（如自己网页的主题以及重要内容等）。在不需要的情况下，也根据情况使用无语义标签。如div加CSS的页面布局、span添加一些只为实现效果的块或者描述，不需要有语义，不然也容易造成语义混乱。这是因为由标签传达的含义比浏览器显示文本的方式更为重要</strong></p>
<h2 id="文字"><a href="#文字" class="headerlink" title="文字"></a><strong>文字</strong></h2><p><strong>1. 在有一段文字显示的情况下，必须使p标签来包含。里面可含有无语义标签div/span以及其他有语义的标签。 如：</strong><br><strong>blockquote块引用，长引用（要添加cite属性引用地址）、</strong><br><strong>q短的行内引用cite定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题著作的标题、</strong><br><strong>address文档作者或拥有者的联系信息、</strong><br><strong>code代码abbr缩写（要添加title标签说明原文）、</strong><br><strong>time时间、mark标注、ruby注释、</strong><br><strong>strong强调 （特别注意，这个标签权重很高，用于特别强调的文本。搜索引擎对其有很高的识别。）、</strong><br><strong>details可展开样式（details里面使用添加标题，后面接展开内容)等等……</strong></p>
<p><strong>2. 标题使用h1,h2,h3,h4标签,其中h5,h6权重太小一般不使用。其中的样式，即字体大小、颜色等都可以用CSS定义重新定义；</strong></p>
<p><strong>3. 标签中应该使用的是有含义的。基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。是浏览器和搜索引擎所能识别的。不应该使用纯粹为了设定样式而存在的标签。设定样式应当由样式表（CSS）完成。</strong></p>
<h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a><strong>图片</strong></h2><ol>
<li><p><strong>如果图片作为HTML的一部分，需要被搜索引擎识别，则用img，不需要，则可以使用背景来显示图片；</strong></p>
</li>
<li><p><strong>img标签中的alt和title属性。其中，alt属性用于图片描述，是给搜索引擎看的，图片无法显示时，显示alt中的文字。title属性也用于图片描述，是给用户看的，鼠标移动到图片时显示title中的文字。对于img标签，两个属性都尽量添加。（对于title值，在很多元素中都可以使用，比如在布局中无法完全显示的一条新闻或者消息等，在鼠标移动到上面时显示完全的内容是很好的一种用户体验）；</strong></p>
</li>
<li><p><strong>figure元素和figcaption元素。figure元素用于包含图片和图注，figurecaption元素用于表示图注文字。在有图片和图注的情况下，使用这两个元素会使页面语义更好。</strong></p>
</li>
</ol>
<h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a><strong>表格</strong></h2><p><strong>表格中有table、tr、td、th、caption、thead、tbody、tfoot。语义上，th为表头单元格，caption为表格标题，thead、tbody、tfoot把表格分为三部分。这三样在效果上并不需要用到，但在良好的语义上，尽量使用</strong></p>
<h2 id="表单"><a href="#表单" class="headerlink" title="表单"></a><strong>表单</strong></h2><p><strong>1. lable绑定控件。lable使用于关联控件，解释控件的意义以及有一定点击效果；</strong></p>
<p><strong>2. placeholder占位符值和value值。表单中文本框的默认值，类似提示文本。在需要用户输入文字的控件中尽量使用；</strong></p>
<p><strong>3. fieldset表单控件分组。（只在有需要的时候使用，多数表单不分组），legend标签为 fieldset 元素定义标题。</strong></p>
<h2 id="新增标签"><a href="#新增标签" class="headerlink" title="新增标签"></a><strong>新增标签</strong></h2><p><strong>在HTML5中添加了很多结构标签，增强了页面布局结构的语义，下面举例：</strong></p>
<p><strong>1. nav导航</strong></p>
<p><strong>2. section内容块区</strong></p>
<p><strong>3. article 文章</strong></p>
<p><strong>4. aside辅助信息</strong></p>
<p><strong>5. hgroup标题组合</strong></p>
<p><strong>6. footer页脚</strong></p>
<p><strong>7. header头部、标题</strong></p>
<p><strong>8. figure独立的流内容</strong></p>
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>
</div>
<div>
<div>
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
</div>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/html/" rel="tag"># html</a>
</div>
<div class="post-nav">
<div class="post-nav-next post-nav-item">
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
<a href="/lmq.html" rel="prev" title="如果这个城市夜晚没有风">
如果这个城市夜晚没有风 <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</div>
</article>
<div class="post-spread">
</div>
</div>
</div>
<div class="comments" id="comments">
<div id="lv-container" data-id="city" data-uid="MTAyMC80MTYwMC8xODE0Nw=="></div>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
文章目录
</li>
<li class="sidebar-nav-overview" data-target="site-overview-wrap">
站点概览
</li>
</ul>
<section class="site-overview-wrap sidebar-panel">
<div class="site-overview">
<div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image" src="/images/daima.png" alt="LMQ">
<p class="site-author-name" itemprop="name">LMQ</p>
<p class="site-description motion-element" itemprop="description">叩首问路,码梦为生❤</p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">8</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/index.html">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">分类</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/index.html">
<span class="site-state-item-count">4</span>
<span class="site-state-item-name">标签</span>
</a>
</div>
</nav>
</div>
</section>
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">
<div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#一、对于html的学习"><span class="nav-number">2.</span> <span class="nav-text">一、对于html的学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、标签语义化"><span class="nav-number">3.</span> <span class="nav-text">二、标签语义化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文字"><span class="nav-number">4.</span> <span class="nav-text">文字</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#图片"><span class="nav-number">5.</span> <span class="nav-text">图片</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表格"><span class="nav-number">6.</span> <span class="nav-text">表格</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单"><span class="nav-number">7.</span> <span class="nav-text">表单</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#新增标签"><span class="nav-number">8.</span> <span class="nav-text">新增标签</span></a></li></ol></div>
</div>
</section>
<!--/noindex-->
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">© 2017 — <span itemprop="copyrightYear">2021</span>
<span class="with-love" id="heart">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">LMQ</span>
</div>
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
<!--
<div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>
<span class="post-meta-divider">|</span>
<div class="theme-info">主题 — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>
-->
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count"> | 博客全站共7.4k 字 </span>
</div>
<div class="setion">
<div class="powered-by"></div>
<a class="theme-link" target="_blank" href="http://beian.miit.gov.cn/">闽ICP备2021008220</a>
</div>
<div class="busuanzi-count">
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span class="site-uv">
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
</span>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<script type="text/javascript">
// Popup Window;
var isfetched = false;
var isXml = true;
// Search DB path;
var search_path = "search.xml";
if (search_path.length === 0) {
search_path = "search.xml";
} else if (/json$/i.test(search_path)) {
isXml = false;
}
var path = "/" + search_path;
// monitor main search box;
var onPopupClose = function (e) {
$('.popup').hide();
$('#local-search-input').val('');
$('.search-result-list').remove();
$('#no-result').remove();
$(".local-search-pop-overlay").remove();
$('body').css('overflow', '');
}
function proceedsearch() {
$("body")
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
.css('overflow', 'hidden');
$('.search-popup-overlay').click(onPopupClose);
$('.popup').toggle();
var $localSearchInput = $('#local-search-input');
$localSearchInput.attr("autocapitalize", "none");
$localSearchInput.attr("autocorrect", "off");
$localSearchInput.focus();
}
// search function;
var searchFunc = function(path, search_id, content_id) {
'use strict';
// start loading animation
$("body")
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
'<div id="search-loading-icon">' +
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
'</div>' +
'</div>')
.css('overflow', 'hidden');
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
$.ajax({
url: path,
dataType: isXml ? "xml" : "json",
async: true,
success: function(res) {
// get the contents from search data
isfetched = true;
$('.popup').detach().appendTo('.header-inner');
var datas = isXml ? $("entry", res).map(function() {
return {
title: $("title", this).text(),
content: $("content",this).text(),
url: $("url" , this).text()
};
}).get() : res;
var input = document.getElementById(search_id);
var resultContent = document.getElementById(content_id);
var inputEventFunction = function() {
var searchText = input.value.trim().toLowerCase();
var keywords = searchText.split(/[\s\-]+/);
if (keywords.length > 1) {
keywords.push(searchText);
}
var resultItems = [];
if (searchText.length > 0) {
// perform local searching
datas.forEach(function(data) {
var isMatch = false;
var hitCount = 0;
var searchTextCount = 0;
var title = data.title.trim();
var titleInLowerCase = title.toLowerCase();
var content = data.content.trim().replace(/<[^>]+>/g,"");
var contentInLowerCase = content.toLowerCase();
var articleUrl = decodeURIComponent(data.url);
var indexOfTitle = [];
var indexOfContent = [];
// only match articles with not empty titles
if(title != '') {
keywords.forEach(function(keyword) {
function getIndexByWord(word, text, caseSensitive) {
var wordLen = word.length;
if (wordLen === 0) {
return [];
}
var startPosition = 0, position = [], index = [];
if (!caseSensitive) {
text = text.toLowerCase();
word = word.toLowerCase();