-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
1254 lines (826 loc) · 90.3 KB
/
index.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>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>菜菜的博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="菜菜的博客">
<meta property="og:type" content="website">
<meta property="og:title" content="菜菜的博客">
<meta property="og:url" content="http://yoursite.com/page/5/index.html">
<meta property="og:site_name" content="菜菜的博客">
<meta property="og:description" content="菜菜的博客">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="菜菜的博客">
<meta name="twitter:description" content="菜菜的博客">
<link rel="alternative" href="/atom.xml" title="菜菜的博客" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div class="left-col">
<div class="overlay"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img lazy-src="/img/ccz.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">菜菜</a></h1>
</hgroup>
<p class="header-subtitle">菜菜的博客</p>
<div class="switch-btn">
<div class="icon">
<div class="icon-ctn">
<div class="icon-wrap icon-house" data-idx="0">
<div class="birdhouse"></div>
<div class="birdhouse_holes"></div>
</div>
<div class="icon-wrap icon-ribbon hide" data-idx="1">
<div class="ribbon"></div>
</div>
<div class="icon-wrap icon-link hide" data-idx="2">
<div class="loopback_l"></div>
<div class="loopback_r"></div>
</div>
<div class="icon-wrap icon-me hide" data-idx="3">
<div class="user"></div>
<div class="shoulder"></div>
</div>
</div>
</div>
<div class="tips-box hide">
<div class="tips-arrow"></div>
<ul class="tips-inner">
<li>Menu</li>
<li>Tags</li>
<li>Links</li>
<li>About</li>
</ul>
</div>
</div>
<div class="switch-area">
<div class="switch-wrap">
<section class="switch-part switch-part1">
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tags">标签</a></li>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="#" title="github">github</a>
<a class="weibo" target="_blank" href="#" title="weibo">weibo</a>
<a class="rss" target="_blank" href="#" title="rss">rss</a>
<a class="zhihu" target="_blank" href="#" title="zhihu">zhihu</a>
</div>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
<a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/git/" style="font-size: 13.33px;">git</a> <a href="/tags/html5/" style="font-size: 10px;">html5</a> <a href="/tags/java/" style="font-size: 20px;">java</a> <a href="/tags/javascript/" style="font-size: 13.33px;">javascript</a> <a href="/tags/linux/" style="font-size: 10px;">linux</a> <a href="/tags/maven/" style="font-size: 10px;">maven</a> <a href="/tags/memcached/" style="font-size: 10px;">memcached</a> <a href="/tags/mongodb/" style="font-size: 10px;">mongodb</a> <a href="/tags/mysql/" style="font-size: 10px;">mysql</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/oracle/" style="font-size: 10px;">oracle</a> <a href="/tags/redis/" style="font-size: 10px;">redis</a> <a href="/tags/soa/" style="font-size: 16.67px;">soa</a> <a href="/tags/solr/" style="font-size: 10px;">solr</a> <a href="/tags/tomcat/" style="font-size: 10px;">tomcat</a> <a href="/tags/随笔/" style="font-size: 10px;">随笔</a>
</div>
</section>
<section class="switch-part switch-part3">
<div id="js-friends">
<a target="_blank" class="main-nav-link switch-friends-link" href="http://blog.didispace.com">程序猿DD</a>
</div>
</section>
<section class="switch-part switch-part4">
<div id="js-aboutme">我是谁，我从哪里来，我到哪里去？我就是我，是颜色不一样的吃货…</div>
</section>
</div>
</div>
</header>
</div>
</div>
<div class="mid-col">
<nav id="mobile-nav">
<div class="overlay">
<div class="slider-trigger"></div>
<h1 class="header-author js-mobile-header hide">菜菜</h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img lazy-src="/img/ccz.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author">菜菜</h1>
</hgroup>
<p class="header-subtitle">菜菜的博客</p>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tags">标签</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="#" title="github">github</a>
<a class="weibo" target="_blank" href="#" title="weibo">weibo</a>
<a class="rss" target="_blank" href="#" title="rss">rss</a>
<a class="zhihu" target="_blank" href="#" title="zhihu">zhihu</a>
</div>
</nav>
</header>
</div>
</nav>
<div class="body-wrap">
<article id="post-redis的图形化工具" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/redis的图形化工具/" class="article-date">
<time datetime="2016-04-28T09:15:35.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/redis的图形化工具/">redis的图形化工具</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>redis的图形化工具</p>
<p>2015-10-29 Rails365 运维帮</p>
<ol>
<li>介绍</li>
</ol>
<p>本篇会介绍几个关于redis的图形化的监控工具和管理工具。</p>
<ol>
<li>redis-stat</li>
</ol>
<p>redis-stat（<a href="https://github.com/junegunn/redis-stat）提供终端和web端的监控页面，它安装和使用起来很简单。" target="_blank" rel="external">https://github.com/junegunn/redis-stat）提供终端和web端的监控页面，它安装和使用起来很简单。</a></p>
<p>安装只需要一条指令。</p>
<p>$ gem install redis-stat</p>
<p>运行更简单。</p>
<p>$ redis-stat</p>
<p>效果图如下：</p>
<p>也可以以server的形式运行，默认情况下是监听在63790端口。</p>
<p>$ redis-stat –server</p>
<p>还可以以后台进程的形式开启服务。</p>
<p>redis-stat –server –daemon</p>
<p>效果图如下：</p>
<ol>
<li>redis-browser</li>
</ol>
<p>redis-browser（<a href="https://github.com/monterail/redis-browser）是redis的web端的图形化管理工具。利用它可以查看和管理redis的数据，界面很简洁，安装和使用这个工具也比较简单，而且它还能和rails应用结合在一起。" target="_blank" rel="external">https://github.com/monterail/redis-browser）是redis的web端的图形化管理工具。利用它可以查看和管理redis的数据，界面很简洁，安装和使用这个工具也比较简单，而且它还能和rails应用结合在一起。</a></p>
<p>安装。</p>
<p>$ gem install redis-browser</p>
<p>要使用也只是需要一条命令。</p>
<p>$ redis-browser</p>
<p>效果图如下:</p>
<ol>
<li>redmon</li>
</ol>
<p>redmon也是一个监控redis运行情况的页面监控工具。</p>
<p>安装。</p>
<p>$ gem install redmon</p>
<p>使用。</p>
<p>$ redmon</p>
<p>效果图如下：</p>
<p>完结。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/redis/">redis</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-maven常用命令" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/maven常用命令/" class="article-date">
<time datetime="2016-04-28T09:14:54.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/maven常用命令/">maven常用命令</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>maven 全球中心仓库 <a href="http://mirrors.ibiblio.org/maven2/org/apache/" target="_blank" rel="external">http://mirrors.ibiblio.org/maven2/org/apache/</a></p>
<p>Sonatype Nexus 搭建Maven 私服</p>
<p>mvn -v 查看版本<br>mvn compile 编译<br>mvn test 测试<br>mvn clean 清楚编译文件<br>mvn package 把项目打成jar包<br>mvn install 导入<br>mvn archetype:generate 更换本地仓库后下载maven骨架</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/maven/">maven</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="scp-远程免密码copy文件" class="article article-type-scp" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/远程免密码copy文件/" class="article-date">
<time datetime="2016-04-28T09:13:48.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/远程免密码copy文件/">远程免密码copy文件</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>1.先安装expect<br>yum -y install expect<br>2.脚本内容:<br>cat auto_svn.sh</p>
<p>#!/bin/bash<br>passwd=’123456’<br>/usr/bin/expect <<-EOF<br>set time 30<br>spawn ssh -p18330 [email protected]<br>expect {<br>“<em>yes/no” { send “yes＼r”; exp_continue }<br>“</em>password:” { send “$passwd＼r” }<br>}<br>expect “<em>#”<br>send “cd /home/trunk＼r”<br>expect “</em>#”<br>send “svn up＼r”<br>expect “*#”<br>send “exit＼r”<br>interact<br>expect eof<br>EOF</p>
<p>expect的简单用法及举例</p>
<p>#!/usr/bin/expect -f<br>set password 123456</p>
<p>#download<br>spawn scp [email protected]:/root/a.wmv /home/yangyz/<br>set timeout 300<br>expect “[email protected]’s password:”<br>set timeout 300<br>send “$passwordr”<br>set timeout 300<br>send “exitr”<br>expect eof</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/linux/">linux</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-javascript-闭包" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/javascript-闭包/" class="article-date">
<time datetime="2016-04-28T09:13:02.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/javascript-闭包/">javascript----闭包</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>包</p>
<p>阅读: 9165<br>函数作为返回值</p>
<p>高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。<br>我们来实现一个对Array的求和。通常情况下，求和的函数是这样定义的：<br>functionsum(arr) {return arr.reduce(function(x, y) {return x + y;<br> });<br>}</p>
<p>sum([1, 2, 3, 4, 5]); // 15<br>但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！<br>functionlazy_sum(arr) {var sum = function() {return arr.reduce(function(x, y) {return x + y;<br> });<br> }<br> return sum;<br>}<br>当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：<br>var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()<br>调用函数f时，才真正计算求和的结果：<br>f(); //15<br>在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。<br>请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：<br>var f1 = lazy_sum([1, 2, 3, 4, 5]);<br>var f2 = lazy_sum([1, 2, 3, 4, 5]);<br>f1 === f2; // false<br>f1()和f2()的调用结果互不影响。<br>闭包</p>
<p>注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。<br>另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子：<br>functioncount() {var arr = [];<br> for (var i=1; i<=3; i++) {<br> arr.push(function() {return i * i;<br> });<br> }<br> return arr;<br>}</p>
<p>var results = count();<br>var f1 = results[0];<br>var f2 = results[1];<br>var f3 = results[2];<br>在上面的例子中，每次循环，都创建了一个新的函数，然后，把创建的3个函数都添加到一个Array中返回了。<br>你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：<br>f1(); //16<br>f2(); //16<br>f3(); //16<br>全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。<br>返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。<br>如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：<br>functioncount() {var arr = [];<br> for (var i=1; i<=3; i++) {<br> arr.push((function(n) {returnfunction() {return n * n;<br> }<br> })(i));<br> }<br> return arr;<br>}</p>
<p>var results = count();<br>var f1 = results[0];<br>var f2 = results[1];<br>var f3 = results[2];</p>
<p>f1(); // 1<br>f2(); // 4<br>f3(); // 9<br>注意这里用了一个“创建一个匿名函数并立刻执行”的语法：<br>(function(x) {return x <em> x;<br>})(3); // 9<br>理论上讲，创建一个匿名函数并立刻执行可以这么写：<br>function(x) {return x </em> x } (3);<br>但是由于JavaScript语法解析的问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：<br>(function(x) {return x <em> x }) (3);<br>通常，一个立即执行的匿名函数可以把函数体拆开，一般这么写：<br>(function(x) {return x </em> x;<br>})(3);<br>说了这么多，难道闭包就是为了返回一个函数然后延迟执行吗？<br>当然不是！闭包有非常强大的功能。举个栗子：<br>在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。<br>在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：<br>‘use strict’;</p>
<p>functioncreate_counter(initial) {var x = initial || 0;<br> return {<br> inc: function() {<br> x += 1;<br> return x;<br> }<br> }<br>}<br>它用起来像这样：<br>var c1 = create_counter();<br>c1.inc(); // 1<br>c1.inc(); // 2<br>c1.inc(); // 3var c2 = create_counter(10);<br>c2.inc(); // 11<br>c2.inc(); // 12<br>c2.inc(); // 13<br>在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。<br>闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：<br>functionmake_pow(n) {returnfunction(x) {return Math.pow(x, n);<br> }<br>}</p>
<p>// 创建两个新函数:var pow2 = make_pow(2);<br>var pow3 = make_pow(3);</p>
<p>pow2(5); // 25<br>pow3(7); // 343<br>脑洞大开</p>
<p>很久很久以前，有个叫阿隆佐·邱奇的帅哥，发现只需要用函数，就可以用计算机实现运算，而不需要0、1、2、3这些数字和+、-、*、/这些符号。<br>JavaScript支持函数，所以可以用JavaScript用函数来写这些计算。来试试：<br>‘use strict’;</p>
<p>// 定义数字0:<br>var zero = function (f) {<br> return function (x) {<br> return x;<br> }<br>};</p>
<p>// 定义数字1:<br>var one = function (f) {<br> return function (x) {<br> return f(x);<br> }<br>};</p>
<p>// 定义加法:<br>function add(n, m) {<br> return function (f) {<br> return function (x) {<br> return m(f)(n(f)(x));<br> }<br> }<br>}</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-HTjavascript-正则表达式" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/HTjavascript-正则表达式/" class="article-date">
<time datetime="2016-04-28T09:10:23.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/HTjavascript-正则表达式/">javascript---正则表达式</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>gExp</p>
<p>阅读: 1981<br>字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。<br>正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。<br>所以我们判断一个字符串是否是合法的Email的方法是：<br>创建一个匹配Email的正则表达式；<br>用该正则表达式去匹配用户的输入来判断是否合法。<br>因为正则表达式也是用字符串表示的，所以，我们要首先了解如何用字符来描述字符。<br>在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，所以：<br>‘00\d’可以匹配’007’，但无法匹配’00A’；<br>‘\d\d\d’可以匹配’010’；<br>‘\w\w’可以匹配’js’；<br>.可以匹配任意字符，所以：<br>‘js.’可以匹配’jsp’、’jss’、’js!’等等。<br>要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符：<br>来看一个复杂的例子：\d{3}\s+\d{3,8}。<br>我们来从左到右解读一下：<br>\d{3}表示匹配3个数字，例如’010’；<br>\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配’ ‘，’\t\t’等；<br>\d{3,8}表示3-8个数字，例如’1234567’。<br>综合起来，上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。<br>如果要匹配’010-12345’这样的号码呢？由于’-‘是特殊字符，在正则表达式中，要用’\’转义，所以，上面的正则是\d{3}-\d{3,8}。<br>但是，仍然无法匹配’010 - 12345’，因为带有空格。所以我们需要更复杂的匹配方式。<br>进阶</p>
<p>要做更精确地匹配，可以用[]表示范围，比如：<br>[0-9a-zA-Z_]可以匹配一个数字、字母或者下划线；<br>[0-9a-zA-Z_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如’a100’，’0<em>Z’，’js2015’等等；<br>[a-zA-Z\</em>\$][0-9a-zA-Z_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；<br>[a-zA-Z_\$][0-9a-zA-Z_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。<br>A|B可以匹配A或B，所以[J|j]ava[S|s]cript可以匹配’JavaScript’、’Javascript’、’javaScript’或者’javascript’。<br>^表示行的开头，^\d表示必须以数字开头。<br>$表示行的结束，\d$表示必须以数字结束。<br>你可能注意到了，js也可以匹配’jsp’，但是加上^js$就变成了整行匹配，就只能匹配’js’了。<br>RegExp</p>
<p>有了准备知识，我们就可以在JavaScript中使用正则表达式了。<br>JavaScript有两种方式创建一个正则表达式：<br>第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp(‘正则表达式’)创建一个RegExp对象。<br>两种写法是一样的：<br>var re1 = /ABC-001/;<br>var re2 = new RegExp(‘ABC\-001’);</p>
<p>re1; // /ABC-001/<br>re2; // /ABC-001/<br>注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\实际上是一个\。<br>先看看如何判断正则表达式是否匹配：<br>var re = /^\d{3}-\d{3,8}$/;<br>re.test(‘010-12345’); //true<br>re.test(‘010-1234x’); //false<br>re.test(‘010 12345’); //false<br>RegExp对象的test()方法用于测试给定的字符串是否符合条件。<br>切分字符串</p>
<p>用正则表达式切分字符串比用固定的字符更灵活，请看正常的切分代码：<br>‘a b c’.split(‘ ‘); // [‘a’, ‘b’, ‘’, ‘’, ‘c’]<br>嗯，无法识别连续的空格，用正则表达式试试：<br>‘a b c’.split(/\s+/); // [‘a’, ‘b’, ‘c’]<br>无论多少个空格都可以正常分割。加入,试试：<br>‘a,b, c d’.split(/[\s\,]+/); // [‘a’, ‘b’, ‘c’, ‘d’]<br>再加入;试试：<br>‘a,b;; c d’.split(/[\s\,\;]+/); // [‘a’, ‘b’, ‘c’, ‘d’]<br>如果用户输入了一组标签，下次记得用正则表达式来把不规范的输入转化成正确的数组。<br>分组</p>
<p>除了简单地判断是否匹配之外，正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组（Group）。比如：<br>^(\d{3})-(\d{3,8})$分别定义了两个组，可以直接从匹配的字符串中提取出区号和本地号码：<br>var re = /^(\d{3})-(\d{3,8})$/;<br>re.exec(‘010-12345’); // [‘010-12345’, ‘010’, ‘12345’]<br>re.exec(‘010 12345’); // null<br>如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来。<br>exec()方法在匹配成功后，会返回一个Array，第一个元素始终是原始字符串本身，后面的字符串表示匹配成功的子串。<br>exec()方法在匹配失败时返回null。<br>提取子串非常有用。来看一个更凶残的例子：<br>var re = /^(0[0-9]|1[0-9]|2[0-3]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])$/;<br>re.exec(‘19:05:30’); // [‘19:05:30’, ‘19’, ‘05’, ‘30’]<br>这个正则表达式可以直接识别合法的时间。但是有些时候，用正则表达式也无法做到完全验证，比如识别日期：<br>var re = /^(0[1-9]|1[0-2]|[0-9])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]|[0-9])$/;<br>对于’2-30’，’4-31’这样的非法日期，用正则还是识别不了，或者说写出来非常困难，这时就需要程序配合识别了。<br>贪婪匹配</p>
<p>需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。举例如下，匹配出数字后面的0：<br>var re = /^(\d+)(0<em>)$/;<br>re.exec(‘102300’); // [‘102300’, ‘102300’, ‘’]<br>由于\d+采用贪婪匹配，直接把后面的0全部匹配了，结果0</em>只能匹配空字符串了。<br>必须让\d+采用非贪婪匹配（也就是尽可能少匹配），才能把后面的0匹配出来，加个?就可以让\d+采用非贪婪匹配：<br>var re = /^(\d+?)(0*)$/;<br>re.exec(‘102300’); // [‘102300’, ‘1023’, ‘00’]<br>全局搜索</p>
<p>JavaScript的正则表达式还有几个特殊的标志，最常用的是g，表示全局匹配：<br>var r1 = /test/g;<br>// 等价于:var r2 = new RegExp(‘test’, ‘g’);<br>全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引：<br>var s = ‘JavaScript, VBScript, JScript and ECMAScript’;<br>var re=/[a-zA-Z]+Script/g;</p>
<p>// 使用全局匹配:<br>re.exec(s); // [‘JavaScript’]<br>re.lastIndex; // 10</p>
<p>re.exec(s); // [‘VBScript’]<br>re.lastIndex; // 20</p>
<p>re.exec(s); // [‘JScript’]<br>re.lastIndex; // 29</p>
<p>re.exec(s); // [‘ECMAScript’]<br>re.lastIndex; // 44</p>
<p>re.exec(s); // null，直到结束仍没有匹配到<br>全局匹配类似搜索，因此不能使用/^…$/，那样只会最多匹配一次。<br>正则表达式还可以指定i标志，表示忽略大小写，m标志，表示执行多行匹配。<br>小结</p>
<p>正则表达式非常强大，要在短短的一节里讲完是不可能的。要讲清楚正则的所有内容，可以写一本厚厚的书了。如果你经常遇到正则表达式的问题，你可能需要一本正则表达式的参考书。<br>练习</p>
<p>请尝试写一个验证Email地址的正则表达式。版本一应该可以验证出类似的Email：<br>‘use strict’;<br>// 测试:<br>var<br> i,<br> success = true,<br> should_pass = [‘[email protected]’, ‘[email protected]’, ‘[email protected]’, ‘[email protected]’],<br> should_fail = [‘test#gmail.com’, ‘bill@microsoft’, ‘bill%[email protected]’, ‘@voyager.org’];<br>for (i = 0; i < should_pass.length; i++) {<br> if (!re.test(should_pass[i])) {<br> alert(‘测试失败: ‘ + should_pass[i]);<br> success = false;<br> break;<br> }<br>}<br>for (i = 0; i < should_fail.length; i++) {<br> if (re.test(should_fail[i])) {<br> alert(‘测试失败: ‘ + should_fail[i]);<br> success = false;<br> break;<br> }<br>}<br>if (success) {<br> alert(‘测试通过!’);<br>}<br>版本二可以验证并提取出带名字的Email地址：<br>‘use strict’;<br>// 测试:<br>var r = re.exec(‘<tom paris=""> [email protected]’);<br>if (r === null || r.toString() !== [‘<tom paris=""> [email protected]’, ‘Tom Paris’, ‘[email protected]’].toString()) {<br> alert(‘测试失败!’);<br>}<br>else {<br> alert(‘测试成功!’);<br>}</tom></tom></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-javascript-正则表达式" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/javascript-正则表达式/" class="article-date">
<time datetime="2016-04-28T09:10:23.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/javascript-正则表达式/">javascript---正则表达式</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>gExp</p>
<p>阅读: 1981<br>字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。<br>正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。<br>所以我们判断一个字符串是否是合法的Email的方法是：<br>创建一个匹配Email的正则表达式；<br>用该正则表达式去匹配用户的输入来判断是否合法。<br>因为正则表达式也是用字符串表示的，所以，我们要首先了解如何用字符来描述字符。<br>在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，所以：<br>‘00\d’可以匹配’007’，但无法匹配’00A’；<br>‘\d\d\d’可以匹配’010’；<br>‘\w\w’可以匹配’js’；<br>.可以匹配任意字符，所以：<br>‘js.’可以匹配’jsp’、’jss’、’js!’等等。<br>要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符：<br>来看一个复杂的例子：\d{3}\s+\d{3,8}。<br>我们来从左到右解读一下：<br>\d{3}表示匹配3个数字，例如’010’；<br>\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配’ ‘，’\t\t’等；<br>\d{3,8}表示3-8个数字，例如’1234567’。<br>综合起来，上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。<br>如果要匹配’010-12345’这样的号码呢？由于’-‘是特殊字符，在正则表达式中，要用’\’转义，所以，上面的正则是\d{3}-\d{3,8}。<br>但是，仍然无法匹配’010 - 12345’，因为带有空格。所以我们需要更复杂的匹配方式。<br>进阶</p>
<p>要做更精确地匹配，可以用[]表示范围，比如：<br>[0-9a-zA-Z_]可以匹配一个数字、字母或者下划线；<br>[0-9a-zA-Z_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如’a100’，’0<em>Z’，’js2015’等等；<br>[a-zA-Z\</em>\$][0-9a-zA-Z_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；<br>[a-zA-Z_\$][0-9a-zA-Z_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。<br>A|B可以匹配A或B，所以[J|j]ava[S|s]cript可以匹配’JavaScript’、’Javascript’、’javaScript’或者’javascript’。<br>^表示行的开头，^\d表示必须以数字开头。<br>$表示行的结束，\d$表示必须以数字结束。<br>你可能注意到了，js也可以匹配’jsp’，但是加上^js$就变成了整行匹配，就只能匹配’js’了。<br>RegExp</p>
<p>有了准备知识，我们就可以在JavaScript中使用正则表达式了。<br>JavaScript有两种方式创建一个正则表达式：<br>第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp(‘正则表达式’)创建一个RegExp对象。<br>两种写法是一样的：<br>var re1 = /ABC-001/;<br>var re2 = new RegExp(‘ABC\-001’);</p>
<p>re1; // /ABC-001/<br>re2; // /ABC-001/<br>注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\实际上是一个\。<br>先看看如何判断正则表达式是否匹配：<br>var re = /^\d{3}-\d{3,8}$/;<br>re.test(‘010-12345’); //true<br>re.test(‘010-1234x’); //false<br>re.test(‘010 12345’); //false<br>RegExp对象的test()方法用于测试给定的字符串是否符合条件。<br>切分字符串</p>
<p>用正则表达式切分字符串比用固定的字符更灵活，请看正常的切分代码：<br>‘a b c’.split(‘ ‘); // [‘a’, ‘b’, ‘’, ‘’, ‘c’]<br>嗯，无法识别连续的空格，用正则表达式试试：<br>‘a b c’.split(/\s+/); // [‘a’, ‘b’, ‘c’]<br>无论多少个空格都可以正常分割。加入,试试：<br>‘a,b, c d’.split(/[\s\,]+/); // [‘a’, ‘b’, ‘c’, ‘d’]<br>再加入;试试：<br>‘a,b;; c d’.split(/[\s\,\;]+/); // [‘a’, ‘b’, ‘c’, ‘d’]<br>如果用户输入了一组标签，下次记得用正则表达式来把不规范的输入转化成正确的数组。<br>分组</p>
<p>除了简单地判断是否匹配之外，正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组（Group）。比如：<br>^(\d{3})-(\d{3,8})$分别定义了两个组，可以直接从匹配的字符串中提取出区号和本地号码：<br>var re = /^(\d{3})-(\d{3,8})$/;<br>re.exec(‘010-12345’); // [‘010-12345’, ‘010’, ‘12345’]<br>re.exec(‘010 12345’); // null<br>如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来。<br>exec()方法在匹配成功后，会返回一个Array，第一个元素始终是原始字符串本身，后面的字符串表示匹配成功的子串。<br>exec()方法在匹配失败时返回null。<br>提取子串非常有用。来看一个更凶残的例子：<br>var re = /^(0[0-9]|1[0-9]|2[0-3]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])$/;<br>re.exec(‘19:05:30’); // [‘19:05:30’, ‘19’, ‘05’, ‘30’]<br>这个正则表达式可以直接识别合法的时间。但是有些时候，用正则表达式也无法做到完全验证，比如识别日期：<br>var re = /^(0[1-9]|1[0-2]|[0-9])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]|[0-9])$/;<br>对于’2-30’，’4-31’这样的非法日期，用正则还是识别不了，或者说写出来非常困难，这时就需要程序配合识别了。<br>贪婪匹配</p>
<p>需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。举例如下，匹配出数字后面的0：<br>var re = /^(\d+)(0<em>)$/;<br>re.exec(‘102300’); // [‘102300’, ‘102300’, ‘’]<br>由于\d+采用贪婪匹配，直接把后面的0全部匹配了，结果0</em>只能匹配空字符串了。<br>必须让\d+采用非贪婪匹配（也就是尽可能少匹配），才能把后面的0匹配出来，加个?就可以让\d+采用非贪婪匹配：<br>var re = /^(\d+?)(0*)$/;<br>re.exec(‘102300’); // [‘102300’, ‘1023’, ‘00’]<br>全局搜索</p>
<p>JavaScript的正则表达式还有几个特殊的标志，最常用的是g，表示全局匹配：<br>var r1 = /test/g;<br>// 等价于:var r2 = new RegExp(‘test’, ‘g’);<br>全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引：<br>var s = ‘JavaScript, VBScript, JScript and ECMAScript’;<br>var re=/[a-zA-Z]+Script/g;</p>
<p>// 使用全局匹配:<br>re.exec(s); // [‘JavaScript’]<br>re.lastIndex; // 10</p>
<p>re.exec(s); // [‘VBScript’]<br>re.lastIndex; // 20</p>
<p>re.exec(s); // [‘JScript’]<br>re.lastIndex; // 29</p>
<p>re.exec(s); // [‘ECMAScript’]<br>re.lastIndex; // 44</p>
<p>re.exec(s); // null，直到结束仍没有匹配到<br>全局匹配类似搜索，因此不能使用/^…$/，那样只会最多匹配一次。<br>正则表达式还可以指定i标志，表示忽略大小写，m标志，表示执行多行匹配。<br>小结</p>
<p>正则表达式非常强大，要在短短的一节里讲完是不可能的。要讲清楚正则的所有内容，可以写一本厚厚的书了。如果你经常遇到正则表达式的问题，你可能需要一本正则表达式的参考书。<br>练习</p>
<p>请尝试写一个验证Email地址的正则表达式。版本一应该可以验证出类似的Email：<br>‘use strict’;<br>// 测试:<br>var<br> i,<br> success = true,<br> should_pass = [‘[email protected]’, ‘[email protected]’, ‘[email protected]’, ‘[email protected]’],<br> should_fail = [‘test#gmail.com’, ‘bill@microsoft’, ‘bill%[email protected]’, ‘@voyager.org’];<br>for (i = 0; i < should_pass.length; i++) {<br> if (!re.test(should_pass[i])) {<br> alert(‘测试失败: ‘ + should_pass[i]);<br> success = false;<br> break;<br> }<br>}<br>for (i = 0; i < should_fail.length; i++) {<br> if (re.test(should_fail[i])) {<br> alert(‘测试失败: ‘ + should_fail[i]);<br> success = false;<br> break;<br> }<br>}<br>if (success) {<br> alert(‘测试通过!’);<br>}<br>版本二可以验证并提取出带名字的Email地址：<br>‘use strict’;<br>// 测试:<br>var r = re.exec(‘<tom paris=""> [email protected]’);<br>if (r === null || r.toString() !== [‘<tom paris=""> [email protected]’, ‘Tom Paris’, ‘[email protected]’].toString()) {<br> alert(‘测试失败!’);<br>}<br>else {<br> alert(‘测试成功!’);<br>}</tom></tom></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-HTML5实战——svg学习" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/HTML5实战——svg学习/" class="article-date">
<time datetime="2016-04-28T09:09:13.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/HTML5实战——svg学习/">HTML5实战——svg学习</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p> SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。<br>什么是SVG？<br> SVG 指可伸缩矢量图形 (Scalable Vector Graphics)<br> SVG 用来定义用于网络的基于矢量的图形<br> SVG 使用 XML 格式定义图形<br> SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失<br> SVG 是万维网联盟的标准<br> SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体<br> Canvas 和 SVG 的区别：<br> SVG<br> SVG 是一种使用 XML 描述 2D 图形的语言。<br> SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。<br> 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。<br> 特点：<br> 不依赖分辨率<br> 支持事件处理器<br> 最适合带有大型渲染区域的应用程序（比如谷歌地图）<br> 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）<br> 不适合游戏应用<br> Canvas<br> Canvas 通过 JavaScript 来绘制 2D 图形。<br> Canvas 是逐像素进行渲染的。<br> 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。<br> 特点：<br> 依赖分辨率<br> 不支持事件处理器<br> 弱的文本渲染能力<br> 能够以 .png 或 .jpg 格式保存结果图像<br> 最适合图像密集型的游戏，其中的许多对象会被频繁重绘<br>svg 例子：</p>
<svg width="100%" height="100%"><circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red"/></svg>
<p>学习svg非常不错的系列博文<br> 突袭HTML5之SVG 2D入门1 - SVG综述<br> 突袭HTML5之SVG 2D入门2 - 图形绘制<br> 突袭HTML5之SVG 2D入门3 - 文本与图像<br> 突袭HTML5之SVG 2D入门4 - 笔画与填充<br> 突袭HTML5之SVG 2D入门5 - 颜色的表示<br> 突袭HTML5之SVG 2D入门6 - 坐标与变换<br> 突袭HTML5之SVG 2D入门7 - 重用与引用<br> 突袭HTML5之SVG 2D入门8 - 文档结构<br> 突袭HTML5之SVG 2D入门9 - 蒙板<br> 突袭HTML5之SVG 2D入门10 - 滤镜<br> 突袭HTML5之SVG 2D入门11 - 动画<br> 突袭HTML5之SVG 2D入门12 - SVG DOM<br> 突袭HTML5之SVG 2D入门13 - svg对决canvas</p>
<p>参考：<a href="http://www.w3school.com.cn/svg/svg_intro.asp" target="_blank" rel="external">http://www.w3school.com.cn/svg/svg_intro.asp</a></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-android项目源码" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/android项目源码/" class="article-date">
<time datetime="2016-04-28T09:08:13.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/android项目源码/">android项目源码</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>源码下载常用地址 <a href="http://code.662p.com/list/11_1.html" target="_blank" rel="external">http://code.662p.com/list/11_1.html</a><br>Android PDF 阅读器 <a href="http://sourceforge.net/projects/andpdf/files/" target="_blank" rel="external">http://sourceforge.net/projects/andpdf/files/</a><br>个人记账工具 OnMyMeans <a href="http://sourceforge.net/projects/onmymeans/develop" target="_blank" rel="external">http://sourceforge.net/projects/onmymeans/develop</a><br>Android电池监控 Android Battery Dog <a href="http://sourceforge.net/projects/andbatdog/" target="_blank" rel="external">http://sourceforge.net/projects/andbatdog/</a><br>RSS阅读软件 Android RSS <a href="http://code.google.com/p/android-rss/" target="_blank" rel="external">http://code.google.com/p/android-rss/</a><br>Android的PDF阅读器 DroidReader <a href="http://code.google.com/p/droidreader/" target="_blank" rel="external">http://code.google.com/p/droidreader/</a><br>Android Scripting Environment <a href="http://code.google.com/p/android-scripting/" target="_blank" rel="external">http://code.google.com/p/android-scripting/</a><br>Android小游戏 Android Shapes <a href="http://sourceforge.net/projects/shapes/" target="_blank" rel="external">http://sourceforge.net/projects/shapes/</a><br>Android JSON RPC <a href="http://code.google.com/p/android-json-rpc/" target="_blank" rel="external">http://code.google.com/p/android-json-rpc/</a><br>Android VNC <a href="http://code.google.com/p/android-vnc/" target="_blank" rel="external">http://code.google.com/p/android-vnc/</a><br>魅族M8的Android移植 M8 Android <a href="http://code.google.com/p/m8-android-kernel/" target="_blank" rel="external">http://code.google.com/p/m8-android-kernel/</a><br>Android 游戏 Amazed <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>Android的社交网络 HelloWorld goes mobile <a href="http://sourceforge.net/projects/helloworldgm/" target="_blank" rel="external">http://sourceforge.net/projects/helloworldgm/</a><br>手机聊天程序 Android jChat <a href="http://code.google.com/p/jchat4android/" target="_blank" rel="external">http://code.google.com/p/jchat4android/</a><br>Android的GPS轨迹记录 MyTracks <a href="http://code.google.com/p/mytracks/" target="_blank" rel="external">http://code.google.com/p/mytracks/</a><br>Android国际象棋游戏 Honzovy achy <a href="http://sourceforge.net/projects/honzovysachy/" target="_blank" rel="external">http://sourceforge.net/projects/honzovysachy/</a><br>Android旅行记录软件 AndTripLog <a href="http://sourceforge.net/projects/andtriplog/" target="_blank" rel="external">http://sourceforge.net/projects/andtriplog/</a><br>音乐播放器 Ambient <a href="http://sourceforge.net/projects/ambientmp/" target="_blank" rel="external">http://sourceforge.net/projects/ambientmp/</a><br>Android的邮件客户端 K9mail <a href="http://code.google.com/p/k9mail/" target="_blank" rel="external">http://code.google.com/p/k9mail/</a><br>多平台应用开发库 QuickConnect <a href="http://sourceforge.net/projects/quickconnect/" target="_blank" rel="external">http://sourceforge.net/projects/quickconnect/</a><br>gPhone手机空战游戏 <a href="http://code.google.com/p/wireless-apps/" target="_blank" rel="external">http://code.google.com/p/wireless-apps/</a><br>Android 照片小软件 Panoramio <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>i-jetty <a href="http://code.google.com/p/i-jetty/" target="_blank" rel="external">http://code.google.com/p/i-jetty/</a><br>Android 小游戏 DivideAndConquer <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>Android 全球时间 AndroidGlobalTime <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>Android 2D游戏引擎 Android Angle <a href="http://code.google.com/p/angle/" target="_blank" rel="external">http://code.google.com/p/angle/</a><br>Android Ruby <a href="http://code.google.com/p/android-ruby/" target="_blank" rel="external">http://code.google.com/p/android-ruby/</a><br>Android-N810 <a href="http://sourceforge.net/projects/android-n810/" target="_blank" rel="external">http://sourceforge.net/projects/android-n810/</a><br>Android的短信应用 Ecclesia <a href="http://sourceforge.net/projects/ecclesia" target="_blank" rel="external">http://sourceforge.net/projects/ecclesia</a><br>Android平台上的JXTA客户端 Peerdroid <a href="http://code.google.com/p/peerdroid/" target="_blank" rel="external">http://code.google.com/p/peerdroid/</a><br>Android游戏引擎 libgdx <a href="http://code.google.com/p/libgdx/" target="_blank" rel="external">http://code.google.com/p/libgdx/</a><br>Android 照片小软件 Photostream <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>Alien3d logo Android 3D游戏引擎 Alien3d <a href="http://code.google.com/p/alien3d/" target="_blank" rel="external">http://code.google.com/p/alien3d/</a><br>Winamp Remote Android Server <a href="http://sourceforge.net/projects/winampdroid" target="_blank" rel="external">http://sourceforge.net/projects/winampdroid</a><br>Android的Facebook客户端 Andrico <a href="http://code.google.com/p/andrico/" target="_blank" rel="external">http://code.google.com/p/andrico/</a><br>Android Applications Manager <a href="http://sourceforge.net/projects/aam/" target="_blank" rel="external">http://sourceforge.net/projects/aam/</a><br>Java 3D图形引擎 Catcake <a href="http://code.google.com/p/catcake/" target="_blank" rel="external">http://code.google.com/p/catcake/</a><br>android-gcc-objc2-0 <a href="http://code.google.com/p/android-gcc-objc2-0/" target="_blank" rel="external">http://code.google.com/p/android-gcc-objc2-0/</a><br>九宫格数独游戏 OpenSudoku <a href="http://code.google.com/p/opensudoku-android/" target="_blank" rel="external">http://code.google.com/p/opensudoku-android/</a><br>Android 铃声扩展工具 RingsExtended <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>JavaEye Android client <a href="http://code.google.com/p/javaeye-android-client/" target="_blank" rel="external">http://code.google.com/p/javaeye-android-client/</a><br>RemoteDroid <a href="http://code.google.com/p/remotedroid/" target="_blank" rel="external">http://code.google.com/p/remotedroid/</a><br>Android 小游戏 Clickin2DaBeat <a href="http://code.google.com/p/apps-for-android/" target="_blank" rel="external">http://code.google.com/p/apps-for-android/</a><br>中医大夫助理信息系统 zz-doctor <a href="http://code.google.com/p/zz-doctor/" target="_blank" rel="external">http://code.google.com/p/zz-doctor/</a><br>Facebook Connect for Android <a href="http://code.google.com/p/fbconnect-android/" target="_blank" rel="external">http://code.google.com/p/fbconnect-android/</a><br>Android SMSPopup <a href="http://code.google.com/p/android-smspopup/" target="_blank" rel="external">http://code.google.com/p/android-smspopup/</a><br>FreeTTS-Android <a href="http://sourceforge.net/projects/freettsandroidi" target="_blank" rel="external">http://sourceforge.net/projects/freettsandroidi</a><br>Foursquare.com的客户端 Foursquar <a href="http://code.google.com/p/foursquared/" target="_blank" rel="external">http://code.google.com/p/foursquared/</a><br>条形码扫描仪 Android PC_BCR <a href="http://code.google.com/p/android-pcbcr/" target="_blank" rel="external">http://code.google.com/p/android-pcbcr/</a></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/android/">android</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="comet4j-java服务端推送消息到web页面实例" class="article article-type-comet4j" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/java服务端推送消息到web页面实例/" class="article-date">
<time datetime="2016-04-28T09:02:26.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/java服务端推送消息到web页面实例/">java服务端推送消息到web页面实例</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>对于页面一直监控,以前都是使用ajax请求即可,但是小并发这做法没多大问题,但是到了大并发就不太合适,如果不想自己写线程来操控就可以偷懒找一些插件,例如comet4j<br>下面我来演示下如何使用这个插件<br> 先准备需要的工具:<br>comet4j-tomcat6.jar(tomcat6的就导入这个)<br>comet4j-tomcat7.jar(tomcat7的就导入这个)<br>comet4j.js(页面引入这个js)<br>具体操作看下面</p>
<p>然后就写个class<br>[java] view plaincopy<br>package com.shadow.extras.comet4j; </p>
<p>import javax.servlet.ServletContextEvent;<br>import javax.servlet.ServletContextListener; </p>
<p>import org.comet4j.core.CometContext;<br>import org.comet4j.core.CometEngine; </p>
<p>public class TestComet implements ServletContextListener {<br> private static final String CHANNEL = “test”;<br> private static final String CHANNEL2 = “test2”; </p>
<pre><code>public void contextInitialized(ServletContextEvent arg0) {
CometContext cc = CometContext.getInstance();
cc.registChannel(CHANNEL);// 注册应用的channel
cc.registChannel(CHANNEL2);
Thread helloAppModule = new Thread(new HelloAppModule(),
"Sender App Module");
// 是否启动
helloAppModule.setDaemon(true);
// 启动线程
helloAppModule.start();
Thread helloAppModule2 = new Thread(new HelloAppModule2(),
"Sender App Module");
// 是否启动
helloAppModule2.setDaemon(true);
// 启动线程
helloAppModule2.start();
}
class HelloAppModule2 implements Runnable {
public void run() {
while (true) {
try {
// 睡眠时间
Thread.sleep(5000);
} catch (Exception ex) {
ex.printStackTrace();
}
CometEngine engine = CometContext.getInstance().getEngine();
// 获取消息内容
long l = getFreeMemory();
// 开始发送
engine.sendToAll(CHANNEL2, l);
}
}
}
class HelloAppModule implements Runnable {
public void run() {
while (true) {
try {
// 睡眠时间
Thread.sleep(2000);
} catch (Exception ex) {
ex.printStackTrace();
}
CometEngine engine = CometContext.getInstance().getEngine();
// 获取消息内容
long l = getFreeMemory();
// 开始发送
engine.sendToAll(CHANNEL, l);
}
}
}
public void contextDestroyed(ServletContextEvent arg0) {
}
public long getFreeMemory() {
return Runtime.getRuntime().freeMemory() / 1024;
}
</code></pre><p>}<br>然后再写个页面</p>
<p>[html] view plaincopy<br><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></a> </p>
<p><html xmlns="http://www.w3.org/1999/xhtml"> </html></p>
<p><head> </head></p>
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p>
<p><title>Comet4J Hello World</title> </p>
<p><script type="text/javascript" src="plugin/comet4j/comet4j.js"></script> </p>
<p><script type="text/javascript"><br>function init(){<br> var kbDom = document.getElementById(‘kb’);<br> var kbDom2 = document.getElementById(‘kb2’);<br> JS.Engine.on({<br> test : function(aa){//侦听一个channel<br> kbDom.innerHTML = aa;<br> },<br> test2 : function(bb){<br> kbDom2.innerHTML = bb;<br> }<br> });<br> JS.Engine.start(‘comet’);<br>}<br></script><br> </p>
<p><body onload="init()"><br> 剩余内存：<span id="kb">…</span>KB <br><br> 剩余内存：<span id="kb2">…</span>KB<br></body><br><br>接着配置下web.xml就ok了<br>[html] view plaincopy<br><!-- comet4j --><br> <listener><br> <description>Comet4J容器侦听</description><br> <listener-class>org.comet4j.core.CometAppListener</listener-class><br> </listener><br> <servlet><br> <description>Comet连接[默认:org.comet4j.core.CometServlet]</description><br> <display-name>CometServlet</display-name><br> <servlet-name>CometServlet</servlet-name><br> <servlet-class>org.comet4j.core.CometServlet</servlet-class><br> </servlet><br> <servlet-mapping><br> <servlet-name>CometServlet</servlet-name><br> <url-pattern>/comet</url-pattern><br> </servlet-mapping> </p>
<pre><code><listener>
<description>TestComet</description>
<listener-class>com.shadow.extras.comet4j.TestComet</listener-class>
</listener>
</code></pre><p>最后修改下tomcat的server.xml文件<br>把protocol参数值改成下面的,因为这是基于nio开发的插件<br>[html] view plaincopy</p>
<connector uriencoding="UTF-8" connectiontimeout="20000" port="8080" protocol="org.apache.coyote.http11.Http11NioProtocol" redirectport="8443">
<p>测试,很简单就是访问我们刚刚创建的test.html,然后就可以看到内存数值一直自动刷新波动</p>
</connector>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/java/">java</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-Markdown-语法说明-简体中文版" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/28/Markdown-语法说明-简体中文版/" class="article-date">
<time datetime="2016-04-28T06:29:21.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/Markdown-语法说明-简体中文版/">Markdown 语法说明 (简体中文版)</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>概述</p>
<p>宗旨</p>
<p>Markdown 的目标是实现「易读易写」。</p>
<p>可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。</p>
<p>总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像<em>强调</em>。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。</p>
<p>兼容 HTML</p>
<p>Markdown 语法的目标是：成为一种适用于网络的书写语言。</p>
<p>Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来， HTML 已经很容易写了。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。</p>
<p>不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。</p>
<p>要制约的只有一些 HTML 区块元素――比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的 </p><p> 标签。</p>
<p>例子如下，在 Markdown 文件里加上一段 HTML 表格：</p>
<p>这是一个普通段落。</p>
<table><br> <tr><br> <td>Foo</td><br> </tr><br></table>
<p>这是另一个普通段落。<br>请注意，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如，你在 HTML 区块内使用 Markdown 样式的<em>强调</em>会没有效果。</p>
<p>HTML 的区段（行内）标签如 <span>、<cite>、<del> 可以在 Markdown 的段落、列表或是标题里随意使用。依照个人习惯，甚至可以不用 Markdown 格式，而直接采用 HTML 标签来格式化。举例说明：如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图像标签语法。</a></del></cite></span></p>
<p>和处在 HTML 区块标签间不同，Markdown 语法在 HTML 区段标签间是有效的。</p>
<p>特殊字符自动转换</p>
<p>在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是 < 和 &。</p>
<p>& 字符尤其让网络文档编写者受折磨，如果你要打「AT&T」 ，你必须要写成「AT&T」。而网址中的 & 字符也要转换。比如你要链接到：</p>
<p><a href="http://images.google.com/images?num=30&q=larry+bird" target="_blank" rel="external">http://images.google.com/images?num=30&q=larry+bird</a><br>你必须要把网址转换写为：</p>
<p><a href="http://images.google.com/images?num=30&q=larry+bird" target="_blank" rel="external">http://images.google.com/images?num=30&q=larry+bird</a><br>才能放到链接标签的 href 属性里。不用说也知道这很容易忽略，这也可能是 HTML 标准检验所检查到的错误中，数量最多的。</p>
<p>Markdown 让你可以自然地书写字符，需要转换的由它来处理好了。如果你使用的 & 字符是 HTML 字符实体的一部分，它会保留原状，否则它会被转换成 &。</p>
<p>所以你如果要在文档中插入一个版权符号 ©，你可以这样写：</p>
<p>©<br>Markdown 会保留它不动。而若你写：</p>
<p>AT&T<br>Markdown 就会将它转为：</p>
<p>AT&T<br>类似的状况也会发生在 < 符号上，因为 Markdown 允许 兼容 HTML ，如果你是把 < 符号作为 HTML 标签的定界符使用，那 Markdown 也不会对它做任何转换，但是如果你写：</p>
<p>4 < 5<br>Markdown 将会把它转换为：</p>
<p>4 < 5<br>不过需要注意的是，code 范围内，不论是行内还是区块， < 和 & 两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，你要把所有的 < 和 & 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。）</p>
<p>区块元素</p>
<p>段落和换行</p>
<p>一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进。</p>
<p>「由一个或多个连续的文本行组成」这句话其实暗示了 Markdown 允许段落内的强迫换行（插入换行符），这个特性和其他大部分的 text-to-HTML 格式不一样（包括 Movable Type 的「Convert Line Breaks」选项），其它的格式会把每个换行符都转成 <br> 标签。</p>
<p>如果你确实想要依赖 Markdown 来插入 <br> 标签的话，在插入处先按入两个以上的空格然后回车。</p>
<p>的确，需要多费点事（多加空格）来产生 <br> ，但是简单地「每个换行都转换为 <br>」的方法在 Markdown 中并不适合， Markdown 中 email 式的 区块引用 和多段落的 列表 在使用换行来排版的时候，不但更好用，还更方便阅读。</p>
<p>标题</p>
<p>Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。</p>
<p>类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：</p>
<h1 id="This-is-an-H1"><a href="#This-is-an-H1" class="headerlink" title="This is an H1"></a>This is an H1</h1><h2 id="This-is-an-H2"><a href="#This-is-an-H2" class="headerlink" title="This is an H2"></a>This is an H2</h2><p>任何数量的 = 和 - 都可以有效果。</p>
<p>类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：</p>
<h1 id="这是-H1"><a href="#这是-H1" class="headerlink" title="这是 H1"></a>这是 H1</h1><h2 id="这是-H2"><a href="#这是-H2" class="headerlink" title="这是 H2"></a>这是 H2</h2><h6 id="这是-H6"><a href="#这是-H6" class="headerlink" title="这是 H6"></a>这是 H6</h6><p>你可以选择性地「闭合」类 atx 样式的标题，这纯粹只是美观用的，若是觉得这样看起来比较舒适，你就可以在行尾加上 #，而行尾的 # 数量也不用和开头一样（行首的井字符数量决定标题的阶数）：</p>
<h1 id="这是-H1-1"><a href="#这是-H1-1" class="headerlink" title="这是 H1"></a>这是 H1</h1><h2 id="这是-H2-1"><a href="#这是-H2-1" class="headerlink" title="这是 H2"></a>这是 H2</h2><h3 id="这是-H3"><a href="#这是-H3" class="headerlink" title="这是 H3"></a>这是 H3</h3><p>区块引用 Blockquotes</p>
<p>Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。如果你还熟悉在 email 信件中的引言部分，你就知道怎么在 Markdown 文件中建立一个区块引用，那会看起来像是你自己先断好行，然后在每行的最前面加上 > ：</p>
<blockquote>
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>id sem consectetuer libero luctus adipiscing.<br>Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > ：</p>
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>id sem consectetuer libero luctus adipiscing.<br>区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：</p>
<p>This is the first level of quoting.</p>
<blockquote>
<p>This is nested blockquote.</p>
</blockquote>
<p>Back to the first level.<br>引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：</p>
<h2 id="这是一个标题。"><a href="#这是一个标题。" class="headerlink" title="这是一个标题。"></a>这是一个标题。</h2><ol>
<li>这是第一行列表项。</li>
<li>这是第二行列表项。</li>
</ol>
<p>给出一些例子代码：</p>
<pre><code>return shell_exec("echo $input | $markdown_script");
</code></pre><p>任何像样的文本编辑器都能轻松地建立 email 型的引用。例如在 BBEdit 中，你可以选取文字后然后从选单中选择增加引用阶层。</p>
</blockquote>
<p>列表</p>
<p>Markdown 支持有序列表和无序列表。</p>
<p>无序列表使用星号、加号或是减号作为列表标记：</p>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue<br>等同于：</li>
</ul>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue<br>也等同于：</li>
</ul>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue<br>有序列表则使用数字接着一个英文句点：</li>
</ul>
<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish<br>很重要的一点是，你在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为：</li>
</ol>
<p><ol></ol></p>
<p><li>Bird</li></p>
<p><li>McHale</li></p>
<p><li>Parish</li><br><br>如果你的列表标记写成：</p>
<ol>
<li>Bird</li>