-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
867 lines (787 loc) · 55.2 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>KoalaHui的博客</title>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2017-06-20T06:45:00.109Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>KoalaHui</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>动画的实现方式总结</title>
<link href="http://yoursite.com/2017/06/20/%E5%8A%A8%E7%94%BB%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F%E6%80%BB%E7%BB%93/"/>
<id>http://yoursite.com/2017/06/20/动画的实现方式总结/</id>
<published>2017-06-20T06:45:22.876Z</published>
<updated>2017-06-20T06:45:00.109Z</updated>
<content type="html"><![CDATA[<p><img src="http://i.imgur.com/ZcE5RlD.jpg" alt=""><br><a id="more"></a></p>
<h2 id="1-css的transition"><a href="#1-css的transition" class="headerlink" title="1.css的transition"></a><strong>1.css的transition</strong></h2><p>语法：<br>transition: property duration timing-function delay;</p>
<p>property:填写需要变化的css属性如：width,line-height,font-size,color等;</p>
<p>duration:完成过渡效果需要的时间（2s 或者2000ms）</p>
<p>timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）</p>
<p>timing-delay:动画效果的延迟触发时间（2s 或者2000ms）</p>
<p>例子：</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition动画</title>
<style>
#tran{
width: 200px;
height: 200px;
background: red;
transform: rotate(0deg);//一个属性，可以让我们的元素变大变小和旋转、透明
transition: transform 2s ease 0s;
}
#tran:hover{
transform: rotate(90deg);
background: blue;
}
</style>
</head>
<body>
<div id="tran"></div>
</body>
</html>
</code></pre><h2 id="2-css3的animation属性"><a href="#2-css3的animation属性" class="headerlink" title="2.css3的animation属性"></a>2.css3的animation属性</h2><p>语法：<br>animation: name duration timing-function delay iteration-count direction;</p>
<p>name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。</p>
<p>duration:完成动画所需要的时间（2s 或者 2000ms）</p>
<p>timing-function:完成动画的速度曲线</p>
<p>delay：动画开始之前的延迟</p>
<p>iteration-count：动画播放次数</p>
<p>direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。</p>
<p>例子：</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation动画</title>
<style>
#anim{
width: 200px;
height: 200px;
background: red;
animation: animation1 2s infinite;
}
@keyframes animation1 {
0% {
width: 200px;
height: 200px;
}
50%{
width: 100px;
height: 100px;
}
100%{
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>
<div id="anim" class="animation1">
</div>
</body>
</html>
</code></pre><h2 id="3-Jquery的animate函数"><a href="#3-Jquery的animate函数" class="headerlink" title="3.Jquery的animate函数"></a>3.Jquery的animate函数</h2><p>语法：<br>$(selector).animate(styles,options)</p>
<p>styles:产生动画的css样式和值；（只可以是带数值的样式，不能改变颜色等）</p>
<p>options={</p>
<p> speed:动画的速度（可选参数：slow,normal,fase）</p>
<p> easing：动画的速度函数（可选参数：swing，linear）</p>
<p> callback：动画完成之后要执行的函数；</p>
<p> queue：是否放置在效果队列中，是布尔值，为false则立即开始</p>
<p> specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}</p>
<p>例子：</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqurey的animation动画</title>
<style>
#anim{
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="anim">
</div>
<script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
<script>
$('#anim').hover(function () {
$('#anim').animate({
width: 200,
height: 200
}, {duration:'2000',
specialEasing: {
left: 'swing',
top: 'linear'
}
});
});
</script>
</body>
</html>
</code></pre><h2 id="4-原生js动画"><a href="#4-原生js动画" class="headerlink" title="4.原生js动画"></a>4.原生js动画</h2><p>原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。</p>
<p>如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理</p>
<p>例子：</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js原生代码实现动画</title>
<style>
.odiv{
position: relative;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="odiv" class="odiv">
</div>
</div>
<script language="javascript">
window.onload = function(){
var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMover(0);
}
odiv.onmouseout = function(){
startMover(-200);
}
}
var timer = null;
function startMover(a){//速度和目标值
clearInterval(timer);//执行当前动画同时清除之前的动画
var odiv = document.getElementById('odiv');
timer = setInterval(function(){
var speed = (a-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
//如果速度是大于0，说明是向右走，那么就向上取整
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//Math.floor();向下取整
if(odiv.offsetLeft == a){
clearInterval(timer);
}
else{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},500);
}
</script>
</body>
</html>
</code></pre><h2 id="5-插件"><a href="#5-插件" class="headerlink" title="5.插件"></a>5.插件</h2><p>网上可以搜到很多封装好的动画插件，这些插件可以直接引入到页面中，通过初试话和配置的方式进行设定，直接在页面中展示动画。</p>
<p>如：waves，textillate.js、animation.css等</p>
<h2 id="6-使用canvas制作动画"><a href="#6-使用canvas制作动画" class="headerlink" title="6.使用canvas制作动画"></a>6.使用canvas制作动画</h2><p>我们还可以使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。</p>
<p>同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。</p>
<p>通过画笔的方式，能够轻松的实现更多的动画效果，但是需要掌握canvas是要在练习上下一番苦功夫的。</p>
<h2 id="7-引用gif图片"><a href="#7-引用gif图片" class="headerlink" title="7.引用gif图片"></a>7.引用gif图片</h2><p>如果在需求特别紧急，而且动画又特别复杂的情况下，自己没有把握按时实现效果，或者代价太大，真的，别犹豫，上gif图片吧</p>
<h2 id="8-SVG动画（IE版本都不支持）"><a href="#8-SVG动画（IE版本都不支持）" class="headerlink" title="8.SVG动画（IE版本都不支持）"></a>8.SVG动画（IE版本都不支持）</h2><pre><code>1. <set>
2. <animate>
3. <animateColor>
4. <animateTransform>
5. <animateMotion>
</code></pre>]]></content>
<summary type="html">
<p><img src="http://i.imgur.com/ZcE5RlD.jpg" alt=""><br>
</summary>
</entry>
<entry>
<title>前端高级之性能优化</title>
<link href="http://yoursite.com/2017/05/25/%E5%89%8D%E7%AB%AF%E9%AB%98%E7%BA%A7%E4%B9%8B%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
<id>http://yoursite.com/2017/05/25/前端高级之性能优化/</id>
<published>2017-05-25T02:52:09.014Z</published>
<updated>2017-05-25T02:51:36.924Z</updated>
<content type="html"><![CDATA[<p><img src="http://i.imgur.com/oXYlfAy.jpg" alt=""><br><a id="more"></a></p>
<p><strong>从我们前端工程师的角度来看，能做到的性能优化主要有三大块：</strong></p>
<pre><code>1、代码优化
2、减少HTTP请求数量及大小
3、合理利用缓存
</code></pre><h2 id="1、-代码优化"><a href="#1、-代码优化" class="headerlink" title="1、 代码优化"></a>1、 代码优化</h2><p>首先，我们来说说代码优化，我们前端不像一些单语言开发者（android、IOS）他们只需要保持他们所用的java\Oc尽量或者是无限接近与最佳实践就可以了，前端需要考虑HTML、CSS、JS三种语言的最佳规范，这也无疑加大了一些难度。下面分别说说我们应该怎样去优化我们的代码：</p>
<h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><pre><code>1. 样式表和脚本文件都采用外部文件链接方式加载（方便后面压缩、代码分块管理、表现与逻辑分离）
1.
内联VS外置
单独提取好处：
(1)提高了js和css的复用性
(2)减小页面体积
(3)提高了js和css的可维护性
内联的好处：
(1)减少页面请求
(2)提升页面渲染速度
使用内联的情况：
(1)脚本和样式只应用于一个页面
(2)页面不经常被访问
(3)脚本和样式很少的情况
在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中
产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。
这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。
2. 样式表链接定义在<head>内，脚本文件放在<body>结束之前
3. 根据场景可采用JavaScript异步加载模式（动态创建<script>标签）
4. 和渲染无关的脚步文件可以在window.onload()事件触发后再加载
</code></pre><h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><pre><code>1. 使用复合（紧凑）语法
2. 避免 !importants
3. 避免使用Expressions（表达式），这会增加计算量
4. 遵循一个标准的声明顺序
1. /* Positioning */
/* Display & Box Model */
/* Background and typography styles */
/* Transitions */
/* Other */
5. 合理使用选择器(选择器性能排序，由高到低)
1. ID 规则
2. Class 规则
3. 标签规则
4. 通用规则
</code></pre><h3 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h3><pre><code>1. 尽量少用全局变量，建议使用局部变量
2. 将对象或数组中常用的数据用变量存起来使用（变量和数值的性能优于对象和数组）
3. 不要使用with语句（会增加作用域链长度）
4. 避免 for-in 循环（ 为了遍历这些元素，JavaScript需要为每一个元素建立一个函数，这种
基于函数的迭代带来了一系列性能问题：额外的函数引入了函数对象被创建和销毁的上下文，将
会在作用域链的顶端增加额外的元素）使用for\do-while来代替
5. 避免在js中操作DOM
6. 修改CSS类，而不是样式
7. 有效利用正则表达式处理字符串
8. 尽量使用全等===做判断（避免变量隐式转换）
9. 利用setTimeout定时器将耗时长的大任务分割为N个异步任务执行
</code></pre><h2 id="2、减少HTTP请求数量及大小"><a href="#2、减少HTTP请求数量及大小" class="headerlink" title="2、减少HTTP请求数量及大小"></a>2、减少HTTP请求数量及大小</h2><h4 id="合并文件"><a href="#合并文件" class="headerlink" title="合并文件"></a>合并文件</h4><p>将脚本文件和样式表文件分别合并到一个文件中，可以减少HTTP请求的数量并缩短最终用户响应时间。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。</p>
<h4 id="CSS-Sprites（雪碧图）、字体图标"><a href="#CSS-Sprites（雪碧图）、字体图标" class="headerlink" title="CSS Sprites（雪碧图）、字体图标"></a>CSS Sprites（雪碧图）、字体图标</h4><p>这是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；合并后的图片会比分离的图片总和要小，这是因为它降低了图片自身的开销。</p>
<h4 id="内联图像"><a href="#内联图像" class="headerlink" title="内联图像"></a>内联图像</h4><p>使用data:URL 模式可以在web页面中包含图片但无需任何额外的HTTP请求。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。</p>
<h4 id="启用Gzip压缩"><a href="#启用Gzip压缩" class="headerlink" title="启用Gzip压缩"></a>启用Gzip压缩</h4><p>通过减小HTTP响应的大小也可以节省HTTP响应时间。Gzip可以压缩所有可能的文件类型，是减少文件体积、增加用户体验的简单方法。<br>从HTTP/1.1开始，web客户端都默认支持HTTP请求中有Accept-Encoding文件头的压缩格式：Accept-Encoding: gzip<br>如果web服务器在请求的文件头中检测到上面的代码，就会以客户端列出的方式压缩响应内容。Web服务器把压缩方式通过响应文件头中的Content-Encoding来返回给浏览器。<br>Content-Encoding: gzip</p>
<h4 id="压缩-JavaScript-和-CSS"><a href="#压缩-JavaScript-和-CSS" class="headerlink" title="压缩 JavaScript 和 CSS"></a>压缩 JavaScript 和 CSS</h4><p>压缩是指从去除代码不必要的字符减少文件大小从而节省下载时间。<br>方法：<br>1.去除不必要的空白符（空格、换行、tab缩进）、格式符、注释符<br>2.简写方法名、参数名来压缩js脚本<br>在 JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。</p>
<h4 id="避免重定向"><a href="#避免重定向" class="headerlink" title="避免重定向"></a>避免重定向</h4><p>301(永久重定向)和302(临时重定向),这两个重定向用的比较多。<br>但是要记住重定向会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。</p>
<h2 id="3、合理利用缓存"><a href="#3、合理利用缓存" class="headerlink" title="3、合理利用缓存"></a>3、合理利用缓存</h2><p>添加Expire/Cache-Control头</p>
<p>首先说明一下：Expire属于HTTP/1.0，Cache-Control属于HTTP/1.1。这两者起到的作用是一致的。<br>通过使用Expires或者Cache-Control就可以使请求的内容具有缓存性，它避免了接下来的页面访问中不必要的HTTP请求。Expires头的内容是一个时间值，值就是资源在本地的过期时间。在当前时间还没有超过缓存资源的过期时间时，就直接使用这一缓存的资源，不会发送HTTP请求。Cache-Control的作用也是类似的，只不过它的值是一个表示距离缓存过期的一个秒数时间。</p>
<h2 id="4、其他"><a href="#4、其他" class="headerlink" title="4、其他"></a>4、其他</h2><h4 id="减少DNS查找次数-DNS缓存"><a href="#减少DNS查找次数-DNS缓存" class="headerlink" title="减少DNS查找次数(DNS缓存)"></a>减少DNS查找次数(DNS缓存)</h4><p>在浏览器中输入一个域名，回车后，DNS（域名系统）会先将域名解析成对应的IP地址，然后根据IP地址去找到相应的网址。<br><img src="http://i.imgur.com/3MellvJ.png" alt=""></p>
<p>这样就完成了一个DNS查找，这个查找过程当然是要消耗时间的，大约消耗20毫秒，在这个查找过程中，我们的浏览器什么都不会做，保持一片空白。如果这样的查找很多，那么我们的网页性能将会受到很大影响，这就需要用到DNS缓存。</p>
<p><strong>现代的浏览器都有自己的缓存机制：</strong></p>
<p> IE默认情况下对DNS查找记录的缓存时间为30分钟，Firefox默认情况下对DNS查找记录的缓存时间为1分钟，Chrome默认情况下对DNS查找记录的缓存时间为1分钟。</p>
<p>缓存时间缓存时间长优点：减少DNS的重复查找，节省时间</p>
<p>缓存时间短优点：能够及时的检测网站服务器IP地址的变化，保证访问的正确性</p>
<p><strong>单域和多域</strong></p>
<p>举个例子：<em>多域情况下</em>，我们可以将我们的网站资源：html文件、图片、脚本文件分别放在三个不同的域名下去请求访问 </p>
<p>单域情况下，我们可以将我们的网站所有资源都放在同一个域名下请求访问。 </p>
<p>多域名的好处是：能够实现页面中资源文件的并行下载。但是会增加DNS查找的次数。</p>
<p>单域名好处： 减少主机名的数量可以减少DNS查找次数，但是也会减少资源并行下载，从而会增加响应时间。 </p>
<p>一般的原则是：把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。</p>
<h4 id="配置实体标签（ETag）"><a href="#配置实体标签（ETag）" class="headerlink" title="配置实体标签（ETag）"></a>配置实体标签（ETag）</h4><p>Entity tag（ETag）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。</p>
<p>如果一致，则直接使用缓存中的内容，不需要服务器提供了。<br>增加ETag为实体的验证提供了一个比使用”last-modified date（上次编辑时间）”更加灵活的机制。</p>
<p>Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有 ETag文件头的响应指定页面内容的ETag。</p>
<pre><code>HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2015 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12166
</code></pre><p>如果浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回给原始服务器。</p>
<p>在这个例子中，ETag是匹配的，就会返回一 个304状态码，这就节省了12166字节的响应。<br> <code>If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT</code></p>
<p> <code>If-None-Match: "10c24bc-4ab-457e1c</code></p>
<p><strong>首先来说一下get和post的区别：</strong><br><img src="http://i.imgur.com/91UBCP4.jpg" alt=""><br><img src="http://i.imgur.com/Bq0yx0X.jpg" alt=""></p>
<p>Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。记住一点，“异步”并不意味着”即时”，这很重要。<br>为了提高性能，优化Ajax响应是很重要的。提高Ajax性能的措施中最重要的方法就是使响应具有可缓存性(为文件头指定Expires或Cache-Control )。其它的几条规则也同样适用于Ajax：</p>
<pre><code>* Gizp压缩文件
* 减少DNS查找次数
* 精简JavaScript
* 避免跳转
* 配置ETag(实体标签)
</code></pre>]]></content>
<summary type="html">
<p><img src="http://i.imgur.com/oXYlfAy.jpg" alt=""><br>
</summary>
</entry>
<entry>
<title>Vue2.0+Vuex2.0+使用步骤</title>
<link href="http://yoursite.com/2017/05/19/Vue2.0+Vuex2.0+%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4/"/>
<id>http://yoursite.com/2017/05/19/Vue2.0+Vuex2.0+使用步骤/</id>
<published>2017-05-19T02:50:38.150Z</published>
<updated>2017-05-19T02:58:11.568Z</updated>
<content type="html"><![CDATA[<hr>
<p><strong>首先你要在使用vue-cli脚手架开发的环境下学习本教程</strong></p>
<p><strong>1、在package.json文件中修改dependencies配置，添加vuex版本</strong></p>
<p><img src="http://i.imgur.com/AShFHIv.png" alt=""></p>
<pre><code>"dependencies": {
"vue": "^2.2.6",
"vue-router": "^2.3.1",
"vuex":"^2.0.0"
}
</code></pre><p><strong>2、添加完后记得使用npm install</strong></p>
<p><strong>3、新建vuex文件夹，并添加如下图的三个文件</strong></p>
<p><img src="http://i.imgur.com/J9nE31b.png" alt=""></p>
<p><strong>4、在main.js文件中应用store.js文件，并在new Vue中将store设置为参数</strong></p>
<p><img src="http://i.imgur.com/0kwR1MD.png" alt=""></p>
<p><strong>5、编写store.js文件</strong></p>
<p><img src="http://i.imgur.com/OJI8TeU.png" alt=""></p>
<p><strong>6、通过store.js文件中的mutations对象编写actions.js文件</strong></p>
<p><img src="http://i.imgur.com/Lm1HguB.png" alt=""></p>
<p><strong>7、编写getters.js文件</strong></p>
<p><img src="http://i.imgur.com/iVnK7Mn.png" alt=""></p>
<p><strong>8、在需要用到的文件中引入</strong></p>
<p><strong>import {mapGetters, mapActions} from ‘vuex’;</strong><br><img src="http://i.imgur.com/CynnyUt.png" alt=""></p>
<p><strong>小结：</strong><br><strong>通过明确的数据驱动关系，我们在项目初期就可以在store的state中定义一些不同组件都需要使用的数据这样当共享的数据发生变化时，其他组件也能即使更新数据</strong></p>
]]></content>
<summary type="html">
<hr>
<p><strong>首先你要在使用vue-cli脚手架开发的环境下学习本教程</strong></p>
<p><strong>1、在package.json文件中修改dependencies配置，添加vuex版本</strong></p>
<p><img src="h
</summary>
</entry>
<entry>
<title>前端进阶之CSS3</title>
<link href="http://yoursite.com/2017/04/25/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6%E4%B9%8BCSS3/"/>
<id>http://yoursite.com/2017/04/25/前端进阶之CSS3/</id>
<published>2017-04-25T09:16:22.420Z</published>
<updated>2017-04-26T01:12:48.146Z</updated>
<content type="html"><![CDATA[<hr>
<h1 id="CSS3将CSS2-1完善"><a href="#CSS3将CSS2-1完善" class="headerlink" title="CSS3将CSS2.1完善"></a>CSS3将CSS2.1完善</h1><h3 id="一、特殊边框"><a href="#一、特殊边框" class="headerlink" title="一、特殊边框"></a>一、特殊边框</h3><p>通过 CSS3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。</p>
<p>1、border-radius：创建圆角边框</p>
<pre><code>div
{
border:2px solid;
border-radius:25px;
}
</code></pre><p>2、box-shadow：向矩形添加阴影</p>
<pre><code>div
{
box-shadow: 10px 10px 5px #888888;
}
</code></pre><p>3、border-image：使用图片来绘制边框</p>
<pre><code>div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
</code></pre><h3 id="二、背景"><a href="#二、背景" class="headerlink" title="二、背景"></a>二、背景</h3><p>1、背景属性 </p>
<p><img src="http://i.imgur.com/kkWLP1A.png" alt=""></p>
<p>2、background-size：背景图片的尺寸</p>
<p>CSS3以前，背景图像大小由图像的实际大小决定。<br>CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。</p>
<pre><code> div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
</code></pre><p>3、background-origin 属性规定背景图片的定位区域</p>
<p>背景图片可以放置于<br>content-box、padding-box 或 border-box 区域。<br><img src="http://i.imgur.com/bautrsN.gif" alt=""></p>
<pre><code>div{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
</code></pre><p>4、 background-clip背景剪裁属性是从指定位置开始绘制</p>
<pre><code>#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</code></pre><h3 id="三、文本效果"><a href="#三、文本效果" class="headerlink" title="三、文本效果"></a>三、文本效果</h3><pre><code>* text-shadow 属性适用于文本阴影
* text-shadow: 5px 5px 5px #FF0000;
* 指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
* box-shadow 属性适用于盒子阴影
* box-shadow: 10px 10px 5px #888888;
* text-overflow 文本溢出属性指定应向用户如何显示溢出内容
* text-overflow: clip/ ellipsis;
* word-wrap 自动换行属性允许您强制文本换行 即使这意味着分裂它中间的一个字
* word-break 单词拆分换行属性指定换行规则
</code></pre><h3 id="四、多列"><a href="#四、多列" class="headerlink" title="四、多列"></a>四、多列</h3><p><strong>CSS3 可以将文本内容设计成像报纸一样的多列布局</strong></p>
<p>column-count 属性指定了需要分割的列数</p>
<pre><code>div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</code></pre><p>column-gap 属性指定了列与列间的间隙</p>
<pre><code>div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
</code></pre><p>column-rule-style 属性指定了列与列间的边框样式</p>
<pre><code>div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
</code></pre><p>column-rule-width 属性指定了两列的边框厚度</p>
<pre><code>div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
</code></pre><p>column-rule-color 属性指定了两列的边框颜色</p>
<pre><code>div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
</code></pre><p>column-rule 属性是 column-rule-* 所有属性的简写</p>
<pre><code>div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
</code></pre><p>column-span指定元素跨越多少列</p>
<pre><code>h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
</code></pre><p>column-width 属性指定了列的宽度</p>
<pre><code>div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
</code></pre><h3 id="五、媒体查询-CSS2也有"><a href="#五、媒体查询-CSS2也有" class="headerlink" title="五、媒体查询(CSS2也有)"></a>五、媒体查询(CSS2也有)</h3><p><strong>针对不同媒体类型可以定制不同的样式规则</strong></p>
<ul>
<li>viewport(视窗) 的宽度与高度</li>
<li>设备的宽度与高度</li>
<li>朝向 (智能手机横屏，竖屏) 。</li>
<li>分辨率</li>
</ul>
<pre><code>@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</code></pre><p>这个例子是在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色</p>
<h1 id="CSS3将CSS2-1加强"><a href="#CSS3将CSS2-1加强" class="headerlink" title="CSS3将CSS2.1加强"></a>CSS3将CSS2.1加强</h1><h3 id="一、渐变"><a href="#一、渐变" class="headerlink" title="一、渐变"></a>一、渐变</h3><p>CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡</p>
<pre><code>* 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
* 径向渐变（Radial Gradients）- 由它们的中心定义
</code></pre><h3 id="二-、2D转换"><a href="#二-、2D转换" class="headerlink" title="二 、2D转换"></a>二 、2D转换</h3><p><strong>CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。</strong></p>
<p>translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</p>
<pre><code>div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
</code></pre><p>rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</p>
<pre><code>div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
</code></pre><p>scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数</p>
<pre><code>-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
</code></pre><p>skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。</p>
<p>skewX(<angle>);表示只在X轴(水平方向)倾斜。</angle></p>
<p>skewY(<angle>);表示只在Y轴(垂直方向)倾斜。</angle></p>
<pre><code>div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
</code></pre><p>matrix()<br>matrix()方法将2D变换方法合并成一个。<br>matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能</p>
<pre><code>div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</code></pre><p><img src="http://i.imgur.com/9oBPJXF.png" alt=""></p>
<h3 id="三-、3D转换"><a href="#三-、3D转换" class="headerlink" title="三 、3D转换"></a>三 、3D转换</h3><p><strong>CSS3 允许您使用 3D 转换来对元素进行格式化。</strong></p>
<p>rotateX() 围绕其在一个给定度数X轴旋转的元素。</p>
<pre><code>div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
</code></pre><p>rotateY() 围绕其在一个给定度数Y轴旋转的元素。</p>
<pre><code>div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}
</code></pre><h3 id="四-、过渡"><a href="#四-、过渡" class="headerlink" title="四 、过渡"></a>四 、过渡</h3><p>CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。</p>
<ul>
<li></li>
<li>指定要添加效果的CSS属性</li>
<li>指定效果的持续时间</li>
</ul>
<pre><code>div{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
</code></pre><h3 id="五-、动画"><a href="#五-、动画" class="headerlink" title="五 、动画"></a>五 、动画</h3><p><strong>动画是使元素从一种样式逐渐变化为另一种样式的效果。</strong></p>
<p><strong>您可以改变任意多的样式任意多的次数。</strong></p>
<p>@keyframes规则是创建动画。 </p>
<p>@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式</p>
<p>把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：</p>
<pre><code>@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */{
from {background: red;}
to {background: yellow;}
}
div{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
</code></pre><p>请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。</p>
<p>0% 是动画的开始，100% 是动画的完成。</p>
<p>为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。</p>
<h3 id="六-、弹性盒子"><a href="#六-、弹性盒子" class="headerlink" title="六 、弹性盒子"></a>六 、弹性盒子</h3><p><strong>弹性盒子是 CSS3 的一种新的布局模式</strong><br>CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。</p>
<p>引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。</p>
<p>弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。</p>
<p>弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。</p>
<p>弹性容器内包含了一个或多个弹性子元素。</p>
<pre><code> <!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
</code></pre><p>flex-direction 顺序指定了弹性子元素在父容器中的位置。</p>
<p>justify-content 应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐</p>
<p>align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式</p>
<p>flex-wrap 属性用于指定弹性盒子的子元素换行方式。</p>
<p>align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐<br><img src="http://i.imgur.com/WG09CS0.png" alt=""></p>
]]></content>
<summary type="html">
<hr>
<h1 id="CSS3将CSS2-1完善"><a href="#CSS3将CSS2-1完善" class="headerlink" title="CSS3将CSS2.1完善"></a>CSS3将CSS2.1完善</h1><h3 id="一、特殊边框"><a href=
</summary>
</entry>
<entry>
<title>前端基础之javascript</title>
<link href="http://yoursite.com/2017/04/17/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E4%B9%8Bjavascript/"/>
<id>http://yoursite.com/2017/04/17/前端基础之javascript/</id>
<published>2017-04-17T09:12:59.900Z</published>
<updated>2017-04-26T01:12:31.314Z</updated>
<content type="html"><![CDATA[<hr>
<h1 id="javascript是什么？"><a href="#javascript是什么？" class="headerlink" title="javascript是什么？"></a>javascript是什么？</h1><p><strong>目前所有主流浏览器上唯一支持的脚本语言，Brendan Eich于1995年花了十天设计出来；</strong></p>
<h4 id="完整的JavaScript包括以下几个部分："><a href="#完整的JavaScript包括以下几个部分：" class="headerlink" title="完整的JavaScript包括以下几个部分："></a>完整的JavaScript包括以下几个部分：</h4><ul>
<li><p>ECMAScript，描述了该语言的语法和基本对象</p>
</li>
<li><p>文档对象模型（DOM），描述处理网页内容的方法和接口</p>
</li>
<li><p>浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口</p>
</li>
</ul>
<hr>
<h1 id="javascript用来干什么？"><a href="#javascript用来干什么？" class="headerlink" title="javascript用来干什么？"></a>javascript用来干什么？</h1><ul>
<li>嵌入动态文本于HTML页面</li>
<li>对浏览器事件作出响应</li>
<li>读写HTML元素</li>
<li>在数据被提交到服务器之前验证数据</li>
<li>检测访客的浏览器信息</li>
<li>控制cookies，包括创建和修改等</li>
</ul>
<hr>
<h1 id="javascript的发展"><a href="#javascript的发展" class="headerlink" title="javascript的发展"></a>javascript的发展</h1><p><strong>起初</strong>，javascript只是设计用来做页面的表单验证、操作HTML的DOM和浏览器等功能（由于当时的表单验证需要将整个页面提交到服务器，服务器发现表单中有一些数据不符合规则，则将错误返回到客户端让用户重新填写后再提交到服务器，这样一来一回就浪费了很多时间资源），javascript的设计者由于不满公司使用java为原型来设计javascript的决定，就随便用十天将javascript写出来了，这导致了javascript很多细节考虑的不够严谨;</p>
<p><strong>加强</strong>，javascript拥有操作HTML的DOM和浏览器的功能，但这都只是本地的一些操作，它没法像java 那样访问网络， 也就没有办法调用服务器端的接口来获取数据。这样导致的问题是，当页面中有一些内容需要改变，哪怕是页面中的一个文字的改变，我们都要刷新整个页面；后面IE5引入了一个新的功能XHR(XMLHttpRequest),这个新功能弥补了javascript上面的缺陷，使javascript 拥有了调用服务器接口的能力，这样通过接口获取到数据以后，再操作DOM，这样就不用每次去更新整个页面了;</p>
<p><strong>优化</strong>，当时的服务器接口返回的数据都是用XML格式的，比如：</p>
<p>><br> <book> </book></p>
<blockquote>
<pre><code><isbn>978-7-229-03093-3</isbn>
<name>三体</name>
<author>刘慈欣</author>
<introduction>中国最牛的科幻书</introduction>
<price>38.00</price>
</book>
</code></pre><p>#<br> 在这段数据中真正的数据很少， 标签（像<code><name></code>这样的）反而占了大头。后来有人发现了这个问题，并且在使用javascript的时候，javascript中不是有一个对象的东西吗，比如：<br>var book = {</p>
<p>“isbn”: “978-7-229-03093-3”,</p>
<p>“name”: “三体”,</p>
<p>“author”: “刘慈欣”,</p>
<p>“introduction”: “中国最牛的科幻书”,</p>
<p>“price”: “38.00” }</p>
</blockquote>
<p>这种数据结构很好的表达了之前XML中的数据，并且这种结构出自javascript，所以不用解析可以直接拿来用，直接提升了传输速度及展示速度。</p>
<p><strong>野心</strong>，既然javascript可以自己访问网络，操作DOM来改变页面结构及展示效果，那么是不是再给javascript添加一个操作数据库的功能，它就能上天啦，确实有人这样做了（ Ryan Dahl），这个人发明了NODEJS，将javascript移植到了服务器端，现在已经很多网站都开始使用node.js来作为后台开发语言。</p>
<p><strong>到目前为止，javascript的确可以在服务器端立足，并且有一个巨大的优势：前端和后端都用同样的开发语言：那就是 javascript。</strong></p>
]]></content>
<summary type="html">
<hr>
<h1 id="javascript是什么？"><a href="#javascript是什么？" class="headerlink" title="javascript是什么？"></a>javascript是什么？</h1><p><strong>目前所有主流浏览器
</summary>
</entry>
<entry>
<title>前端基础之CSS</title>
<link href="http://yoursite.com/2017/04/12/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E4%B9%8BCSS/"/>
<id>http://yoursite.com/2017/04/12/前端基础之CSS/</id>
<published>2017-04-12T09:03:52.292Z</published>
<updated>2017-04-26T01:12:15.410Z</updated>
<content type="html"><![CDATA[<p>在学习css之前，我们需要对HTML的知识有基本的了解！请查看我的上一篇博客<a href="https://koalahui.github.io/2017/04/10/HTML/" target="_blank" rel="external">前端基础之HTML</a></p>
<h2 id="CSS是什么？"><a href="#CSS是什么？" class="headerlink" title="CSS是什么？"></a>CSS是什么？</h2><p>CSS就是一种叫做样式表（style sheet）的技术。也有的人称之为层叠样式表（Cascading Style Sheet）。</p>
<h2 id="CSS的用来做什么的"><a href="#CSS的用来做什么的" class="headerlink" title="CSS的用来做什么的?"></a>CSS的用来做什么的?</h2><ol>
<li>CSS就是用来修饰HTML</li>
<li>在网页开发中采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</li>
<li>以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。</li>
<li>使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。</li>
<li>你可以轻松地控制页面的布局 。</li>
</ol>
<h2 id="CSS怎么用？"><a href="#CSS怎么用？" class="headerlink" title="CSS怎么用？"></a>CSS怎么用？</h2><p>CSS必须结合HTML来用（就像是衣服如果没有人来穿，再好看放着也是无用的东西）</p>
<h3 id="首先，HTML与CSS的结合方式"><a href="#首先，HTML与CSS的结合方式" class="headerlink" title="首先，HTML与CSS的结合方式"></a>首先，HTML与CSS的结合方式</h3><p> <strong>1、style属性方式（内联样式）</strong></p>
<blockquote>
<p>适合局部修改<br>*<code><font style="font-size:150px;color: red;">
今天天气好晴朗</font></code></p>
</blockquote>
<p><strong>2、style标签方式：（内嵌样式）</strong></p>
<blockquote>
<p><code><style></style></code>存在于head标签之中的</p>
<p>例如：<br> <code><style type="text/css">font{font-size:150px;color: red; }</style></code><br>页面的多个标签统一设置。</p>
</blockquote>
<p><strong>3、链接方式（外部样式最常用的方式）</strong> </p>
<blockquote>
<p>格式： <code><link rel="stylesheet" type="text/css" href="CSS文件路径"/></code><br>存在于<head>标签中</head></p>
</blockquote>
<h3 id="然后，HTML标签与CSS样式的绑定"><a href="#然后，HTML标签与CSS样式的绑定" class="headerlink" title="然后，HTML标签与CSS样式的绑定"></a>然后，HTML标签与CSS样式的绑定</h3><p>如何将指定的CSS样式作用于特定的HTML标签上呢，这就轮到我们的CSS选择器登场了。</p>
<blockquote>
<p>CSS选择器：你可以将它看作是一把钥匙，当找到匹配的锁就会将锁打开</p>
</blockquote>
<h3 id="CSS选择器可以分为："><a href="#CSS选择器可以分为：" class="headerlink" title="CSS选择器可以分为："></a>CSS选择器可以分为：</h3><p><strong>1、元素选择器</strong> </p>
<blockquote>
<p>就是把HTML标签名作为选择器名称</p>
<p>格式： 标签名 {}</p>
</blockquote>
<p><strong>2、类选择器</strong> </p>
<blockquote>
<p>样式格式： .class名{}</p>
<p>标签格式： </p><p class="”class名”"></p><p></p>
<p>能设置不同标签的相同样式</p>
</blockquote>
<p><strong>3、Id选择器</strong></p>
<blockquote>
<p>样式格式： #id名{}</p>
<p>标签格式：<pid=”id名”></pid=”id名”></p><p></p>
<p>有针对性地设置样式</p>
</blockquote>
<p><strong>4、属性选择器</strong></p>
<blockquote>
<p>根据标签名和标签的属性名以及属性值来选择</p>
<p>样式格式：标签名[属性名称=’属性值’]</p>
</blockquote>
<p><strong>5、伪元素选择器</strong></p>
<blockquote>
<p>HTML预定义的选择器</p>
<p>格式：标签名:选择器{}</p>
<p>选择器名称为 HTML标签的状态。例如：a:link{}表示链接标签在未访问过 时的样式。</p>
</blockquote>
<p><strong>这篇文章只是粗略的介绍了一下CSS，下面我将会写一系列的有关CSS的文章，敬请期待……</strong></p>
]]></content>
<summary type="html">
<p>在学习css之前，我们需要对HTML的知识有基本的了解！请查看我的上一篇博客<a href="https://koalahui.github.io/2017/04/10/HTML/" target="_blank" rel="external">前端基础之HTML</a><
</summary>
</entry>
<entry>
<title>前端基础之浏览器运行原理</title>
<link href="http://yoursite.com/2017/04/10/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86/"/>
<id>http://yoursite.com/2017/04/10/浏览器的运行原理/</id>
<published>2017-04-10T08:40:21.838Z</published>
<updated>2017-04-26T01:11:45.018Z</updated>
<content type="html"><![CDATA[<p>##前言</p>
<hr>
<p>作为一名前端工程师我们有必要知道浏览器是怎样将我们写的HTML、CSS以及JS转换成我们眼睛所见到的花花绿绿的文字及图片的。这也是我《前端系统性学习》专栏的开篇第一讲，后面还会有一系列的基础或一些深究原理的文章，欢迎大家关注。</p>
<p>##正文</p>
<hr>
<p>###<strong>1、思考问题： 从输入 URL 到页面加载完成的过程中都发生了什么事情？</strong></p>
<ol>
<li>输入地址</li>
<li>浏览器查找域名的IP地址</li>
<li>浏览器向web服务器发送一个HTTP请求</li>
<li>服务器的永久重定向响应</li>
<li>浏览器跟踪重定向地址</li>
<li>服务器处理请求</li>
<li>服务器返回一个 响应</li>
<li>浏览器显示HTML</li>
<li>浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、js等等）</li>
<li>浏览器发送异步请求</li>
</ol>
<p>###<strong>2、作为一个前端，我们将问题聚焦于后面的两点浏览器显示HTML、浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、js等等）浏览器为了完成这两步骤到底发生了什么？</strong></p>
<p>####2.1首先我们先来了解下浏览器的组成</p>
<p> <img src="http://img.blog.csdn.net/20170406152053970?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5NTg2NTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="图片来自网络"></p>
<pre><code>* 用户界面：定义了一些常用的浏览器组件，比如地址栏，返回、书签等等
* 数据持久化：指浏览器的cookie、local storage等组件
* 浏览器引擎：平台应用的相关接口，在用户界面和呈现引擎之间传送指令。
* 渲染引擎：处理HTML、CSS的解析与渲染
* JavaScript解释器：解析和执行JavaScript代码
* UI后端：指浏览器的的图形库等
* 网络：用于网络调用，比如HTTP请求
</code></pre><p>####2.2接下来我们来看看浏览器渲染页面的主流程<br>当我们在浏览器的地址栏输入了url（用户界面），浏览器引擎通知渲染引擎调用网络API实现HTTP请求，当服务器返回一个响应后，渲染引擎开始工作<br>下面是在取得内容之后的基本流程：<br>解析html以构建dom树->构建render树->布局render树->绘制render树</p>
<p> <img src="http://img.blog.csdn.net/20170406152533000?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5NTg2NTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="图片来自网络"></p>
<p>渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。<br>Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。<br>Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标（layout\reflow）。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。</p>
<p>###<strong>3、DOM解析、CSS解析、渲染</strong></p>
<p>####3.1DOM解析<br>HTML的解析分为两个过程，词法解析和语法解析。词法解析就是将整个HTML文档拆分成一个一个标签，而语法解析就是列出这一个个标签之间的关系。下面就是HTML文档完成解析转成的DOM树：</p>
<pre><code><html>
<body>
<p>
Hello DOM
</p>
<div><img src=”example.png” /></div>
</body>
</html>
</code></pre><p><img src="http://img.blog.csdn.net/20170406152948989?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5NTg2NTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="（图片来自网络）"></p>
<p>####3.2CSS解析<br>将css文件解析为样式表对象。该对象包含css规则，该规则包含选择器和声明对象。</p>
<p>####3.3渲染<br><img src="http://img.blog.csdn.net/20170406153338475?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5NTg2NTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></p>
<p>#####3.3.1、计算CSS样式<br>计算CSS样式其实就是将CSS样式绑定到DOM节点上的过程， CSS匹配DOM Tree主要是从右到左解析CSS的选择器， CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，DOM树要小，CSS尽量用id和class选择器，千万不要过渡层叠下去，并且在最右边千万别写*通配符。</p>
<p>#####3.3.2、构建render树<br>构建render树就是将上面计算好的CSS样式和render Tree关联起来</p>
<p>#####3.3.3、layout（定位标签在页面中的位置）<br>将上面两步构建好的render Tree包含了位置、颜色、大小等信息，layout就是通过编译这些信息将DOM节点摆放到页面中对应的位置</p>
<p>#####3.3.4、paint （绘制元素）<br>确定好位置我们就要使用我们的UI组件来将形形色色的内容颜色具体的表现形式paint出来展示给大家了<br>值得注意的是在layout和paint的过程中有两个很重要的概念：<br><strong>Reflow</strong>:字面意思是重新流程，我们需要去重新验证并计算Render Tree，这样就涉及到整个页面的修改，极好性能，所以我们在做性能优化的时候就是尽可能的让浏览器少Reflow<br><strong>Repaint</strong>:字面意思是重新绘制，我们需要重画屏幕的一部分页面，但是不需要去重新验证并计算Render Tree,这样不会有那么大的性能损耗</p>
]]></content>
<summary type="html">
<p>##前言</p>
<hr>
<p>作为一名前端工程师我们有必要知道浏览器是怎样将我们写的HTML、CSS以及JS转换成我们眼睛所见到的花花绿绿的文字及图片的。这也是我《前端系统性学习》专栏的开篇第一讲，后面还会有一系列的基础或一些深究原理的文章，欢迎大家关注。</p>
<p
</summary>
</entry>
<entry>
<title>前端基础之HTML</title>
<link href="http://yoursite.com/2017/04/10/HTML/"/>
<id>http://yoursite.com/2017/04/10/HTML/</id>
<published>2017-04-10T08:29:49.833Z</published>
<updated>2017-04-26T01:18:27.861Z</updated>
<content type="html"><![CDATA[<p><img src="http://i.imgur.com/gndNOPY.jpg" alt=""><br><a id="more"></a></p>
<h1 id="HTML是什么？"><a href="#HTML是什么？" class="headerlink" title="HTML是什么？"></a>HTML是什么？</h1><p>HTML(Hyper Text Markup Language超文本标记语言 ) 是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。 网页浏览器可以读取HTML文件，并将其渲染成可视化网页。 HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言；这是维基百科的解释，而我眼中的HTML则是一个容器，用来容纳各种我们需要展示的文字，图片，声音的容器。</p>
<h1 id="HTML用来做什么？"><a href="#HTML用来做什么？" class="headerlink" title="HTML用来做什么？"></a>HTML用来做什么？</h1><p>它容纳了我们需要展示的文字、图片、声音，然后我们可以通过浏览器来查看它，（HTML是用来制作网站的。就这么简单！）</p>
<h1 id="HTML怎么用？"><a href="#HTML怎么用？" class="headerlink" title="HTML怎么用？"></a>HTML怎么用？</h1><p>HTML分为很多种类，不同的类型装载不同的内容，比如说</p>
<p><code><img></code>是用来容纳图片的</p>
<p><code><p></code>是用来容纳文字的</p>
<p><code><div></code>则是用来容纳前面所说的<code><img><p></code>等的容器</p>
<p>他们分工明确，你要做的只是像垃圾分类一样，把你需要展示给用户的内容放入对的容器，就是这么简单；<br>当然容器是有大小、颜色、姓名的 而这些你都可以控制，就是给你的容器添加你需要的属性：width、heigth、id等等；</p>
<p>下面就是一段标准的HTML文档</p>
<pre><code> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标准的HTML模板，你可以放你要放的东西进来</title>
</head>
<body>
<div id="旺财">
<img src="http://image.baidu.com" alt="#" style="width: 200px;height: 200px;">
<p>我的名字是旺财</p>
</div>
</body>
</html>
</code></pre><h1 id="HTML中需要注意的地方"><a href="#HTML中需要注意的地方" class="headerlink" title="HTML中需要注意的地方"></a>HTML中需要注意的地方</h1><p>你可以以多种不同的方式来编写HTML；同时，浏览器也可以以多种不同的方式来理解HTML。你可以认为<strong>HTML有很多种方言</strong>。这就是为什么某些网站会在不同的浏览器上显示出不同效果的原因。就像是不同的家庭拥有不同的容器，你尽量选择大家都有的容器来容纳你需要的内容。</p>
<h1 id="HTML拓展"><a href="#HTML拓展" class="headerlink" title="HTML拓展"></a>HTML拓展</h1><p>XHTML是HTML的严格模式，怎么说呢，就像是规定了容器的名字必须是用小写字母写的（标签名小写）；<br>容器装了东西后必须盖好（标签必须关闭）；<br>容器与容器之间的关系必须正确，不能小容器装大容器，大容器的盖子盖到小容器上面等等（元素必须被正确地嵌套）<br>所有的容器必须放在一个架子上面（ 文档必须拥有根元素）</p>
]]></content>
<summary type="html">
<p><img src="http://i.imgur.com/gndNOPY.jpg" alt=""><br>
</summary>
</entry>
</feed>