forked from hzlzh/Front-End-Standards
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
811 lines (712 loc) · 29.1 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
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
<title>前端规范 | Front-End-Standards.com</title>
<meta content="前端, 规范" name="keywords">
<meta content="前端规范 | Front-End-Standards.com" name="description">
<meta content="no" name="apple-mobile-web-app-capable">
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet">
<link href="css/libs/prettify.css" type="text/css" rel="stylesheet" />
<script src="js/libs/modernizr.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/showdown.js"></script>
<script type="text/javascript" src="js/libs/showdown-gui.js"></script>
</head>
<body data-spy="scroll">
<header>
<h1>Front End Standards</h1>
<span class="description">前端规范</span>
</header>
<div class="container">
<nav>
<ul class="nav" id="nav">
<li class="active">
<a href="#1">规范梗概</a>
</li>
<li>
<a class="current" href="#22css">CSS 规范</a>
</li>
<li>
<a href="#23xhtml">XHTML 规范</a>
</li>
<li>
<a href="#24js">JS 规范</a>
</li>
<li>
<a href="#25responsiveweb">响应式 Web 规范</a>
</li>
<li>
<a href="#26newletter">Newletter规范</a>
</li>
<li>
<a href="#271formacos">资源汇总</a>
</li>
<li>
<a href="#29">参考数据</a>
</li>
</ul>
</nav>
<article>
<div class="content-box">
<div class="content">
<select id="paneSetting">
<option value="previewPane">[切换模式] 普通</option>
<option value="syntaxPane">[切换模式] MarkDown</option>
<option value="outputPane">[切换模式] HTML</option>
</select>
<textarea style="display:none;" id="outputPane" class="pane" readonly="readonly" rows="25" cols="100"></textarea>
<div id="previewPane" class="pane markdown-body"><noscript><h2>You'll need to enable Javascript to use this tool.</h2></noscript></div>
<textarea style="display:none;" id="syntaxPane" class="pane" cols="80" rows="20" >
## 1. 规范说明
此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。
此规范为参考规范，不全是硬性要求，部分硬性约定见下一条[书写规范](#2)，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。
### 1.1 结构说明
-- [项目结构](#项目结构)
----|---- [CSS文件结构](#css-文件结构)
----|---- [JS文件结构](#js-文件结构)
## 2. 书写规范
### 2.1 样式与内容分离
#### 2.1.1 项目结构
---
|---- index.html 入口页
|---- js/ JS //具体见JS细化结构
|---- css/ CSS //具体见CSS细化结构
#### 2.1.2 重构步骤约定
1. `index.html` 全部样式附着于 `class="xxx"` **注：** _此时文件中不包含任何一个 id="xxx"_
2. 为上一步书写 CSS style
**\[至此重构完成\]**
3. 开始书写`js`交互文件，使用 `ID` 和 `Class` 定位被操作句柄
4. 向 `index.html` 中需要的地方添加 `id="xxx"` 及 `data-xxx="xxx"`
**\[至此交互效果完成\]**
#### 2.1.3 命名规范
* 文件及文件夹: 全部英文小写字母+数字或连接符"`-` , `_` "，不可出现其他字符
如：`../css/style.css, jquery.1.x.x.js`
* 文件：调用 `/libs` 文件需包含版本号，压缩文件需包含`min`关键词，其他插件则可不包含
如：`/libs/jquery.1.9.1.js` `/libs/modernizr-1.7.min.js` `fileuploader.js` `plugins.js`
* ID: [匈牙利命名法] & [小駝峰式命名法]
如：`firstName` `topBoxList` `footerCopyright`
* Class: [减号连接符]
如：`top-item` `main-box` `box-list-item-1`
* 尽量使用语义明确的单词命名，避免 `left` `bottom` 等方位性的词语
#### 2.1.4 格式&编码
* 文本文件： `.xxx` UTF-8_\(无BOM\)_ 编码
* 图片文件： `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_
* 动态图片： `.gif`
* 压缩文件： `.tar.gz` `.zip`
### 2.2 CSS 细化规范
#### 2.2.1 CSS 文件结构
--- ../css/
|---- css/libs/reset.css CSS reset文件
|---- … …
|---- css/images/ 主 CSS-sprite 图片
|---- css/style.css 主 CSS 样式表
|---- … …
|---- css/images/xxx/sprite.png xxx 的 CSS-sprite 图片
|---- css/xxx-style.css xxx 的 样式表
#### 2.2.2 CSS(含Less) 文件结构
--- ../css/
|---- css/libs/reset.less CSS reset文件
|---- css/libs/elements.less Less 函数复用文件
|---- … …
|---- css/images/ 主 CSS-sprite 图片
|---- css/style.less 主样式Less
|---- css/style.css less -> css 自动生成
|---- … …
|---- css/images/xxx/sprite.png xxx 的 CSS-sprite 图片
|---- css/xxx-style.less xxx 的 Less
|---- css/xxx-style.css less -> css 自动生成
#### 2.2.3 使用Less
在 `.less`文件头部引入 [reset.less] & [elements.less]，之后调用如下属性传参即可，具体使用说明见 -> [Lesselements] 官方文档
@import "libs/reset.less";
@import "libs/elements.less";
.gradient
.bw-gradient
.bordered
.drop-shadow
.rounded
.border-radius
.opacity
.transition-duration
.rotation
.scale
.transition
.inner-shadow
.box-shadow
.columns
.translate
#### 2.2.4 CSS reset
CSS reset 文件使用：[reset.css] 或 [reset.less]
* reset文件用于重设各个浏览器的默认样式方案，解决其引起的耦合问题。
* 也可使用 `.clearfix` 清除浮动
#### 2.2.5 CSS 注释格式约定
/*
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@require: reset.css
@author: Andy Huang([email protected])
*/
_其中，@require为可选项_
* CSS换行制表：使用 2 <del>或4</del> 个空格，而非\[Tab\]
* 书写格式：
* CSS名称+冒号+属性
如：`.box1 {float:left;}`
* 建议保留`{`左侧空格，字体名用`\`包含
如：`.box1,.box2,.box3 {font-family:Courier,'Courier New';}`
* 避免中文，或使用转义，推荐前者
如：`font-family: "Microsoft YaHei";` `font-family:\5fae\8f6f\96c5\9ed1;`
#### 2.2.6 CSS各属性的排列顺序：不做硬性要求
_如：以下2种顺序均可_
.box {
/* 顺序1 */
background: none repeat scroll 0 0 transparent;
bottom: 11px;
position: relative;
width: 22px;
z-index: 33;
}
.box {
/* 顺序2 */
z-index: 33;
width: 22px;
bottom: 11px;
background: transparent none repeat scroll 0 0 ;
position: relative;
}
#### 2.2.7 CSS嵌套规则
/* 推荐嵌套层级 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}
/* 不推荐 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}
#### 2.2.8 CSS格式化
勿格式化，保留下面这种格式，增加可读性和可维护性，后期后台程序(如：PHP/Python)会将CSS压缩成 **一行** 输出：
.box{
/* 勿格式化，增加可读性 */
background: none repeat scroll 0 0 transparent;
bottom: 11px;
position: relative;
width: 22px;
z-index: 33;
}
### 2.3 XHTML 细化规范
#### 2.3.1 HTML 注释格式约定
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Andy Huang([email protected])
-->
<div id="header">
<div class="xxx">
<span>HTML行内注释格式</span>
</div>
</div><!-- #header end-->
* HTML换行缩进：**采用 2 空格**
#### 2.3.2 HTML嵌套规则
/* 推荐嵌套层级 */
<ul class="ui-nav">
<li class="ui-nav-item"> some text
<ul class="ui-nav-item-child">
<li> some text
<ul class="ui-list">
<li class="ui-list-item"> some text</li>
</ul
...
</ul>
</li>
<li
...
</ul>
#### 2.3.4 \* 第一行统一使用HTML5标准：<!DOCTYPE html>
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>极客公园 | 创新者社区</title>
<meta name="keywords" content="xxxx, xxx, xxxxx" />
<meta name="description" content="xxxxxxxxxxxxxxxxxxxx" />
#### 2.3.5 Meta 的使用：（需要根据具体需求按需选择）可参看：[cool-head]
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.geekpark.net/" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script type="text/javascript" src="/js/xxx.js"></script>
<link rel="stylesheet" href="/css/xxx.css">
<script type="text/javascript">
//Google 统计代码 的位置在离</head>最近的位置
</script>
</head>
* `<img>`标签默认缺省格式：`<img src="xxx.png" alt="缺省时文字" />` 避免出现[src="" 问题]
* `<a>`标签缺省格式：`<a href="###" title="链接名称">xxx</>` 注：`target="_blank"` 根据需求决定
* `<a>`标签预留链接占位符使用`###`，参见：[a标签占位符问题]
* 所有标签需要符合XHTML标准闭合
* 一律统一标签结尾斜杠的书写形式：`<br />` `<hr />` 注意之间空格
* 避免使用已过时标签，如：`<b>` `<u>` `<i>` 而用 `<strong>` `<em>`等代替
* 使用`data-xxx`来添加自定义数据，如：`<input data-xxx="yyy"/>`
* 避免使用`style="xxx:xxx;"`的内联样式表
* 特殊符号使用参考[HTML 符号实体]
### 2.4 JS 细化规范
#### 2.4.1 JS 文件结构
---/js/
|---- /libs/plugin-1/ 使用到的js插件1
|---- /libs/plugin-2/ 使用到的js插件2
|---- /libs/plugin-3/ 使用到的js插件3
|---- script.js 单独书写的js
|---- plugins.js 调用的plugins汇总
|---- juqery-1.9.x.min.js 调用jq库文件
* JS 换行缩进：采用 4 空格
* 结束行需添加分号`;`
* jQuery变量要求首字符为 `$`, 私有变量:首字符为`_`; 尽量避免全局变量.
* 避免使用 eval()，setTimeOut使用调用函数，考虑重绘，回流 操作对页面影响 参看：[reflows，repaints]
* JS调试使用`console.log()`及`console.dir()`进行，避免使用弹出框，线上版需要注释所有调试代码
* JS压缩混淆工具: [JS Compressor] 如果使用了压缩，需要留 `name-src.js`在同路径供今后修改使用
##### 2.4.2 jQuery Call
<!-- Grab Google CDN jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
##### 2.4.3 jQuery Plugin
* IE对HTML5标签支持，以及浏览器特性检测：[Modernizr] & [html5shiv]
* <del>IE6 PNG 图片支持：[DD_belatedPNG]</del>
* 定制&统一 浏览器的滚动条样式：[jquery-scroll] & [Lionbars]
* hover提示效果文字：[bootstrap-tooltips] & [tipsy]
* 滚动条跟随nav效果：[bootstrap-scrollspy]
* 提示冒泡文字：[grumble.js]
* 导航栏过渡效果：[lavalamp]
* 移动设备的滚动效果：[iscroll 4]
* Mac OS Lion 风格的滚动条：[Lionbars]
* 弹性SlideShow：[kwicks for jQuery]
* 瀑布流：[isotope]
* 抖动效果：[jQ shake]
* LightBox：[fancyBox]
* KenDo UI：[KenDo UI]
* textarea自适应高度：[elastic]
* 提示区域 & 提示层：[noty]
* 浮动话题泡：[jQuery grumble]
* 旋转进度：[jQuery Knob]
##### 2.4.4 JSON格式规范
参考[JSON Style Guide翻译]，原版：[Google JSON Style Guide]
### HTML 细化规范
* HTML `head`部分的结构参看：[cool-head] \(摘取必要内容即可)
* `css` 文件置于都 **头部**
* `jQuery` 及 `Google Analytics`引用置于 **头部**
* 其他效果`js`及`统计代码` 文件置于 **尾部**
* HTML 代码尽量过一遍[HTML5 验证]
* HTML 占位图片使用 [temp.im] & [placehold.us] 图片服务
### 2.5 Responsive Web 规范
从设计之处就坚持"[Mobile First]"的理念，在重构页面的时候要灵活采取响应式的解决方案。
#### 2.5.1 响应式实现途径
\* 设置 [meta viewport] 属性
<meta name="viewport" content="width=device-width, initial-scale=1" />
\* 引入不同尺寸设备的样式表
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->
\* 使用 [CSS Media Queries] 方法
@media screen and (max-width: 40.5em) {
.product-img {
width: auto;
float: none;
}
}
@media screen and (max-width: 480px) {
}
\* JS控制导航栏在 [resize 事件] 触发后的可见性，如：
$(w).resize(function(){ //Update dimensions on resize
sw = document.documentElement.clientWidth;
sh = document.documentElement.clientHeight;
checkMobile();
});
//Check if Mobile
function checkMobile() {
mobile = (sw > breakpoint) ? false : true;
if (!mobile) { //If Not Mobile
$('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
} else { //Hide
if(!$('#nav-anchors a').hasClass('active')) {
$('#nav,#search').hide(); //Hide full navigation and search
}
}
}
#### 2.5.2 响应式解决方案
\* 弹性图片
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
\* 自适应嵌入媒体
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
\* 禁用iPhone字体自适应功能：
html {
-webkit-text-size-adjust: none;
}
\* 让 IE 9 以下的IE版本支持响应式：
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
### 2.6 Newletter 制作规范
* `CSS`只可使用 **内联样式表** ，如：`style="margin:0;"`
* 设计之初遵循： **图上无文本，文本后无底纹** 的规则
* 使用 `MailChimp HTML Email CSS Fix` 参看下文链接
* 引入 `CSS Reset for HTML Email` 参看下文链接
* 使用`Table`布局而非`DIV`
* 所有图片使用`IMG`标签，如：`<img style="style="display:block" "src="" />`
* 可以适当使用占位符`spacer.gif`
* 多用`<br />`换行而非`<p>`
* 整体最佳宽度为：`550-600px`
* 不使用`Javascript`
* 正式发送给用户之前，多次测试
更多细节参考下面链接：
[12 Killer Tips and Tricks for Building HTML Email]
[Coding HTML Newsletters (EDM)]
### 2.7 生产力工具推荐
#### 2.7.1 for Mac OS
*for more app detial check -> [IUSETHIS](http://osx.iusethis.com/user/hzlzh 'App pack')*
##### 2.7.1.1 前端相关工具(Mac)
* 编辑器：[Sublime Text 2] / [TextMate 2] / [Vim] / [Intellij IDEA]
* 命令行：[iTerm2]
* 浏览器调试环境：[Chrome] / [Firefox] + [Firebug]
* 移动设备调试环境：[Mozilla Fennec]
* 兼容性测试：[VirtualBox] + Win XP（IE 8）
* 版本控制工具：[GitHub for Mac] / [Versions] / [SourceTree]
* FTP工具：[Filezilla] / [ForkLift]
* HTTP抓包及Post/Get模拟：[Charles]
* PHP集成环境：[XAMPP for Mac] / [MAMP]
* SQL数据库管理：[Sequel Pro]
* 标注工具：[Mark Man] / [xScope]
* 取色拾色器： [Frank DeLoupe] / [Sip] / [Snip] / [xScope]
* MarkDown编辑器：[Mou]
* 浏览器免刷新开发环境：[LiveReLoad] / [CodeKit]
* CSS Sprite切图工具：[SpriteRight]
* Less -> CSS 编译：[CodeKit] / [LiveReLoad] / [Less]
* 配色方案工具：[ColorSchemer Studio]
* 多浏览器Cookie管理：[Cookie]
* 图片素材收集：[Sparkbox] / [Pixa]
##### 2.7.1.2 其他效率工具
* 快速启动及切换app：[Alfred]
* 剪切板历史记录：[Alfred]*(Fretures -> Clipboard)*
* 笔记：[Evernote]
* 轻量级GTD：[Clear]
* 压缩解压：[The Unarchiver] / [Keka] / [iPack]
* 语言文档和快捷词扩展：[Dash]
* 时间中断提醒：[BreakTime]
##### 2.7.2.1 前端相关工具(Windows)
* 编辑器：[Sublime Text 2] / [Vim] / [Intellij IDEA]
* 命令行：[Putty]
* 浏览器调试环境：[Chrome] / [Firefox]
* 移动设备调试环境：[Chrome Remote USB Debugging]
* 版本控制：[Subversion] / [Github for Windows]
* FTP工具：[Filezilla]
* 抓包工具：[Fiddler2]
* MarkDown：[MarkdownPad]
* 浏览器免刷新开发环境：[LiveReLoad] / [F5]
* Less -> CSS编译：[less.org]*(nodejs环境下编译)*
* Haml -> Html编译：[haml.info]*(Gem下编译)*
* 响应式设计查看工具：[Firefox Responsive Design View]
##### 2.7.2.2 其他效率工具(Windows)
* 笔记：[Evernote]
* 压缩解压：[7z]
#### 2.7.3 其他收集
* Firefox 扩展收藏集 -> [Firefox Add-ons collections]
* Chrome 扩展 -> 待添加
* Sublime Text 2 技巧 -> [ST2 资源技巧汇总]
### 2.8 相关技巧
[Wiki page index]
* [各浏览器的缓存清除方法]
* [测试技巧Gmail 添加词缀 .+ 获得多个邮件的方法]
* [关于Mac Win Linux跨系统传文件，文件名乱码的解决方案]
* [技术团队"路由代理"解决方案和使用须知]
### 2.9 参考数据
涉及到 `设计`->`重构`->`兼容性`->`测试` 时可参考各浏览器的占用情况
*-- updated: `2013/02 - 2013/04`* via `Google Analytics of GeekPark`
<table>
<tbody valign="top"><tr>
<th align="center">总浏览器分布</th>
<th align="center">IE版本分布</th>
<th align="center">移动设备分布</th>
<th align="center">屏幕解决方案</th>
</tr>
<tr>
<td align="left">
<table>
<tbody><tr>
<th align="left">类别</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">Chrome</td>
<td align="right">40.39%</td>
</tr>
<tr>
<td align="left">Internet Explorer</td>
<td align="right">24.86%</td>
</tr>
<tr>
<td align="left">Safari & Safari (in-app)</td>
<td align="right">16.05%</td>
</tr>
<tr>
<td align="left">Android Browser</td>
<td align="right">10.57%</td>
</tr>
<tr>
<td align="left">Firefox</td>
<td align="right">5.99%</td>
</tr>
<tr>
<td align="left">Opera</td>
<td align="right">0.69%</td>
</tr>
<tr>
<td align="left">Opera Mini</td>
<td align="right">0.37%</td>
</tr>
<tr>
<td align="left">Mozilla Compatible Agent</td>
<td align="right">0.14%</td>
</tr>
<tr>
<td align="left">Maxthon</td>
<td align="right">0.13%</td>
</tr>
</tbody></table>
</td>
<td align="right">
<table>
<tbody><tr>
<th align="left">版本号</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">IE 8</td>
<td align="right">60.97%</td>
</tr>
<tr>
<td align="left">IE 9</td>
<td align="right">17.11%</td>
</tr>
<tr>
<td align="left"><em>IE 7</em></td>
<td align="right">8.39%</td>
</tr>
<tr>
<td align="left"><em>IE 6</em></td>
<td align="right">7.63%</td>
</tr>
<tr>
<td align="left">IE 10</td>
<td align="right">5.87%</td>
</tr>
<tr>
<td align="left">IE 4</td>
<td align="right">0.02%</td>
</tr>
</tbody></table>
</td>
<td align="right">
<table>
<tbody><tr>
<th align="left">移动平台</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">iOS</td>
<td align="right">50.39%</td>
</tr>
<tr>
<td align="left">Android</td>
<td align="right">48.05%</td>
</tr>
<tr>
<td align="left">Windows Phone</td>
<td align="right">0.96%</td>
</tr>
<tr>
<td align="left">Nokia</td>
<td align="right">0.33%</td>
</tr>
</tbody></table>
</td>
<td align="right">
<table>
<tbody><tr>
<th align="left">PC & Mac屏幕分辨率</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">1366x768</td>
<td align="right">21.55%</td>
</tr>
<tr>
<td align="left">1440x900</td>
<td align="right">12.70%</td>
</tr>
<tr>
<td align="left">1280x800</td>
<td align="right">9.60%</td>
</tr>
<tr>
<td align="left">1280x1024</td>
<td align="right">6.68%</td>
</tr>
<tr>
<td align="left">320x480</td>
<td align="right">6.38%</td>
</tr>
<tr>
<td align="left">1920x1080</td>
<td align="right">6.27%</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
### 使用团队
此规范基于 [MIT License] 开源，持续更新维护中，可 `Star` 或 `Fork` 本项来形成你的规范，请以 [创建[issues]](https://github.com/hzlzh/GeekPark-FrontEnd-Standard/issues/new) 的方式反馈，或发起`Pull Request`
[reflows，repaints]: http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/ "重绘,回流参考"
[src="" 问题]: http://js8.in/555.html "src="" 问题"
[a标签占位符问题]: http://www.v2ex.com/t/48511/ "a标签占位符问题"
[匈牙利命名法]: http://zh.wikipedia.org/wiki/%E5%8C%88%E7%89%99%E5%88%A9%E5%91%BD%E5%90%8D%E6%B3%95 "Wiki:匈牙利命名法"
[小駝峰式命名法]:http://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB "小駝峰式命名法"
[CSS Compressor]: http://www.csscompressor.com/ "CSS 压缩"
[JS Compressor]: http://javascriptcompressor.com/ "JS 压缩和混淆"
[HTML 符号实体]: http://www.w3school.com.cn/html/html_entities.asp
[Google JSON Style Guide]:http://google-styleguide.googlecode.com/svn/trunk/jsoncstyleguide.xml
[JSON Style Guide翻译]:https://github.com/darcyliu/google-styleguide/blob/master/JSONStyleGuide.md
[meta viewport]: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag "<meta> ViewPort"
[CSS Media Queries]: http://css-tricks.com/css-media-queries/
[resize 事件]: http://api.jquery.com/resize/
[Lesselements]: http://lesselements.com/
[Bootstrap]: http://twitter.github.com/bootstrap/ "Bootstrap, from Twitter"
[reset.css]: https://github.com/hzlzh/cool-head/blob/master/Template/css/libs/reset.css "CSS reset 文件"
[reset.less]: https://github.com/hzlzh/cool-head/blob/master/Template/css/libs/reset.less "reset.less from HTML5 Boilerplate"
[elements.less]: https://github.com/hzlzh/cool-head/blob/master/Template/css/libs/elements.less "elements.less from lesselements"
[HTML5 验证]: http://html5.validator.nu/
[Modernizr]: http://modernizr.com/download/
[DD_belatedPNG]: http://www.dillerdesign.com/experiment/DD_belatedPNG/
[html5shiv]: https://github.com/aFarkas/html5shiv
[jquery-scroll]: https://github.com/thomd/jquery-scroll/
[Lionbars]: https://github.com/Charuru/lionbars
[bootstrap-tooltips]: http://twitter.github.com/bootstrap/javascript.html#tooltips
[bootstrap-scrollspy]: http://twitter.github.com/bootstrap/javascript.html#scrollspy
[grumble.js]: https://github.com/jamescryer/grumble.js
[lavalamp]: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
[iscroll 4]: https://github.com/cubiq/iscroll
[kwicks for jQuery]: https://github.com/Mottie/Kwicks
[isotope]: https://github.com/desandro/isotope
[jQ shake]: https://gist.github.com/3270711
[fancyBox]: https://github.com/fancyapps/fancyBox
[KenDo UI]: http://www.kendoui.com/purchase.aspx
[elastic]: http://unwrongest.com/projects/elastic/
[cool-head]: https://github.com/hzlzh/cool-head
[noty]: https://github.com/needim/noty
[jQuery grumble]: https://github.com/jamescryer/grumble.js
[tipsy]: https://github.com/jaz303/tipsy
[jQuery Knob]: https://github.com/aterrien/jQuery-Knob
[各浏览器的缓存清除方法]: https://github.com/GeekPark/Doc/wiki/%5B%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E7%BC%93%E5%AD%98%5D%E5%90%84%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B5%8B%E8%AF%95%E7%BD%91%E9%A1%B5%E6%97%B6%E6%B8%85%E9%99%A4%E7%BC%93%E5%AD%98%E7%9A%84%E6%96%B9%E6%B3%95
[测试技巧Gmail 添加词缀 .+ 获得多个邮件的方法]: https://github.com/GeekPark/Doc/wiki/%5B%E6%B5%8B%E8%AF%95%E6%8A%80%E5%B7%A7%5DGmail-%E6%B7%BB%E5%8A%A0%E8%AF%8D%E7%BC%80(.--)%E8%8E%B7%E5%BE%97%E5%A4%9A%E4%B8%AA%E9%82%AE%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95
[关于Mac Win Linux跨系统传文件，文件名乱码的解决方案]: https://github.com/GeekPark/Doc/wiki/%E5%85%B3%E4%BA%8E%5BMac%5D-%5BWin%5D-%5BLinux%5D%E8%B7%A8%E7%B3%BB%E7%BB%9F%E4%BC%A0%E6%96%87%E4%BB%B6%EF%BC%8C%E6%96%87%E4%BB%B6%E5%90%8D%E4%B9%B1%E7%A0%81%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88
[技术团队"路由代理"解决方案和使用须知]: https://github.com/GeekPark/Doc/wiki/%E6%8A%80%E6%9C%AF%E5%9B%A2%E9%98%9F%5B%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%90%86%5D%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%92%8C%E4%BD%BF%E7%94%A8%E9%A1%BB%E7%9F%A5
[Mobile First]: http://www.lukew.com/ff/entry.asp?933 "Mobile First"
[Sublime Text 2]:http://www.sublimetext.com/2
[TextMate 2]:https://github.com/textmate/textmate
[Intellij IDEA]:http://www.jetbrains.com/idea/
[Vim]:http://macvim.org/
[Chrome]:http://www.google.com/chrome
[Firefox]:http://www.mozilla.org/
[Firebug]:http://getfirebug.com/
[VirtualBox]:https://www.virtualbox.org/
[Versions]:http://versionsapp.com/
[GitHub for Mac]:http://mac.github.com/
[SourceTree]:http://www.sourcetreeapp.com/
[Filezilla]:http://filezilla-project.org/
[ForkLift]:http://itunes.apple.com/us/app/forklift/id412448059?mt=12
[Charles]:http://www.charlesproxy.com/
[XAMPP for Mac]:http://www.apachefriends.org/en/xampp-macosx.html
[MAMP]:http://http://mamp.info/
[Mark Man]:http://www.getmarkman.com/
[xScope]:http://itunes.apple.com/us/app/xscope/id447661441?mt=12
[Sip]:http://itunes.apple.com/app/sip/id507257563?mt=12
[Snip]:http://itunes.apple.com/us/app/snip/id512505421?mt=12
[Mou]:http://mouapp.com/
[LiveReLoad]:http://http://livereload.com/
[Cookie]:http://itunes.apple.com/us/app/cookie/id415585910?mt=12
[ColorSchemer Studio]:http://itunes.apple.com/us/app/colorschemer-studio/id417896628?mt=12
[Less]:http://incident57.com/less/
[CodeKit]: http://incident57.com/codekit/
[SpriteRight]:http://itunes.apple.com/us/app/spriteright/id488584662?mt=12
[iTerm2]: http://www.iterm2.com/
[Mozilla Fennec]: http://www.mozilla.org/projects/fennec
[Sequel Pro]: http://www.sequelpro.com/
[Sparkbox]: http://seesparkbox.com/
[Pixa]: http://www.pixa-app.com/
[Alfred]: http://www.alfredapp.com/
[Evernote]: http://www.evernote.com/
[The Unarchiver]: https://itunes.apple.com/hk/app/the-unarchiver/id425424353?mt=12
[Keka]: https://itunes.apple.com/us/app/keka/id470158793?mt=12
[iPack]: https://itunes.apple.com/us/app/ipack/id433386677?mt=12
[Frank DeLoupe]: http://www.jumpzero.com/frank/
[Dash]: http://kapeli.com/
[BreakTime]: http://itunes.apple.com/cn/app/breaktime/id427475982?mt=12
[Clear]: http://itunes.apple.com/cn/app/breaktime/id427475982?mt=12
[Chrome Remote USB Debugging]: https://developers.google.com/chrome/mobile/docs/debugging
[Fiddler2]: http://www.fiddler2.com/fiddler2/
[Subversion]: http://subversion.apache.org/
[Putty]: http://www.putty.org/
[MarkdownPad]: http://markdownpad.com/
[F5]: http://www.getf5.com/
[less.org]: http://lesscss.org/
[haml.info]: http://haml.info/
[Github for Windows]: http://windows.github.com/
[Firefox Responsive Design View]: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View/
[7z]: http://www.7-zip.org/
[temp.im]: http://temp.im/ "Placehold image"
[placehold.us]: http://placehold.us/
[Firefox Add-ons collections]: https://addons.mozilla.org/en-US/firefox/collections/hzlzh/hzlzh/
[ST2 资源技巧汇总]: http://www.douban.com/group/topic/28027863/
[Wiki page index]: https://github.com/GeekPark/Doc/wiki/_pages
[12 Killer Tips and Tricks for Building HTML Email]: http://www.queness.com/post/8784/12-killer-tips-and-tricks-for-building-html-email
[Coding HTML Newsletters (EDM)]: http://www.web-ed.com.au/2011/05/coding-html-newsletters-edms-quick-guide/
[MIT License]: http://en.wikipedia.org/wiki/MIT_License
</textarea>
</div>
</div>
</article>
</div>
<footer>
<div id="footer">
<span id="convertTextControls" style="display:none">
<button id="convertTextButton" type="button" title="Convert text now">
Convert text
</button>
<select id="convertTextSetting">
<option value="delayed">in the background</option>
<option value="continuous">every keystroke</option>
<option value="manual">manually</option>
</select>
</span>
<span class="process-time">processing time </span><span id="processingTime" title="Last processing time">0 ms</span>
</div>
<a class="forkme" target="_blank" title="Fork me on Github" href="https://github.com/hzlzh/Front-End-Standards">Fork me on GitHub</a>
</footer>
<script type="text/javascript" src="js/libs/prettify.js"></script>
<script type="text/javascript" src="js/libs/bootstrap-scrollspy.js"></script>
<script src="js/script.js"></script>
</body>
</html>