docs: 添加多种语言速查表

guanguans · Mar 21, 2019 · 3f7a6bb · 3f7a6bb
1 parent d6643e0
commit 3f7a6bb
Show file tree

Hide file tree

Showing 22 changed files with 8,039 additions and 0 deletions.
diff --git a/Frontend/CSS.md b/Frontend/CSS.md
@@ -0,0 +1,203 @@
+# CSS
+
+早期的web没有样式，只是单纯的文本。通过CSS，可以实现网页样式和内容的分离。
+
+简单来说，CSS可以指定HTML页面上的元素所使用的样式。
+
+和其他语言一样，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。
+
+你可以使用[dabblet](http://dabblet.com/)来在线测试CSS的效果。
+
+``` css
+/* 注释 */
+
+/* ####################
+   ## 选择器
+   ####################*/
+
+/* 一般而言，CSS的声明语句非常简单。 */
+选择器 { 属性: 值; /* 更多属性...*/ }
+
+/* 选择器用于指定页面上的元素。
+
+针对页面上的所有元素。 */
+* { color:red; }
+
+/*
+假定页面上有这样一个元素
+
+<div class='some-class class2' id='someId' attr='value' />
+*/
+
+/* 你可以通过类名来指定它 */
+.some-class { }
+
+/* 给出所有类名 */
+.some-class.class2 { }
+
+/* 标签名 */
+div { }
+
+/* id */
+#someId { }
+
+/* 由于元素包含attr属性，因此也可以通过这个来指定 */
+[attr] { font-size:smaller; }
+
+/* 以及有特定值的属性 */
+[attr='value'] { font-size:smaller; }
+
+/* 通过属性的值的开头指定 */
+[attr^='val'] { font-size:smaller; }
+
+/* 通过属性的值的结尾来指定 */
+[attr$='ue'] { font-size:smaller; }
+
+/* 通过属性的值的部分来指定 */
+[attr~='lu'] { font-size:smaller; }
+
+
+/* 你可以把这些全部结合起来，注意不同部分间不应该有空格，否则会改变语义 */
+div.some-class[attr$='ue'] { }
+
+/* 你也可以通过父元素来指定。*/
+
+/* 某个元素是另一个元素的直接子元素 */
+div.some-parent > .class-name {}
+
+/* 或者通过该元素的祖先元素 */
+div.some-parent .class-name {}
+
+/* 注意，去掉空格后语义就不同了。
+你能说出哪里不同么？ */
+div.some-parent.class-name {}
+
+/* 你可以选择某元素前的相邻元素 */
+.i-am-before + .this-element { }
+
+/* 某元素之前的同级元素（相邻或不相邻） */
+.i-am-any-before ~ .this-element {}
+
+/* 伪类允许你基于页面的行为指定元素（而不是基于页面结构） */
+
+/* 例如，当鼠标悬停在某个元素上时 */
+:hover {}
+
+/* 已访问过的链接*/
+:visited {}
+
+/* 未访问过的链接*/
+:link {}
+
+/* 当前焦点的input元素 */
+:focus {}
+
+
+/* ####################
+   ## 属性
+   ####################*/
+
+选择器 {
+
+    /* 单位 */
+    width: 50%; /* 百分比 */
+    font-size: 2em; /* 当前字体大小的两倍 */
+    width: 200px; /* 像素 */
+    font-size: 20pt; /* 点 */
+    width: 5cm; /* 厘米 */
+    width: 50mm; /* 毫米 */
+    width: 5in; /* 英尺 */
+
+    /* 颜色 */
+    background-color: #F6E;  /* 短16位 */
+    background-color: #F262E2; /* 长16位 */
+    background-color: tomato; /* 颜色名称 */
+    background-color: rgb(255, 255, 255); /* rgb */
+    background-color: rgb(10%, 20%, 50%); /*  rgb 百分比 */
+    background-color: rgba(255, 0, 0, 0.3); /*  rgb 加透明度 */
+
+    /* 图片 */
+    background-image: url(/path-to-image/image.jpg);
+
+    /* 字体 */
+    font-family: Arial;
+    font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
+    font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
+    						 字体没找到，浏览器会使用第二个字体，一次类推 */
+}
+
+```
+
+## 使用
+
+CSS文件使用 `.css` 后缀。
+
+```xml
+<!-- 你需要在文件的 <head> 引用CSS文件 -->
+<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
+
+<!-- 你也可以在标记中内嵌CSS。不过强烈建议不要这么干。 -->
+<style>
+   选择器 { 属性:值; }
+</style>
+
+<!-- 也可以直接使用元素的style属性。
+这是你最不该干的事情。 -->
+<div style='property:value;'>
+</div>
+
+```
+
+## 优先级
+
+同一个元素可能被多个不同的选择器指定，因此可能会有冲突。
+
+假定CSS是这样的：
+
+```css
+/*A*/
+p.class1[attr='value']
+
+/*B*/
+p.class1 {}
+
+/*C*/
+p.class2 {}
+
+/*D*/
+p {}
+
+/*E*/
+p { property: value !important; }
+
+```
+
+然后标记语言为：
+
+```xml
+<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
+</p>
+```
+
+那么将会按照下面的顺序应用风格：
+
+
+* `E` 优先级最高，因为它使用了 `!important`，除非很有必要，尽量避免使用这个。
+* `F` 其次，因为它是嵌入的风格。
+* `A` 其次，因为它比其他指令更具体。
+* `C` 其次，虽然它的具体程度和`B`一样，但是它在`B`之后。
+* 接下来是 `B`。
+* 最后是 `D`。
+
+## 兼容性
+
+CSS2 的绝大部分特性兼容各种浏览器和设备。现在 CSS3 的兼容性也越来越好了。
+但是兼容性问题仍然是需要留意的一个问题。
+
+[QuirksMode CSS](http://www.quirksmode.org/css/)是关于这方面最好的资源。
+
+## 扩展阅读
+
+* [理解CSS的风格优先级: 特定性, 继承和层叠](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
diff --git a/Frontend/HTML.md b/Frontend/HTML.md
@@ -0,0 +1,112 @@
+# HTML
+
+HTML是超文本标记语言的缩写。
+这门语言可以让我们为万维网创造页面。
+这是一门标记语言，它允许我们用代码来指示网页上文字和数据应该如何显示。
+实际上html文件是简单的文本文件。
+什么是标记？标记是通过使用开始和结束标签包围数据的方法，来组织管理页面上的数据。
+这些标记对它们环绕的文本有重要的意义。
+和其它计算机语言意义，HTML有很多版本。这里我们将讨论HTML5。
+
+**注意：**  你可以在类似[codepen](http://codepen.io/pen/)的网站上的教程中，尝试不同的标签和元素带来的效果，理解它们如何起效，并且逐渐熟悉这门语言。
+本文主要关注HTML的语法和一些有用的小窍门。
+
+```html
+<!-- 注释要像本行一样被包围起来！ -->
+
+<!-- #################### 标签 #################### -->
+
+<!-- 下面是一个我们将要分析的HTML文件的例子。 -->
+
+<!doctype html>
+	<html>
+		<head>
+			<title>我的网站</title>
+		</head>
+		<body>
+			<h1>Hello, world!</h1>
+			<a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a>
+			<p>这是一个段落。</p>
+			<p>这是另外一个段落。</p>
+			<ul>
+				<li>这是一个非计数列表的一项（项目符合列表）</li>
+				<li>这是另一项</li>
+				<li>这是列表中的最后一项</li>
+			</ul>
+		</body>
+	</html>
+
+<!-- 一个HTML文件通常开始于向浏览器表明本页面是HTML。 -->
+<!doctype html>
+
+<!-- 在这之后，由<html>开始标签作为起始。 -->
+<html>
+
+<!-- 在文件的最后会由</html>标签结束。 -->
+</html>
+
+<!-- 在最终的标签后面应该没有任何东西。 -->
+
+<!-- 在其中（在开始标签<html>和结束标签</html>中间）我们可以看到： -->
+
+<!-- 由标签<head>定义的头部 （头部必须被</head>标签关闭）。 -->
+<!-- 头部包含一些不显示的描述和额外信息；这些是元数据。 -->
+
+<head>
+	<title>我的网站</title><!-- <title>标签告诉浏览器在浏览器窗口的标题区和标签栏应该显示什么标题。 -->
+</head>
+
+<!-- 在<head>区域之后，我们可以看到<body>标签 -->
+<!-- 在这点之前的内容都不会显示在浏览器的窗口中。 -->
+<!-- 我们必须在正文区填上需要显示的内容。 -->
+
+<body>
+	<h1>Hello, world!</h1> <!-- h1标签创建了一个标题 -->
+	<!-- <h1>标签可以有一些副标题，从最重要的（h2）到最细微的（h6）。 -->
+	<a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a> <!-- 一个指向href=""属性中URL的超链接 -->
+	<p>这是一个段落。</p> <!-- <p>标签让我们在html页面中显示文字 -->
+	<p>这是另外一个段落。</p>
+	<ul> <!-- <ul>标签创建了一个项目符合列表。 -->
+	<!-- 如果需要一个编号列表，我们可以使用<ol>标签。这样会在在第一项前显示1.，第二项前显示2.，以此类推。 -->
+		<li>这是一个非计数列表的一项（项目符合列表）</li>
+		<li>这是另一项</li>
+		<li>这是列表中的最后一项</li>
+	</ul>
+</body>
+
+<!-- 好了，创建一个HTML文件就是这么简单。 -->
+
+<!-- 当然我们还可以加入很多额外的HTML标签类型。 -->
+
+<!-- 插入图片。 -->
+<img src="http://i.imgur.com/XWG0O.gif"/> <!-- 图片源是由src=""属性指明的 -->
+<!-- 图片源可以是一个URL或者你电脑上一个文件的路径。 -->
+
+<!-- 创建表格也没问题。 -->
+
+<table> <!-- 我们开始一个<table>元素 -->
+	<tr> <!-- <tr>让我们创建一行 -->
+		<th>第一个表头</th> <!-- <th>让我们给表格列一个标题 -->
+		<th>第二个表头</th>
+	</tr>
+	<tr>
+		<td>第一行第一列</td> <!-- <td>让我们创建一个单元格 -->
+		<td>第一行第二列</td>
+	</tr>
+	<tr>
+		<td>第二行第一列</td>
+		<td>第二行第二列</td>
+	</tr>
+</table>
+
+```
+
+## 使用
+
+HTML文件使用`.html`后缀。
+
+## 扩展阅读
+
+* [维基百科](https://en.wikipedia.org/wiki/HTML)
+* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)
+* [W3School](http://www.w3schools.com/html/html_intro.asp)
diff --git a/Frontend/JSON.md b/Frontend/JSON.md
@@ -0,0 +1,52 @@
+# JSON
+
+因为JSON是一个极其简单的数据交换格式，本教程最有可能成为有史以来最简单的
+Learn X in Y Minutes。
+
+纯正的JSON实际上没有注释，但是大多数解析器都
+接受C-风格(//, /\* \*/)的注释。为了兼容性，最好不要在其中写这样形式的注释。
+
+因此，本教程的一切都会是100%有效的JSON。幸亏，它的表达能力很丰富。
+
+支持的数据类型：
+
+- 字符串: "hello", "\"A quote.\"", "\u0abe", "Newline.\n"
+- 数字: 23, 0.11, 12e10, 3.141e-10, 1.23e+4
+- 对象: { "key": "value" }
+- 数组: ["Values"]
+- 其他: true, false, null
+
+```json
+{
+  "numbers": 0,
+  "strings": "Hellø, wørld. All unicode is allowed, along with \"escaping\".",
+  "has bools?": true,
+  "nothingness": null,
+
+  "big number": 1.2e+100,
+
+  "objects": {
+    "comment": "Most of your structure will come from objects.",
+
+    "array": [0, 1, 2, 3, "Arrays can have anything in them.", 5],
+
+    "another object": {
+      "comment": "These things can be nested, very useful."
+    }
+  },
+
+  "silliness": [
+    {
+      "sources of potassium": ["bananas"]
+    },
+    [
+      [1, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 0, 1, "neo"],
+      [0, 0, 0, 1]
+    ]
+  ],
+
+  "that was short": "And, you're done. You now know everything JSON has to offer."
+}
+```