unslug zh-cn: move

3 files changed, 321 insertions, 0 deletions

diff --git a/files/zh-cn/learn/common_questions/实用文本编辑器/index.html b/files/zh-cn/learn/common_questions/available_text_editors/index.html
index f8f394191d..f8f394191d 100644
--- a/files/zh-cn/learn/common_questions/实用文本编辑器/index.html
+++ b/files/zh-cn/learn/common_questions/available_text_editors/index.html
diff --git a/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html
new file mode 100644
index 0000000000..ab8eee6e1a
--- /dev/null
+++ b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html
@@ -0,0 +1,91 @@
+---
+title: 互联网是如何工作的
+slug: learn/How_the_Internet_works
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p> 这篇文章讨论什么是互联网以及它是如何工作的.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提:</th>
+   <td>无，但是鼓励先去阅读 <a href="/zh-CN/docs/learn/常见问题/Thinking_before_coding">关于设定项目目标的文章</a></td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>你将会学习到网络的基础技术，以及它与互联网的区别.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概述">概述</h2>
+
+<p>互联网是网络的支柱，以这种技术为基础使网络成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。</p>
+
+<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">互联网的历史有些模糊不清</a>。它始于1960年美国军方资助的研究项目。1980年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。</p>
+
+<h2 id="自主学习">自主学习</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">五分钟告诉你互联网是如何工作的</a>: Aaron Titus在五分钟的一个视频中告诉你非常基础的互联网知识.</li>
+</ul>
+
+<h2 id="深入探索">深入探索</h2>
+
+<h3 id="一个简单的网络">一个简单的网络</h3>
+
+<p>当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式(通常是<a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">网线</a>) 还是无线方式（比如 <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> 或 <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">蓝牙</a> )。所有现代电脑都支持这些连接。</p>
+
+<div class="note">
+<p><strong>提示:</strong> 接下来的内容，我们将只谈论有线连接， 而无线连接的原理与此相同。</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要45条网线。</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（<em>router</em>）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑B，电脑A必须把信息发送给路由器，路由器将收到的信息转发给电脑B，并且确保信息不会发送给电脑C。</p>
+
+<p>一旦我们把路由器加入到这个系统，我们的网络中便只需要十条网线：每台电脑一个插口，路由器上十个插口。</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="网络中的网">网络中的网</h3>
+
+<p>到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢? 当然一台路由器覆盖不了这么远, 但是,如果你阅读得比较认真，我们曾提到路由器像其他电脑一样,所以我们为什么不把两个路由器彼此连接呢?</p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>我们把电脑连接路由器, 接着路由器连接路由器,我们就会有无穷的规模。</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>这样网络越来越接近我们所说的互联网 ，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其它地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（<em>modem</em>），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。</p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP是一家可以管理一些特殊的路由器的公司，这些路由器连接其他ISP的路由器. 你的网络消息可以被ISP捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="寻找电脑">寻找电脑</h3>
+
+<p>如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：<code>192.168.2.10。</code></p>
+
+<p>对于电脑这样已经很好了,但是人类却很难记忆这一串地址。为了简单处理，我们给IP地址取一个容易阅读的别名：域名。比如，<code>google.com</code> 被用于IP地址 <code>172.217.7.14。</code>这样我们通过这些域名可以很容易的通过网络连接到电脑.</p>
+
+<h3 id="互联网（Internet）和网络（web）">互联网（Internet）和网络（web）</h3>
+
+<p>你可能注意到了, 当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（<em>Web servers</em>））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和{{Glossary("IRC")}}.</p>
+
+<h2 id="下一步">下一步</h2>
+
+<ul>
+ <li><a href="/zh-CN/Learn/Getting_started_with_the_web/How_the_Web_works">网络怎样工作</a></li>
+ <li><a href="/zh-CN/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">理解网页，网站，网络服务器和搜索引擎之间的不同</a></li>
+ <li><a href="/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name">理解域名</a></li>
+</ul>
diff --git a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html
new file mode 100644
index 0000000000..69081b9745
--- /dev/null
+++ b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -0,0 +1,230 @@
+---
+title: 什么是浏览器开发者工具？
+slug: Learn/Discover_browser_developer_tools
+tags:
+  - 开发工具
+  - 调试
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div class="summary">
+<p>每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。</p>
+</div>
+
+<div class="note">
+<p>注意：在你运行下面的例子之前，打开我们在<a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web开发入门</a>系列文章中建立的<a href="http://mdn.github.io/beginner-html-site-scripted/">初学者示例网站</a>。你应该按照下面的步骤打开。</p>
+</div>
+
+<h2 id="如何在浏览器中打开开发者工具">如何在浏览器中打开开发者工具</h2>
+
+<p>开发者工具内置在您的浏览器的子窗口之中，大概像这样：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png" style="display: block; height: 625px; margin: 0px auto; width: 775px;"></p>
+
+<p><strong>如何打开它？有三种方式：</strong></p>
+
+<ul>
+ <li><em><strong>键盘快捷键</strong></em> <em>Ctrl + Shift + I ，</em>除了以下的特例
+
+  <ul>
+   <li><strong>Internet Explorer. </strong><em>F12 </em></li>
+   <li><strong>Mac OS X. </strong><em><span class="Unicode">⌘ + ⌥ + I </span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>菜单栏 </strong></em></span>
+  <ul>
+   <li><strong>Firefox</strong>：菜单 <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em>➤</em></span><em> Web 开发者 ➤ </em><span class="Unicode"><em><span class="Unicode">切换工具箱（译者注：此处修改为最新的 Firefox Quantum），或者工具栏中的 </span></em></span><span class="Unicode"><em><span class="Unicode"><img alt="" src="https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 40px; width: 45px;"></span></em><em><span class="Unicode">➤ 切换工具箱 </span></em></span></li>
+   <li><strong>Chrome</strong>：菜单 <em>➤ 更多工具 ➤ 开发者工具</em></li>
+   <li><strong>Safari</strong>：<em><span class="Unicode">Develop ➤</span> Show Web Inspector</em>。如果你看不到 <em>Develop </em>菜单，去到<em>Safari<span class="Unicode"> ➤</span> Preferences ➤ Advanced</em>，然后点击<em>Show Develop menu in menu bar</em> 复选框。</li>
+   <li><strong>Opera</strong>. <em><span class="Unicode">Developer ➤</span> Web Inspector</em></li>
+  </ul>
+ </li>
+ <li><strong>右键菜单</strong>：右键单击网页中的一个项目上（在Mac上按Ctrl点击），并从弹出的菜单中选择<code>检查元素</code>（译者注：选择<code>检查</code>（Chrome）或<code>查看元素</code>（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9605/inspect-element-option.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>
+
+<p id="调试审查：DOM_Explorer和CSS编辑器">检查器（Inspector）：DOM 浏览器和CSS编辑器</p>
+
+<p>开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的HTML运行时的样子，以及哪些CSS规则被应用到了页面上元素。它还允许您立即修改HTML和CSS并在浏览器中实时观察修改的结果。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9607/inspector.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>
+
+<p>如果你看不到调试器，</p>
+
+<ul>
+ <li>点击“检查”选项卡。</li>
+ <li>在Internet Explorer中，点击DOM Explorer，或按Ctrl + 1。</li>
+ <li>在Safari中，控制就不是很清楚了，但是你如果你没有选择的东西出现在窗口看到HTML。按下按钮查看CSS样式。</li>
+</ul>
+
+<h3 id="探索DOM检查器">探索DOM检查器</h3>
+
+<p>首先在DOM检查器中右键单击（按Ctrl点击）一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png" style="display: block; height: 236px; margin: 0px auto; width: 200px;"></p>
+
+<ul>
+ <li><strong>删除节点</strong>（或删除元素）：删除当前元素<strong>。</strong></li>
+ <li><strong>编辑HTML</strong>（或添加属性/编辑文本）：让您更改HTML和看到在变化的结果。对于调试和测试非常有用。</li>
+ <li><strong>:hover/:active/:focus</strong>（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。</li>
+ <li><strong>复制/复制为HTML</strong>：复制当前选定的HTML。</li>
+ <li>一些浏览器也有复制CSS路径和复制XPath，允许你选择复制当前的HTML元素CSS选择器或XPath表达式。</li>
+</ul>
+
+<p>现在试着编辑一些你的DOM。双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。</p>
+
+<h3 id="探索CSS编辑器">探索CSS编辑器</h3>
+
+<p>默认情况下，CSS编辑器显示当前<img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;">所选元素应用的CSS规则：</p>
+
+<p>这些功能特别有用：</p>
+
+<ul>
+ <li>应用于当前元素的规则以相关度排序。越特定的规则显示的越靠前。</li>
+ <li>点击每个声明旁边的复选框，看看如果删除声明会发生什么。</li>
+ <li>点击每个简写属性旁边的小箭头显示属性的普通等效项。</li>
+ <li>单击属性名称或值以显示一个文本框，您可以在其中键入新值以获取样式更改的实时预览。</li>
+ <li>每个规则旁边是规则定义的文件名和行号。单击该规则将使开发工具跳转到自己的视图中显示，通常可以编辑和保存。</li>
+ <li>您还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，您可以在其中为页面写入一个全新的声明。</li>
+</ul>
+
+<p>您会注意到CSS查看器顶部的一些可点击的选项卡：</p>
+
+<ul>
+ <li><em>计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。</em></li>
+ <li><em>盒子模型：这可以直观地表示当前元素的框模型，所以您可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。</em></li>
+ <li>字体：在Firefox中，“字体”选项卡显示应用于当前元素的字体。</li>
+</ul>
+
+<h3 id="了解更多">了解更多</h3>
+
+<p>了解更多Inspector在不同的浏览器中的细节：</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Opera的inspector 和它一样)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li>
+</ul>
+
+<h2 id="JavaScript调试器">JavaScript调试器</h2>
+
+<p>你可在JavaScript调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。</p>
+
+<p><img src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png"></p>
+
+<p>如何打开调试器：</p>
+
+<p>火狐，谷歌，IE，Edge：<kbd>F12</kbd></p>
+
+<p>Safari：开打开发者工具，然后选择 "Debugger" 标签。</p>
+
+<h3 id="尝一尝调试器的味">尝一尝调试器的味</h3>
+
+<p>火狐的调试器有三个面板</p>
+
+<h4 id="文件列表">文件列表</h4>
+
+<p>第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。</p>
+
+<p><img src="https://mdn.mozillademos.org/files/16240/File_List.png"></p>
+
+
+
+<h4 id="源码">源码</h4>
+
+<p>在你想要停止执行的位置设置间断点。在下面图片中，高亮的第18行就是被设置的断点。</p>
+
+<p><img src="https://mdn.mozillademos.org/files/16241/Source_code.png"></p>
+
+<h4 id="“监视表达示”和“断点”">“监视表达示”和“断点”</h4>
+
+<p>右边的面板会显示你添加的监视表达示与断点。</p>
+
+<p>在下图中，第一个区域，<strong>监视表达示</strong>，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。</p>
+
+<p>接下来的部分，<strong>断点 标签</strong>，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 <code>listItems.push(inputNewItem.value);</code> 上。</p>
+
+<p>最后两个部分，只在代码运行时才出现。</p>
+
+<p><strong>调用栈 </strong>区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。</p>
+
+<p>最后一部分，<strong>Scopes</strong>，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对像在addItemClick函数中是如何变化的。</p>
+
+
+
+<p><img src="https://mdn.mozillademos.org/files/16242/watch_items.png"></p>
+
+<h3 id="再了解一些">再了解一些</h3>
+
+<p>了解不同浏览器中的JavaScript调试器：</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger">Firefox JavaScript Debugger</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger">Microsoft Edge Debugger</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Chrome Debugger</a></li>
+ <li><a href="https://developer.apple.com/safari/tools/">Safari Debugger</a></li>
+</ul>
+
+<h2 id="JavaScript控制台">JavaScript控制台  </h2>
+
+<p>JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在Internet Explorer中，按Ctrl + 2.）这将给你一个如下所示的窗口:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9541/console.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 821px;"></p>
+
+<p>要查看会发生什么，请尝试逐个输入以下代码片段（然后按Enter键）:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">var my_image = document.createElement('img');
+
+//下面的url已经不再可用，这里注释掉，后面补上了一个可以url
+//且myImage在文章开始给的“初学者示例网址”存在声明冲突，所以改为my_image
+//myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+my_image.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
+
+document.querySelector('h1').appendChild(my_image);</pre>
+ </li>
+</ol>
+
+<p>现在尝试输入以下错误的代码版本，看看你得到什么。</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!);</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">var my_Image = document.createElement('img');
+myBanana.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
+document.querySelector('h1').appendChild(my_Image);</pre>
+ </li>
+</ol>
+
+<p>您将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！</p>
+
+<h3 id="了解更多_2">了解更多</h3>
+
+<p>了解更多JavaScript控制台在不同浏览器中的细节:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera与它相同)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
+</ul>
+
+<h2 id="参见"> 参见</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
+</ul>