Skip to content

Commit 3f7a6bb

Browse files
guanguansguanguans
committed
docs: 添加 多种语言速查表
1 parent d6643e0 commit 3f7a6bb

File tree

22 files changed

+8039
-0
lines changed

22 files changed

+8039
-0
lines changed

‎Frontend/CSS.md‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
# CSS
2+
3+
早期的web没有样式，只是单纯的文本。通过CSS，可以实现网页样式和内容的分离。
4+
5+
简单来说，CSS可以指定HTML页面上的元素所使用的样式。
6+
7+
和其他语言一样，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。
8+
9+
你可以使用[dabblet](http://dabblet.com/)来在线测试CSS的效果。
10+
11+
``` css
12+
/* 注释 */
13+
14+
/* ####################
15+
## 选择器
16+
####################*/
17+
18+
/* 一般而言，CSS的声明语句非常简单。 */
19+
选择器 { 属性: 值; /* 更多属性...*/ }
20+
21+
/* 选择器用于指定页面上的元素。
22+
23+
针对页面上的所有元素。 */
24+
* { color:red; }
25+
26+
/*
27+
假定页面上有这样一个元素
28+
29+
<div class='some-class class2' id='someId' attr='value' />
30+
*/
31+
32+
/* 你可以通过类名来指定它 */
33+
.some-class { }
34+
35+
/* 给出所有类名 */
36+
.some-class.class2 { }
37+
38+
/* 标签名 */
39+
div { }
40+
41+
/* id */
42+
#someId { }
43+
44+
/* 由于元素包含attr属性，因此也可以通过这个来指定 */
45+
[attr] { font-size:smaller; }
46+
47+
/* 以及有特定值的属性 */
48+
[attr='value'] { font-size:smaller; }
49+
50+
/* 通过属性的值的开头指定 */
51+
[attr^='val'] { font-size:smaller; }
52+
53+
/* 通过属性的值的结尾来指定 */
54+
[attr$='ue'] { font-size:smaller; }
55+
56+
/* 通过属性的值的部分来指定 */
57+
[attr~='lu'] { font-size:smaller; }
58+
59+
60+
/* 你可以把这些全部结合起来，注意不同部分间不应该有空格，否则会改变语义 */
61+
div.some-class[attr$='ue'] { }
62+
63+
/* 你也可以通过父元素来指定。*/
64+
65+
/* 某个元素是另一个元素的直接子元素 */
66+
div.some-parent > .class-name {}
67+
68+
/* 或者通过该元素的祖先元素 */
69+
div.some-parent .class-name {}
70+
71+
/* 注意，去掉空格后语义就不同了。
72+
你能说出哪里不同么？ */
73+
div.some-parent.class-name {}
74+
75+
/* 你可以选择某元素前的相邻元素 */
76+
.i-am-before + .this-element { }
77+
78+
/* 某元素之前的同级元素（相邻或不相邻） */
79+
.i-am-any-before ~ .this-element {}
80+
81+
/* 伪类允许你基于页面的行为指定元素（而不是基于页面结构） */
82+
83+
/* 例如，当鼠标悬停在某个元素上时 */
84+
:hover {}
85+
86+
/* 已访问过的链接*/
87+
:visited {}
88+
89+
/* 未访问过的链接*/
90+
:link {}
91+
92+
/* 当前焦点的input元素 */
93+
:focus {}
94+
95+
96+
/* ####################
97+
## 属性
98+
####################*/
99+
100+
选择器 {
101+
102+
/* 单位 */
103+
width: 50%; /* 百分比 */
104+
font-size: 2em; /* 当前字体大小的两倍 */
105+
width: 200px; /* 像素 */
106+
font-size: 20pt; /* 点 */
107+
width: 5cm; /* 厘米 */
108+
width: 50mm; /* 毫米 */
109+
width: 5in; /* 英尺 */
110+
111+
/* 颜色 */
112+
background-color: #F6E; /* 短16位 */
113+
background-color: #F262E2; /* 长16位 */
114+
background-color: tomato; /* 颜色名称 */
115+
background-color: rgb(255, 255, 255); /* rgb */
116+
background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */
117+
background-color: rgba(255, 0, 0, 0.3); /* rgb 加透明度 */
118+
119+
/* 图片 */
120+
background-image: url(/path-to-image/image.jpg);
121+
122+
/* 字体 */
123+
font-family: Arial;
124+
font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
125+
font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
126+
字体没找到，浏览器会使用第二个字体，一次类推 */
127+
}
128+
129+
```
130+
131+
## 使用
132+
133+
CSS文件使用 `.css` 后缀。
134+
135+
```xml
136+
<!-- 你需要在文件的 <head> 引用CSS文件 -->
137+
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
138+
139+
<!-- 你也可以在标记中内嵌CSS。不过强烈建议不要这么干。 -->
140+
<style>
141+
选择器 { 属性:值; }
142+
</style>
143+
144+
<!-- 也可以直接使用元素的style属性。
145+
这是你最不该干的事情。 -->
146+
<div style='property:value;'>
147+
</div>
148+
149+
```
150+
151+
## 优先级
152+
153+
同一个元素可能被多个不同的选择器指定，因此可能会有冲突。
154+
155+
假定CSS是这样的：
156+
157+
```css
158+
/*A*/
159+
p.class1[attr='value']
160+
161+
/*B*/
162+
p.class1 {}
163+
164+
/*C*/
165+
p.class2 {}
166+
167+
/*D*/
168+
p {}
169+
170+
/*E*/
171+
p { property: value !important; }
172+
173+
```
174+
175+
然后标记语言为：
176+
177+
```xml
178+
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
179+
</p>
180+
```
181+
182+
那么将会按照下面的顺序应用风格：
183+
184+
185+
* `E` 优先级最高，因为它使用了 `!important`，除非很有必要，尽量避免使用这个。
186+
* `F` 其次，因为它是嵌入的风格。
187+
* `A` 其次，因为它比其他指令更具体。
188+
* `C` 其次，虽然它的具体程度和`B`一样，但是它在`B`之后。
189+
* 接下来是 `B`。
190+
* 最后是 `D`。
191+
192+
## 兼容性
193+
194+
CSS2 的绝大部分特性兼容各种浏览器和设备。现在 CSS3 的兼容性也越来越好了。
195+
但是兼容性问题仍然是需要留意的一个问题。
196+
197+
[QuirksMode CSS](http://www.quirksmode.org/css/)是关于这方面最好的资源。
198+
199+
## 扩展阅读
200+
201+
* [理解CSS的风格优先级: 特定性, 继承和层叠](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
202+
* [QuirksMode CSS](http://www.quirksmode.org/css/)
203+
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)

‎Frontend/HTML.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# HTML
2+
3+
HTML是超文本标记语言的缩写。
4+
这门语言可以让我们为万维网创造页面。
5+
这是一门标记语言，它允许我们用代码来指示网页上文字和数据应该如何显示。
6+
实际上html文件是简单的文本文件。
7+
什么是标记？标记是通过使用开始和结束标签包围数据的方法，来组织管理页面上的数据。
8+
这些标记对它们环绕的文本有重要的意义。
9+
和其它计算机语言意义，HTML有很多版本。这里我们将讨论HTML5。
10+
11+
**注意：** 你可以在类似[codepen](http://codepen.io/pen/)的网站上的教程中，尝试不同的标签和元素带来的效果，理解它们如何起效，并且逐渐熟悉这门语言。
12+
本文主要关注HTML的语法和一些有用的小窍门。
13+
14+
```html
15+
<!-- 注释要像本行一样被包围起来！ -->
16+
17+
<!-- #################### 标签 #################### -->
18+
19+
<!-- 下面是一个我们将要分析的HTML文件的例子。 -->
20+
21+
<!doctype html>
22+
<html>
23+
<head>
24+
<title>我的网站</title>
25+
</head>
26+
<body>
27+
<h1>Hello, world!</h1>
28+
<a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a>
29+
<p>这是一个段落。</p>
30+
<p>这是另外一个段落。</p>
31+
<ul>
32+
<li>这是一个非计数列表的一项（项目符合列表）</li>
33+
<li>这是另一项</li>
34+
<li>这是列表中的最后一项</li>
35+
</ul>
36+
</body>
37+
</html>
38+
39+
<!-- 一个HTML文件通常开始于向浏览器表明本页面是HTML。 -->
40+
<!doctype html>
41+
42+
<!-- 在这之后，由<html>开始标签作为起始。 -->
43+
<html>
44+
45+
<!-- 在文件的最后会由</html>标签结束。 -->
46+
</html>
47+
48+
<!-- 在最终的标签后面应该没有任何东西。 -->
49+
50+
<!-- 在其中（在开始标签<html>和结束标签</html>中间）我们可以看到： -->
51+
52+
<!-- 由标签<head>定义的头部 （头部必须被</head>标签关闭）。 -->
53+
<!-- 头部包含一些不显示的描述和额外信息；这些是元数据。 -->
54+
55+
<head>
56+
<title>我的网站</title><!-- <title>标签告诉浏览器在浏览器窗口的标题区和标签栏应该显示什么标题。 -->
57+
</head>
58+
59+
<!-- 在<head>区域之后，我们可以看到<body>标签 -->
60+
<!-- 在这点之前的内容都不会显示在浏览器的窗口中。 -->
61+
<!-- 我们必须在正文区填上需要显示的内容。 -->
62+
63+
<body>
64+
<h1>Hello, world!</h1> <!-- h1标签创建了一个标题 -->
65+
<!-- <h1>标签可以有一些副标题，从最重要的（h2）到最细微的（h6）。 -->
66+
<a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a> <!-- 一个指向href=""属性中URL的超链接 -->
67+
<p>这是一个段落。</p> <!-- <p>标签让我们在html页面中显示文字 -->
68+
<p>这是另外一个段落。</p>
69+
<ul> <!-- <ul>标签创建了一个项目符合列表。 -->
70+
<!-- 如果需要一个编号列表，我们可以使用<ol>标签。这样会在在第一项前显示1.，第二项前显示2.，以此类推。 -->
71+
<li>这是一个非计数列表的一项（项目符合列表）</li>
72+
<li>这是另一项</li>
73+
<li>这是列表中的最后一项</li>
74+
</ul>
75+
</body>
76+
77+
<!-- 好了，创建一个HTML文件就是这么简单。 -->
78+
79+
<!-- 当然我们还可以加入很多额外的HTML标签类型。 -->
80+
81+
<!-- 插入图片。 -->
82+
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- 图片源是由src=""属性指明的 -->
83+
<!-- 图片源可以是一个URL或者你电脑上一个文件的路径。 -->
84+
85+
<!-- 创建表格也没问题。 -->
86+
87+
<table> <!-- 我们开始一个<table>元素 -->
88+
<tr> <!-- <tr>让我们创建一行 -->
89+
<th>第一个表头</th> <!-- <th>让我们给表格列一个标题 -->
90+
<th>第二个表头</th>
91+
</tr>
92+
<tr>
93+
<td>第一行第一列</td> <!-- <td>让我们创建一个单元格 -->
94+
<td>第一行第二列</td>
95+
</tr>
96+
<tr>
97+
<td>第二行第一列</td>
98+
<td>第二行第二列</td>
99+
</tr>
100+
</table>
101+
102+
```
103+
104+
## 使用
105+
106+
HTML文件使用`.html`后缀。
107+
108+
## 扩展阅读
109+
110+
* [维基百科](https://en.wikipedia.org/wiki/HTML)
111+
* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)
112+
* [W3School](http://www.w3schools.com/html/html_intro.asp)

‎Frontend/JSON.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# JSON
2+
3+
因为JSON是一个极其简单的数据交换格式，本教程最有可能成为有史以来最简单的
4+
Learn X in Y Minutes。
5+
6+
纯正的JSON实际上没有注释，但是大多数解析器都
7+
接受C-风格(//, /\* \*/)的注释。为了兼容性，最好不要在其中写这样形式的注释。
8+
9+
因此，本教程的一切都会是100%有效的JSON。幸亏，它的表达能力很丰富。
10+
11+
支持的数据类型：
12+
13+
- 字符串: "hello", "\"A quote.\"", "\u0abe", "Newline.\n"
14+
- 数字: 23, 0.11, 12e10, 3.141e-10, 1.23e+4
15+
- 对象: { "key": "value" }
16+
- 数组: ["Values"]
17+
- 其他: true, false, null
18+
19+
```json
20+
{
21+
"numbers": 0,
22+
"strings": "Hellø, wørld. All unicode is allowed, along with \"escaping\".",
23+
"has bools?": true,
24+
"nothingness": null,
25+
26+
"big number": 1.2e+100,
27+
28+
"objects": {
29+
"comment": "Most of your structure will come from objects.",
30+
31+
"array": [0, 1, 2, 3, "Arrays can have anything in them.", 5],
32+
33+
"another object": {
34+
"comment": "These things can be nested, very useful."
35+
}
36+
},
37+
38+
"silliness": [
39+
{
40+
"sources of potassium": ["bananas"]
41+
},
42+
[
43+
[1, 0, 0, 0],
44+
[0, 1, 0, 0],
45+
[0, 0, 1, "neo"],
46+
[0, 0, 0, 1]
47+
]
48+
],
49+
50+
"that was short": "And, you're done. You now know everything JSON has to offer."
51+
}
52+
```

0 commit comments

Comments
 (0)