From 5059cd9deae3e8c448c1bc4bcefd1fbf66428b4e Mon Sep 17 00:00:00 2001
From: allo <yin199909@aliyun.com>
Date: Wed, 3 Aug 2022 11:04:33 +0800
Subject: [PATCH 1/3] prepare markdown convertion for server-side

---
 .../learning_and_getting_help/index.html      | 28 +++++++++----------
 .../configuring_server_mime_types/index.html  | 12 +-------
 .../client-server_overview/index.html         |  8 +++---
 .../learn/server-side/first_steps/index.html  |  2 +-
 .../first_steps/introduction/index.html       | 14 +++++-----
 .../first_steps/web_frameworks/index.html     |  6 ++--
 .../first_steps/website_security/index.html   | 14 +++++-----
 files/zh-cn/learn/server-side/index.html      |  2 +-
 8 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/files/zh-cn/learn/learning_and_getting_help/index.html b/files/zh-cn/learn/learning_and_getting_help/index.html
index 593de30e858f54..a7752631d0760b 100644
--- a/files/zh-cn/learn/learning_and_getting_help/index.html
+++ b/files/zh-cn/learn/learning_and_getting_help/index.html
@@ -1,9 +1,9 @@
 ---
 title: 学习和获得帮助
-slug: learn/Learning_and_getting_help
+slug: Learn/Learning_and_getting_help
 translation_of: Learn/Learning_and_getting_help
 ---
-<p>[学习侧栏]</p>
+<p>{{learnsidebar}}/p>
 
 <p>这是伟大的，你投入一些时间学习一套新的技能，但有好的做法，采用，将使你的学习更有效。有时，您也会陷入困境并感到沮丧，即使是专业的 Web 开发人员也会经常这样，因此，了解最有效的方法，尝试获得帮助，以便您能够继续工作，是值得付出的。本文在这两个方面提供了一些提示和提示，可帮助您从学习 Web 开发中获得更多内容，并进一步阅读，以便您能够找到有关每个子主题的详细信息（如果您愿意）。</p>
 
@@ -13,7 +13,7 @@ <h2 id="有效学习">有效学习</h2>
 
 <h3 id="不同的学习方法">不同的学习方法</h3>
 
-<p>有趣的是，你的大脑学习东西有两种主要方式——专注<strong>和</strong><strong>分散学习</strong>：</p>
+<p>有趣的是，你的大脑学习东西有两种主要方式——<strong>专注</strong>和<strong>分散学习</strong>：</p>
 
 <ul>
  <li>重点学习是您传统上可能与学术科目联系在一起的东西。你专注于一个低级的话题，并解决它带来的具体问题。你专注于一个狭窄的区域。</li>
@@ -51,7 +51,7 @@ <h4 id="文本文章">文本文章</h4>
 <p>网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。</p>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如您会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。</p>
+<p><strong>备注：</strong> 上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如您会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。</p>
 </div>
 
 <h4 id="Videos">视频资料</h4>
@@ -65,11 +65,11 @@ <h4 id="Interactive_code_playgrounds">交互式的代码演练场</h4>
 <p>许多 MDN Web 文档参考页面中也提供了交互式的示例，您可以在其中更改代码，并查看实时结果的变化。在你的计算机上或者在像 <a href="https://jsbin.com/?html,css,js,output">JSBin</a>、<a href="https://codepen.io/">Codepen</a> 或 <a href="https://glitch.com/">Glitch</a> 这样的在线代码编辑器中创建自己的代码示例也是可以的。事实上，当你在学习时，你会被要求去做这些事情本身就是属于课堂的一部分！</p>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 在线代码编辑器对于共享您编写的代码也非常有用，例如，如果您正在与不在同一位置的其他人协作学习，或者正在向他人发送代码以寻求帮助。您可以与他们共享代码示例的网址，以便他们可以查看。</p>
+<p><strong>备注：</strong> 在线代码编辑器对于共享您编写的代码也非常有用，例如，如果您正在与不在同一位置的其他人协作学习，或者正在向他人发送代码以寻求帮助。您可以与他们共享代码示例的网址，以便他们可以查看。</p>
 </div>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 与其他学习方法相比，你可能更喜欢一种学习方法，但实际上，你最终可能得到的是一种混合方法。你可能还会想出另外其他的方法，而不是我们上面提到的三种。</p>
+<p><strong>备注：</strong> 与其他学习方法相比，你可能更喜欢一种学习方法，但实际上，你最终可能得到的是一种混合方法。你可能还会想出另外其他的方法，而不是我们上面提到的三种。</p>
 </div>
 
 <h3 id="Making_a_plan">制定一个计划</h3>
@@ -223,11 +223,11 @@ <h4 id="Learn_and_recognize_the_patterns">学习并认知模式</h4>
 <p>另外，网络上有 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具</a>，它使您可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。</p>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。</p>
+<p><strong>备注：</strong> 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。</p>
 </div>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 最简单的解决方案往往是最好的。</p>
+<p><strong>备注：</strong> 最简单的解决方案往往是最好的。</p>
 </div>
 
 <h3 id="Getting_practice">做练习</h3>
@@ -248,7 +248,7 @@ <h3 id="Effective_web_searches">高效的网络搜索</h3>
 
 <p>搜索什么通常是相当直接的。例如：</p>
 
-<ul dir="ltr">
+<ul>
  <li>如果你想了解更多关于响应式网页设计的信息，你可以搜索”响应式网页设计”。</li>
  <li>如果你想了解更多关于某项特定技术功能的信息，像 HTML 元素，CSS 属性，或者 JavaScript 方法，你应该直接搜索功能的名称。<code>&lt;video&gt;</code><code>background-color</code><code>opacity</code><code>Date.setTime()</code></li>
  <li>如果您正在寻找一些更具体的信息，您可以添加其他关键字作为补充，例如 "&lt;video&gt; element autoplay attribute"，或者 "Date.setTime parameters"。</li>
@@ -256,7 +256,7 @@ <h3 id="Effective_web_searches">高效的网络搜索</h3>
 
 <p>如果你想搜索一些没有那么明显的专业术语的东西，你需要考虑最有可能搜索到想要的东西是什么。</p>
 
-<ul dir="ltr">
+<ul>
  <li>在好几个 promises 执行之后运行代码</li>
  <li>在浏览器中播放网络摄像头中的视频流</li>
  <li>在元素的背景中创建线性渐变</li>
@@ -267,14 +267,14 @@ <h4 id="Error_messages">报错信息</h4>
 <p>如果你的某段代码有问题，并且出现了一条特定的错误消息，那么把错误消息将其用作搜索词复制到你的搜索引擎中。如果在之前其他人也有同样的问题，在 MDN 或 Stack Overflow 之类的地方可能会有一些关于它的文章或博客帖子。</p>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: <a href="https：//stackoverflow.com/">Stack Overflow</a> 是一个非常有用的网站——它基本上是一个关于各种技术和相关技术的精心挑选有质量的问题和答案的巨大数据库。你可能会找到一个回答你问题的答案。如果没有，你可以问一个问题，看看是否有人能帮助你。</p>
+<p><strong>备注：</strong> <a href="https：//stackoverflow.com/">Stack Overflow</a> 是一个非常有用的网站——它基本上是一个关于各种技术和相关技术的精心挑选有质量的问题和答案的巨大数据库。你可能会找到一个回答你问题的答案。如果没有，你可以问一个问题，看看是否有人能帮助你。</p>
 </div>
 
 <h4 id="Browser_testing">浏览器调试</h4>
 
 <p>看看你的问题是否在所有浏览器中都出现，或者它是否只发生在一个或少数浏览器中，这通常是一个好主意。例如，如果它只影响一个浏览器，则可以使用该浏览器缩小搜索范围。示例搜索可能看起来像：</p>
 
-<ul dir="ltr">
+<ul>
  <li>&lt;video&gt; 在 iOS 浏览器中播放不起作用。</li>
  <li>Firefox 浏览器似乎不支持 Beetlejuice API。</li>
 </ul>
@@ -293,7 +293,7 @@ <h3 id="Other_online_resources">其他在线资源</h3>
 
 <p>找到一个社区是件好事，如果你试图帮助别人回答他们的问题，也可以自己在上面提出问题，你会得到很多尊重。其他好论坛包括：</p>
 
-<ul dir="ltr">
+<ul>
  <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li>
  <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li>
  <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li>
@@ -309,7 +309,7 @@ <h3 id="Physical_meetups">线下聚会</h3>
 
 <h2 id="See_also">参见</h2>
 
-<ul dir="ltr">
+<ul>
  <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li>
  <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li>
  <li><a href="https://www.codecademy.com/">Codecademy</a></li>
diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html
index 8a90082f517b7c..d087e42d9f4511 100644
--- a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html
+++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html
@@ -32,8 +32,6 @@ <h3 id="Technical_Background">Technical Background</h3>
 
 <h3 id="Why_are_correct_MIME_types_important.3F">Why are correct MIME types important?</h3>
 
-<p><img alt="Example of an incorrect MIME type result" class="internal" src="/@api/deki/files/729/=Incorrect-mime-screen.jpg" style="float: right;"> 假如 web 服务器或者应用报告内容的 MIME 类型不正确，根据 HTTP 规范，或许发起人想要处理和显示内容通过他所规定的 MIME 类型，因此 web 浏览器无法采取任何措施。</p>
-
 <p>对于某些浏览器，例如 IE，它尝试允许 web 服务器对于错误配置通过其源码猜测它可能的正确 MIME 类型。</p>
 
 <p>这种做法将会避免许多由 web 管理员他们的错误。因为当内容的 MIME 类型错误，IE 将会用可能正确的 MIME 类型来继续处理内容。例如你设置一个<code>img</code>的类型为<code>text/plain</code> ,IE 可能会设置它为正确的 MIME 类型<code>images/*</code></p>
@@ -41,7 +39,7 @@ <h3 id="Why_are_correct_MIME_types_important.3F">Why are correct MIME types impo
 <p>出于安全原因，使用正确的 MIME 类型的服务内容也是重要的；恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。</p>
 
 <div class="note">
-<p><strong>注意：</strong> 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，{{ gecko("2.0") }} 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (<code>text/css</code>).</p>
+<p><strong>备注：</strong> 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，{{ gecko("2.0") }} 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (<code>text/css</code>).</p>
 
 <p>Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的 CSS 构造，则存在允许加载的临时启发式算法。在 Firefox 4 中已经删除了启发式，您必须正确设置<code>text/css</code> 的 MIME 类型，才能够识别 CSS。</p>
 </div>
@@ -109,11 +107,3 @@ <h3 id="Related_Links">Related Links</h3>
  <li><a href="http://www.microsoft.com/windows/ie/downloads/critical/q290108/">Microsoft - Security Update, March 29, 2001</a></li>
  <li><a href="http://www.microsoft.com/windows/ie/downloads/critical/Q313675/">Microsoft - Security Update, December 13, 2001</a></li>
 </ul>
-
-<div class="originaldocinfo">
-<h3 id="Original_Document_Information">Original Document Information</h3>
-
-<ul>
- <li>Author: Bob Clary, date: 20 Feb 2003</li>
-</ul>
-</div>
diff --git a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.html b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.html
index 21661cf7538fd8..3fdc19c0ab5944 100644
--- a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.html
+++ b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.html
@@ -64,7 +64,7 @@ <h3 id="GET请求响应举例">GET请求/响应举例</h3>
 <p>你可以通过点击一个链接或者在网站进行一次搜索（比如搜索引擎的首页）做出一次简单的 GET 请求。比如，当你在 MDN 上进行一次对“客户端概览”词条的搜索时，HTTP 请求就被发送出去了，你将会看到正如下面一样被展示出来的文本信息（展示出来的信息不一定是相同的，因为其中一部分信息还取决于你的浏览器）。</p>
 
 <div class="note">
-<p>HTTP 消息的格式是在“网络标准”（<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！</p>
+<p><strong>备注：</strong> HTTP 消息的格式是在“网络标准”（<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！</p>
 </div>
 
 <h4 id="请求">请求</h4>
@@ -197,7 +197,7 @@ <h4 id="响应">响应</h4>
 </pre>
 
 <div class="note">
-<p><strong>注意</strong>: 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如<a href="http://web-sniffer.net/">http://web-sniffer.net/</a>）或者使用浏览器扩展例如 <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a>。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> 工具)。</p>
+<p><strong>备注：</strong> 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如<a href="http://web-sniffer.net/">http://web-sniffer.net/</a>）或者使用浏览器扩展例如 <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a>。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> 工具)。</p>
 </div>
 
 <h2 id="静态网站">静态网站</h2>
@@ -205,7 +205,7 @@ <h2 id="静态网站">静态网站</h2>
 <p>静态网站是指每当请求一个特定的资源时，会从服务器返回相同的硬编码内容。因此，例如，如果您在 <code>/static/myproduct1.html</code> 有一个关于产品的页面，则该页面将返回给每个用户。如果您添加另一个类似的产品到您的网站，您将需要添加另一个页面（例如 <code>myproduct2.html</code> ）等。这可能开始变得非常低效：当您访问数千个产品页面时会发生什么——你会在每个页面（基本的页面模板，结构等等）上重复很多代码，如果你想改变页面结构的任何东西，比如添加一个新的“相关产品”部分，必须单独更改每个页面。</p>
 
 <div class="note">
-<p><strong>注释</strong>: 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择， 然而随着页面数量的增加，它们的维护成本也会很高。</p>
+<p><strong>备注：</strong> 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择， 然而随着页面数量的增加，它们的维护成本也会很高。</p>
 </div>
 
 <p>让我们回顾一下在上一篇文章中看到的静态网站架构图，看看它是如何工作的。</p>
@@ -284,7 +284,7 @@ <h2 id="web框架简化服务器端的web编程">web 框架简化服务器端的
 ]</pre>
 
 <div class="note">
-<p><strong>注意</strong>: 在<code>url()</code>函数中的第一个参数可能看起来有点古怪 (比如<code>r'^junior/$</code>)  因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”"</p>
+<p><strong>备注：</strong> 在<code>url()</code>函数中的第一个参数可能看起来有点古怪 (比如<code>r'^junior/$</code>)  因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”"</p>
 </div>
 
 <p>Web 框架还可以轻松地使用查看函数，从数据库获取信息。我们的数据结构是在模型中定义的，模型是定义要存储在底层数据库中的字段的 Python 类。如果我们有一个名为 Team 的模型，其中有一个“<em>team_type</em>”字段，那么我们可以使用一个简单的查询语法来取回所有具有特定类型的球队。</p>
diff --git a/files/zh-cn/learn/server-side/first_steps/index.html b/files/zh-cn/learn/server-side/first_steps/index.html
index 2fd28dbf5df7c0..fbab89eabdd00d 100644
--- a/files/zh-cn/learn/server-side/first_steps/index.html
+++ b/files/zh-cn/learn/server-side/first_steps/index.html
@@ -1,6 +1,6 @@
 ---
 title: 服务端网站编程的第一步
-slug: learn/Server-side/First_steps
+slug: Learn/Server-side/First_steps
 tags:
   - 初学者
   - 学习
diff --git a/files/zh-cn/learn/server-side/first_steps/introduction/index.html b/files/zh-cn/learn/server-side/first_steps/introduction/index.html
index 0952760c17c961..92cb8fe1b80444 100644
--- a/files/zh-cn/learn/server-side/first_steps/introduction/index.html
+++ b/files/zh-cn/learn/server-side/first_steps/introduction/index.html
@@ -97,7 +97,7 @@ <h2 id="服务器端编程和客户端编程是一样的吗？">服务器端编
 <p>同样的，当客户端和服务器端代码使用框架时，它们的领域是不同的，因此框架也会不同。客户端 web 框架简化布局和演示任务，然而服务器端 web 框架提供大量的普通 Web 服务功能，不然的话你可能需要自己来实现这些功能（比如支持会话、支持用户和身份验证、简单的数据访问、模板库等）。</p>
 
 <div class="note">
-<p><strong>注意事项</strong>：客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。</p>
+<p><strong>备注：</strong> 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。</p>
 
 <p>相反的，你应该从来没有考虑过不使用框架而直接编写 web 应用程序的服务器端组件——实现一个重要的功能比如 HTTP 服务器真的很难直接从头开始用 Python 语言构建，但是一些用 Python 语言写的 web 框架，比如 Django 提供了开箱即用的功能，同时还包含其他很多有用的工具。</p>
 </div>
@@ -125,7 +125,7 @@ <h3 id="信息的高效存储和传输">信息的高效存储和传输</h3>
 <p>因为数据被放在数据库中，因此更加容易被分享和更新到其他商业系统（比如，当产品在网上或者实体店卖掉之后，商店可以更新它的存货清单数据库）</p>
 
 <div class="note">
-<p><strong>注意</strong>：你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处：</p>
+<p><strong>备注：</strong> 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处：</p>
 
 <ol>
  <li>打开<a href="https://www.amazon.com">亚马逊</a>或者其他一些电子商务网站。</li>
@@ -143,7 +143,7 @@ <h3 id="定制用户体验">定制用户体验</h3>
 <p>对用户习惯的更深层分析可以被用来预测用户的兴趣和更加深度地定制化回应和通知，比如，提供一张清单来展示曾经去过的地方，或者在地图上标识你可能想去的非常受欢迎的地点。</p>
 
 <div class="note">
-<p><strong>注意</strong>：谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。</p>
+<p><strong>备注：</strong> 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。</p>
 
 <p>谷歌搜索结果基于之前的搜索进行优化。</p>
 
@@ -170,7 +170,7 @@ <h3 id="控制对内容的访问">控制对内容的访问</h3>
 </ul>
 
 <div class="note">
-<p><strong>注意</strong>：想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？</p>
+<p><strong>备注：</strong> 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？</p>
 </div>
 
 <h3 id="存储会话和状态信息">存储会话和状态信息</h3>
@@ -180,7 +180,7 @@ <h3 id="存储会话和状态信息">存储会话和状态信息</h3>
 <p>这也就允许，比如说，一个网站知道一个用户曾经登录过并且展示他们邮箱的链接或者订单历史，或者可能存储一个简单游戏的状态来确保用户可以再次访问网站然后从上次留下来的地方继续。</p>
 
 <div class="note">
-<p><strong>注意</strong>：访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如<a href="http://www.theage.com.au/">The Age</a>）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子</p>
+<p><strong>备注：</strong> 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如<a href="http://www.theage.com.au/">The Age</a>）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子</p>
 </div>
 
 <h3 id="通知和通讯">通知和通讯</h3>
@@ -200,7 +200,7 @@ <h3 id="通知和通讯">通知和通讯</h3>
 </ul>
 
 <div class="note">
-<p><strong>注意</strong>：最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。</p>
+<p><strong>备注：</strong> 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。</p>
 </div>
 
 <h3 id="数据分析">数据分析</h3>
@@ -210,7 +210,7 @@ <h3 id="数据分析">数据分析</h3>
 <p>比如，亚马逊和谷歌都基于过去的搜索（和购物）信息来为产品打广告。</p>
 
 <div class="note">
-<p><strong>注意</strong>：如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。</p>
+<p><strong>备注：</strong> 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。</p>
 
 <p>也可以看一下你收到的广告是什么类型的——你或许会看到你在其他网站查看的商品。Facebook 为突出内容和广告的算法或许还很令人疑惑，但是很明显的，它是依据你的喜好、品味和习惯的！</p>
 </div>
diff --git a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.html b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.html
index 61dfc3d4da797f..bf1dfae0a3a53e 100644
--- a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.html
+++ b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.html
@@ -141,7 +141,7 @@ <h3 id="渲染数据">渲染数据</h3>
 <p>比如，Django 模板允许你通过使用“双重花括号”（如<code>{</code><code>{ <em>variable_name</em> </code><code>}</code><code>}</code>）来指定变量，当页面被渲染出来时，这些变量会被从视图函数传递过来的值代替。模板系统也会提供表达支持（通过语法<code>{% <em>expression</em> %}来实现</code>），这样就允许模板进行一些简单的操作比如迭代传递给模板的值列表。</p>
 
 <div class="note">
-<p><strong>Note</strong>: 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。</p>
+<p><strong>备注：</strong> 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。</p>
 </div>
 
 <p>下面的代码片段展示了它们如何工作的。下面的内容接着从上一个部分而来的“youngest team”实例，HTML 模板通过视图函数传进一个叫做 youngest_teams 的值列表。在 HTML 骨架中我们有一个初步检查 youngest_teams 变量是否存在的表示，然后会在 for 循环里面进行迭代。在每一次迭代中模板会以列表元素的形式展示队伍的 team_name 值。</p>
@@ -193,7 +193,7 @@ <h2 id="如何选择一个web框架">如何选择一个 web 框架</h2>
 <p>如果你是一个完全的初学者，那么你可能会基于“易于学习”来选择你的框架。除了语言本身的“易于学习”之外，帮助新手的高质量的文档/教程和一个活跃的社区是你最有价值的资源。在后续课程中，我们选取了 Django（Python）和 Express（Node/Javascript）来编写我们的实例，主要因为它们很容易上手并且有强大的支持。</p>
 
 <div class="note">
-<p><strong>注意</strong>: 我们可以去 <a href="https://www.djangoproject.com/">Django</a> (Python) 和 <a href="https://expressjs.com/">Express</a> (Node/JavaScript) 的主页上去看看它们的文档和社区。</p>
+<p><strong>备注：</strong> 我们可以去 <a href="https://www.djangoproject.com/">Django</a> (Python) 和 <a href="https://expressjs.com/">Express</a> (Node/JavaScript) 的主页上去看看它们的文档和社区。</p>
 
 <ol>
  <li>导航至主页 (上面已给出链接)
@@ -220,7 +220,7 @@ <h2 id="几个还不错的框架？">几个还不错的框架？</h2>
 <p>下面的服务器端框架体现了现在最受欢迎的几个。它们有你需要用来提升效率的一切东西——它们是开源的，一直保持发展的态势，有着富有激情的社区，社区里的人创作出文档并且在讨论板上帮助使用者，并且被使用在很多高质量的网站上。当然还有很多其他非常棒的框架，你可以使用搜索引擎探索一下。</p>
 
 <div class="note">
-<p><strong>注意：（部分）解释来自框架的官方网站！</strong></p>
+<p><strong>备注：</strong> （部分）解释来自框架的官方网站！</p>
 </div>
 
 <h3 id="Django_Python">Django (Python)</h3>
diff --git a/files/zh-cn/learn/server-side/first_steps/website_security/index.html b/files/zh-cn/learn/server-side/first_steps/website_security/index.html
index 853e19d1f81915..0a52ce18766ea8 100644
--- a/files/zh-cn/learn/server-side/first_steps/website_security/index.html
+++ b/files/zh-cn/learn/server-side/first_steps/website_security/index.html
@@ -1,6 +1,6 @@
 ---
 title: 站点安全
-slug: learn/Server-side/First_steps/Website_security
+slug: Learn/Server-side/First_steps/Website_security
 tags:
   - 安全
   - 站点安全
@@ -38,7 +38,7 @@ <h2 id="什么是站点安全">什么是站点安全？</h2>
 <p>文章的剩余部分列举了一些常见威胁的细节以及用来保护站点的一些简单措施。</p>
 
 <div class="note">
-<p><strong>Note</strong>: 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。</p>
+<p><strong>备注：</strong> 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。</p>
 </div>
 
 <h2 id="站点安全威胁">站点安全威胁</h2>
@@ -50,7 +50,7 @@ <h3 id="跨站脚本_XSS">跨站脚本 (XSS)</h3>
 <p>XSS 是一个术语，用来描述一类允许攻击者通过网站将客户端脚本代码注入到其他用户的浏览器中的攻击手段。由于注入到浏览器的代码来自站点，其是可信赖的，因此可以做类似将该用户用于站点认证的 cookie 发送给攻击者的事情。一旦攻击者拿到了这个 cookie，他们就可以登陆到站点，就好像他们就是那个用户，可以做任何那个用户能做的事情。根据站点的不同，这些可能包括访问他们的信用卡信息、查看联系人、更改密码等。</p>
 
 <div class="note">
-<p><strong>Note</strong>: XSS 攻击在历史上较其他类型更为常见。</p>
+<p><strong>备注：</strong> XSS 攻击在历史上较其他类型更为常见。</p>
 </div>
 
 <p>有两种主要的方法可以让站点将注入的脚本返回到浏览器 -- 通常被称做 反射型 和 持久型 XSS 攻击。</p>
@@ -89,7 +89,7 @@ <h3 id="SQL_注入">SQL 注入</h3>
 <p>避免此种攻击的方法就是确保任何传递给 SQL 查询语句的用户数据都无法更改查询的本来用意。有种方式便是将用户输入中任何在 SQL 语句中有特殊含义的字符进行转义。</p>
 
 <div class="note">
-<p><strong>Note</strong>: SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。</p>
+<p><strong>备注：</strong> SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。</p>
 </div>
 
 <p>在下面的语句中我们对 ' 字符进行了转义。SQL 会将<strong>粗体</strong>显示的整段字符串解释为 name(这个 name 很古怪，但至少是没有危害的！)</p>
@@ -101,7 +101,7 @@ <h3 id="SQL_注入">SQL 注入</h3>
 <p>Web 框架通常会为你进行这种转义操作。例如 Django，可以确保任何传递给查询集合 (model 查询) 的用户数据都是已经转义过的。</p>
 
 <div class="note">
-<p><strong>Note</strong>: 本章节引用了大量来自 <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia </a>的内容。</p>
+<p><strong>备注：</strong> 本章节引用了大量来自 <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia </a>的内容。</p>
 </div>
 
 <h3 id="跨站请求伪造_CSRF">跨站请求伪造 (CSRF)</h3>
@@ -115,7 +115,7 @@ <h3 id="跨站请求伪造_CSRF">跨站请求伪造 (CSRF)</h3>
 <p>最终的结果就是任何已登陆到站点的用户在点击了提交按钮后都会进行这个交易。John 发财啦！</p>
 
 <div class="note">
-<p><strong>Note</strong>: 这里的诀窍是，John 不需要访问那些用户的 cookie(或者说身份信息) -- 用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。</p>
+<p><strong>备注：</strong> 这里的诀窍是，John 不需要访问那些用户的 cookie(或者说身份信息) -- 用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。</p>
 </div>
 
 <p>杜绝此类攻击的一种方式是在服务器端要求每个 POST 请求都包含一个用户特定的由站点生成的密钥 ( 这个密钥值可以由服务器在发送用来传输数据的网页表单时提供）。这种方式可以使 John 无法创建自己的表单，因为他必须知道服务器提供给那个用户的密钥值。即使他找出了那个密钥值，并为那个用户创建了表单，他也无法用同样的表单来攻击其他的所有用户。</p>
@@ -141,7 +141,7 @@ <h2 id="一些关键信息">一些关键信息</h2>
 <p>当 Web 应用信任来自浏览器的数据时，上述章节里提到的大多数攻击利用手段才能成功。无论你做什么其它的事情来提升你的网站的安全性能，在将信息展示在浏览器之前、在使用 SQL 语句进行查询之前、在传递给一个操作系统或者文件系统之前，你应该过滤掉所有的用户源信息。</p>
 
 <div class="warning">
-<p>重要：在你可以了解到的有关网站安全大多数 课程之中，最重要的就是<strong>不要相信来自浏览器的数据</strong>。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。</p>
+<p><strong>警告：</strong> 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是<strong>不要相信来自浏览器的数据</strong>。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。</p>
 </div>
 
 <p>你可以采取一些简单的步骤：</p>
diff --git a/files/zh-cn/learn/server-side/index.html b/files/zh-cn/learn/server-side/index.html
index 6011cc4db3b348..1f87083a511616 100644
--- a/files/zh-cn/learn/server-side/index.html
+++ b/files/zh-cn/learn/server-side/index.html
@@ -1,6 +1,6 @@
 ---
 title: 服务器端网页编程
-slug: learn/Server-side
+slug: Learn/Server-side
 translation_of: Learn/Server-side
 ---
 <div>{{LearnSidebar}}</div>

From 97ef67572d371102a4fdcb3d2902f944bd17fb8d Mon Sep 17 00:00:00 2001
From: allo <yin199909@aliyun.com>
Date: Wed, 3 Aug 2022 11:12:23 +0800
Subject: [PATCH 2/3] move to .md for server-side

---
 .../learn/learning_and_getting_help/{index.html => index.md}      | 0
 .../configuring_server_mime_types/{index.html => index.md}        | 0
 .../first_steps/client-server_overview/{index.html => index.md}   | 0
 .../zh-cn/learn/server-side/first_steps/{index.html => index.md}  | 0
 .../server-side/first_steps/introduction/{index.html => index.md} | 0
 .../first_steps/web_frameworks/{index.html => index.md}           | 0
 .../first_steps/website_security/{index.html => index.md}         | 0
 files/zh-cn/learn/server-side/{index.html => index.md}            | 0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename files/zh-cn/learn/learning_and_getting_help/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/configuring_server_mime_types/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/first_steps/client-server_overview/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/first_steps/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/first_steps/introduction/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/first_steps/web_frameworks/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/first_steps/website_security/{index.html => index.md} (100%)
 rename files/zh-cn/learn/server-side/{index.html => index.md} (100%)

diff --git a/files/zh-cn/learn/learning_and_getting_help/index.html b/files/zh-cn/learn/learning_and_getting_help/index.md
similarity index 100%
rename from files/zh-cn/learn/learning_and_getting_help/index.html
rename to files/zh-cn/learn/learning_and_getting_help/index.md
diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/configuring_server_mime_types/index.html
rename to files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
diff --git a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.html b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/first_steps/client-server_overview/index.html
rename to files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
diff --git a/files/zh-cn/learn/server-side/first_steps/index.html b/files/zh-cn/learn/server-side/first_steps/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/first_steps/index.html
rename to files/zh-cn/learn/server-side/first_steps/index.md
diff --git a/files/zh-cn/learn/server-side/first_steps/introduction/index.html b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/first_steps/introduction/index.html
rename to files/zh-cn/learn/server-side/first_steps/introduction/index.md
diff --git a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.html b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/first_steps/web_frameworks/index.html
rename to files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
diff --git a/files/zh-cn/learn/server-side/first_steps/website_security/index.html b/files/zh-cn/learn/server-side/first_steps/website_security/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/first_steps/website_security/index.html
rename to files/zh-cn/learn/server-side/first_steps/website_security/index.md
diff --git a/files/zh-cn/learn/server-side/index.html b/files/zh-cn/learn/server-side/index.md
similarity index 100%
rename from files/zh-cn/learn/server-side/index.html
rename to files/zh-cn/learn/server-side/index.md

From ea9f193c3a19dae30d97075380a5d731865b58d9 Mon Sep 17 00:00:00 2001
From: allo <yin199909@aliyun.com>
Date: Wed, 3 Aug 2022 11:12:35 +0800
Subject: [PATCH 3/3] convert to markdown for server-side

---
 .../learn/learning_and_getting_help/index.md  | 360 ++++++++----------
 .../configuring_server_mime_types/index.md    | 124 +++---
 .../learn/server-side/django/testing/index.md |  14 +-
 .../forms/delete_author_form/index.md         |   2 +-
 .../express_nodejs/routes/index.md            |  12 +-
 .../client-server_overview/index.md           | 304 +++++++--------
 .../learn/server-side/first_steps/index.md    |  46 +--
 .../first_steps/introduction/index.md         | 262 ++++++-------
 .../first_steps/web_frameworks/index.md       | 310 ++++++++-------
 .../first_steps/website_security/index.md     | 189 +++++----
 files/zh-cn/learn/server-side/index.md        |  44 +--
 11 files changed, 767 insertions(+), 900 deletions(-)

diff --git a/files/zh-cn/learn/learning_and_getting_help/index.md b/files/zh-cn/learn/learning_and_getting_help/index.md
index a7752631d0760b..283e2bcac0a888 100644
--- a/files/zh-cn/learn/learning_and_getting_help/index.md
+++ b/files/zh-cn/learn/learning_and_getting_help/index.md
@@ -3,314 +3,276 @@ title: 学习和获得帮助
 slug: Learn/Learning_and_getting_help
 translation_of: Learn/Learning_and_getting_help
 ---
-<p>{{learnsidebar}}/p>
+{{learnsidebar}}/p>
 
-<p>这是伟大的，你投入一些时间学习一套新的技能，但有好的做法，采用，将使你的学习更有效。有时，您也会陷入困境并感到沮丧，即使是专业的 Web 开发人员也会经常这样，因此，了解最有效的方法，尝试获得帮助，以便您能够继续工作，是值得付出的。本文在这两个方面提供了一些提示和提示，可帮助您从学习 Web 开发中获得更多内容，并进一步阅读，以便您能够找到有关每个子主题的详细信息（如果您愿意）。</p>
+这是伟大的，你投入一些时间学习一套新的技能，但有好的做法，采用，将使你的学习更有效。有时，您也会陷入困境并感到沮丧，即使是专业的 Web 开发人员也会经常这样，因此，了解最有效的方法，尝试获得帮助，以便您能够继续工作，是值得付出的。本文在这两个方面提供了一些提示和提示，可帮助您从学习 Web 开发中获得更多内容，并进一步阅读，以便您能够找到有关每个子主题的详细信息（如果您愿意）。
 
-<h2 id="有效学习">有效学习</h2>
+## 有效学习
 
-<p>让我们直接思考一下有效的学习。</p>
+让我们直接思考一下有效的学习。
 
-<h3 id="不同的学习方法">不同的学习方法</h3>
+### 不同的学习方法
 
-<p>有趣的是，你的大脑学习东西有两种主要方式——<strong>专注</strong>和<strong>分散学习</strong>：</p>
+有趣的是，你的大脑学习东西有两种主要方式——**专注**和**分散学习**：
 
-<ul>
- <li>重点学习是您传统上可能与学术科目联系在一起的东西。你专注于一个低级的话题，并解决它带来的具体问题。你专注于一个狭窄的区域。</li>
- <li>分散学习更多的是与围绕更广领域的高层次思维有关。你让你的头脑游荡更广，似乎在不同事物之间随机联系。这更多的是你在洗澡时或喝咖啡休息时的想法。</li>
-</ul>
+- 重点学习是您传统上可能与学术科目联系在一起的东西。你专注于一个低级的话题，并解决它带来的具体问题。你专注于一个狭窄的区域。
+- 分散学习更多的是与围绕更广领域的高层次思维有关。你让你的头脑游荡更广，似乎在不同事物之间随机联系。这更多的是你在洗澡时或喝咖啡休息时的想法。
 
-<p>从神经科学家对大脑活动所做的研究中，我们发现，你不能同时参与两种学习或思考的方式。那么，你应该选择哪一个呢？你可能认为集中学习更适合学习，但在现实中，<strong>两者</strong>都很重要。</p>
+从神经科学家对大脑活动所做的研究中，我们发现，你不能同时参与两种学习或思考的方式。那么，你应该选择哪一个呢？你可能认为集中学习更适合学习，但在现实中，**两者**都很重要。
 
-<p>专注思维对于将精力集中在特定主题上，深入解决问题，以及提高你对所需技术的掌握——加强大脑中存储信息的神经通路——都很棒。然而，当你试图理解新学科或解决以前没有遇到的新问题时，它并不善于理解"大局"，并解锁新的神经通路。</p>
+专注思维对于将精力集中在特定主题上，深入解决问题，以及提高你对所需技术的掌握——加强大脑中存储信息的神经通路——都很棒。然而，当你试图理解新学科或解决以前没有遇到的新问题时，它并不善于理解"大局"，并解锁新的神经通路。
 
-<p>为此，你需要漫不由多的思考。这与焦点正好相反——你让你的大脑在更广阔的环境中游荡，四处寻找你之前没有的联系，接触新事物（或新事物的新组合），然后你可以关注这些事物，加强它们，并开始真正理解它们的意思。</p>
+为此，你需要漫不由多的思考。这与焦点正好相反——你让你的大脑在更广阔的环境中游荡，四处寻找你之前没有的联系，接触新事物（或新事物的新组合），然后你可以关注这些事物，加强它们，并开始真正理解它们的意思。
 
-<p>这就是为什么在进入具体细节之前，先阅读一些介绍性材料，以便对一个领域有一个高度的了解，这通常是好的。</p>
+这就是为什么在进入具体细节之前，先阅读一些介绍性材料，以便对一个领域有一个高度的了解，这通常是好的。
 
-<p>这也是为什么你有时真的可以陷入一个问题，但随后找出答案，当你去喝咖啡休息（或散步）。您可以：</p>
+这也是为什么你有时真的可以陷入一个问题，但随后找出答案，当你去喝咖啡休息（或散步）。您可以：
 
-<ol>
- <li>知道如何使用工具 A 解决问题 A。</li>
- <li>知道如何用工具 B 解决问题 B。</li>
- <li>不知道如何解决问题 C。</li>
-</ol>
+1.  知道如何使用工具 A 解决问题 A。
+2.  知道如何用工具 B 解决问题 B。
+3.  不知道如何解决问题 C。
 
-<p>假设您一直专注于问题 C，然后感到沮丧，因为您无法思考如何解决它。但是，在散步获得新鲜空气后，你可能会发现，当你的头脑徘徊，你突然使工具 A 和工具 B 之间的连接，并意识到你可以使用它们一起解决问题 C！它并不总是这么简单，但它也令人惊讶的是多少次，这确实发生了。这也凸显了在电脑前学习时定期休息的重要性。</p>
+假设您一直专注于问题 C，然后感到沮丧，因为您无法思考如何解决它。但是，在散步获得新鲜空气后，你可能会发现，当你的头脑徘徊，你突然使工具 A 和工具 B 之间的连接，并意识到你可以使用它们一起解决问题 C！它并不总是这么简单，但它也令人惊讶的是多少次，这确实发生了。这也凸显了在电脑前学习时定期休息的重要性。
 
-<h3 id="不同的学习材料">不同的学习材料</h3>
+### 不同的学习材料
 
-<p>也值得看看可用的不同类型的学习材料，看看哪些材料对您来说最有效。</p>
+也值得看看可用的不同类型的学习材料，看看哪些材料对您来说最有效。
 
-<h4 id="文本文章">文本文章</h4>
+#### 文本文章
 
-<p>你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习 CSS 框模型"），有些文章将是参考材料，允许您查找您可能忘记的细节（如"CSS 属性的语法是什么"？<code>background</code></p>
+你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习 CSS 框模型"），有些文章将是参考材料，允许您查找您可能忘记的细节（如"CSS 属性的语法是什么"？`background`
 
-<p>MDN Web 文档对这两种类型都非常好 - 您当前位于的区域非常适合学习技术和概念，我们还有几个巨大的参考部分，允许您查找任何您不记得的语法。</p>
+MDN Web 文档对这两种类型都非常好 - 您当前位于的区域非常适合学习技术和概念，我们还有几个巨大的参考部分，允许您查找任何您不记得的语法。
 
-<p>网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。</p>
+网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。
 
-<div class="blockIndicator note">
-<p><strong>备注：</strong> 上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如您会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。</p>
-</div>
+> **备注：** 上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如您会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。
 
-<h4 id="Videos">视频资料</h4>
+#### 视频资料
 
-<p>还有一些网站上有视频学习内容。很明显 YouTube 是一个不错的网站，它有很多频道，比如 <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Mozilla Layout Land</a>、 <a href="https://www.youtube.com/MozillaDeveloper">MozillaDeveloper</a> 和 <a href="https://www.youtube.com/user/ChromeDevelopers/">Google ChromeDevelopers</a> 提供许多有用的视频。许多人更喜欢文本文章来进行更深入的学习和参考资料，喜欢视频来快速理解概念和新功能，但你更喜欢从中学习什么实际上取决于你自己。这里没有对错的说法。</p>
+还有一些网站上有视频学习内容。很明显 YouTube 是一个不错的网站，它有很多频道，比如 [Mozilla Layout Land](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)、 [MozillaDeveloper](https://www.youtube.com/MozillaDeveloper) 和 [Google ChromeDevelopers](https://www.youtube.com/user/ChromeDevelopers/) 提供许多有用的视频。许多人更喜欢文本文章来进行更深入的学习和参考资料，喜欢视频来快速理解概念和新功能，但你更喜欢从中学习什么实际上取决于你自己。这里没有对错的说法。
 
-<h4 id="Interactive_code_playgrounds">交互式的代码演练场</h4>
+#### 交互式的代码演练场
 
-<p>你可能是那种喜欢简单指令的人，更喜欢直接开始操纵代码。这也是一种合理的方法，一些学习网站倾向于采用这种方法。例如像 <a href="https://www.codecademy.com/">Codecademy</a> 这类网站中，教程主要由交互式代码编辑器组成，您必须直接编写代码并查看是否达到了预期的结果。</p>
+你可能是那种喜欢简单指令的人，更喜欢直接开始操纵代码。这也是一种合理的方法，一些学习网站倾向于采用这种方法。例如像 [Codecademy](https://www.codecademy.com/) 这类网站中，教程主要由交互式代码编辑器组成，您必须直接编写代码并查看是否达到了预期的结果。
 
-<p>许多 MDN Web 文档参考页面中也提供了交互式的示例，您可以在其中更改代码，并查看实时结果的变化。在你的计算机上或者在像 <a href="https://jsbin.com/?html,css,js,output">JSBin</a>、<a href="https://codepen.io/">Codepen</a> 或 <a href="https://glitch.com/">Glitch</a> 这样的在线代码编辑器中创建自己的代码示例也是可以的。事实上，当你在学习时，你会被要求去做这些事情本身就是属于课堂的一部分！</p>
+许多 MDN Web 文档参考页面中也提供了交互式的示例，您可以在其中更改代码，并查看实时结果的变化。在你的计算机上或者在像 [JSBin](https://jsbin.com/?html,css,js,output)、[Codepen](https://codepen.io/) 或 [Glitch](https://glitch.com/) 这样的在线代码编辑器中创建自己的代码示例也是可以的。事实上，当你在学习时，你会被要求去做这些事情本身就是属于课堂的一部分！
 
-<div class="blockIndicator note">
-<p><strong>备注：</strong> 在线代码编辑器对于共享您编写的代码也非常有用，例如，如果您正在与不在同一位置的其他人协作学习，或者正在向他人发送代码以寻求帮助。您可以与他们共享代码示例的网址，以便他们可以查看。</p>
-</div>
+> **备注：** 在线代码编辑器对于共享您编写的代码也非常有用，例如，如果您正在与不在同一位置的其他人协作学习，或者正在向他人发送代码以寻求帮助。您可以与他们共享代码示例的网址，以便他们可以查看。
 
-<div class="blockIndicator note">
-<p><strong>备注：</strong> 与其他学习方法相比，你可能更喜欢一种学习方法，但实际上，你最终可能得到的是一种混合方法。你可能还会想出另外其他的方法，而不是我们上面提到的三种。</p>
-</div>
+> **备注：** 与其他学习方法相比，你可能更喜欢一种学习方法，但实际上，你最终可能得到的是一种混合方法。你可能还会想出另外其他的方法，而不是我们上面提到的三种。
 
-<h3 id="Making_a_plan">制定一个计划</h3>
+### 制定一个计划
 
-<p>制定一个计划来帮助你通过学习实现你想要实现的目标是个好主意。</p>
+制定一个计划来帮助你通过学习实现你想要实现的目标是个好主意。
 
-<h4 id="A_goal_statement">定一个目标</h4>
+#### 定一个目标
 
-<p>这听起来很傻，但为什么不从一句话开始，说出你想要实现的目标呢？以下内容有不同的见识，但都是现实可行的：</p>
+这听起来很傻，但为什么不从一句话开始，说出你想要实现的目标呢？以下内容有不同的见识，但都是现实可行的：
 
-<ul>
- <li>我想在两年后成为一名专业的 Web 开发者。</li>
- <li>我想学习足够的知识，为我当地的业余网球俱乐部建立一个网站。</li>
- <li>我想学习 HTML 和 CSS，这样我就可以扩展我的工作角色，接管更新我们公司网站上的内容。</li>
-</ul>
+- 我想在两年后成为一名专业的 Web 开发者。
+- 我想学习足够的知识，为我当地的业余网球俱乐部建立一个网站。
+- 我想学习 HTML 和 CSS，这样我就可以扩展我的工作角色，接管更新我们公司网站上的内容。
 
-<p>下面是一些不切实际的想法：</p>
+下面是一些不切实际的想法：
 
-<ul>
- <li>我想在三个月内从一个完全的初学者变成一名高级 Web 开发人员。</li>
- <li>我想创办自己的公司，建立一个社交网络，在两年内超越 Facebook。</li>
-</ul>
+- 我想在三个月内从一个完全的初学者变成一名高级 Web 开发人员。
+- 我想创办自己的公司，建立一个社交网络，在两年内超越 Facebook。
 
-<h4 id="What_do_you_need_to_get_there">你需要什么才能到达那里？</h4>
+#### 你需要什么才能到达那里？
 
-<p>一旦你制定了目标，研究一下实现目标需要什么是个好想法。例如：</p>
+一旦你制定了目标，研究一下实现目标需要什么是个好想法。例如：
 
-<p>我需要的工具：</p>
+我需要的工具：
 
-<ul>
- <li>一台计算机</li>
- <li>接入互联网</li>
- <li>一些笔和纸</li>
-</ul>
+- 一台计算机
+- 接入互联网
+- 一些笔和纸
 
-<p>我需要的知识：</p>
+我需要的知识：
 
-<ul>
- <li>如何使用 HTML、CSS、JavaScript 以及相关的工具和最佳实践来构建网站和 web 应用程序（我们绝对可以在这方面为您提供帮助！）。</li>
- <li>如何得到域名和主机，然后使用它们将网站发布到互联网上。</li>
- <li>如何经营一家小企业。</li>
- <li>如何为我的生意做广告，吸引客户。</li>
-</ul>
+- 如何使用 HTML、CSS、JavaScript 以及相关的工具和最佳实践来构建网站和 web 应用程序（我们绝对可以在这方面为您提供帮助！）。
+- 如何得到域名和主机，然后使用它们将网站发布到互联网上。
+- 如何经营一家小企业。
+- 如何为我的生意做广告，吸引客户。
 
-<h4 id="How_much_time_and_money_will_it_take">这需要花费多少时间和金钱？</h4>
+#### 这需要花费多少时间和金钱？
 
-<p>预估得到这些东西的时间和成本。如果你需要工作来挣钱购买所需的材料，那么时间成本就必须考虑在内。一旦你有了一个时间估计，你就可以开始围绕你的生活制定一个计划。</p>
+预估得到这些东西的时间和成本。如果你需要工作来挣钱购买所需的材料，那么时间成本就必须考虑在内。一旦你有了一个时间估计，你就可以开始围绕你的生活制定一个计划。
 
-<h4 id="How_many_hours_per_week_do_I_need_to_dedicate">我每周需要投入多少小时？</h4>
+#### 我每周需要投入多少小时？
 
-<p>一旦你知道你需要做什么，以及你认为需要多长时间，你就可以开始写一个计划来实现你的目标。它可以简单到：</p>
+一旦你知道你需要做什么，以及你认为需要多长时间，你就可以开始写一个计划来实现你的目标。它可以简单到：
 
-<p>“我需要花 500 个小时来学习我需要知道的东西，我有一年的时间来学习。如果我假设有两周的假期，我打算每周为此学习 10 个小时 (在晚上和周末有空的时候)，所以我会这样安排时间。”</p>
+“我需要花 500 个小时来学习我需要知道的东西，我有一年的时间来学习。如果我假设有两周的假期，我打算每周为此学习 10 个小时 (在晚上和周末有空的时候)，所以我会这样安排时间。”
 
-<p>当然，你能在这上面花多少时间取决于你的情况。如果你在学校，那么你有比其他有工作和孩子要养活的人地情况更多的空闲时间。如果不是，实现目标仍然是可能的，但你必须现实清楚地知道实现目标最快需要多长。</p>
+当然，你能在这上面花多少时间取决于你的情况。如果你在学校，那么你有比其他有工作和孩子要养活的人地情况更多的空闲时间。如果不是，实现目标仍然是可能的，但你必须现实清楚地知道实现目标最快需要多长。
 
-<p>如果你正在大学或学院学习网络开发课程，那么大部分计划都是为你做的——你是幸运的！</p>
+如果你正在大学或学院学习网络开发课程，那么大部分计划都是为你做的——你是幸运的！
 
-<p>当你制定了一个每周的日程安排之后，你应该在一个简单的电子表格中，甚至在笔记本上记录下你每周要做的事情！</p>
+当你制定了一个每周的日程安排之后，你应该在一个简单的电子表格中，甚至在笔记本上记录下你每周要做的事情！
 
-<p>此外，制定一些次级目标可能是个好主意，这样你就可以更容易地了解自己处在什么阶段。例如：</p>
+此外，制定一些次级目标可能是个好主意，这样你就可以更容易地了解自己处在什么阶段。例如：
 
-<ul>
- <li>暑期学习 HTML 和 CSS 基础知识</li>
- <li>在 12 月学习完 JavaScript 基础知识</li>
- <li>在明年的 4 月份前搭建好一个示例网站</li>
- <li>等等。</li>
-</ul>
+- 暑期学习 HTML 和 CSS 基础知识
+- 在 12 月学习完 JavaScript 基础知识
+- 在明年的 4 月份前搭建好一个示例网站
+- 等等。
 
-<p>经常想一想你取得了多大的进步，在需要的时候及时调整你的计划。</p>
+经常想一想你取得了多大的进步，在需要的时候及时调整你的计划。
 
-<h3 id="Staying_motivated">保持动力</h3>
+### 保持动力
 
-<p>很难保持动力，尤其是当你试图学习编程或网络开发等复杂技能时。以下是一些保持动力并持续工作的建议：</p>
+很难保持动力，尤其是当你试图学习编程或网络开发等复杂技能时。以下是一些保持动力并持续工作的建议：
 
-<ul>
- <li><strong>尽量让你的工作环境更有效率</strong>。找一张舒适的办公桌椅，确保你有足够的光线看清楚你在做什么，并尽量提供有助于你集中注意力的东西（如柔和的音乐、香水，任何你需要的东西）。不要试图在一个分心的房间里工作——比如开着电视，朋友们在看足球！另外，把手机放在房间外——大多数人都会被手机分心，所以你应该把它放在其他地方。
- </li>
- <li><strong>定期休息</strong>。不间断地工作几个小时对你的动力不好，尤其是当你发现工作很难或遇到问题时。这只会导致沮丧。通常最好休息一下，四处走动一会儿，然后在回去工作之前喝一杯咖啡或者饮料放松。正如我们之前所说，你在这段时间里所做的分散式学习通常可以帮助你找到解决你所面临问题的方法。长时间不休息也会对身体有害；盯着显示器看太久会伤害你的眼睛，久坐不动会对你的背部或腿部有害。我们建议每小时到 90 分钟这个区间内后休息 15 分钟。</li>
- <li><strong>吃饭、锻炼和睡觉</strong>。健康饮食，经常锻炼，确保充足的睡眠。这听起来很明显，但当你真正开始编码时，很容易忘记。将这些基本要素纳入你的时间表，确保你除此之外没有安排更多的学习时间。</li>
- <li><strong>奖励你自己</strong>。可以肯定的一点：<em>拼命工作而不娱乐会使你沉闷</em>。你应该尝试在每一次的学习之后安排一些有趣的事情，前提是你必须在完成学习任务之后。例如，如果你真的喜欢玩游戏，那么说“除非我完成了 5 个小时的学习，否则今晚不要玩游戏”是很有激励作用的。现在你只需要意志力。希望一些顺利。</li>
- <li><strong>共同学习和演示</strong>。这不是每个人的选择，但如果可能的话，试着和其他人一起学习。再说一次，如果你正在上一门关于网络开发的大学课程，这会更容易，但也许你可以说服一个朋友和你一起学习，或者找一个当地的聚会或技能分享小组？有人与你讨论想法并寻求帮助真的很有用，也很激励人，你还应该花时间向你的朋友展示你做了什么小样作品。那些感激的喊声会激励你前进。</li>
-</ul>
+- **尽量让你的工作环境更有效率**。找一张舒适的办公桌椅，确保你有足够的光线看清楚你在做什么，并尽量提供有助于你集中注意力的东西（如柔和的音乐、香水，任何你需要的东西）。不要试图在一个分心的房间里工作——比如开着电视，朋友们在看足球！另外，把手机放在房间外——大多数人都会被手机分心，所以你应该把它放在其他地方。
+- **定期休息**。不间断地工作几个小时对你的动力不好，尤其是当你发现工作很难或遇到问题时。这只会导致沮丧。通常最好休息一下，四处走动一会儿，然后在回去工作之前喝一杯咖啡或者饮料放松。正如我们之前所说，你在这段时间里所做的分散式学习通常可以帮助你找到解决你所面临问题的方法。长时间不休息也会对身体有害；盯着显示器看太久会伤害你的眼睛，久坐不动会对你的背部或腿部有害。我们建议每小时到 90 分钟这个区间内后休息 15 分钟。
+- **吃饭、锻炼和睡觉**。健康饮食，经常锻炼，确保充足的睡眠。这听起来很明显，但当你真正开始编码时，很容易忘记。将这些基本要素纳入你的时间表，确保你除此之外没有安排更多的学习时间。
+- **奖励你自己**。可以肯定的一点：_拼命工作而不娱乐会使你沉闷_。你应该尝试在每一次的学习之后安排一些有趣的事情，前提是你必须在完成学习任务之后。例如，如果你真的喜欢玩游戏，那么说“除非我完成了 5 个小时的学习，否则今晚不要玩游戏”是很有激励作用的。现在你只需要意志力。希望一些顺利。
+- **共同学习和演示**。这不是每个人的选择，但如果可能的话，试着和其他人一起学习。再说一次，如果你正在上一门关于网络开发的大学课程，这会更容易，但也许你可以说服一个朋友和你一起学习，或者找一个当地的聚会或技能分享小组？有人与你讨论想法并寻求帮助真的很有用，也很激励人，你还应该花时间向你的朋友展示你做了什么小样作品。那些感激的喊声会激励你前进。
 
-<h3 id="Effective_problem_solving">高效解决问题</h3>
+### 高效解决问题
 
-<p>没有一种有效的方法可以解决与 web 设计和开发相关的所有问题（学习所有东西），但在大多数情况下，有一些通用的建议可以很好地为您服务。</p>
+没有一种有效的方法可以解决与 web 设计和开发相关的所有问题（学习所有东西），但在大多数情况下，有一些通用的建议可以很好地为您服务。
 
-<h4 id="Break_things_down_into_chunks">把东西分解成各个小块</h4>
+#### 把东西分解成各个小块
 
-<p>首先，当你试图实现某个特定的东西时，你的头脑似乎真的很难理解，你应该试着把它分解成多个较小的问题或块。</p>
+首先，当你试图实现某个特定的东西时，你的头脑似乎真的很难理解，你应该试着把它分解成多个较小的问题或块。
 
-<p>例如，如果你正在考虑“构建一个简单的两栏网站”的任务，你可以将其分解如下：</p>
+例如，如果你正在考虑“构建一个简单的两栏网站”的任务，你可以将其分解如下：
 
-<ul>
- <li>组织 HTML 结构</li>
- <li>制定基本的网站排版</li>
- <li>确定基本的网站颜色主题</li>
- <li>实现高级布局——页眉、水平导航菜单、带有主栏和侧栏的主要内容区域以及页脚</li>
- <li>实现一个水平的导航菜单</li>
- <li>等等。</li>
-</ul>
+- 组织 HTML 结构
+- 制定基本的网站排版
+- 确定基本的网站颜色主题
+- 实现高级布局——页眉、水平导航菜单、带有主栏和侧栏的主要内容区域以及页脚
+- 实现一个水平的导航菜单
+- 等等。
 
-<p>然后你可以进一步分解它。例如，“实现水平导航菜单”可以写成：</p>
+然后你可以进一步分解它。例如，“实现水平导航菜单”可以写成：
 
-<ul>
- <li>列出水平排列的菜单项。</li>
- <li>删除不必要的默认设置，如列表间距和项目符号。</li>
- <li>适当设置菜单项的悬停/焦点/激活状态。</li>
- <li>使菜单项沿直线等距排列。</li>
- <li>给菜单项留出足够的垂直间距。</li>
- <li>确保文本在每个菜单项内居中。</li>
- <li>等等。</li>
-</ul>
+- 列出水平排列的菜单项。
+- 删除不必要的默认设置，如列表间距和项目符号。
+- 适当设置菜单项的悬停/焦点/激活状态。
+- 使菜单项沿直线等距排列。
+- 给菜单项留出足够的垂直间距。
+- 确保文本在每个菜单项内居中。
+- 等等。
 
-<p>这些问题中的每一个似乎都不像你开始遇到的一个大问题那么难解决。现在你只需要逐步想出方案并解决所有问题！</p>
+这些问题中的每一个似乎都不像你开始遇到的一个大问题那么难解决。现在你只需要逐步想出方案并解决所有问题！
 
-<h4 id="Learn_and_recognize_the_patterns">学习并认知模式</h4>
+#### 学习并认知模式
 
-<p>正如我们之前所说，web 设计/编程主要是关于问题解决和模式。一旦你写下了你需要做什么来解决一个特定的问题，你就可以开始弄清楚用什么技术特性来解决它了。例如，专业的 web 开发人员已经创建了很多水平导航菜单，所以他们会立即开始考虑这样的解决方案：</p>
+正如我们之前所说，web 设计/编程主要是关于问题解决和模式。一旦你写下了你需要做什么来解决一个特定的问题，你就可以开始弄清楚用什么技术特性来解决它了。例如，专业的 web 开发人员已经创建了很多水平导航菜单，所以他们会立即开始考虑这样的解决方案：
 
-<p>创建一个水平导航栏菜单经常利用到列表，比如：</p>
+创建一个水平导航栏菜单经常利用到列表，比如：
 
-<pre class="brush: html notranslate">&lt;ul&gt;
-  &lt;li&gt;First menu item&lt;/li&gt;
-  &lt;li&gt;Second menu item&lt;/li&gt;
-  &lt;li&gt;Third menu item&lt;/li&gt;
-  &lt;li&gt;etc.&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul>
+  <li>First menu item</li>
+  <li>Second menu item</li>
+  <li>Third menu item</li>
+  <li>etc.</li>
+</ul>
+```
 
-<p>要使所有内容水平放置在一条线上，最简单的现代方法是使用 flexbox：</p>
+要使所有内容水平放置在一条线上，最简单的现代方法是使用 flexbox：
 
-<pre class="brush: css notranslate">ul {
+```css
+ul {
   display: flex;
-}</pre>
+}
+```
 
-<p>接着删除不必要的间距和要点，我们可以这样做：</p>
+接着删除不必要的间距和要点，我们可以这样做：
 
-<pre class="brush: css notranslate">ul {
+```css
+ul {
   list-style-type: none;
   padding: 0;
-}</pre>
+}
+```
 
-<p>等等。</p>
+等等。
 
-<p>如果你是一个完全的网络开发初学者，你将不得不做一些研究和网络搜索和查找解决方案来解决这些问题。如果你是一名专业的 web 开发人员，你可能还记得上次解决类似问题的时候，只需要查找一些你后面遗忘的语法。</p>
+如果你是一个完全的网络开发初学者，你将不得不做一些研究和网络搜索和查找解决方案来解决这些问题。如果你是一名专业的 web 开发人员，你可能还记得上次解决类似问题的时候，只需要查找一些你后面遗忘的语法。
 
-<p>当你找到这些问题的解决方案时，写下你所做的事情，并在某个文件目录中保留一些少量的代码示例，这样你就可以回顾以前的工作了。</p>
+当你找到这些问题的解决方案时，写下你所做的事情，并在某个文件目录中保留一些少量的代码示例，这样你就可以回顾以前的工作了。
 
-<p>另外，网络上有 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具</a>，它使您可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。</p>
+另外，网络上有 [开发者工具](/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)，它使您可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。
 
-<div class="blockIndicator note">
-<p><strong>备注：</strong> 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。</p>
-</div>
+> **备注：** 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。
 
-<div class="blockIndicator note">
-<p><strong>备注：</strong> 最简单的解决方案往往是最好的。</p>
-</div>
+> **备注：** 最简单的解决方案往往是最好的。
 
-<h3 id="Getting_practice">做练习</h3>
+### 做练习
 
-<p>你练习解决问题越多，你的大脑在该区域的神经通路就越强大，也就越容易回忆起特定问题的细节和逻辑。</p>
+你练习解决问题越多，你的大脑在该区域的神经通路就越强大，也就越容易回忆起特定问题的细节和逻辑。
 
-<p>继续修补代码，并进行更多练习。如果你没有问题要解决，可以在网上查一些测试，多上一些课程，或者问问你的朋友和家人（或当地的学校或教堂），他们是否希望你为他们做些什么。</p>
+继续修补代码，并进行更多练习。如果你没有问题要解决，可以在网上查一些测试，多上一些课程，或者问问你的朋友和家人（或当地的学校或教堂），他们是否希望你为他们做些什么。
 
-<h2 id="Getting_help">寻求帮助</h2>
+## 寻求帮助
 
-<p>网络开发需要你学习一套复杂的技能——有时你肯定会陷入困境，需要帮助。正如我们之前所说，即使是专业开发人员在某些时刻也需要让他人来帮助解决问题。</p>
+网络开发需要你学习一套复杂的技能——有时你肯定会陷入困境，需要帮助。正如我们之前所说，即使是专业开发人员在某些时刻也需要让他人来帮助解决问题。
 
-<p>获得帮助的方法有很多种，下面是一些非常有效的方法。</p>
+获得帮助的方法有很多种，下面是一些非常有效的方法。
 
-<h3 id="Effective_web_searches">高效的网络搜索</h3>
+### 高效的网络搜索
 
-<p>需要学习的一项重要技能是高效网络搜索的技巧——你需要在你最喜欢的搜索引擎中使用哪些搜索词来找到你需要的文章？</p>
+需要学习的一项重要技能是高效网络搜索的技巧——你需要在你最喜欢的搜索引擎中使用哪些搜索词来找到你需要的文章？
 
-<p>搜索什么通常是相当直接的。例如：</p>
+搜索什么通常是相当直接的。例如：
 
-<ul>
- <li>如果你想了解更多关于响应式网页设计的信息，你可以搜索”响应式网页设计”。</li>
- <li>如果你想了解更多关于某项特定技术功能的信息，像 HTML 元素，CSS 属性，或者 JavaScript 方法，你应该直接搜索功能的名称。<code>&lt;video&gt;</code><code>background-color</code><code>opacity</code><code>Date.setTime()</code></li>
- <li>如果您正在寻找一些更具体的信息，您可以添加其他关键字作为补充，例如 "&lt;video&gt; element autoplay attribute"，或者 "Date.setTime parameters"。</li>
-</ul>
+- 如果你想了解更多关于响应式网页设计的信息，你可以搜索”响应式网页设计”。
+- 如果你想了解更多关于某项特定技术功能的信息，像 HTML 元素，CSS 属性，或者 JavaScript 方法，你应该直接搜索功能的名称。` <video>``background-color``opacity``Date.setTime() `
+- 如果您正在寻找一些更具体的信息，您可以添加其他关键字作为补充，例如 "\<video> element autoplay attribute"，或者 "Date.setTime parameters"。
 
-<p>如果你想搜索一些没有那么明显的专业术语的东西，你需要考虑最有可能搜索到想要的东西是什么。</p>
+如果你想搜索一些没有那么明显的专业术语的东西，你需要考虑最有可能搜索到想要的东西是什么。
 
-<ul>
- <li>在好几个 promises 执行之后运行代码</li>
- <li>在浏览器中播放网络摄像头中的视频流</li>
- <li>在元素的背景中创建线性渐变</li>
-</ul>
+- 在好几个 promises 执行之后运行代码
+- 在浏览器中播放网络摄像头中的视频流
+- 在元素的背景中创建线性渐变
 
-<h4 id="Error_messages">报错信息</h4>
+#### 报错信息
 
-<p>如果你的某段代码有问题，并且出现了一条特定的错误消息，那么把错误消息将其用作搜索词复制到你的搜索引擎中。如果在之前其他人也有同样的问题，在 MDN 或 Stack Overflow 之类的地方可能会有一些关于它的文章或博客帖子。</p>
+如果你的某段代码有问题，并且出现了一条特定的错误消息，那么把错误消息将其用作搜索词复制到你的搜索引擎中。如果在之前其他人也有同样的问题，在 MDN 或 Stack Overflow 之类的地方可能会有一些关于它的文章或博客帖子。
 
-<div class="blockIndicator note">
-<p><strong>备注：</strong> <a href="https：//stackoverflow.com/">Stack Overflow</a> 是一个非常有用的网站——它基本上是一个关于各种技术和相关技术的精心挑选有质量的问题和答案的巨大数据库。你可能会找到一个回答你问题的答案。如果没有，你可以问一个问题，看看是否有人能帮助你。</p>
-</div>
+> **备注：** [Stack Overflow](https：//stackoverflow.com/) 是一个非常有用的网站——它基本上是一个关于各种技术和相关技术的精心挑选有质量的问题和答案的巨大数据库。你可能会找到一个回答你问题的答案。如果没有，你可以问一个问题，看看是否有人能帮助你。
 
-<h4 id="Browser_testing">浏览器调试</h4>
+#### 浏览器调试
 
-<p>看看你的问题是否在所有浏览器中都出现，或者它是否只发生在一个或少数浏览器中，这通常是一个好主意。例如，如果它只影响一个浏览器，则可以使用该浏览器缩小搜索范围。示例搜索可能看起来像：</p>
+看看你的问题是否在所有浏览器中都出现，或者它是否只发生在一个或少数浏览器中，这通常是一个好主意。例如，如果它只影响一个浏览器，则可以使用该浏览器缩小搜索范围。示例搜索可能看起来像：
 
-<ul>
- <li>&lt;video&gt; 在 iOS 浏览器中播放不起作用。</li>
- <li>Firefox 浏览器似乎不支持 Beetlejuice API。</li>
-</ul>
+- \<video> 在 iOS 浏览器中播放不起作用。
+- Firefox 浏览器似乎不支持 Beetlejuice API。
 
-<h3 id="Using_MDN">使用 MDN</h3>
+### 使用 MDN
 
-<p>您现在所在的网站上有大量信息可供您使用，既有查找代码语法的参考资料，也有学习技巧的指南/教程。</p>
+您现在所在的网站上有大量信息可供您使用，既有查找代码语法的参考资料，也有学习技巧的指南/教程。
 
-<p>在 MDN 的这一部分中，我们提供了关于 web 开发基础知识的大部分问题的答案。如果你陷入困境，最好重新阅读相关文章，看看你是否遗漏了什么。</p>
+在 MDN 的这一部分中，我们提供了关于 web 开发基础知识的大部分问题的答案。如果你陷入困境，最好重新阅读相关文章，看看你是否遗漏了什么。
 
-<p>如果你不确定该读哪篇文章，那么尝试在 MDN 中搜索一些相关的关键字（如上所述），或者尝试一般的网络搜索。要在 MDN 上搜索，你可以使用网站内置的搜索功能，或者使用你最喜欢的搜索引擎，在搜索词前面加上“MDN”。例如，“mdn responsive web design“或者”mdn background-color“。</p>
+如果你不确定该读哪篇文章，那么尝试在 MDN 中搜索一些相关的关键字（如上所述），或者尝试一般的网络搜索。要在 MDN 上搜索，你可以使用网站内置的搜索功能，或者使用你最喜欢的搜索引擎，在搜索词前面加上“MDN”。例如，“mdn responsive web design“或者”mdn background-color“。
 
-<h3 id="Other_online_resources">其他在线资源</h3>
+### 其他在线资源
 
-<p>我们在之前已经提到了 Stack Overflow，但在这里还有其他在线资源可以提供帮助。</p>
+我们在之前已经提到了 Stack Overflow，但在这里还有其他在线资源可以提供帮助。
 
-<p>找到一个社区是件好事，如果你试图帮助别人回答他们的问题，也可以自己在上面提出问题，你会得到很多尊重。其他好论坛包括：</p>
+找到一个社区是件好事，如果你试图帮助别人回答他们的问题，也可以自己在上面提出问题，你会得到很多尊重。其他好论坛包括：
 
-<ul>
- <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li>
- <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li>
- <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li>
-</ul>
+- [MDN Discourse](https://discourse.mozilla.org/c/mdn)
+- [Sitepoint Forums](https://www.sitepoint.com/community/)
+- [webdeveloper.com Forums](https://www.webdeveloper.com/)
 
-<p>然而，在 Twitter 或 Facebook 等社交网站上寻找有用的群组也是有意义的。寻找讨论你感兴趣的网络开发主题的小组，并加入其中。在 twitter 上关注那些你知道有影响力、聪明或平易近人的人，他们似乎分享了很多有用的建议。</p>
+然而，在 Twitter 或 Facebook 等社交网站上寻找有用的群组也是有意义的。寻找讨论你感兴趣的网络开发主题的小组，并加入其中。在 twitter 上关注那些你知道有影响力、聪明或平易近人的人，他们似乎分享了很多有用的建议。
 
-<h3 id="Physical_meetups">线下聚会</h3>
+### 线下聚会
 
-<p>最后，你应该尝试参加一些线下聚会，认识其他志同道合的人，尤其是那些对初学者友好的人。 <a href="https：//www.meetup.com/find/tech/">meetup.com</a> 是一个很好的地方，可以找到当地的身体聚会，你也可以尝试搜索你当地的媒体/网站上的内容。</p>
+最后，你应该尝试参加一些线下聚会，认识其他志同道合的人，尤其是那些对初学者友好的人。 [meetup.com](https：//www.meetup.com/find/tech/) 是一个很好的地方，可以找到当地的身体聚会，你也可以尝试搜索你当地的媒体/网站上的内容。
 
-<p>你也可以尝试参加正式的网络会议。虽然这些费用可能很高，但你可以尝试在那里做志愿者，许多会议都提供优惠票，例如学生票或多样性票。</p>
+你也可以尝试参加正式的网络会议。虽然这些费用可能很高，但你可以尝试在那里做志愿者，许多会议都提供优惠票，例如学生票或多样性票。
 
-<h2 id="See_also">参见</h2>
+## 参见
 
-<ul>
- <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li>
- <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li>
- <li><a href="https://www.codecademy.com/">Codecademy</a></li>
-</ul>
+- [Coursera: Learning to learn](https://www.coursera.org/learn/learning-how-to-learn)
+- [Freecodecamp](https://www.freecodecamp.org/)
+- [Codecademy](https://www.codecademy.com/)
diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
index d087e42d9f4511..94ce45e28e8310 100644
--- a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
+++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
@@ -6,104 +6,90 @@ tags:
 translation_of: Learn/Server-side/Configuring_server_MIME_types
 original_slug: Web/Security/Securing_your_site/Configuring_server_MIME_types
 ---
-<h2 id="Background">Background</h2>
+## Background
 
-<p>默认情况下，许多 web 服务器会为那些未知内容类型的文件配置一个默认 MIME 类型<code>text/plain</code> 或者<code>application/octet-stream</code> 。当一种新的内容类型被创造或者被添加到 web 服务器上，web 管理者在添加它到 web 服务器配置中可能会失败。主要原因是用户使用 Gecko-based 的浏览器，而这种浏览器只相信由 web 服务器和 web 应用所发布的 MIME 类型</p>
+默认情况下，许多 web 服务器会为那些未知内容类型的文件配置一个默认 MIME 类型`text/plain` 或者`application/octet-stream` 。当一种新的内容类型被创造或者被添加到 web 服务器上，web 管理者在添加它到 web 服务器配置中可能会失败。主要原因是用户使用 Gecko-based 的浏览器，而这种浏览器只相信由 web 服务器和 web 应用所发布的 MIME 类型
 
-<h3 id="What_are_MIME_types.3F">What are MIME types?</h3>
+### What are MIME types?
 
-<p>MIME 类型描述了邮件或者 web 服务器或者 web 应用中的媒体内容的类型，其目的是为了指导 web 浏览器对媒体内容的处理和表现。MIME 类型的示例如下：</p>
+MIME 类型描述了邮件或者 web 服务器或者 web 应用中的媒体内容的类型，其目的是为了指导 web 浏览器对媒体内容的处理和表现。MIME 类型的示例如下：
 
-<ul>
- <li><code>text/html</code>  对于一般网页</li>
- <li><code>text/plain</code> 对于一般文本</li>
- <li><code>text/css</code> 对于级联样式表</li>
- <li><code>text/javascript</code> 对于脚本</li>
- <li><code>application/octet-stream</code> 意味着“下载这个文件”</li>
- <li><code>application/x-java-applet</code> 对于 Java applets</li>
- <li><code>application/pdf</code> 对于 PDF 文档</li>
-</ul>
+- `text/html` 对于一般网页
+- `text/plain` 对于一般文本
+- `text/css` 对于级联样式表
+- `text/javascript` 对于脚本
+- `application/octet-stream` 意味着“下载这个文件”
+- `application/x-java-applet` 对于 Java applets
+- `application/pdf` 对于 PDF 文档
 
-<h3 id="Technical_Background">Technical Background</h3>
+### Technical Background
 
-<p>完整的 MIME 类型列表可在 <a href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types</a> 查看。</p>
+完整的 MIME 类型列表可在 [IANA | MIME Media Types](http://www.iana.org/assignments/media-types/index.html) 查看。
 
-<p>在<a href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">HTTP specification</a> 中定义了能够描述在 web 中使用的媒体类型的 MIME 超集。</p>
+在[HTTP specification](http://www.w3.org/Protocols/HTTP/1.1/spec.html) 中定义了能够描述在 web 中使用的媒体类型的 MIME 超集。
 
-<h3 id="Why_are_correct_MIME_types_important.3F">Why are correct MIME types important?</h3>
+### Why are correct MIME types important?
 
-<p>对于某些浏览器，例如 IE，它尝试允许 web 服务器对于错误配置通过其源码猜测它可能的正确 MIME 类型。</p>
+对于某些浏览器，例如 IE，它尝试允许 web 服务器对于错误配置通过其源码猜测它可能的正确 MIME 类型。
 
-<p>这种做法将会避免许多由 web 管理员他们的错误。因为当内容的 MIME 类型错误，IE 将会用可能正确的 MIME 类型来继续处理内容。例如你设置一个<code>img</code>的类型为<code>text/plain</code> ,IE 可能会设置它为正确的 MIME 类型<code>images/*</code></p>
+这种做法将会避免许多由 web 管理员他们的错误。因为当内容的 MIME 类型错误，IE 将会用可能正确的 MIME 类型来继续处理内容。例如你设置一个`img`的类型为`text/plain` ,IE 可能会设置它为正确的 MIME 类型`images/*`
 
-<p>出于安全原因，使用正确的 MIME 类型的服务内容也是重要的；恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。</p>
+出于安全原因，使用正确的 MIME 类型的服务内容也是重要的；恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。
 
-<div class="note">
-<p><strong>备注：</strong> 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，{{ gecko("2.0") }} 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (<code>text/css</code>).</p>
+> **备注：** 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，{{ gecko("2.0") }} 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (`text/css`).
+>
+> Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的 CSS 构造，则存在允许加载的临时启发式算法。在 Firefox 4 中已经删除了启发式，您必须正确设置`text/css` 的 MIME 类型，才能够识别 CSS。
 
-<p>Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的 CSS 构造，则存在允许加载的临时启发式算法。在 Firefox 4 中已经删除了启发式，您必须正确设置<code>text/css</code> 的 MIME 类型，才能够识别 CSS。</p>
-</div>
+## 为何浏览器不应该猜测 MIME 类型
 
-<h2 id="Why_browsers_should_not_guess_MIME_types">为何浏览器不应该猜测 MIME 类型</h2>
+除了违返了 HTTP 规范，让浏览器去猜测正确的 MIME 类型是一个差劲的策略。原因如下
 
-<p>除了违返了 HTTP 规范，让浏览器去猜测正确的 MIME 类型是一个差劲的策略。原因如下</p>
+#### 失去控制
 
-<h4 id="Loss_of_control">失去控制</h4>
+假如浏览器忽略报告的 MIME 类型，web 管理员和用户不在对内容如何进行处理有发言权了。
 
-<p>假如浏览器忽略报告的 MIME 类型，web 管理员和用户不在对内容如何进行处理有发言权了。</p>
+例如，面对 web 开发员的网址可能希望发送某些实例 HTML 文档，同时通希望能够以 `text/html`或者 `text/plain` 的 MIME 类型进行数据的处理和显示 或者 作为一个源代码。如果浏览器猜测它的正确 MIME 类型为 `text/html` 那么开发员不在有权利进行选择了。
 
-<p>例如，面对 web 开发员的网址可能希望发送某些实例 HTML 文档，同时通希望能够以 <code>text/html</code>或者 <code>text/plain</code> 的 MIME 类型进行数据的处理和显示 或者 作为一个源代码。如果浏览器猜测它的正确 MIME 类型为 <code>text/html</code> 那么开发员不在有权利进行选择了。</p>
+#### 安全性
 
-<h4 id="Security">安全性</h4>
+一些内容类型，例如可执行程序，本质上是不安全的。原因是经过规范化的 MIME 类型都有经过严格规定浏览器如何对这类类型的文件进行操作。一个可执行程序不能够在用户的电脑浏览器上执行，但可以通过弹出会话询问是否下载这个文件
 
-<p>一些内容类型，例如可执行程序，本质上是不安全的。原因是经过规范化的 MIME 类型都有经过严格规定浏览器如何对这类类型的文件进行操作。一个可执行程序不能够在用户的电脑浏览器上执行，但可以通过弹出会话询问是否下载这个文件</p>
+MIME 类型猜测导致 IE 浏览器的安全漏洞（通过利用 IE 能够将错误的 MIME 类型 修改为正确的类型）。这绕过了正常的下载对话框，导致 InternetExplorer 猜测内容是可执行程序，然后在用户的计算机上运行。
 
-<p>MIME 类型猜测导致 IE 浏览器的安全漏洞（通过利用 IE 能够将错误的 MIME 类型 修改为正确的类型）。这绕过了正常的下载对话框，导致 InternetExplorer 猜测内容是可执行程序，然后在用户的计算机上运行。</p>
+## 如何确定服务器发送内容的 MIME 类型
 
-<h2 id="如何确定服务器发送内容的_MIME_类型">如何确定服务器发送内容的 MIME 类型</h2>
+通过开发者工具的 ContentType 查看 MIME 类型。
 
-<p>通过开发者工具的 ContentType 查看 MIME 类型。</p>
+根据标准，通过一个 `meta` 标签来设置 MIME 类型 例如 `<meta http-equiv="Content-Type" content="text/html">` 当包含{{HTTPHeader("Content-Type")}} 时则忽略 `meta` 标签
 
-<p>根据标准，通过一个 <code>meta</code> 标签来设置 MIME 类型 例如 <code>&lt;meta http-equiv="Content-Type" content="text/html"&gt;</code> 当包含{{HTTPHeader("Content-Type")}} 时则忽略 <code>meta</code> 标签</p>
+## 如何为你的内容确定正确的 MIME 类型
 
+这里有几种方法来确定文件的正确 MIME 类型
 
+1.  如果你的内容是通过供应商软件应用创建的，那么你可以阅读供应商文档确认不同媒体文件的 MIME 值
+2.  通过查看完整的 MIME 类型表 [IANA | MIME Media Types registry](http://www.iana.org/assignments/media-types/index.html)
+3.  如果使用插件 netscape gecko 显示媒体类型，请安装插件，然后查看“帮助”>“关于插件”菜单，以查看哪些 MIME 类型与媒体类型相关联。
+4.  搜索文件扩展名 [FILExt](http://filext.com/) 或者[File extensions reference](http://www.file-extensions.org/) ，确认扩展名和哪种类型的 MIME 相关联
 
-<h2 id="如何为你的内容确定正确的_MIME_类型">如何为你的内容确定正确的 MIME 类型</h2>
+## 如何设置服务器以发送正确的 MIME 类型
 
-<p>这里有几种方法来确定文件的正确 MIME 类型</p>
+基本的方法是配置你的服务器发送正确的 HTTP `ContentType`类型给每个文档
 
-<ol>
- <li>如果你的内容是通过供应商软件应用创建的，那么你可以阅读供应商文档确认不同媒体文件的 MIME 值</li>
- <li>通过查看完整的 MIME 类型表 <a href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types registry</a> </li>
- <li>如果使用插件 netscape gecko 显示媒体类型，请安装插件，然后查看“帮助”&gt;“关于插件”菜单，以查看哪些 MIME 类型与媒体类型相关联。</li>
- <li>搜索文件扩展名 <a href="http://filext.com/">FILExt</a> 或者<a href="http://www.file-extensions.org/">File extensions reference</a> ，确认扩展名和哪种类型的 MIME 相关联</li>
-</ol>
+- 如果您正在使用 Apache Web 服务器，只需将此示例.htaccess 文件复制到包含要使用正确 MIME 类型发送的文件的目录中。如果你有一个完整的文件子目录，只需将文件放在父目录中；您不需要将它放在每个子目录中。
+- 如果您使用的是 Microsoft IIS, 请参阅[IANA | MIME Media Types registry](http://www.iana.org/assignments/media-types/index.html)这篇文章。
+- 如果您使用服务器端脚本生成内容，通常可以在脚本顶部附近添加一行。您可以从 Perl，PHP，ASP 或 Java 提供 HTML 以外的内容 - 只需相应地更改 MIME 类型即可。
 
-<h2 id="如何设置服务器以发送正确的MIME类型">如何设置服务器以发送正确的 MIME 类型</h2>
+  - 对于 Perl CGI，你应该在文档其他行之前输出 `print "Content-Type: text/html\n\n";`。如果您正在使用 CGI 模块，你可以使用 `print $cgi->header('text/html');` 代替，其中 `$cgi` 是对 CGI 实例的引用。
+  - 对于 PHP，你应该在文档其他行之前输出 `header('Content-Type: text/html');`。
+  - 对于 ASP, 你应该在文档其他行之前输出`response.ContentType = "text/html";`。
+  - 对于 Java servlet, 你需要在`doGet` 或 `doPost` 方法之前输出`response.setContentType("text/html");` ，其中 `response` 是对 `HttpServletResponse`的引用。
 
-<p>基本的方法是配置你的服务器发送正确的 HTTP <code>ContentType</code>类型给每个文档</p>
+### Related Links
 
-<ul>
- <li>如果您正在使用 Apache Web 服务器，只需将此示例.htaccess 文件复制到包含要使用正确 MIME 类型发送的文件的目录中。如果你有一个完整的文件子目录，只需将文件放在父目录中；您不需要将它放在每个子目录中。</li>
- <li>如果您使用的是 Microsoft IIS, 请参阅<a href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types registry</a>这篇文章。</li>
- <li>如果您使用服务器端脚本生成内容，通常可以在脚本顶部附近添加一行。您可以从 Perl，PHP，ASP 或 Java 提供 HTML 以外的内容 - 只需相应地更改 MIME 类型即可。
-  <ul>
-   <li>对于 Perl CGI，你应该在文档其他行之前输出 <code>print "Content-Type: text/html\n\n";</code>。如果您正在使用 CGI 模块，你可以使用 <code>print $cgi-&gt;header('text/html');</code>  代替，其中 <code>$cgi</code> 是对 CGI 实例的引用。</li>
-   <li>对于 PHP，你应该在文档其他行之前输出 <code>header('Content-Type: text/html');</code>。</li>
-   <li>对于 ASP, 你应该在文档其他行之前输出<code>response.ContentType = "text/html";</code>。</li>
-   <li>对于 Java servlet, 你需要在<code>doGet</code> 或 <code>doPost</code> 方法之前输出<code>response.setContentType("text/html");</code> ，其中 <code>response</code> 是对 <code>HttpServletResponse</code>的引用。</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Related_Links">Related Links</h3>
-
-<ul>
- <li><a href="/en/Incorrect_MIME_Type_for_CSS_Files">Incorrect MIME Type for CSS Files</a></li>
- <li><a href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types</a></li>
- <li><a href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Hypertext Transfer Protocol — HTTP/1.1</a></li>
- <li><a href="http://support.microsoft.com/default.aspx?sd=msdn&amp;scid=kb;en-us;293336">Microsoft - 293336 - INFO: WebCast: MIME Type Handling in Microsoft Internet Explorer</a></li>
- <li><a href="http://msdn.microsoft.com/workshop/networking/moniker/overview/appendix_a.asp">Microsoft - Appendix A: MIME Type Detection in Internet Explorer</a></li>
- <li><a href="http://www.microsoft.com/windows/ie/downloads/critical/q290108/">Microsoft - Security Update, March 29, 2001</a></li>
- <li><a href="http://www.microsoft.com/windows/ie/downloads/critical/Q313675/">Microsoft - Security Update, December 13, 2001</a></li>
-</ul>
+- [Incorrect MIME Type for CSS Files](/en/Incorrect_MIME_Type_for_CSS_Files)
+- [IANA | MIME Media Types](http://www.iana.org/assignments/media-types/index.html)
+- [Hypertext Transfer Protocol — HTTP/1.1](http://www.w3.org/Protocols/HTTP/1.1/spec.html)
+- [Microsoft - 293336 - INFO: WebCast: MIME Type Handling in Microsoft Internet Explorer](http://support.microsoft.com/default.aspx?sd=msdn&scid=kb;en-us;293336)
+- [Microsoft - Appendix A: MIME Type Detection in Internet Explorer](http://msdn.microsoft.com/workshop/networking/moniker/overview/appendix_a.asp)
+- [Microsoft - Security Update, March 29, 2001](http://www.microsoft.com/windows/ie/downloads/critical/q290108/)
+- [Microsoft - Security Update, December 13, 2001](http://www.microsoft.com/windows/ie/downloads/critical/Q313675/)
diff --git a/files/zh-cn/learn/server-side/django/testing/index.md b/files/zh-cn/learn/server-side/django/testing/index.md
index 5e83bf35573492..ec48e27b92bf64 100644
--- a/files/zh-cn/learn/server-side/django/testing/index.md
+++ b/files/zh-cn/learn/server-side/django/testing/index.md
@@ -107,12 +107,14 @@ class Author(models.Model):
 
 Django 使用 unittest 模块的[内置测试查找](https://docs.python.org/3/library/unittest.html#unittest-test-discovery)，它将在任何使用模式**test\*.py** 命名的文件中，查找当前工作目录下的测试。如果您正确命名文件，则可以使用您喜欢的任何结构。我们建议您为测试代码创建一个模块，并为模型，视图，表单和您需要测试的任何其他类型的代码，分别创建文件。例如：
 
-    catalog/
-      /tests/
-        __init__.py
-        test_models.py
-        test_forms.py
-        test_views.py
+```
+catalog/
+    /tests/
+    __init__.py
+    test_models.py
+    test_forms.py
+    test_views.py
+```
 
 在 LocalLibrary 项目中，创建如上所示的文件结构。**\_\_init\_\_.py** 应该是一个空文件（这告诉 Python 该目录是一个套件包）。您可以通过复制和重命名框架测试文件 **/catalog/tests.py**，来创建三个测试文件。
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
index f4d9fa237655ad..c326e3a18a54a7 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
@@ -34,7 +34,7 @@ exports.author_delete_get = function(req, res, next) {
 };
 ```
 
-控制器从 URL 参数（`req.params.id`）中，获取要删除的`Author`实例的 id。它使用`async.parallel()` 方法，并行获取作者记录和所有相关书本。当两个操作都完成后，它将呈现**`author_delete`\*\***.pug\*\*视图，为`title`、`author`、和 `author_books`传递变量。
+控制器从 URL 参数（`req.params.id`）中，获取要删除的`Author`实例的 id。它使用`async.parallel()` 方法，并行获取作者记录和所有相关书本。当两个操作都完成后，它将呈现 **author_delete.pug** 视图，为 `title`、`author` 和 `author_books` 传递变量。
 
 > **备注：** 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。
 >
diff --git a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
index 536e09b76c0a41..3ee63570d95a49 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
@@ -141,7 +141,7 @@ router.post('/about', (req, res) => {
 
 - `?`：问号之前的一个字符只能出现零次或一次。例如，路由路径 `'/ab?cd'` 路径匹配端点 `acd` 或 `abcd`。
 - `+`：加号之前的一个字符至少出现一次。例如，路径路径 `'/ab+cd'` 匹配端点 `abcd`、`abbcd`、`abbbcd`，等。
-- `*`：星号可以替换为任意字符串。例如，路由路径 `'ab\*cd'` 匹配端点 `abcd`、`abXcd`、`abSOMErandomTEXTcd`，等。
+- `*`：星号可以替换为任意字符串。例如，路由路径 `'/ab*cd'` 匹配端点 `abcd`、`abXcd`、`abSOMErandomTEXTcd`，等。
 - `()`：将一个字符串视为一体以执行 `?`、`+`、`*` 操作。例如。 `'/ab(cd)?e'` 将对 `(cd)` 进行匹配，将匹配到 `abe` 和 `abcde`。
 
 路由路径也可以是 JavaScript [正则表达式](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions)。例如，下面的路由路径将匹配 `catfish` 和 `dogfish`，但不会匹配 `catflap`、`catfishhead` 等。注意，正则表达式路径不再用引号 `"..."` 括起来，而是正则表达式语法 `/.../`。
@@ -170,7 +170,7 @@ app.get('/users/:userId/books/:bookId', (req, res) => {
 
 路由参数名必须由“单词字符”（/`[A-Za-z0-9_]`/）组成。
 
-> **备注：** URL `/book/create` 会匹配 `/book/:bookId` 这样的路由（将提取值为'`create`' 的 '`bookId`'）。第一个与传入 URL 相匹配的路由会被使用，因此 `/book/create` 的路由处理器必须定义在\* \*`/book/:bookId` 路由之前，才能妥善处理。
+> **备注：** URL `/book/create` 会匹配 `/book/:bookId` 这样的路由（将提取值为'`create`' 的 '`bookId`'）。第一个与传入 URL 相匹配的路由会被使用，因此 `/book/create` 的路由处理器必须定义在 `/book/:bookId` 路由之前，才能妥善处理。
 
 以上就是使用路由所有的预备知识。Express 文档中还能找到更多信息：[基础路由](http://expressjs.com/en/starter/basic-routing.html) 和 [路由指南](http://expressjs.com/en/guide/routing.html)。以下是 LocalLibrary 路由和控制器的设置过程。
 
@@ -180,10 +180,10 @@ app.get('/users/:userId/books/:bookId', (req, res) => {
 
 - `catalog/`：主页。
 - `catalog/<objects>/`：模型（藏书、藏书副本、藏书种类、作者）的完整列表（例如 /`catalog/books/`、/`catalog/genres/` 等）
-- `catalog/<object>/<id>`_：具有_ `_id`\* \*字段值的特定模型的详细信息页面（例如 `/catalog/book/584493c1f4887f06c0e67d37`）。
+- `catalog/<object>/<id>`_：具有_ `_id` 字段值的特定模型的详细信息页面（例如 `/catalog/book/584493c1f4887f06c0e67d37`）。
 - `catalog/<object>/create`：添加新模型的表单（例如 `/catalog/book/create`）。
-- `catalog/<object>/<id>/update`：更新具有 `_id`\* \*字段值的特定模型的表单（例如 `/catalog/book/584493c1f4887f06c0e67d37/update`）。
-- `catalog/<object>/<id>/delete`：删除具有 `_id`\* \*字段值的特定模型的表单（例如 `/catalog/book/584493c1f4887f06c0e67d37/delete`）。
+- `catalog/<object>/<id>/update`：更新具有 `_id` 字段值的特定模型的表单（例如 `/catalog/book/584493c1f4887f06c0e67d37/update`）。
+- `catalog/<object>/<id>/delete`：删除具有 `_id` 字段值的特定模型的表单（例如 `/catalog/book/584493c1f4887f06c0e67d37/delete`）。
 
 首页和列表页面没有包含任何额外信息。因此它们返回的结果只取决于模型类型和数据库内容，获取信息的查询操作是恒定不变的（类似地，创建对象的代码也没有较大改动）。
 
@@ -276,7 +276,7 @@ exports.index = (req, res) => { res.send('未实现：站点首页'); };
 
 > **备注：** 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。
 
-**/routes/\*\***catalog.js\*\* 中有以下代码：
+**/routes/catalog.js** 中有以下代码：
 
 ```js
 const express = require('express');
diff --git a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
index 3fdc19c0ab5944..ac70d03a5c3c15 100644
--- a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
@@ -5,74 +5,69 @@ tags:
   - 服务器端编程
 translation_of: Learn/Server-side/First_steps/Client-Server_overview
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
-
-<p>既然你已经了解了服务器端编程的目的和潜在的好处，接下来我们将非常细致地去说明当服务器接收到了来自浏览器的“动态请求”时到底发生了什么。因为大多数的服务器端代码通过相似的方式来处理请求并做出响应，这将帮助你理解当编写你自己的大量代码时你需要做什么。</p>
+既然你已经了解了服务器端编程的目的和潜在的好处，接下来我们将非常细致地去说明当服务器接收到了来自浏览器的“动态请求”时到底发生了什么。因为大多数的服务器端代码通过相似的方式来处理请求并做出响应，这将帮助你理解当编写你自己的大量代码时你需要做什么。
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备知识：</th>
-   <td>基本电脑素养、对于什么是网络服务器的基本了解</td>
-  </tr>
-  <tr>
-   <th scope="row">目标：</th>
-   <td>理解在动态网站中的客户端 - 服务器端交互过程，尤其是服务器端代码需要承担的工作</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">预备知识：</th>
+      <td>基本电脑素养、对于什么是网络服务器的基本了解</td>
+    </tr>
+    <tr>
+      <th scope="row">目标：</th>
+      <td>
+        理解在动态网站中的客户端 -
+        服务器端交互过程，尤其是服务器端代码需要承担的工作
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>到目前为止的讨论中还没有真正的代码，因为我们还没有选择一个 web 框架来写我们的代码呢！然而这个讨论仍旧十分重要，因为我们描述的行为必须通过你的服务器端代码来实现，不管你选择什么编程语言和 web 框架。</p>
+到目前为止的讨论中还没有真正的代码，因为我们还没有选择一个 web 框架来写我们的代码呢！然而这个讨论仍旧十分重要，因为我们描述的行为必须通过你的服务器端代码来实现，不管你选择什么编程语言和 web 框架。
+
+## 网络服务器和 HTTP（入门）
+
+网络浏览器通过超文本标记语言传输协议（[HTTP](/en-US/docs/Web/HTTP)）与网络服务器（[web servers](/en-US/docs/Learn/Common_questions/What_is_a_web_server)）。 当你在网页上点击一个链接、提交一个表单、或者进行一次搜索的时候，浏览器发送一个 HTTP 请求给服务器。
 
-<h2 id="网络服务器和HTTP（入门）">网络服务器和 HTTP（入门）</h2>
+这个请求包含：
 
-<p>网络浏览器通过超文本标记语言传输协议（<a href="/en-US/docs/Web/HTTP">HTTP</a>）与网络服务器（<a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">web servers</a>）。 当你在网页上点击一个链接、提交一个表单、或者进行一次搜索的时候，浏览器发送一个 HTTP 请求给服务器。</p>
+- 一个用来识别目标服务器和资源（比如一个 HTML 文档、存储在服务器上的一个特定的数据、或者一个用来运行的工具等）的 URL。
+- 一个定义了请求行为的方法（比如，获得一个文档或者上传某些数据）。不同的方法/动作以及与他们相关的行为罗列如下：
 
-<p>这个请求包含：</p>
+  - GET：获取一份指定（比如一个包含了一个产品或者一系列产品相关信息的 HTML 文档）。
+  - POST：创建一份新的资源（比如给 wiki 增加一片新的文章、给数据库增加一个新的节点）。
+  - `HEAD`: 获取有关指定资源的元数据信息，而不会得到像 GET 的内容部分。例如，您可以使用 HEAD 请求来查找上次更新资源的时间，然后仅使用（更“昂贵”）GET 请求下载资源（如果已更改）。
+  - PUT：更新一份已经存在的资源（或者在该资源不存在的情况下创建一份新的）。
+  - DELETE：删除指定的资源。
+  - `TRACE`、`OPTIONS`、`CONNECT、PATCH`等动作是为一些不常见任务设计的，因此我们在这里的讲解不会涉及到他们。
 
-<ul>
- <li>一个用来识别目标服务器和资源（比如一个 HTML 文档、存储在服务器上的一个特定的数据、或者一个用来运行的工具等）的 URL。 </li>
- <li>一个定义了请求行为的方法（比如，获得一个文档或者上传某些数据）。不同的方法/动作以及与他们相关的行为罗列如下：
-  <ul>
-   <li>GET：获取一份指定（比如一个包含了一个产品或者一系列产品相关信息的 HTML 文档）。</li>
-   <li>POST：创建一份新的资源（比如给 wiki 增加一片新的文章、给数据库增加一个新的节点）。</li>
-   <li><code>HEAD</code>:  获取有关指定资源的元数据信息，而不会得到像 GET 的内容部分。例如，您可以使用 HEAD 请求来查找上次更新资源的时间，然后仅使用（更“昂贵”）GET 请求下载资源（如果已更改）。</li>
-   <li>PUT：更新一份已经存在的资源（或者在该资源不存在的情况下创建一份新的）。</li>
-   <li>DELETE：删除指定的资源。</li>
-   <li><code>TRACE</code>、<code>OPTIONS</code>、<code>CONNECT、PATCH</code>等动作是为一些不常见任务设计的，因此我们在这里的讲解不会涉及到他们。</li>
-  </ul>
- </li>
- <li>额外的信息可以和请求一起被编码（比如 HTML 表单数据）。信息可以被编码成如下：
-  <ul>
-   <li>URL 参数：GET 请求通过在 URL 末尾增加的键值对，来编码包含在发送给服务器的 URL 中的数据——比如，<code>http://mysite.com<strong>?name=Fred&amp;age=11</strong></code>，你经常会用到问号（？）来将 URL 剩余的部分和 URL 参数分隔开来，一个赋值符号（=）将名称和与之相关的值分隔开来，然后一个“&amp;”符号分割不同的键值对。当他们被用户改变然后提交时，URL 参数具有与生俱来地“不安全性”。因此，一个 URL 参数或者 GET 请求是不会用来在服务器上更新数据的。</li>
-   <li>POST 数据：POST 请求会增加新的资源，这些数据将会在请求体中编码。</li>
-   <li>客户端 cookie：cookies 包含与客户相关的会话数据，服务器可以用这些数据来判断用户的登录状态以及用户是否有访问资源的权限。</li>
-  </ul>
- </li>
-</ul>
+- 额外的信息可以和请求一起被编码（比如 HTML 表单数据）。信息可以被编码成如下：
 
-<p>网络服务器等待来自客户的请求信息，当请求到达时处理它们，然后发给浏览器 HTTP 响应消息。回应包含一个 HTTP 响应状态码（<a href="/en-US/docs/Web/HTTP/Status">HTTP Response status code</a>）来暗示请求是否成功 (比如 "<code>200 OK</code>" 连接成功， "<code>404 Not Found</code>" 资源没有找到，"<code>403 Forbidden</code>" 用户没有被授权查看资源，等等).  一个成功的响应主体，会包含 GET 请求所请求的资源。</p>
+  - URL 参数：GET 请求通过在 URL 末尾增加的键值对，来编码包含在发送给服务器的 URL 中的数据——比如，`http://mysite.com?name=Fred&age=11`，你经常会用到问号（？）来将 URL 剩余的部分和 URL 参数分隔开来，一个赋值符号（=）将名称和与之相关的值分隔开来，然后一个“&”符号分割不同的键值对。当他们被用户改变然后提交时，URL 参数具有与生俱来地“不安全性”。因此，一个 URL 参数或者 GET 请求是不会用来在服务器上更新数据的。
+  - POST 数据：POST 请求会增加新的资源，这些数据将会在请求体中编码。
+  - 客户端 cookie：cookies 包含与客户相关的会话数据，服务器可以用这些数据来判断用户的登录状态以及用户是否有访问资源的权限。
 
-<p>当一个 HTML 页面被返时，页面会被网络浏览器呈现出来。作为处理工作的一部分，浏览器会发现指向其他资源的链接（比如，一个 HTML 页面通常会参考 Javascript 和 CSS 页面），并且会发送独立的 HTTP 请求来下载这些文件。</p>
+网络服务器等待来自客户的请求信息，当请求到达时处理它们，然后发给浏览器 HTTP 响应消息。回应包含一个 HTTP 响应状态码（[HTTP Response status code](/en-US/docs/Web/HTTP/Status)）来暗示请求是否成功 (比如 "`200 OK`" 连接成功， "`404 Not Found`" 资源没有找到，"`403 Forbidden`" 用户没有被授权查看资源，等等). 一个成功的响应主体，会包含 GET 请求所请求的资源。
 
-<p>静态网站和动态网站（在接下来的部分讨论到的）正是使用同一种通信协议/模式</p>
+当一个 HTML 页面被返时，页面会被网络浏览器呈现出来。作为处理工作的一部分，浏览器会发现指向其他资源的链接（比如，一个 HTML 页面通常会参考 Javascript 和 CSS 页面），并且会发送独立的 HTTP 请求来下载这些文件。
 
-<h3 id="GET请求响应举例">GET请求/响应举例</h3>
+静态网站和动态网站（在接下来的部分讨论到的）正是使用同一种通信协议/模式
 
-<p>你可以通过点击一个链接或者在网站进行一次搜索（比如搜索引擎的首页）做出一次简单的 GET 请求。比如，当你在 MDN 上进行一次对“客户端概览”词条的搜索时，HTTP 请求就被发送出去了，你将会看到正如下面一样被展示出来的文本信息（展示出来的信息不一定是相同的，因为其中一部分信息还取决于你的浏览器）。</p>
+### GET 请求/响应举例
 
-<div class="note">
-<p><strong>备注：</strong> HTTP 消息的格式是在“网络标准”（<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！</p>
-</div>
+你可以通过点击一个链接或者在网站进行一次搜索（比如搜索引擎的首页）做出一次简单的 GET 请求。比如，当你在 MDN 上进行一次对“客户端概览”词条的搜索时，HTTP 请求就被发送出去了，你将会看到正如下面一样被展示出来的文本信息（展示出来的信息不一定是相同的，因为其中一部分信息还取决于你的浏览器）。
 
-<h4 id="请求">请求</h4>
+> **备注：** HTTP 消息的格式是在“网络标准”（[RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！
 
-<p>每一行请求都包含着相关信息。第一部分被称为<strong>header</strong>，并且包含着关于这个请求的有用信息，同样地一个<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML head</a>包含着关于 HTML 文档的有用信息（但是却没有自身的实际内容，内容在主体里面）。</p>
+#### 请求
 
-<pre>GET https://developer.mozilla.org/en-
-US/search?q=client+server+overview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev HTTP/1.1
+每一行请求都包含着相关信息。第一部分被称为**header**，并且包含着关于这个请求的有用信息，同样地一个[HTML head](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML)包含着关于 HTML 文档的有用信息（但是却没有自身的实际内容，内容在主体里面）。
+
+```plain
+GET https://developer.mozilla.org/en-
+US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
 Host: developer.mozilla.org
 Connection: keep-alive
 Pragma: no-cache
@@ -82,48 +77,43 @@ User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like
 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
 Referer: https://developer.mozilla.org/en-US/
 Accept-Encoding: gzip, deflate, sdch, br
-<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>
+Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
 Accept-Language: en-US,en;q=0.8,es;q=0.6
 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
-</pre>
+```
 
-<p>第一行和第二行包含了我们在上面讨论过的大部分信息</p>
+第一行和第二行包含了我们在上面讨论过的大部分信息
 
-<ul>
- <li>请求类型（GET）。</li>
- <li>目标资源的 URL（<code>/en-US/search</code>）。</li>
- <li>URL 参数（<code>q=client%2Bserver%2Boverview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev）。</code></li>
- <li>目标网站（developer.mozilla.org）。</li>
- <li>第一行的末尾也包含了一个简短的包含了标识协议版本的字符串（<code>HTTP/1.1</code>）。</li>
-</ul>
+- 请求类型（GET）。
+- 目标资源的 URL（`/en-US/search`）。
+- URL 参数（`q=client%2Bserver%2Boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev）。`
+- 目标网站（developer.mozilla.org）。
+- 第一行的末尾也包含了一个简短的包含了标识协议版本的字符串（`HTTP/1.1`）。
 
-<p>最后一行包括一些关于客户端 cookies 的信息——你可以看到在这种情况下 cookies 包含一个为处理远程会话准备的 ID（<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>）。</p>
+最后一行包括一些关于客户端 cookies 的信息——你可以看到在这种情况下 cookies 包含一个为处理远程会话准备的 ID（`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`）。
 
-<p>剩余几行包含着所使用的浏览器以及浏览器所能处理的回应类型等信息。比如，你可以在下面看到这些相关信息：</p>
+剩余几行包含着所使用的浏览器以及浏览器所能处理的回应类型等信息。比如，你可以在下面看到这些相关信息：
 
-<ul>
- <li>我的浏览器上 (<code>User-Agent</code>) 是火狐 (<code>Mozilla/5.0</code>).</li>
- <li>它可以接收 gzip 压缩信息 (<code>Accept-Encoding: gzip</code>).</li>
- <li>它可以接收的具体编码类型 (<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) 和语言 (<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>).</li>
- <li>The <code>Referer</code> line 提示包含资源链接的网络地址 (或者说请求的来源是 <code>https://developer.mozilla.org/en-US/</code>).</li>
-</ul>
+- 我的浏览器上 (`User-Agent`) 是火狐 (`Mozilla/5.0`).
+- 它可以接收 gzip 压缩信息 (`Accept-Encoding: gzip`).
+- 它可以接收的具体编码类型 (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) 和语言 (`Accept-Language: de,en;q=0.7,en-us;q=0.3`).
+- The `Referer` line 提示包含资源链接的网络地址 (或者说请求的来源是 `https://developer.mozilla.org/en-US/`).
 
-<p>请求也可以有一个请求体，不过在这个例子中请求的请求体是空的。</p>
+请求也可以有一个请求体，不过在这个例子中请求的请求体是空的。
 
-<h4 id="回应">回应</h4>
+#### 回应
 
-<p>针对这个请求的回应的第一部分内容展示如下。The header 包含了如下信息：</p>
+针对这个请求的回应的第一部分内容展示如下。The header 包含了如下信息：
 
-<ul>
- <li>第一行包括了回应状态码 200 OK，这告诉我们请求是成功的。</li>
- <li> 我们可以看到回应是文本<code>/html格式的</code>(<code>Content-Type</code>).</li>
- <li>我们也可以看到它使用的是 UTF-8 字符集 (<code>Content-Type: text/html; charset=utf-8</code>).</li>
- <li>The head 也告诉我们它有多大 (<code>Content-Length: 41823</code>).</li>
-</ul>
+- 第一行包括了回应状态码 200 OK，这告诉我们请求是成功的。
+- 我们可以看到回应是文本`/html格式的`(`Content-Type`).
+- 我们也可以看到它使用的是 UTF-8 字符集 (`Content-Type: text/html; charset=utf-8`).
+- The head 也告诉我们它有多大 (`Content-Length: 41823`).
 
-<p>在消息的末尾我们可以看到<strong>主体</strong>内容——包含了针对请求返回的真实的 HTML。</p>
+在消息的末尾我们可以看到**主体**内容——包含了针对请求返回的真实的 HTML。
 
-<pre class="brush: html">HTTP/1.1 200 OK
+```html
+HTTP/1.1 200 OK
 Server: Apache
 X-Backend-Server: developer1.webapp.scl3.mozilla.com
 Vary: Accept,Cookie, Accept-Encoding
@@ -138,26 +128,27 @@ Content-Length: 41823
 
 
 
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false &gt;
-&lt;head prefix="og: http://ogp.me/ns#"&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
-  &lt;script&gt;(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);&lt;/script&gt;
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
+<head prefix="og: http://ogp.me/ns#">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
   ...
-</pre>
+```
 
-<p>header 的剩余部分还包括一些回应的其他信息（比如回应在什么时候生成的），有关服务器的信息，还有它期望浏览器如何处理这个包（比如， <code>X-Frame-Options: DENY</code> 告诉浏览器不允许这个网页嵌入在其他网站的 HTML 元素{{htmlelement("iframe")}}上。</p>
+header 的剩余部分还包括一些回应的其他信息（比如回应在什么时候生成的），有关服务器的信息，还有它期望浏览器如何处理这个包（比如， `X-Frame-Options: DENY` 告诉浏览器不允许这个网页嵌入在其他网站的 HTML 元素{{htmlelement("iframe")}}上。
 
-<h3 id="POST_请求响应举例">POST 请求/响应举例</h3>
+### POST 请求/响应举例
 
-<p>当你提交一个表单，并且希望表单所包含的信息存储到服务器的时候，你就生成了一次 HTTP POST 请求。</p>
+当你提交一个表单，并且希望表单所包含的信息存储到服务器的时候，你就生成了一次 HTTP POST 请求。
 
-<h4 id="请求_2">请求</h4>
+#### 请求
 
-<p>下面的文本展示了当用户在网站上提交新的文件的时候，生成的一个 HTTP 请求的格式和之前展示的 GET 请求是非常相似的，只是第一行标识这个请求为 POST。</p>
+下面的文本展示了当用户在网站上提交新的文件的时候，生成的一个 HTTP 请求的格式和之前展示的 GET 请求是非常相似的，只是第一行标识这个请求为 POST。
 
-<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+```html
+POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
 Host: developer.mozilla.org
 Connection: keep-alive
 Content-Length: 432
@@ -173,15 +164,17 @@ Accept-Encoding: gzip, deflate, br
 Accept-Language: en-US,en;q=0.8,es;q=0.6
 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
 
-csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&amp;user-username=hamishwillee&amp;user-fullname=Hamish+Willee&amp;user-title=&amp;user-organization=&amp;user-location=Australia&amp;user-locale=en-US&amp;user-timezone=Australia%2FMelbourne&amp;user-irc_nickname=&amp;user-interests=&amp;user-expertise=&amp;user-twitter_url=&amp;user-stackoverflow_url=&amp;user-linkedin_url=&amp;user-mozillians_url=&amp;user-facebook_url=</pre>
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
+```
 
-<p>最主要的不同在于 URL 不再包含任何参数。正如你所见，表单提交的信息被编码后放入消息主体中了。(比如：使用以下命令设置新的用户全名：<code>&amp;user-fullname=Hamish+Willee</code>)</p>
+最主要的不同在于 URL 不再包含任何参数。正如你所见，表单提交的信息被编码后放入消息主体中了。(比如：使用以下命令设置新的用户全名：`&user-fullname=Hamish+Willee`)
 
-<h4 id="响应">响应</h4>
+#### 响应
 
-<p>请求的响应如下。状态码"302 FOUND"告知浏览器，服务端已收到它提交的 post 请求，它必须再发出第二个 HTTP 请求来加载<code>Location</code>字段中指定的页面。对于其他方面的信息含义，则与<code>GET</code>请求的响应信息类似。</p>
+请求的响应如下。状态码"302 FOUND"告知浏览器，服务端已收到它提交的 post 请求，它必须再发出第二个 HTTP 请求来加载`Location`字段中指定的页面。对于其他方面的信息含义，则与`GET`请求的响应信息类似。
 
-<pre class="brush: html">HTTP/1.1 302 FOUND
+```html
+HTTP/1.1 302 FOUND
 Server: Apache
 X-Backend-Server: developer3.webapp.scl3.mozilla.com
 Vary: Cookie
@@ -194,82 +187,77 @@ Connection: Keep-Alive
 X-Frame-Options: DENY
 X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
-</pre>
+```
+
+> **备注：** 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如<http://web-sniffer.net/>）或者使用浏览器扩展例如 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/)。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 [Network Monitor](/en-US/docs/Tools/Network_Monitor) 工具)。
+
+## 静态网站
 
-<div class="note">
-<p><strong>备注：</strong> 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如<a href="http://web-sniffer.net/">http://web-sniffer.net/</a>）或者使用浏览器扩展例如 <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a>。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> 工具)。</p>
-</div>
+静态网站是指每当请求一个特定的资源时，会从服务器返回相同的硬编码内容。因此，例如，如果您在 `/static/myproduct1.html` 有一个关于产品的页面，则该页面将返回给每个用户。如果您添加另一个类似的产品到您的网站，您将需要添加另一个页面（例如 `myproduct2.html` ）等。这可能开始变得非常低效：当您访问数千个产品页面时会发生什么——你会在每个页面（基本的页面模板，结构等等）上重复很多代码，如果你想改变页面结构的任何东西，比如添加一个新的“相关产品”部分，必须单独更改每个页面。
 
-<h2 id="静态网站">静态网站</h2>
+> **备注：** 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择， 然而随着页面数量的增加，它们的维护成本也会很高。
 
-<p>静态网站是指每当请求一个特定的资源时，会从服务器返回相同的硬编码内容。因此，例如，如果您在 <code>/static/myproduct1.html</code> 有一个关于产品的页面，则该页面将返回给每个用户。如果您添加另一个类似的产品到您的网站，您将需要添加另一个页面（例如 <code>myproduct2.html</code> ）等。这可能开始变得非常低效：当您访问数千个产品页面时会发生什么——你会在每个页面（基本的页面模板，结构等等）上重复很多代码，如果你想改变页面结构的任何东西，比如添加一个新的“相关产品”部分，必须单独更改每个页面。</p>
+让我们回顾一下在上一篇文章中看到的静态网站架构图，看看它是如何工作的。
 
-<div class="note">
-<p><strong>备注：</strong> 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择， 然而随着页面数量的增加，它们的维护成本也会很高。</p>
-</div>
+![A simplified diagram of a static web server.](basic_static_app_server.png)
 
-<p>让我们回顾一下在上一篇文章中看到的静态网站架构图，看看它是如何工作的。</p>
+当用户想要导航到页面时，浏览器会发送一个指定 HTML 页面的 URL 的 HTTP 的`GET`请求。
+服务器从它的文件系统中检索所请求的文档，并返回包含文档和 HTTP 响应状态码“`200 OK`”(表示成功) 的 HTTP 响应。服务器可能会返回一个不同的状态码，例如，"`404 Not Found`"表明文件不在服务器上，或者"`301 Moved Permanently`"表明如果文件存在，则被重定向到另一个位置。
 
-<p><img alt="A simplified diagram of a static web server." src="basic_static_app_server.png"></p>
+静态站点的服务器只需要处理 GET 请求，因为服务器不存储任何可修改的数据。它也不会根据 HTTP 请求数据（例如 URL 参数或 cookie）更改响应。
 
-<p>当用户想要导航到页面时，浏览器会发送一个指定 HTML 页面的 URL 的 HTTP 的<code>GET</code>请求。<br>
- 服务器从它的文件系统中检索所请求的文档，并返回包含文档和 HTTP 响应状态码“<code>200 OK</code>”(表示成功) 的 HTTP 响应。服务器可能会返回一个不同的状态码，例如，"<code>404 Not Found</code>"表明文件不在服务器上，或者"<code>301 Moved Permanently</code>"表明如果文件存在，则被重定向到另一个位置。</p>
+了解静态站点如何工作在学习服务器端编程时非常有用，因为动态站点以完全相同的方式处理对静态文件 (CSS、JavaScript、静态图像等) 的请求。
 
-<p>静态站点的服务器只需要处理 GET 请求，因为服务器不存储任何可修改的数据。它也不会根据 HTTP 请求数据（例如 URL 参数或 cookie）更改响应。</p>
+## 动态网站
 
-<p>了解静态站点如何工作在学习服务器端编程时非常有用，因为动态站点以完全相同的方式处理对静态文件 (CSS、JavaScript、静态图像等) 的请求。</p>
+动态站点可以根据特定的请求 URL 和数据生成和返回内容 (而不是总是返回同一个 URL 的硬编码文件)。使用产品网页的示例，服务器将把产品“数据”存储在数据库中，而不是单独的 HTML 文件。当接收到一个产品的 HTTP `GET` 请求时，服务器将确定产品 ID，从数据库中获取数据，然后通过将数据插入到 HTML 模板中来构造响应的 HTML 页面。与静态站点相比，这有很大的优势
 
-<h2 id="动态网站">动态网站</h2>
+通过使用数据库，可以有效地将产品信息存储在易于扩展、可修改和可搜索的方式中。
 
-<p>动态站点可以根据特定的请求 URL 和数据生成和返回内容 (而不是总是返回同一个 URL 的硬编码文件)。使用产品网页的示例，服务器将把产品“数据”存储在数据库中，而不是单独的 HTML 文件。当接收到一个产品的 HTTP <code>GET</code> 请求时，服务器将确定产品 ID，从数据库中获取数据，然后通过将数据插入到 HTML 模板中来构造响应的 HTML 页面。与静态站点相比，这有很大的优势</p>
+使用 HTML 模板可以很容易地改变 HTML 结构，因为这只需要在一个模板中的某一处地方完成，而不需要跨越数千个静态页面。
 
-<p>通过使用数据库，可以有效地将产品信息存储在易于扩展、可修改和可搜索的方式中。</p>
+### 剖析动态请求
 
-<p>使用 HTML 模板可以很容易地改变 HTML 结构，因为这只需要在一个模板中的某一处地方完成，而不需要跨越数千个静态页面。</p>
+本节将逐步概述“动态”HTTP 请求和响应周期，以更详细的内容构建我们在上一篇文章中所看到的内容。为了“让事情保持真实”，我们将使用一个体育团队经理网站的情景，在这个网站上，教练可以用 HTML 表单选择他们的球队名称和球队规模，并为他们的下一场比赛中获得建议的“最佳阵容”。
 
-<h3 id="剖析动态请求">剖析动态请求</h3>
+下面的图表显示了“球队教练”网站的主要元素，以及当教练访问他们的“最佳团队”列表时，操作序列的编号。使其动态的站点的部分是 _Web 应用程序_（这就是我们将如何引用处理 HTTP 请求并返回 HTTP 响应的服务器端代码）数据库，该数据库包含关于球员、球队、教练及其关系以及 HTML 模板的信息。
 
-<p>本节将逐步概述“动态”HTTP 请求和响应周期，以更详细的内容构建我们在上一篇文章中所看到的内容。为了“让事情保持真实”，我们将使用一个体育团队经理网站的情景，在这个网站上，教练可以用 HTML 表单选择他们的球队名称和球队规模，并为他们的下一场比赛中获得建议的“最佳阵容”。</p>
+![This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.](web_application_with_html_and_steps.png)
 
-<p>下面的图表显示了“球队教练”网站的主要元素，以及当教练访问他们的“最佳团队”列表时，操作序列的编号。使其动态的站点的部分是 <em>Web 应用程序</em>（这就是我们将如何引用处理 HTTP 请求并返回 HTTP 响应的服务器端代码）数据库，该数据库包含关于球员、球队、教练及其关系以及 HTML 模板的信息。</p>
+在教练提交球员名单和球员人数后，其操作顺序为：
 
-<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="web_application_with_html_and_steps.png"></p>
+1.  Web 浏览器使用资源的基本 URL（`/best`）来创建一个 HTTP `GET`请求，将球队和球员编号附加到 URL 后面作为参数（例如 `/best?team = my_team_name&show = 11`）或作为 URL 地址的一部分（例如 `/best/my_team_name/11/`）。使用`GET`请求是因为请求只是获取数据（而不是修改数据）。
+2.  Web 服务器检测到请求是“动态的”，并将其转发给 Web 应用程序（Web Application）进行处理（Web 服务器根据其配置中定义的模式匹配规则确定如何处理不同的 URL）。
+3.  Web 应用程序（Web Application）确定请求的意图是根据 URL（`/best/`）获得“最佳团队列表”，并从 URL 中找出所需的球队名称和球员人数。然后，Web 应用程序（Web Application）从数据库中获取所需的信息（使用额外的“内部”参数来定义哪些球员是“最好”的，并且可能还从客户端 cookie 获得登录教练的身份）。
+4.  Web 应用程序（Web Application）通过将数据（来自数据库）放入 HTML 模板中的占位符中动态地创建 HTML 页面。
+5.  Web 应用程序（Web Application）将生成的 HTML（通过 Web 服务器）和 HTTP 状态代码 200（“成功”）返回到 Web 浏览器。如果有任何东西阻止 HTML 被返回，那么 Web 应用程序将返回另一个状态代码 - 例如“404”来表示球队不存在。
+6.  然后，Web 浏览器将开始处理返回的 HTML，发送单独的请求以获取其引用的任何其他 CSS 或 JavaScript 文件（请参阅步骤 7）。
+7.  Web 服务器从文件系统加载静态文件，并直接返回到浏览器（同样，正确的文件处理基于配置规则和 URL 模式匹配）。
 
-<p>在教练提交球员名单和球员人数后，其操作顺序为：</p>
+在服务器中，更新数据库中的记录的操作将被类似地与上述过程一样处理，但是更新数据库的这一类的操作，应该指定来自浏览器的 HTTP 请求为`POST`请求。
 
-<ol>
- <li>Web 浏览器使用资源的基本 URL（<code>/best</code>）来创建一个 HTTP <code>GET</code>请求，将球队和球员编号附加到 URL 后面作为参数（例如 <code>/best?team = my_team_name&amp;show = 11</code>）或作为 URL 地址的一部分（例如 <code>/best/my_team_name/11/</code>）。使用<code>GET</code>请求是因为请求只是获取数据（而不是修改数据）。</li>
- <li>Web 服务器检测到请求是“动态的”，并将其转发给 Web 应用程序（Web Application）进行处理（Web 服务器根据其配置中定义的模式匹配规则确定如何处理不同的 URL）。</li>
- <li>Web 应用程序（Web Application）确定请求的意图是根据 URL（<code>/best/</code>）获得“最佳团队列表”，并从 URL 中找出所需的球队名称和球员人数。然后，Web 应用程序（Web Application）从数据库中获取所需的信息（使用额外的“内部”参数来定义哪些球员是“最好”的，并且可能还从客户端 cookie 获得登录教练的身份）。</li>
- <li>Web 应用程序（Web Application）通过将数据（来自数据库）放入 HTML 模板中的占位符中动态地创建 HTML 页面。</li>
- <li>Web 应用程序（Web Application）将生成的 HTML（通过 Web 服务器）和 HTTP 状态代码 200（“成功”）返回到 Web 浏览器。如果有任何东西阻止 HTML 被返回，那么 Web 应用程序将返回另一个状态代码 - 例如“404”来表示球队不存在。</li>
- <li>然后，Web 浏览器将开始处理返回的 HTML，发送单独的请求以获取其引用的任何其他 CSS 或 JavaScript 文件（请参阅步骤 7）。</li>
- <li>Web 服务器从文件系统加载静态文件，并直接返回到浏览器（同样，正确的文件处理基于配置规则和 URL 模式匹配）。</li>
-</ol>
+### 完成其他工作
 
-<p>在服务器中，更新数据库中的记录的操作将被类似地与上述过程一样处理，但是更新数据库的这一类的操作，应该指定来自浏览器的 HTTP 请求为<code>POST</code>请求。</p>
+Web 应用程序（Web Application）的工作是接收 HTTP 请求并返回 HTTP 响应。虽然与数据库交互以获取或更新信息是非常常见的功能，但是代码也可能同时做其他事情，甚至不与数据库交互。
 
-<h3 id="完成其他工作">完成其他工作</h3>
+一个 Web 应用程序（Web Application）可能执行的额外任务的一个很好的例子就是发送一封电子邮件给用户，以确认他们在网站上的注册。该网站也可能执行日志记录或其他操作。
 
-<p>Web 应用程序（Web Application）的工作是接收 HTTP 请求并返回 HTTP 响应。虽然与数据库交互以获取或更新信息是非常常见的功能，但是代码也可能同时做其他事情，甚至不与数据库交互。<br>
- <br>
- 一个 Web 应用程序（Web Application）可能执行的额外任务的一个很好的例子就是发送一封电子邮件给用户，以确认他们在网站上的注册。该网站也可能执行日志记录或其他操作。</p>
+### 返回 HTML 以外的内容
 
-<h3 id="返回HTML以外的内容">返回 HTML 以外的内容</h3>
+服务器端网站代码并非只能在响应中返回 HTML 代码片段/文件。它可以动态地创建和返回其他类型的文件（text，PDF，CSV 等）甚至是数据（JSON，XML 等）。
 
-<p>服务器端网站代码并非只能在响应中返回 HTML 代码片段/文件。它可以动态地创建和返回其他类型的文件（text，PDF，CSV 等）甚至是数据（JSON，XML 等）。<br>
- <br>
- 将数据返回到 Web 浏览器以便它可以动态更新自己的内容（AJAX）的想法实现已经有相当长的一段时间了。最近，“单页面应用程序”已经变得流行起来，整个网站用一个 HTML 文件编写，在需要时动态更新。使用这种风格的应用程序创建的网站将大量的计算成本从服务器推向网络浏览器，并可能导致网站表现出更像本地应用程序（高度响应等）。</p>
+将数据返回到 Web 浏览器以便它可以动态更新自己的内容（AJAX）的想法实现已经有相当长的一段时间了。最近，“单页面应用程序”已经变得流行起来，整个网站用一个 HTML 文件编写，在需要时动态更新。使用这种风格的应用程序创建的网站将大量的计算成本从服务器推向网络浏览器，并可能导致网站表现出更像本地应用程序（高度响应等）。
 
-<h2 id="web框架简化服务器端的web编程">web 框架简化服务器端的 web 编程</h2>
+## web 框架简化服务器端的 web 编程
 
-<p>服务器端 web 框架使得编写解决我们上面描述的操作的代码变得简单得多。</p>
+服务器端 web 框架使得编写解决我们上面描述的操作的代码变得简单得多。
 
-<p>web 框架可以提供的一个最重要的功能就是，提供简单的机制，以将不同的资源和页面定位到具体的处理函数。这使得保持代码和各个不同形式的资源的联系变得简单。它也非常利于代码的维护，因为你可以直接改变在一个地方用来传输特定功能的 URL，而不用改变处理函数。</p>
+web 框架可以提供的一个最重要的功能就是，提供简单的机制，以将不同的资源和页面定位到具体的处理函数。这使得保持代码和各个不同形式的资源的联系变得简单。它也非常利于代码的维护，因为你可以直接改变在一个地方用来传输特定功能的 URL，而不用改变处理函数。
 
-<p>举个例子，我们来思考一下下面的 Django(python) 代码，这些代码将两个 URL 地址定位到两个页面。第一个地址确保了，一个包含了 <code>/best/</code> URL 的 HTTP 请求，可以被传递到一个在<code>views</code>模块的被命名为<code>index()</code>的函数。一个含有"<code>/best/junior</code>"的请求则会被传递到<code>junior()</code>视图函数。</p>
+举个例子，我们来思考一下下面的 Django(python) 代码，这些代码将两个 URL 地址定位到两个页面。第一个地址确保了，一个包含了 `/best/` URL 的 HTTP 请求，可以被传递到一个在`views`模块的被命名为`index()`的函数。一个含有"`/best/junior`"的请求则会被传递到`junior()`视图函数。
 
-<pre class="brush: python"># file: best/urls.py
+```python
+# file: best/urls.py
 #
 
 from django.conf.urls import url
@@ -281,17 +269,17 @@ urlpatterns = [
     url(r'^$', views.index),
     # example: /best/junior/
     url(r'^junior/$', views.junior),
-]</pre>
+]
+```
 
-<div class="note">
-<p><strong>备注：</strong> 在<code>url()</code>函数中的第一个参数可能看起来有点古怪 (比如<code>r'^junior/$</code>)  因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”"</p>
-</div>
+> **备注：** 在`url()`函数中的第一个参数可能看起来有点古怪 (比如`r'^junior/$`) 因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”"
 
-<p>Web 框架还可以轻松地使用查看函数，从数据库获取信息。我们的数据结构是在模型中定义的，模型是定义要存储在底层数据库中的字段的 Python 类。如果我们有一个名为 Team 的模型，其中有一个“<em>team_type</em>”字段，那么我们可以使用一个简单的查询语法来取回所有具有特定类型的球队。</p>
+Web 框架还可以轻松地使用查看函数，从数据库获取信息。我们的数据结构是在模型中定义的，模型是定义要存储在底层数据库中的字段的 Python 类。如果我们有一个名为 Team 的模型，其中有一个“_team_type_”字段，那么我们可以使用一个简单的查询语法来取回所有具有特定类型的球队。
 
-<p>下面的例子得到了所有字段 team_type（区分大小写）为“junior”的所有球队的列表 - 注意格式：字段名称（team_type），后面跟着双下划线，然后是使用的匹配类型）。还有很多其他的匹配类型，我们可以组合他们。我们也可以控制返回结果的顺序和数量。</p>
+下面的例子得到了所有字段 team_type（区分大小写）为“junior”的所有球队的列表 - 注意格式：字段名称（team_type），后面跟着双下划线，然后是使用的匹配类型）。还有很多其他的匹配类型，我们可以组合他们。我们也可以控制返回结果的顺序和数量。
 
-<pre class="brush: python">#best/views.py
+```python
+#best/views.py
 
 from django.shortcuts import render
 
@@ -302,16 +290,16 @@ def junior(request):
     list_teams = Team.objects.filter(team_type__exact="junior")
     context = {'list': list_teams}
     return render(request, 'best/index.html', context)
-</pre>
+```
 
-<p><code>junior()</code>函数获得少年组列表后，它调用<code>render()</code>函数，传递原始的 HttpRequest，一个 HTML 模板和一个定义要包含在模板中的信息的“context”对象。 <code>render()</code>函数是一个方便的函数，它使用上下文和 HTML 模板生成 HTML，并将其返回到 <code>HttpResponse</code> 对象中</p>
+`junior()`函数获得少年组列表后，它调用`render()`函数，传递原始的 HttpRequest，一个 HTML 模板和一个定义要包含在模板中的信息的“context”对象。 `render()`函数是一个方便的函数，它使用上下文和 HTML 模板生成 HTML，并将其返回到 `HttpResponse` 对象中
 
-<p>显然地 web 框架可以帮助你解决很多问题。我们在下一篇文章里将会大量讨论这些好处和一些流行的 web 框架。</p>
+显然地 web 框架可以帮助你解决很多问题。我们在下一篇文章里将会大量讨论这些好处和一些流行的 web 框架。
 
-<h2 id="总结">总结</h2>
+## 总结
 
-<p>到这里你应该对于服务器端代码不得不进行的操作有一个整体上的理解，并且知道一个服务器端 web 框架是从那些方面让这些变得更简单的。</p>
+到这里你应该对于服务器端代码不得不进行的操作有一个整体上的理解，并且知道一个服务器端 web 框架是从那些方面让这些变得更简单的。
 
-<p>在接下来的模块里面我们会帮助你选择对于你的第一个网站来说最适合的 web 框架。</p>
+在接下来的模块里面我们会帮助你选择对于你的第一个网站来说最适合的 web 框架。
 
-<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
diff --git a/files/zh-cn/learn/server-side/first_steps/index.md b/files/zh-cn/learn/server-side/first_steps/index.md
index fbab89eabdd00d..4225470826dc94 100644
--- a/files/zh-cn/learn/server-side/first_steps/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/index.md
@@ -8,39 +8,31 @@ tags:
   - 脚本编程
 translation_of: Learn/Server-side/First_steps
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}在我们的服务端编程板块中，我们回答了服务端编程的一系列基础问题—“它是什么？”，“它和客户端编程的区别是什么？”，还有“为什么它是有价值的？”。然后我们提供了对几个最受欢迎的服务端 Web 框架的概览，同时还有对如何选择最适合的框架来创建你第一个网站的指导。最后我们提供了一篇从高层次介绍 Web 服务器安全的文章。
 
-<div>在我们的服务端编程板块中，我们回答了服务端编程的一系列基础问题—“它是什么？”，“它和客户端编程的区别是什么？”，还有“为什么它是有价值的？”。然后我们提供了对几个最受欢迎的服务端 Web 框架的概览，同时还有对如何选择最适合的框架来创建你第一个网站的指导。最后我们提供了一篇从高层次介绍 Web 服务器安全的文章。</div>
+## 先决条件
 
+在开始这个模块之前，你不必知道任何关于服务端网站编程的知识，或者任何一种其他编程经验。
 
+你需要先知道“Web 如何工作”，我们推荐你首先阅读下面几个话题：
 
-<h2 id="先决条件">先决条件</h2>
+- [什么是一个 Web 服务器？](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server)
+- [建立一个网站需要什么软件？](/en-US/docs/Learn/Common_questions/What_software_do_I_need)
+- [如何向 Web 服务器上传文件？](/zh-CN/docs/Learn/Common_questions/Upload_files_to_a_web_server)
 
-<p>在开始这个模块之前，你不必知道任何关于服务端网站编程的知识，或者任何一种其他编程经验。</p>
+有了这些基础知识，你已经准备好开始这些模块的学习了。
 
-<p>你需要先知道“Web 如何工作”，我们推荐你首先阅读下面几个话题：</p>
+## 引导
 
-<ul>
- <li><a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是一个 Web 服务器？</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">建立一个网站需要什么软件？</a></li>
- <li><a href="/zh-CN/docs/Learn/Common_questions/Upload_files_to_a_web_server">如何向 Web 服务器上传文件？</a></li>
-</ul>
+- [服务端简介](/zh-CN/docs/learn/Server-side/First_steps/Introduction)
+  - : 欢迎来到 MDN 提供的初学者服务端编程课程！在我们第一篇文章中，我们从一个很高的角度来审视服务端编程，回答的问题都是类似于：什么是服务端编程？它与客户端编程的区别在哪？以及为什么它如此有价值？在阅读本文之后，你将通过服务端编程了解更多关于网站开发的知识。
+- [客户端编程回顾](/zh-CN/docs/learn/Server-side/First_steps/Client-Server_overview)
+  - : 现在你应该了解服务端编程的目的以及它可能带来的好处，我们现在要去探究一些细节，当服务端接收到浏览器的“动态请求”时，到底发生了什么。大多数服务端代码都是用相似的方式来处理请求以及应答，这一点将帮助你更好地明白在编写你自己的代码时，你到底需要做些什么。
+- [服务端 web 框架](/zh-CN/docs/learn/Server-side/First_steps/Web_frameworks)
+  - : 最后一篇文章将会介绍当服务端 web 程序为了响应 web 浏览器发出的请求，它需要做些什么。现在我们来看看 web 框架是如何简化这些任务的，除此之外，本文还将帮助你为你自己的第一个服务端 web 程序选择一个合适的框架。
+- [网站安全性](/zh-CN/docs/learn/Server-side/First_steps/Website_security)
+  - : 在网站的设计与使用过程中，网站安全在方方面面都需要引起警惕。这篇引导性的文章不会让你成为网站安全方面的专家，但是它能够帮你了解为了强化你的 web 应用用以抵抗大多数常见的威胁时，你应该做的第一件重要的事是什么。
 
-<p>有了这些基础知识，你已经准备好开始这些模块的学习了。</p>
+## 评估
 
-<h2 id="引导">引导</h2>
-
-<dl>
- <dt><a href="/zh-CN/docs/learn/Server-side/First_steps/Introduction">服务端简介</a></dt>
- <dd>欢迎来到 MDN 提供的初学者服务端编程课程！在我们第一篇文章中，我们从一个很高的角度来审视服务端编程，回答的问题都是类似于：什么是服务端编程？它与客户端编程的区别在哪？以及为什么它如此有价值？在阅读本文之后，你将通过服务端编程了解更多关于网站开发的知识。</dd>
- <dt><a href="/zh-CN/docs/learn/Server-side/First_steps/Client-Server_overview">客户端编程回顾</a></dt>
- <dd>现在你应该了解服务端编程的目的以及它可能带来的好处，我们现在要去探究一些细节，当服务端接收到浏览器的“动态请求”时，到底发生了什么。大多数服务端代码都是用相似的方式来处理请求以及应答，这一点将帮助你更好地明白在编写你自己的代码时，你到底需要做些什么。</dd>
- <dt><a href="/zh-CN/docs/learn/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></dt>
- <dd>最后一篇文章将会介绍当服务端 web 程序为了响应 web 浏览器发出的请求，它需要做些什么。现在我们来看看 web 框架是如何简化这些任务的，除此之外，本文还将帮助你为你自己的第一个服务端 web 程序选择一个合适的框架。</dd>
- <dt><a href="/zh-CN/docs/learn/Server-side/First_steps/Website_security">网站安全性</a></dt>
- <dd>在网站的设计与使用过程中，网站安全在方方面面都需要引起警惕。这篇引导性的文章不会让你成为网站安全方面的专家，但是它能够帮你了解为了强化你的 web 应用用以抵抗大多数常见的威胁时，你应该做的第一件重要的事是什么。</dd>
-</dl>
-
-<h2 id="评估">评估</h2>
-
-<p>这块“概览性”的内容并不会有任何评估练习，因为我们至今还没向你展示一句代码。我们确切地希望到了这里，你已经对服务端编程提供的各种功能有了一个很好的理解，并且已经为创建你自己的第一个 web 站点选好了合适的 web 框架。</p>
+这块“概览性”的内容并不会有任何评估练习，因为我们至今还没向你展示一句代码。我们确切地希望到了这里，你已经对服务端编程提供的各种功能有了一个很好的理解，并且已经为创建你自己的第一个 web 站点选好了合适的 web 框架。
diff --git a/files/zh-cn/learn/server-side/first_steps/introduction/index.md b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
index 92cb8fe1b80444..985c9189ad93f3 100644
--- a/files/zh-cn/learn/server-side/first_steps/introduction/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
@@ -11,229 +11,191 @@ tags:
   - 服务端编程
 translation_of: Learn/Server-side/First_steps/Introduction
 ---
-<div>
+{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
 
-
-<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
-</div>
-
-<p>欢迎来到 MDN 为初学者准备的服务器端编程课程！在第一篇文章里面我们将会从一个较高的角度来看待服务器端编程，通过解答下面这些问题来实现这一点，比如：服务器端编程是什么？服务器端编程和客户端编程有何不同？还有，为什么服务器端编程这么有用？当你读完这篇文章后，你会理解通过服务器端编程实现的网站所能提供的额外的功能。</p>
+欢迎来到 MDN 为初学者准备的服务器端编程课程！在第一篇文章里面我们将会从一个较高的角度来看待服务器端编程，通过解答下面这些问题来实现这一点，比如：服务器端编程是什么？服务器端编程和客户端编程有何不同？还有，为什么服务器端编程这么有用？当你读完这篇文章后，你会理解通过服务器端编程实现的网站所能提供的额外的功能。
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">先决条件：</th>
-   <td>基础电脑知识、对“Web 服务器是什么”的基本理解</td>
-  </tr>
-  <tr>
-   <th scope="row">目标：</th>
-   <td>熟悉服务器端编程是什么，它可以做什么，它和客户端编程的区别</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">先决条件：</th>
+      <td>基础电脑知识、对“Web 服务器是什么”的基本理解</td>
+    </tr>
+    <tr>
+      <th scope="row">目标：</th>
+      <td>熟悉服务器端编程是什么，它可以做什么，它和客户端编程的区别</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>大多数的大型网站采用服务器端编程来在需要的时候动态展示不同的信息，这些信息通常会从服务器上的数据库中取出，然后发送给客户端，并通过一些代码（比如 HTML 和 Javascript）展示在客户端。</p>
-
-<p>或许服务器端编程的最大益处在于它允许你对不同的用户个体展示不同的网站信息。动态网站可以高亮基于用户喜好和习惯的与用户相关度更高的内容。通过存储用户的偏好设置和个人信息使得网站更加易于使用——比如通过重复使用信用卡的详细信息来简化后续付款流程。</p>
-
-<p>它允许在页面中与用户进行交互，比如通过邮件或者其他渠道发送通知和更新信息。服务器端的所有的这些能力使得网站可以与用户有更深的联系。</p>
-
-<p>在现代的 web 开发中，学习服务器端编程是很被推荐的。</p>
-
-<h2 id="服务器端编程是什么？">服务器端编程是什么？</h2>
-
-<p>Web 浏览器通过<strong>超文本传输协议</strong>（{{glossary("HTTP")}}）来和 <a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">Web 服务器</a>进行通信。当你在网页上点击一个链接，或提交一个表单，再或进行一次搜索时，一个 <strong>HTTP 请求</strong>就从你的浏览器发送到了目标服务器。</p>
-
-<p>这个请求包括一个标识所请求资源的 URL，一个定义所需操作的方法 (比如获取，删除或者发布资源)，还可以包括编码在 URL 参数中的附加信息。附加信息以键值对（参数和它的值）的形式，通过一个<a href="https://en.wikipedia.org/wiki/Query_string">查询字符串</a>，作为 POST 数据（由<a href="/zh-CN/docs/Web/HTTP/Methods/POST">HTTP POST 方法</a>发送）或存放在与之相关联的{{glossary("Cookie")}}中。</p>
-
-<p>Web 服务器等待客户端的请求信息，在它们到达的时候处理它们，并且回复 Web 浏览器一个 <strong>HTTP 响应</strong>信息。这个响应包含一个表明该请求是否成功的状态行（比如“HTTP/1.1 200 OK”代表请求成功）。</p>
-
-<p>相应一个请求的成功回应包含被请求的资源（比如一个新的 HTML 页面，或者图片等），然后这些会被展示在客户端的 Web 浏览器上。</p>
-
-<h3 id="静态网站">静态网站</h3>
+大多数的大型网站采用服务器端编程来在需要的时候动态展示不同的信息，这些信息通常会从服务器上的数据库中取出，然后发送给客户端，并通过一些代码（比如 HTML 和 Javascript）展示在客户端。
 
-<p>下面这张图展示了一个<em>静态网站</em>的基本架构。（静态网站是指无论何时当一个特定资源被请求的时候都返回相同的被硬编码的内容）当用户想要导航到某个页面时，浏览器会发送一个指定到这个页面的 URL 的 HTTP“GET”请求。服务器从它的文件系统中检索被请求的文件，然后返回一个 HTTP 回应，该回应包括被请求的文件和一个<a href="/en-US/docs/Web/HTTP/Status#Successful_responses">状态码</a>（通常 200 代表操作成功）。如果出于某些原因被请求的文件无法检索到，就会返回错误码。（具体可以参照<a href="/zh-CN/docs/Web/HTTP/Status#Client_error_responses">客户端错误回应</a>和<a href="/zh-CN/docs/Web/HTTP/Status#Server_error_responses">服务器错误回应</a>）</p>
+或许服务器端编程的最大益处在于它允许你对不同的用户个体展示不同的网站信息。动态网站可以高亮基于用户喜好和习惯的与用户相关度更高的内容。通过存储用户的偏好设置和个人信息使得网站更加易于使用——比如通过重复使用信用卡的详细信息来简化后续付款流程。
 
-<p><img alt="A simplified diagram of a static web server." src="basic_static_app_server.png"></p>
+它允许在页面中与用户进行交互，比如通过邮件或者其他渠道发送通知和更新信息。服务器端的所有的这些能力使得网站可以与用户有更深的联系。
 
-<h3 id="动态网站">动态网站</h3>
+在现代的 web 开发中，学习服务器端编程是很被推荐的。
 
-<p>动态网站是指，一些响应内容只有在被需要的时候才会生发的网站。在一个动态网站上，页面通常是通过将数据库的数据植入到 HTML 模板中的占位符中而产生的（这是一种比使用静态网站有效得多的存储大量内容的方式）。</p>
+## 服务器端编程是什么？
 
-<p>动态网站可以基于用户提供的个人信息或者偏好设置来返回不同的数据，并且可以展示作为返回一个回应的内容的一部分的其他操作（比如发送通知）。</p>
+Web 浏览器通过**超文本传输协议**（{{glossary("HTTP")}}）来和 [Web 服务器](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server)进行通信。当你在网页上点击一个链接，或提交一个表单，再或进行一次搜索时，一个 **HTTP 请求**就从你的浏览器发送到了目标服务器。
 
-<p>大多数支持动态网站的代码必须运行在服务器上。编写这些代码就是所谓的“<strong>服务器端编程</strong>”（有些时候也称“后端脚本编写”）。</p>
+这个请求包括一个标识所请求资源的 URL，一个定义所需操作的方法 (比如获取，删除或者发布资源)，还可以包括编码在 URL 参数中的附加信息。附加信息以键值对（参数和它的值）的形式，通过一个[查询字符串](https://en.wikipedia.org/wiki/Query_string)，作为 POST 数据（由[HTTP POST 方法](/zh-CN/docs/Web/HTTP/Methods/POST)发送）或存放在与之相关联的{{glossary("Cookie")}}中。
 
-<p>下面的图表展示了一个动态网站的简单架构。就像之前的图表那样，浏览器发送 HTTP 请求给服务器，然后服务器处理请求并且返回合适的 HTTP 响应。</p>
+Web 服务器等待客户端的请求信息，在它们到达的时候处理它们，并且回复 Web 浏览器一个 **HTTP 响应**信息。这个响应包含一个表明该请求是否成功的状态行（比如“HTTP/1.1 200 OK”代表请求成功）。
 
-<p>动态网站对于静态资源的请求的处理方式和静态网站是一样的（静态资源是指那些不会改变的文件——最典型的就是：CSS，Javascript，图片，预先生成的 PDF 文件等）。</p>
+相应一个请求的成功回应包含被请求的资源（比如一个新的 HTML 页面，或者图片等），然后这些会被展示在客户端的 Web 浏览器上。
 
-<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="web_application_with_html_and_steps.png"></p>
+### 静态网站
 
-<p>对于动态资源的请求则会指向（2）服务器端代码 (在图中显示为 <em>Web Application</em>（Web 应用））。在处理“动态请求”时，服务器会首先解释请求，从数据库中读取被请求的信息，然后将这些被检索的信息组合到 HTML 模板中（4）,最后返回一个包含所生成的 HTML 页面的回应（5,6）。</p>
+下面这张图展示了一个*静态网站*的基本架构。（静态网站是指无论何时当一个特定资源被请求的时候都返回相同的被硬编码的内容）当用户想要导航到某个页面时，浏览器会发送一个指定到这个页面的 URL 的 HTTP“GET”请求。服务器从它的文件系统中检索被请求的文件，然后返回一个 HTTP 回应，该回应包括被请求的文件和一个[状态码](/en-US/docs/Web/HTTP/Status#Successful_responses)（通常 200 代表操作成功）。如果出于某些原因被请求的文件无法检索到，就会返回错误码。（具体可以参照[客户端错误回应](/zh-CN/docs/Web/HTTP/Status#Client_error_responses)和[服务器错误回应](/zh-CN/docs/Web/HTTP/Status#Server_error_responses)）
 
-<div>
-<h2 id="服务器端编程和客户端编程是一样的吗？">服务器端编程和客户端编程是一样的吗？</h2>
-</div>
+![A simplified diagram of a static web server.](basic_static_app_server.png)
 
-<p>让我们将注意力转向涉及服务器端编程和客户端编程的代码。在每一个情况下，代码都是显然不同的：</p>
+### 动态网站
 
-<ul>
- <li>它们有不同的目的和关注点。</li>
- <li>它们通常不会使用相同的编程语言（Javascript 是一个特例，它既可以被用在服务器端也可以被用在客户端）。</li>
- <li>它们在不同的操作系统环境中运行。</li>
-</ul>
+动态网站是指，一些响应内容只有在被需要的时候才会生发的网站。在一个动态网站上，页面通常是通过将数据库的数据植入到 HTML 模板中的占位符中而产生的（这是一种比使用静态网站有效得多的存储大量内容的方式）。
 
-<p>在浏览器端运行的代码被称为<strong>客户端代码</strong>，并且主要涉及所呈现的网页的外观和行为的改进。这就包括选择和设计 UI 元素、布局、导航、表单验证等。相反的，服务器端网站编程主要涉及，对于相应的请求，选择所要返回给浏览器的内容。服务器端代码解决这样一些问题，比如验证提交的数据和请求、使用数据库来存储和检索信息及发送给用户正如他们所请求的的正确内容。</p>
+动态网站可以基于用户提供的个人信息或者偏好设置来返回不同的数据，并且可以展示作为返回一个回应的内容的一部分的其他操作（比如发送通知）。
 
-<p>客户端代码使用 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 来编写——这些代码直接在 Web 浏览器中运行，并且几乎没有访问底层操作系统的路径（包括对文件系统访问的限制）。</p>
+大多数支持动态网站的代码必须运行在服务器上。编写这些代码就是所谓的“**服务器端编程**”（有些时候也称“后端脚本编写”）。
 
-<p>web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站——浏览器对客户端代码的兼容性支持水平不一致，客户端编程的一部分挑战就是如何优雅地处理浏览器兼容性问题。</p>
+下面的图表展示了一个动态网站的简单架构。就像之前的图表那样，浏览器发送 HTTP 请求给服务器，然后服务器处理请求并且返回合适的 HTTP 响应。
 
-<p>服务器端代码可以用任何一种编程语言进行编写——比较受欢迎的服务器端编程语言包括 PHP、Python、Ruby 和 C#。服务器端代码有充分的权限访问服务器的操作系统，并且开发者可以选择他们希望使用的编程语言（和特定版本的语言）。</p>
+动态网站对于静态资源的请求的处理方式和静态网站是一样的（静态资源是指那些不会改变的文件——最典型的就是：CSS，Javascript，图片，预先生成的 PDF 文件等）。
 
-<p>开发者们通常会使用 web 框架来编写他们的代码。web 框架是一个各种函数、对象、方法和其他代码结构的集合体，web 框架被设计用来解决一些普遍问题，从而加速开发，并且简化在一个特定领域中面临的不同类型的任务。</p>
+![A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.](web_application_with_html_and_steps.png)
 
-<p>同样的，当客户端和服务器端代码使用框架时，它们的领域是不同的，因此框架也会不同。客户端 web 框架简化布局和演示任务，然而服务器端 web 框架提供大量的普通 Web 服务功能，不然的话你可能需要自己来实现这些功能（比如支持会话、支持用户和身份验证、简单的数据访问、模板库等）。</p>
+对于动态资源的请求则会指向（2）服务器端代码 (在图中显示为 _Web Application_（Web 应用））。在处理“动态请求”时，服务器会首先解释请求，从数据库中读取被请求的信息，然后将这些被检索的信息组合到 HTML 模板中（4）,最后返回一个包含所生成的 HTML 页面的回应（5,6）。
 
-<div class="note">
-<p><strong>备注：</strong> 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。</p>
+## 服务器端编程和客户端编程是一样的吗？
 
-<p>相反的，你应该从来没有考虑过不使用框架而直接编写 web 应用程序的服务器端组件——实现一个重要的功能比如 HTTP 服务器真的很难直接从头开始用 Python 语言构建，但是一些用 Python 语言写的 web 框架，比如 Django 提供了开箱即用的功能，同时还包含其他很多有用的工具。</p>
-</div>
+让我们将注意力转向涉及服务器端编程和客户端编程的代码。在每一个情况下，代码都是显然不同的：
 
-<div>
-<h2 id="你可以在服务器端做什么？">你可以在服务器端做什么？</h2>
+- 它们有不同的目的和关注点。
+- 它们通常不会使用相同的编程语言（Javascript 是一个特例，它既可以被用在服务器端也可以被用在客户端）。
+- 它们在不同的操作系统环境中运行。
 
-<p>服务器端编程是非常有用的，因为它允许我们高效地分发为个人用户制定的信息，从而创造了更佳的用户体验。</p>
-</div>
+在浏览器端运行的代码被称为**客户端代码**，并且主要涉及所呈现的网页的外观和行为的改进。这就包括选择和设计 UI 元素、布局、导航、表单验证等。相反的，服务器端网站编程主要涉及，对于相应的请求，选择所要返回给浏览器的内容。服务器端代码解决这样一些问题，比如验证提交的数据和请求、使用数据库来存储和检索信息及发送给用户正如他们所请求的的正确内容。
 
-<p>一些公司比如亚马逊使用服务器端编程来生成产品的搜索结果、根据客户的偏好和过去的购买习惯来推荐目标产品、简化购物流程等。</p>
+客户端代码使用 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 来编写——这些代码直接在 Web 浏览器中运行，并且几乎没有访问底层操作系统的路径（包括对文件系统访问的限制）。
 
-<p>银行使用服务器端编程来存储帐号信息，并且仅允许授权的用户查看和进行交易。Facebook、Twitter、Instagram 和 Wikipedia，使用服务器端编程来突出、分享和控制对有趣内容的访问。</p>
+web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站——浏览器对客户端代码的兼容性支持水平不一致，客户端编程的一部分挑战就是如何优雅地处理浏览器兼容性问题。
 
-<p>服务器端编程的普遍使用和好处被罗列在了下方。你会发现二者有一些是重叠的！</p>
+服务器端代码可以用任何一种编程语言进行编写——比较受欢迎的服务器端编程语言包括 PHP、Python、Ruby 和 C#。服务器端代码有充分的权限访问服务器的操作系统，并且开发者可以选择他们希望使用的编程语言（和特定版本的语言）。
 
-<h3 id="信息的高效存储和传输">信息的高效存储和传输</h3>
+开发者们通常会使用 web 框架来编写他们的代码。web 框架是一个各种函数、对象、方法和其他代码结构的集合体，web 框架被设计用来解决一些普遍问题，从而加速开发，并且简化在一个特定领域中面临的不同类型的任务。
 
-<p>想象一下，在亚马逊上提供着多少产品，在脸书上发布了多少帖子？为每一个产品和帖子都创建一个独立的静态页面将是完全不切实际的。</p>
+同样的，当客户端和服务器端代码使用框架时，它们的领域是不同的，因此框架也会不同。客户端 web 框架简化布局和演示任务，然而服务器端 web 框架提供大量的普通 Web 服务功能，不然的话你可能需要自己来实现这些功能（比如支持会话、支持用户和身份验证、简单的数据访问、模板库等）。
 
-<p>服务器端编程则允许我们在数据库中存储信息，并且允许我们动态地创建和返回 HTML 和其他类型的文件（比如，PDF 文件和图片等）。我们也可以简单地传输数据 （{{glossary("JSON")}}、{{glossary("XML")}} 等），来让合适的客户端框架呈现（这样就减少了服务器的处理压力和需要被传输的数据总量）。</p>
+> **备注：** 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。
+>
+> 相反的，你应该从来没有考虑过不使用框架而直接编写 web 应用程序的服务器端组件——实现一个重要的功能比如 HTTP 服务器真的很难直接从头开始用 Python 语言构建，但是一些用 Python 语言写的 web 框架，比如 Django 提供了开箱即用的功能，同时还包含其他很多有用的工具。
 
-<p>服务器的工作内容不仅限于从数据库发送信息，可能还会选择性地返回软件工具的结果，或者来自聊天服务的数据。内容甚至可以被定位到接受它的信息的客户端设备的类型。</p>
+## 你可以在服务器端做什么？
 
-<p>因为数据被放在数据库中，因此更加容易被分享和更新到其他商业系统（比如，当产品在网上或者实体店卖掉之后，商店可以更新它的存货清单数据库）</p>
+服务器端编程是非常有用的，因为它允许我们高效地分发为个人用户制定的信息，从而创造了更佳的用户体验。
 
-<div class="note">
-<p><strong>备注：</strong> 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处：</p>
+一些公司比如亚马逊使用服务器端编程来生成产品的搜索结果、根据客户的偏好和过去的购买习惯来推荐目标产品、简化购物流程等。
 
-<ol>
- <li>打开<a href="https://www.amazon.com">亚马逊</a>或者其他一些电子商务网站。</li>
- <li>搜索一系列关键词，然后注意到页面结构并没有发生改变，尽管搜索结果发生了改变。</li>
- <li>打开两到三个不同的产品。注意到它们是如何拥有一个相似的结构和布局的，但是不同产品的内容是从不同数据库中获取的。</li>
-</ol>
+银行使用服务器端编程来存储帐号信息，并且仅允许授权的用户查看和进行交易。Facebook、Twitter、Instagram 和 Wikipedia，使用服务器端编程来突出、分享和控制对有趣内容的访问。
 
-<p>对于一个普通的搜索词条（比如“鱼”），你会看到数百万的返回值。使用数据库允许这些数据被高效地存储和分享，并且使得信息的展示就被控制在那一个特定的地方。</p>
-</div>
+服务器端编程的普遍使用和好处被罗列在了下方。你会发现二者有一些是重叠的！
 
-<h3 id="定制用户体验">定制用户体验</h3>
+### 信息的高效存储和传输
 
-<p>服务器可以存储和使用客户的相关信息来提供一个定制化的用户体验。比如，很多网站存储信用卡信息来使得用户不必再次输入细节信息。有些网站，比如，谷歌地图使用家庭或者当前位置来提供路径信息，然后在搜索结果中突出本地商业。</p>
+想象一下，在亚马逊上提供着多少产品，在脸书上发布了多少帖子？为每一个产品和帖子都创建一个独立的静态页面将是完全不切实际的。
 
-<p>对用户习惯的更深层分析可以被用来预测用户的兴趣和更加深度地定制化回应和通知，比如，提供一张清单来展示曾经去过的地方，或者在地图上标识你可能想去的非常受欢迎的地点。</p>
+服务器端编程则允许我们在数据库中存储信息，并且允许我们动态地创建和返回 HTML 和其他类型的文件（比如，PDF 文件和图片等）。我们也可以简单地传输数据 （{{glossary("JSON")}}、{{glossary("XML")}} 等），来让合适的客户端框架呈现（这样就减少了服务器的处理压力和需要被传输的数据总量）。
 
-<div class="note">
-<p><strong>备注：</strong> 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。</p>
+服务器的工作内容不仅限于从数据库发送信息，可能还会选择性地返回软件工具的结果，或者来自聊天服务的数据。内容甚至可以被定位到接受它的信息的客户端设备的类型。
 
-<p>谷歌搜索结果基于之前的搜索进行优化。</p>
+因为数据被放在数据库中，因此更加容易被分享和更新到其他商业系统（比如，当产品在网上或者实体店卖掉之后，商店可以更新它的存货清单数据库）
 
-<p>1.访问谷歌搜索</p>
+> **备注：** 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处：
+>
+> 1.  打开[亚马逊](https://www.amazon.com)或者其他一些电子商务网站。
+> 2.  搜索一系列关键词，然后注意到页面结构并没有发生改变，尽管搜索结果发生了改变。
+> 3.  打开两到三个不同的产品。注意到它们是如何拥有一个相似的结构和布局的，但是不同产品的内容是从不同数据库中获取的。
+>
+> 对于一个普通的搜索词条（比如“鱼”），你会看到数百万的返回值。使用数据库允许这些数据被高效地存储和分享，并且使得信息的展示就被控制在那一个特定的地方。
 
-<p>2.搜索“足球”</p>
+### 定制用户体验
 
-<p>3.现在在搜索框中输入“喜欢” ，你就会观察到搜索会自动补全</p>
+服务器可以存储和使用客户的相关信息来提供一个定制化的用户体验。比如，很多网站存储信用卡信息来使得用户不必再次输入细节信息。有些网站，比如，谷歌地图使用家庭或者当前位置来提供路径信息，然后在搜索结果中突出本地商业。
 
-<p>真的是巧合嘛？这算不上什么！</p>
-</div>
+对用户习惯的更深层分析可以被用来预测用户的兴趣和更加深度地定制化回应和通知，比如，提供一张清单来展示曾经去过的地方，或者在地图上标识你可能想去的非常受欢迎的地点。
 
-<h3 id="控制对内容的访问">控制对内容的访问</h3>
+> **备注：** 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。
+>
+> 谷歌搜索结果基于之前的搜索进行优化。
+>
+> 1.访问谷歌搜索
+>
+> 2.搜索“足球”
+>
+> 3.现在在搜索框中输入“喜欢” ，你就会观察到搜索会自动补全
+>
+> 真的是巧合嘛？这算不上什么！
 
-<p>服务器端编程允许网站限制合法用户的权限，并且只提供用户被允许查看的信息。</p>
+### 控制对内容的访问
 
-<p>真实世界的例子有：</p>
+服务器端编程允许网站限制合法用户的权限，并且只提供用户被允许查看的信息。
 
-<ul>
- <li>社交网站，比如 Facebook 允许用户完全控制他们自己的数据，但是只允许他们的朋友和家人查看和评论这些数据。用户决定谁可以看到他们的数据，并且通过扩展，决定谁的数据出现在他们的反馈里面——授权是用户体验里面的一个核心部分！</li>
- <li>
-  <p>此时此刻您所访问的网站也控制着内容访问：文章对所有人都是可视的，但是只有已经登录的用户可以编辑内容。为了试验一下，你可以点击一下页面上方的<strong>编辑</strong>按钮——如果你已经登录了的话，将会展示出编辑界面；如果你还没有登录，你会被导航到注册界面。</p>
- </li>
-</ul>
+真实世界的例子有：
 
-<div class="note">
-<p><strong>备注：</strong> 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？</p>
-</div>
+- 社交网站，比如 Facebook 允许用户完全控制他们自己的数据，但是只允许他们的朋友和家人查看和评论这些数据。用户决定谁可以看到他们的数据，并且通过扩展，决定谁的数据出现在他们的反馈里面——授权是用户体验里面的一个核心部分！
+- 此时此刻您所访问的网站也控制着内容访问：文章对所有人都是可视的，但是只有已经登录的用户可以编辑内容。为了试验一下，你可以点击一下页面上方的**编辑**按钮——如果你已经登录了的话，将会展示出编辑界面；如果你还没有登录，你会被导航到注册界面。
 
-<h3 id="存储会话和状态信息">存储会话和状态信息</h3>
+> **备注：** 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？
 
-<p>服务器端编程允许开发者们充分利用<strong>会话</strong>——简单来说就是一种机制，这种机制允许服务器存储一个网站现有用户信息，并且基于那些信息发送不同响应。</p>
+### 存储会话和状态信息
 
-<p>这也就允许，比如说，一个网站知道一个用户曾经登录过并且展示他们邮箱的链接或者订单历史，或者可能存储一个简单游戏的状态来确保用户可以再次访问网站然后从上次留下来的地方继续。</p>
+服务器端编程允许开发者们充分利用**会话**——简单来说就是一种机制，这种机制允许服务器存储一个网站现有用户信息，并且基于那些信息发送不同响应。
 
-<div class="note">
-<p><strong>备注：</strong> 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如<a href="http://www.theage.com.au/">The Age</a>）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子</p>
-</div>
+这也就允许，比如说，一个网站知道一个用户曾经登录过并且展示他们邮箱的链接或者订单历史，或者可能存储一个简单游戏的状态来确保用户可以再次访问网站然后从上次留下来的地方继续。
 
-<h3 id="通知和通讯">通知和通讯</h3>
+> **备注：** 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如[The Age](http://www.theage.com.au/)）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子
 
-<p>服务器可以发送面向全体的或者面向指定用户的通知，通过网站自身或者通过邮箱、SMS、即时消息、视频会话或者其他的通讯服务。</p>
+### 通知和通讯
 
-<p>几个例子：</p>
+服务器可以发送面向全体的或者面向指定用户的通知，通过网站自身或者通过邮箱、SMS、即时消息、视频会话或者其他的通讯服务。
 
-<ul>
- <li>
-  <p>Facebook 和 Twitter 发送邮件或者 SMS 消息来通知你一些新的交谈。</p>
- </li>
- <li>
-  <p>亚马逊定期的向你发送产品邮件并且向你推荐和你曾经买过的产品很相似的产品或者是他们觉得你可能感兴趣的产品。</p>
- </li>
- <li>一个网站的服务器可能向网站管理员发送警告消息来警告他们服务器内存不足或者可疑的用户行为。</li>
-</ul>
+几个例子：
 
-<div class="note">
-<p><strong>备注：</strong> 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。</p>
-</div>
+- Facebook 和 Twitter 发送邮件或者 SMS 消息来通知你一些新的交谈。
+- 亚马逊定期的向你发送产品邮件并且向你推荐和你曾经买过的产品很相似的产品或者是他们觉得你可能感兴趣的产品。
+- 一个网站的服务器可能向网站管理员发送警告消息来警告他们服务器内存不足或者可疑的用户行为。
 
-<h3 id="数据分析">数据分析</h3>
+> **备注：** 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。
 
-<p>一个网站可以收集到有关用户的大量的信息：他们搜索什么？他们买什么？他们分享什么？他们在每一个页面停留多久？服务器端编程可以被用来基于这些数据的分析而细化回应。</p>
+### 数据分析
 
-<p>比如，亚马逊和谷歌都基于过去的搜索（和购物）信息来为产品打广告。</p>
+一个网站可以收集到有关用户的大量的信息：他们搜索什么？他们买什么？他们分享什么？他们在每一个页面停留多久？服务器端编程可以被用来基于这些数据的分析而细化回应。
 
-<div class="note">
-<p><strong>备注：</strong> 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。</p>
+比如，亚马逊和谷歌都基于过去的搜索（和购物）信息来为产品打广告。
 
-<p>也可以看一下你收到的广告是什么类型的——你或许会看到你在其他网站查看的商品。Facebook 为突出内容和广告的算法或许还很令人疑惑，但是很明显的，它是依据你的喜好、品味和习惯的！</p>
-</div>
+> **备注：** 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。
+>
+> 也可以看一下你收到的广告是什么类型的——你或许会看到你在其他网站查看的商品。Facebook 为突出内容和广告的算法或许还很令人疑惑，但是很明显的，它是依据你的喜好、品味和习惯的！
 
-<h2 id="总结">总结</h2>
+## 总结
 
-<p>恭喜，你已经看到了第一篇有关服务器端编程的文章的结尾处。</p>
+恭喜，你已经看到了第一篇有关服务器端编程的文章的结尾处。
 
-<p>你已经了解到的就是，服务器端代码在服务器上运行，它的主要角色是控制什么信息应该发送给用户（然而客户端代码只要解决给用户的数据的结构和展示）。</p>
+你已经了解到的就是，服务器端代码在服务器上运行，它的主要角色是控制什么信息应该发送给用户（然而客户端代码只要解决给用户的数据的结构和展示）。
 
-<p>你也应该理解服务器端代码是非常有用的，因为它允许我们创建，可以高效地向个体用户传输定制化的信息的，网站。另外，你还应该知道当你是一个服务器端程序员时可能能够做的一些事情。</p>
+你也应该理解服务器端代码是非常有用的，因为它允许我们创建，可以高效地向个体用户传输定制化的信息的，网站。另外，你还应该知道当你是一个服务器端程序员时可能能够做的一些事情。
 
-<p>最后你应该理解服务器端代码可以用很多种编程语言进行编写，并且你应该使用一个 web 框架来使得这个过程更加容易一点。</p>
+最后你应该理解服务器端代码可以用很多种编程语言进行编写，并且你应该使用一个 web 框架来使得这个过程更加容易一点。
 
-<p>在接下来的文章中我们会帮助你选择一个对于你的第一个网站来说最好的 web 框架；但是，再接下来我们稍微详细一点地带你过一遍主要的客户端 - 服务器交互行为。</p>
+在接下来的文章中我们会帮助你选择一个对于你的第一个网站来说最好的 web 框架；但是，再接下来我们稍微详细一点地带你过一遍主要的客户端 - 服务器交互行为。
 
-<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
+{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
 
-<h2 id="在这个模块中">在这个模块中</h2>
+## 在这个模块中
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li>
-</ul>
+- [Introduction to the server side](/en-US/docs/Learn/Server-side/First_steps/Introduction)
+- [Client-Server overview](/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview)
+- [Server-side web frameworks](/en-US/docs/Learn/Server-side/First_steps/Web_frameworks)
+- [Website security](/en-US/docs/Learn/Server-side/First_steps/Website_security)
diff --git a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
index bf1dfae0a3a53e..7158ae07a2293e 100644
--- a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
@@ -12,46 +12,54 @@ tags:
   - 编码
 translation_of: Learn/Server-side/First_steps/Web_frameworks
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div>
-
-<p>前面的文章向你展示了 web 客户端和服务器之间的通信是什么样子的，HTTP 的请求和回应之间的性质，以及服务器端应用为了回应来自 web 浏览器的请求的需要做的事情。有了这些知识后，现在是时候来探索一个 web 框架是如何简化这些任务的，并且告诉你应该如何为你的第一个服务器端应用选择一个框架。</p>
+前面的文章向你展示了 web 客户端和服务器之间的通信是什么样子的，HTTP 的请求和回应之间的性质，以及服务器端应用为了回应来自 web 浏览器的请求的需要做的事情。有了这些知识后，现在是时候来探索一个 web 框架是如何简化这些任务的，并且告诉你应该如何为你的第一个服务器端应用选择一个框架。
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预先要求：</th>
-   <td>基础电脑素养。对于服务器端代码是如何处理并响应 HTTP 请求有深刻的理解。（参见<a href="/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a>）</td>
-  </tr>
-  <tr>
-   <th scope="row">目标：</th>
-   <td>理解 web 框架是如何简化服务器端代码的开发和维护的，并且帮助读者思考如何为他们自己的开发项目选择一个框架。</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">预先要求：</th>
+      <td>
+        基础电脑素养。对于服务器端代码是如何处理并响应 HTTP
+        请求有深刻的理解。（参见<a
+          href="/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview"
+          >Client-Server overview</a
+        >）
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">目标：</th>
+      <td>
+        理解 web
+        框架是如何简化服务器端代码的开发和维护的，并且帮助读者思考如何为他们自己的开发项目选择一个框架。
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>下面的部分通过使用一些来自 web 框架的代码段来说明一些要点。如果不能完全看懂代码也不用太在意。我们在“框架详解”模块会帮助你完全理解。</p>
+下面的部分通过使用一些来自 web 框架的代码段来说明一些要点。如果不能完全看懂代码也不用太在意。我们在“框架详解”模块会帮助你完全理解。
 
-<h2 id="概览">概览</h2>
+## 概览
 
-<p>服务器端框架 (亦称 "web 应用框架") 使编写、维护和扩展 web 应用更加容易。它们提供工具和库来实现简单、常见的开发任务，包括 路由处理，数据库交互，会话支持和用户验证，格式化输出 (e.g. HTML, JSON, XML), 提高安全性应对网络攻击。</p>
+服务器端框架 (亦称 "web 应用框架") 使编写、维护和扩展 web 应用更加容易。它们提供工具和库来实现简单、常见的开发任务，包括 路由处理，数据库交互，会话支持和用户验证，格式化输出 (e.g. HTML, JSON, XML), 提高安全性应对网络攻击。
 
-<p>下一节将详细介绍 web 框架如何简化 web 应用程序开发。然后，我将阐述一些选择 web 框架的标准，并给你列出一些选项。</p>
+下一节将详细介绍 web 框架如何简化 web 应用程序开发。然后，我将阐述一些选择 web 框架的标准，并给你列出一些选项。
 
-<h2 id="web_框架可以为你做什么？">web 框架可以为你做什么？</h2>
+## web 框架可以为你做什么？
 
-<p>你并不是必须得使用一个服务器端的 web 框架，但是我们强烈建议你使用框架——框架会使得你的生活更美好。</p>
+你并不是必须得使用一个服务器端的 web 框架，但是我们强烈建议你使用框架——框架会使得你的生活更美好。
 
-<p>这个部分我们讲一下 web 框架通常会提供的功能（并不是说每一个框架一定会提供下面的所有功能！）</p>
+这个部分我们讲一下 web 框架通常会提供的功能（并不是说每一个框架一定会提供下面的所有功能！）
 
-<h3 id="直接处理_HTTP_请求和响应">直接处理 HTTP 请求和响应</h3>
+### 直接处理 HTTP 请求和响应
 
-<p>从上一篇文章中我们知道，web 服务器和浏览器通过 HTTP 协议进行通信——服务器等待来自浏览器的 HTTP 请求然后在 HTTP 回应中返回相关信息。web 框架允许你编写简单语法的代码，即可生成处理这些请求和回应的代码。这意味着你的工作变得简单、交互变得简单、并且使用抽象程度高的代码而不是底层代码。</p>
+从上一篇文章中我们知道，web 服务器和浏览器通过 HTTP 协议进行通信——服务器等待来自浏览器的 HTTP 请求然后在 HTTP 回应中返回相关信息。web 框架允许你编写简单语法的代码，即可生成处理这些请求和回应的代码。这意味着你的工作变得简单、交互变得简单、并且使用抽象程度高的代码而不是底层代码。
 
-<p>每一个“view”函数（请求的处理者）接受一个包含请求信息的<code>HttpRequest</code>对象，并且被要求返回一个包含格式化输出的<code>HttpResponse</code>（在下面的例子中是一个字符串）。</p>
+每一个“view”函数（请求的处理者）接受一个包含请求信息的`HttpRequest`对象，并且被要求返回一个包含格式化输出的`HttpResponse`（在下面的例子中是一个字符串）。
 
-<pre class="brush: python"># Django view function
+```python
+# Django view function
 from django.http import HttpResponse
 
 def index(request):
@@ -59,49 +67,51 @@ def index(request):
     # perform operations using information from the request.
     # Return HttpResponse
     return HttpResponse('Output string to return')
-</pre>
+```
 
-<h3 id="将请求路由到相关的handler中">将请求路由到相关的 handler 中</h3>
+### 将请求路由到相关的 handler 中
 
-<p>大多数的站点会提供一系列不同资源，通过特定的 URL 来访问。如果都放在一个函数里面，网站会变得很难维护。所以 web 框架提供一个简单机制来匹配 URL 和特定处理函数。这种方式对网站维护也有好处，因为你只需要改变用来传输特定功能的 URL 而不用改变任何底层代码。</p>
+大多数的站点会提供一系列不同资源，通过特定的 URL 来访问。如果都放在一个函数里面，网站会变得很难维护。所以 web 框架提供一个简单机制来匹配 URL 和特定处理函数。这种方式对网站维护也有好处，因为你只需要改变用来传输特定功能的 URL 而不用改变任何底层代码。
 
-<p>不同的框架使用不同机制进行匹配。比如 Flask（Python）框架通过使用装饰器来增加视图的路由。</p>
+不同的框架使用不同机制进行匹配。比如 Flask（Python）框架通过使用装饰器来增加视图的路由。
 
-<pre class="brush: python">@app.route("/")
+```python
+@app.route("/")
 def hello():
-    return "Hello World!"</pre>
+    return "Hello World!"
+```
 
-<p>然而，Django 则期望开发者们定义一张 URL pattern 和视图函数 URL 的匹配列表。</p>
+然而，Django 则期望开发者们定义一张 URL pattern 和视图函数 URL 的匹配列表。
 
-<pre class="brush: python">urlpatterns = [
+```python
+urlpatterns = [
     url(r'^$', views.index),
     # example: /best/myteamname/5/
-    url(r'^(?P&lt;team_name&gt;\w.+?)/(?P&lt;team_number&gt;[0-9]+)/$', views.best),
+    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
 ]
-</pre>
+```
 
-<h3 id="使从请求中获得数据变得简单">使从请求中获得数据变得简单</h3>
+### 使从请求中获得数据变得简单
 
-<p>数据在 HTTP 请求中的编码方式有很多种。一个从服务器获得文件或者数据的 HTTP <code>GET</code>请求可能会按照 URL 参数中要求的或者 URL 结构中的方式进行编码。一个更新服务器上数据的 HTTP <code>POST</code>请求则会在请求主体中包含像“POST data”这样的更新信息。HTTP 请求也可能包含客户端 cookie 中的即时会话和用户信息。</p>
+数据在 HTTP 请求中的编码方式有很多种。一个从服务器获得文件或者数据的 HTTP `GET`请求可能会按照 URL 参数中要求的或者 URL 结构中的方式进行编码。一个更新服务器上数据的 HTTP `POST`请求则会在请求主体中包含像“POST data”这样的更新信息。HTTP 请求也可能包含客户端 cookie 中的即时会话和用户信息。
 
-<p>web 框架提供一个获得这些信息的适合编程语言的机制。比如，Django 传递给视图函数的<code>HttpRequest</code>对象包含着获得目标 URL 的方式和属性、请求的类型（比如一个 HTTP <code>GET</code>）、<code>GET</code>或者<code>POST</code>参数、cookie 或者 session 数据等等。Django 也可以通过在 URL 匹配表中定义“抓取模式”来在 URL 结构中传递编码了的信息（如上面的编码片段中的最后一行）。</p>
+web 框架提供一个获得这些信息的适合编程语言的机制。比如，Django 传递给视图函数的`HttpRequest`对象包含着获得目标 URL 的方式和属性、请求的类型（比如一个 HTTP `GET`）、`GET`或者`POST`参数、cookie 或者 session 数据等等。Django 也可以通过在 URL 匹配表中定义“抓取模式”来在 URL 结构中传递编码了的信息（如上面的编码片段中的最后一行）。
 
-<h3 id="抽象和简化数据库接口">抽象和简化数据库接口</h3>
+### 抽象和简化数据库接口
 
-<p>网站使用数据库来存储与用户分享的信息和用户个人信息。web 框架通常会提供一个数据库层来抽象数据库的读、写、查询和删除操作。这一个抽象层被称作对象关系映射器（ORM）。</p>
+网站使用数据库来存储与用户分享的信息和用户个人信息。web 框架通常会提供一个数据库层来抽象数据库的读、写、查询和删除操作。这一个抽象层被称作对象关系映射器（ORM）。
 
-<p>使用对象关系映射器有两个好处：</p>
+使用对象关系映射器有两个好处：
 
-<ul>
- <li>你不需要改变使用数据库的代码就可以替换底层数据库。这就允许开发者依据用途优化不同数据库的特点。</li>
- <li>简单的数据的验证可以被植入到框架中。这会使得检查数据是否按照正确的方式存储在数据库字段中或者是否是特定的格式变得简单（比如邮箱地址），并且不是恶意的（黑客可以利用特定的编码模式来进行一些如删除数据库记录的非法操作）。</li>
-</ul>
+- 你不需要改变使用数据库的代码就可以替换底层数据库。这就允许开发者依据用途优化不同数据库的特点。
+- 简单的数据的验证可以被植入到框架中。这会使得检查数据是否按照正确的方式存储在数据库字段中或者是否是特定的格式变得简单（比如邮箱地址），并且不是恶意的（黑客可以利用特定的编码模式来进行一些如删除数据库记录的非法操作）。
 
-<p>比如，Django 框架提供一个对象关系映射，并且将用来定义数据库记录的结构称作模型。模型制定被存储的字段类型，可能也会提供那些要被存储的信息的验证（比如，一个 email 字段只允许合法 email 地址）。字段可能也会指明最大信息量、默认值、选项列表、帮助文档、表单标签等。这个模型不会申明任何底层数据库的信息，因为这是一个只能被我们的代码改变的配置信息。</p>
+比如，Django 框架提供一个对象关系映射，并且将用来定义数据库记录的结构称作模型。模型制定被存储的字段类型，可能也会提供那些要被存储的信息的验证（比如，一个 email 字段只允许合法 email 地址）。字段可能也会指明最大信息量、默认值、选项列表、帮助文档、表单标签等。这个模型不会申明任何底层数据库的信息，因为这是一个只能被我们的代码改变的配置信息。
 
-<p>下面第一个代码片段展示了一个简单的为<code>Team</code>对象设计的 Django 模型。这个模型会使用字符字段来存储一个队伍的名字和级别，同时还指定了用来存储每一条记录的最大字符数量。<code>team_level</code>是一个枚举字段，所以我们也提供了一个被存储的数据和被展示出来的选项之间的匹配，同时指定了一个默认值。</p>
+下面第一个代码片段展示了一个简单的为`Team`对象设计的 Django 模型。这个模型会使用字符字段来存储一个队伍的名字和级别，同时还指定了用来存储每一条记录的最大字符数量。`team_level`是一个枚举字段，所以我们也提供了一个被存储的数据和被展示出来的选项之间的匹配，同时指定了一个默认值。
 
-<pre class="brush: python">#best/models.py
+```python
+#best/models.py
 
 from django.db import models
 
@@ -115,181 +125,167 @@ class Team(models.Model):
         ...  #list our other teams
     )
     team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-</pre>
+```
 
-<p>Django 模型提供了简单的搜索数据库的查询 API。这可以通过使用不同标准来同时匹配一系列的字段（比如精确、不区分大小写、大于等等），并且支持一些复杂的陈述（比如，你可以指定在 U11 水平的队伍中搜索队伍名字中以“Fr”开头或者“al”结尾的队伍）。</p>
+Django 模型提供了简单的搜索数据库的查询 API。这可以通过使用不同标准来同时匹配一系列的字段（比如精确、不区分大小写、大于等等），并且支持一些复杂的陈述（比如，你可以指定在 U11 水平的队伍中搜索队伍名字中以“Fr”开头或者“al”结尾的队伍）。
 
-<p>第二个代码片段展示了一个视图函数（资源处理器），这个视图函数用来展示所有 U09 水平的队伍——通过指明过滤出所有<code>team_level</code>字段能准确匹配'U09'的队伍（注意过滤规则如何传递给<code>filter( )</code>，它被视为一个变量：<code>team_level__exact</code>，由字段名、匹配类型和分隔它们的双重下划线组成）。</p>
+第二个代码片段展示了一个视图函数（资源处理器），这个视图函数用来展示所有 U09 水平的队伍——通过指明过滤出所有`team_level`字段能准确匹配'U09'的队伍（注意过滤规则如何传递给`filter( )`，它被视为一个变量：`team_level__exact`，由字段名、匹配类型和分隔它们的双重下划线组成）。
 
-<pre class="brush: python">#best/views.py
+```python
+#best/views.py
 
 from django.shortcuts import render
 from .models import Team
 
 def youngest(request):
-    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    list_teams = Team.objects.filter(team_level__exact="U09")
     context = {'youngest_teams': list_teams}
     return render(request, 'best/index.html', context)
-</pre>
+```
 
-<h3 id="渲染数据">渲染数据</h3>
+### 渲染数据
 
-<p>web 框架经常提供模板系统。这些允许你制定输出文档的结构，使用为那些数据准备的将在页面生成时添加进去的占位符。模板经常是用来生成 HTML 的，但是也可以用来生成一些其他的文档。</p>
+web 框架经常提供模板系统。这些允许你制定输出文档的结构，使用为那些数据准备的将在页面生成时添加进去的占位符。模板经常是用来生成 HTML 的，但是也可以用来生成一些其他的文档。
 
-<p>框架提供一个机制，使得从存储的数据中生成其他格式数据变得简单，包括{{glossary("JSON")}}和{{glossary("XML")}}。</p>
+框架提供一个机制，使得从存储的数据中生成其他格式数据变得简单，包括{{glossary("JSON")}}和{{glossary("XML")}}。
 
-<p>比如，Django 模板允许你通过使用“双重花括号”（如<code>{</code><code>{ <em>variable_name</em> </code><code>}</code><code>}</code>）来指定变量，当页面被渲染出来时，这些变量会被从视图函数传递过来的值代替。模板系统也会提供表达支持（通过语法<code>{% <em>expression</em> %}来实现</code>），这样就允许模板进行一些简单的操作比如迭代传递给模板的值列表。</p>
+比如，Django 模板允许你通过使用“双重花括号”（如` {`` { variable_name ``}``} `）来指定变量，当页面被渲染出来时，这些变量会被从视图函数传递过来的值代替。模板系统也会提供表达支持（通过语法`{% expression %}来实现`），这样就允许模板进行一些简单的操作比如迭代传递给模板的值列表。
 
-<div class="note">
-<p><strong>备注：</strong> 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。</p>
-</div>
+> **备注：** 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。
 
-<p>下面的代码片段展示了它们如何工作的。下面的内容接着从上一个部分而来的“youngest team”实例，HTML 模板通过视图函数传进一个叫做 youngest_teams 的值列表。在 HTML 骨架中我们有一个初步检查 youngest_teams 变量是否存在的表示，然后会在 for 循环里面进行迭代。在每一次迭代中模板会以列表元素的形式展示队伍的 team_name 值。</p>
+下面的代码片段展示了它们如何工作的。下面的内容接着从上一个部分而来的“youngest team”实例，HTML 模板通过视图函数传进一个叫做 youngest_teams 的值列表。在 HTML 骨架中我们有一个初步检查 youngest_teams 变量是否存在的表示，然后会在 for 循环里面进行迭代。在每一次迭代中模板会以列表元素的形式展示队伍的 team_name 值。
 
-<pre class="brush: html">#best/templates/best/index.html
+```html
+#best/templates/best/index.html
 
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;body&gt;
+<!DOCTYPE html>
+<html lang="en">
+<body>
 
  {% if youngest_teams %}
-    &lt;ul&gt;
+    <ul>
     {% for team in youngest_teams %}
-        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+        <li>\{\{ team.team_name \}\}</li>
     {% endfor %}
-    &lt;/ul&gt;
+    </ul>
 {% else %}
-    &lt;p&gt;No teams are available.&lt;/p&gt;
+    <p>No teams are available.</p>
 {% endif %}
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
+
+## 如何选择一个 web 框架
 
-<h2 id="如何选择一个web框架">如何选择一个 web 框架</h2>
+几乎对于你想要使用的每一种语言都有大量的 web 框架（我们在下面的部分列举了一些比较受欢迎的框架）。有这么多选择，导致很难决定选择哪个框架为你的新 web 应用提供最好的开端。
 
-<p>几乎对于你想要使用的每一种语言都有大量的 web 框架（我们在下面的部分列举了一些比较受欢迎的框架）。有这么多选择，导致很难决定选择哪个框架为你的新 web 应用提供最好的开端。</p>
+一些影响你决定的因素有：
 
-<p>一些影响你决定的因素有：</p>
+- **学习代价**：学习一个 web 框架取决于你对底层语言的熟悉程度，它的 API 的一致性与否，文档质量，社区的体量和活跃程度。如果你完全没有编程基础的话，那就考虑 Django 吧（它是基于上面几条标准来看最容易学习的了）。如果你已经成为开发团队的一部分，而那个开发团队对某一种语言或者某一个框架有着很重要的开发经历，那么就坚持相关框架。
+- **效率**：效率是指一旦你熟悉某一个框架之后，你能够多块地创造一个新功能的衡量方式，包括编写和维护代码的代价（因为当前面的功能崩掉之后，你没法编写新的功能）。影响效率的大多数因素和学习代价是类似的——比如，文档，社区，编程经历等等。——其他因素还有：
 
-<ul>
- <li><strong>学习代价</strong>：学习一个 web 框架取决于你对底层语言的熟悉程度，它的 API 的一致性与否，文档质量，社区的体量和活跃程度。如果你完全没有编程基础的话，那就考虑 Django 吧（它是基于上面几条标准来看最容易学习的了）。如果你已经成为开发团队的一部分，而那个开发团队对某一种语言或者某一个框架有着很重要的开发经历，那么就坚持相关框架。</li>
- <li><strong>效率</strong>：效率是指一旦你熟悉某一个框架之后，你能够多块地创造一个新功能的衡量方式，包括编写和维护代码的代价（因为当前面的功能崩掉之后，你没法编写新的功能）。影响效率的大多数因素和学习代价是类似的——比如，文档，社区，编程经历等等。——其他因素还有：
-  <ul>
-   <li>框架目的/起源：一些框架最初是用来解决某一类特定问题的，并且最好在生成app的时候顾及到这些约束。比如，Django是用来支持新闻网站的，因此非常适合博客或者其他包含发布内容的网站。相反的，Flask是一个相对来说轻量级的框架，因此适合用来生成一些在嵌入式设备上运行的app。</li>
-   <li><em>Opinionated vs unopinionated</em>：一个 opinionated 的框架是说，解决某一个特定问题时，总有一个被推荐的最佳的解决方法。opinionated 的框架在你试图解决一些普通问题的时候，更加趋向于产品化，因为它们会将你引入正确的方向，尽管有些时候并不那么灵活。</li>
-   <li>一些web框架默认地包含了开发者们能遇到的任何一个问题的工具/库，而一些轻量级的框架希望开发者们自己从分离的库中选择合适的解决方式（Django是其前者的一个实例，而Flask则是轻量级的一个实例）。包含了所有东西的框架通常很容易上手因为你已经有了你所需要的任何东西，并且很可能它已经被整合好了，并且文档也写得很完善。然而一个较小型的框架含有你所需要（或者以后需要）的各种东西，它将只能在受更多限制的环境中运行,并且需要学习更小的、更简单的子集学习。</li>
-   <li>是否选择一个鼓励良好开发实例的框架：比如，一个鼓励 <a href="/zh-CN/docs/Glossary/MVC">Model-View-Controller</a> 结构来将代码分离到逻辑函数上的框架将会是更加易于维护的代码，想比与那些对开发者没有此期待的框架而言。同样的，框架设计也深刻影响了测试和重复使用代码的难易程度。</li>
-  </ul>
- </li>
- <li><strong>框架/编程语言的表现：</strong> 通常来讲，“速度”并不是选择中最重要的因素，甚至，相对而言，运行速度很缓慢的 Python 对于一个在中等硬盘上跑的中等大小的网站已经足够了。其他语言（C++/Javascript）的明显的速度优势很有可能被学习和维护的代价给抵消了。</li>
- <li><strong>缓存支持：</strong>当你的网站之间变得越来越成功之后，你可能会发现它已经无法妥善处理它收到的大量请求了。在这个时候，你可能会开始考虑添加缓存支持。缓存是一种优化，是指你将全部的或者大部分的网站请求保存起来，那么在后继请求中就不需要重新计算了。返回一个缓存请求比重新计算一次要快得多。缓存可以被植入你的代码里面，或者是服务器中（参见<a href="https://en.wikipedia.org/wiki/Reverse_proxy">reverse proxy</a>）。web 框架对于定义可缓存内容有着不同程度的支持。</li>
- <li><strong>可扩展性：</strong>一旦你的网站非常成功的时候，你会发现缓存的好处已经所剩无几了，甚至垂直容量到达了极限（将程序运行在更加有力的硬件上面）。在这个时候，你可能需要水平扩展（将你的网站分散到好几个服务器和数据库上来加载）或者“地理上地”扩展，因为你的一些客户距离你的服务器很远。你所选择的框架将会影响到扩展你的网站的难易程度。</li>
- <li><strong>网络安全：</strong>一些 web 框架对于解决常见的网络攻击提供更好的支持。例如，Django 消除所有用户从 HTML 输入的东西。因此从用户端输入的 Javascript 不会被运行。其他框架也提供相似的功能，但是通常在默认情况下是不直接开启的。</li>
-</ul>
+  - 框架目的/起源：一些框架最初是用来解决某一类特定问题的，并且最好在生成 app 的时候顾及到这些约束。比如，Django 是用来支持新闻网站的，因此非常适合博客或者其他包含发布内容的网站。相反的，Flask 是一个相对来说轻量级的框架，因此适合用来生成一些在嵌入式设备上运行的 app。
+  - _Opinionated vs unopinionated_：一个 opinionated 的框架是说，解决某一个特定问题时，总有一个被推荐的最佳的解决方法。opinionated 的框架在你试图解决一些普通问题的时候，更加趋向于产品化，因为它们会将你引入正确的方向，尽管有些时候并不那么灵活。
+  - 一些 web 框架默认地包含了开发者们能遇到的任何一个问题的工具/库，而一些轻量级的框架希望开发者们自己从分离的库中选择合适的解决方式（Django 是其前者的一个实例，而 Flask 则是轻量级的一个实例）。包含了所有东西的框架通常很容易上手因为你已经有了你所需要的任何东西，并且很可能它已经被整合好了，并且文档也写得很完善。然而一个较小型的框架含有你所需要（或者以后需要）的各种东西，它将只能在受更多限制的环境中运行,并且需要学习更小的、更简单的子集学习。
+  - 是否选择一个鼓励良好开发实例的框架：比如，一个鼓励 [Model-View-Controller](/zh-CN/docs/Glossary/MVC) 结构来将代码分离到逻辑函数上的框架将会是更加易于维护的代码，想比与那些对开发者没有此期待的框架而言。同样的，框架设计也深刻影响了测试和重复使用代码的难易程度。
 
-<p>可能还有其他一些原因，包括许可证、框架是否处于动态发展过程中等等。</p>
+- **框架/编程语言的表现：** 通常来讲，“速度”并不是选择中最重要的因素，甚至，相对而言，运行速度很缓慢的 Python 对于一个在中等硬盘上跑的中等大小的网站已经足够了。其他语言（C++/Javascript）的明显的速度优势很有可能被学习和维护的代价给抵消了。
+- **缓存支持：**当你的网站之间变得越来越成功之后，你可能会发现它已经无法妥善处理它收到的大量请求了。在这个时候，你可能会开始考虑添加缓存支持。缓存是一种优化，是指你将全部的或者大部分的网站请求保存起来，那么在后继请求中就不需要重新计算了。返回一个缓存请求比重新计算一次要快得多。缓存可以被植入你的代码里面，或者是服务器中（参见[reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy)）。web 框架对于定义可缓存内容有着不同程度的支持。
+- **可扩展性：**一旦你的网站非常成功的时候，你会发现缓存的好处已经所剩无几了，甚至垂直容量到达了极限（将程序运行在更加有力的硬件上面）。在这个时候，你可能需要水平扩展（将你的网站分散到好几个服务器和数据库上来加载）或者“地理上地”扩展，因为你的一些客户距离你的服务器很远。你所选择的框架将会影响到扩展你的网站的难易程度。
+- **网络安全：**一些 web 框架对于解决常见的网络攻击提供更好的支持。例如，Django 消除所有用户从 HTML 输入的东西。因此从用户端输入的 Javascript 不会被运行。其他框架也提供相似的功能，但是通常在默认情况下是不直接开启的。
 
-<p>如果你是一个完全的初学者，那么你可能会基于“易于学习”来选择你的框架。除了语言本身的“易于学习”之外，帮助新手的高质量的文档/教程和一个活跃的社区是你最有价值的资源。在后续课程中，我们选取了 Django（Python）和 Express（Node/Javascript）来编写我们的实例，主要因为它们很容易上手并且有强大的支持。</p>
+可能还有其他一些原因，包括许可证、框架是否处于动态发展过程中等等。
 
-<div class="note">
-<p><strong>备注：</strong> 我们可以去 <a href="https://www.djangoproject.com/">Django</a> (Python) 和 <a href="https://expressjs.com/">Express</a> (Node/JavaScript) 的主页上去看看它们的文档和社区。</p>
+如果你是一个完全的初学者，那么你可能会基于“易于学习”来选择你的框架。除了语言本身的“易于学习”之外，帮助新手的高质量的文档/教程和一个活跃的社区是你最有价值的资源。在后续课程中，我们选取了 Django（Python）和 Express（Node/Javascript）来编写我们的实例，主要因为它们很容易上手并且有强大的支持。
 
-<ol>
- <li>导航至主页 (上面已给出链接)
-  <ul>
-   <li>点击文档菜单的链接 (通常都叫做 "Documentation（文档）、Guide（指南）、API Reference（API 参考）、Getting Started（快速开始）"之类的。）</li>
-   <li>你能看到如何设置 URL 路由、模板、数据库/数据模型的主题吗？</li>
-   <li>文档说得够清楚吗？</li>
-  </ul>
- </li>
- <li>导航至各个站点的邮件列表（从社区的链接访问）
-  <ul>
-   <li>近几天提出了多少问题？</li>
-   <li>有多少问题得到了回应？</li>
-   <li>他们是否有一个活跃的社区？</li>
-  </ul>
- </li>
-</ol>
-</div>
+> **备注：** 我们可以去 [Django](https://www.djangoproject.com/) (Python) 和 [Express](https://expressjs.com/) (Node/JavaScript) 的主页上去看看它们的文档和社区。
+>
+> 1.  导航至主页 (上面已给出链接)
+>
+>     - 点击文档菜单的链接 (通常都叫做 "Documentation（文档）、Guide（指南）、API Reference（API 参考）、Getting Started（快速开始）"之类的。）
+>     - 你能看到如何设置 URL 路由、模板、数据库/数据模型的主题吗？
+>     - 文档说得够清楚吗？
+>
+> 2.  导航至各个站点的邮件列表（从社区的链接访问）
+>
+>     - 近几天提出了多少问题？
+>     - 有多少问题得到了回应？
+>     - 他们是否有一个活跃的社区？
 
-<h2 id="几个还不错的框架？">几个还不错的框架？</h2>
+## 几个还不错的框架？
 
-<p>让我们继续，来讨论几个特定的服务器端框架。</p>
+让我们继续，来讨论几个特定的服务器端框架。
 
-<p>下面的服务器端框架体现了现在最受欢迎的几个。它们有你需要用来提升效率的一切东西——它们是开源的，一直保持发展的态势，有着富有激情的社区，社区里的人创作出文档并且在讨论板上帮助使用者，并且被使用在很多高质量的网站上。当然还有很多其他非常棒的框架，你可以使用搜索引擎探索一下。</p>
+下面的服务器端框架体现了现在最受欢迎的几个。它们有你需要用来提升效率的一切东西——它们是开源的，一直保持发展的态势，有着富有激情的社区，社区里的人创作出文档并且在讨论板上帮助使用者，并且被使用在很多高质量的网站上。当然还有很多其他非常棒的框架，你可以使用搜索引擎探索一下。
 
-<div class="note">
-<p><strong>备注：</strong> （部分）解释来自框架的官方网站！</p>
-</div>
+> **备注：** （部分）解释来自框架的官方网站！
 
-<h3 id="Django_Python">Django (Python)</h3>
+### Django (Python)
 
-<p><a href="https://www.djangoproject.com/">Django</a>是一个高水平的 python web 框架，它鼓励快速的开发和简洁、务实的设计。它由非常有经验的开发者创建的，考虑到了 web 开发中会遇到的大多数难题，所以你无需重复造轮就能够专心编写你的应用。 </p>
+[Django](https://www.djangoproject.com/)是一个高水平的 python web 框架，它鼓励快速的开发和简洁、务实的设计。它由非常有经验的开发者创建的，考虑到了 web 开发中会遇到的大多数难题，所以你无需重复造轮就能够专心编写你的应用。
 
-<p>Django 遵循“Batteries included”哲学，并且提供了几乎所有大多开发者们想要“开箱即用”的东西。因为它已经包含了所有东西，它作为一个整体一起工作，遵循着一致的设计原则，并且有扩展的、持续更新的文档。它也是非常快、安全和易于扩展的。基于 python，Django 代码非常容易阅读和维护。</p>
+Django 遵循“Batteries included”哲学，并且提供了几乎所有大多开发者们想要“开箱即用”的东西。因为它已经包含了所有东西，它作为一个整体一起工作，遵循着一致的设计原则，并且有扩展的、持续更新的文档。它也是非常快、安全和易于扩展的。基于 python，Django 代码非常容易阅读和维护。
 
-<p>使用 Django 的主流网站（从 Django 官网首页看到的）包括：Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.</p>
+使用 Django 的主流网站（从 Django 官网首页看到的）包括：Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.
 
-<h3 id="Flask_Python">Flask (Python)</h3>
+### Flask (Python)
 
-<p><a href="https://flask.pocoo.org/">Flask</a>是 python 的一个微型框架</p>
+[Flask](https://flask.pocoo.org/)是 python 的一个微型框架
 
-<p>虽然体量很小，Flask 却可以开箱即用地创造出完备网站。它包含一个开发服务器和调试器，并且包含对于 <a href="https://github.com/pallets/jinja">Jinja2</a> 模板的支持，安全的 cookie, <a href="https://en.wikipedia.org/wiki/Unit_testing">unit testing</a>, 和 <a href="https://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a> request dispatching。它有很好的文档和一个活跃的社区。</p>
+虽然体量很小，Flask 却可以开箱即用地创造出完备网站。它包含一个开发服务器和调试器，并且包含对于 [Jinja2](https://github.com/pallets/jinja) 模板的支持，安全的 cookie, [unit testing](https://en.wikipedia.org/wiki/Unit_testing), 和 [RESTful](https://www.restapitutorial.com/lessons/restfulresourcenaming.html) request dispatching。它有很好的文档和一个活跃的社区。
 
-<p>Flask 已经非常火爆了，部分因为那些需要在小型的、资源受限的系统中提供 web 服务的开发者们。(比如，在<a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="https://blogtarkin.com/drone-definitions-learning-the-drone-lingo/">Drone controllers</a>等上面运行服务器)。</p>
+Flask 已经非常火爆了，部分因为那些需要在小型的、资源受限的系统中提供 web 服务的开发者们。(比如，在[Raspberry Pi](https://www.raspberrypi.org/), [Drone controllers](https://blogtarkin.com/drone-definitions-learning-the-drone-lingo/)等上面运行服务器)。
 
-<h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3>
+### Express (Node.js/JavaScript)
 
-<p><a href="https://expressjs.com/">Express</a> 针对 <a href="https://nodejs.org/en/">Node.js</a> 的快速的、unopinioned、灵活的、小型的 web 框架 (node 是用来运行 Javascript 的无浏览器的环境)。它为 web 和移动应用提供强大的系列功能，并且传输有用的 HTTP 工具、方法和<a href="/zh-CN/docs/Glossary/Middleware">middleware</a>.</p>
+[Express](https://expressjs.com/) 针对 [Node.js](https://nodejs.org/en/) 的快速的、unopinioned、灵活的、小型的 web 框架 (node 是用来运行 Javascript 的无浏览器的环境)。它为 web 和移动应用提供强大的系列功能，并且传输有用的 HTTP 工具、方法和[middleware](/zh-CN/docs/Glossary/Middleware).
 
-<p>Express 非常受欢迎，主要因为它减轻了客户端 Javascript 程序到服务器端开发的迁移，并且部分因为它是资源节约型（底层的 node 环境在单线程中使用轻量级多任务处理，而不是为每个 web 请求提供单独的进程）。</p>
+Express 非常受欢迎，主要因为它减轻了客户端 Javascript 程序到服务器端开发的迁移，并且部分因为它是资源节约型（底层的 node 环境在单线程中使用轻量级多任务处理，而不是为每个 web 请求提供单独的进程）。
 
-<p>因为 Express 是一个小型的 web 框架，它几乎不包含任何你可能想要使用的组件（比如，数据库接口和对用户和会话的支持通过独立的库来完成）。有很多独立的、非常好的组件，但是有时候你可能很难决定对于特定目的而言哪一个是最好的！</p>
+因为 Express 是一个小型的 web 框架，它几乎不包含任何你可能想要使用的组件（比如，数据库接口和对用户和会话的支持通过独立的库来完成）。有很多独立的、非常好的组件，但是有时候你可能很难决定对于特定目的而言哪一个是最好的！
 
-<p>很多非常受欢迎的服务器端编程和全栈框架（同时包括服务器端和客户端框架），包括 <a href="https://feathersjs.com/">Feathers</a>、<a href="https://www.itemsapi.com/">ItemsAPI</a>、<a href="https://keystonejs.com/">KeystoneJS</a>、<a href="https://krakenjs.com/">Kraken</a>、<a href="https://loopback.io/">LoopBack</a>、<a href="https://mean.io/">MEAN</a> 和 <a href="https://sailsjs.org/">Sails</a>。</p>
+很多非常受欢迎的服务器端编程和全栈框架（同时包括服务器端和客户端框架），包括 [Feathers](https://feathersjs.com/)、[ItemsAPI](https://www.itemsapi.com/)、[KeystoneJS](https://keystonejs.com/)、[Kraken](https://krakenjs.com/)、[LoopBack](https://loopback.io/)、[MEAN](https://mean.io/) 和 [Sails](https://sailsjs.org/)。
 
-<p>大量的 profile company 使用 Express，包括优步、Accenture、IBM 等（<a href="https://expressjs.com/en/resources/companies-using-express.html">这里</a>是一张列表）。</p>
+大量的 profile company 使用 Express，包括优步、Accenture、IBM 等（[这里](https://expressjs.com/en/resources/companies-using-express.html)是一张列表）。
 
-<h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3>
+### Ruby on Rails (Ruby)
 
-<p><a href="https://rubyonrails.org/">Rails</a> （通常被称作"Ruby on Rails"）是一个为 Ruby 语言编写的 web 框架。</p>
+[Rails](https://rubyonrails.org/) （通常被称作"Ruby on Rails"）是一个为 Ruby 语言编写的 web 框架。
 
-<p>Rails 遵循了和 Django 非常相似的设计哲学。正如 Django 一样，它提供了检索 URLs 的标准机制、从数据库中访问数据、从模板中生成 HTML 页面、格式化数据{{glossary("JSON")}} 或者 {{glossary("XML")}}。同样的，它也鼓励如 DRY（不要重复你自己）的设计模板——尽可能地只写一次代码、MVC（模板 - 视图 - 控制中心）以及很多其他的一些。</p>
+Rails 遵循了和 Django 非常相似的设计哲学。正如 Django 一样，它提供了检索 URLs 的标准机制、从数据库中访问数据、从模板中生成 HTML 页面、格式化数据{{glossary("JSON")}} 或者 {{glossary("XML")}}。同样的，它也鼓励如 DRY（不要重复你自己）的设计模板——尽可能地只写一次代码、MVC（模板 - 视图 - 控制中心）以及很多其他的一些。
 
-<p>当然，还有很多由于因为具体设计决定和语言的特性导致的差异。</p>
+当然，还有很多由于因为具体设计决定和语言的特性导致的差异。
 
-<p>Rails 被用在很多站点中，包括：<a href="https://basecamp.com/">Basecamp</a>、<a href="https://github.com/">GitHub</a>、<a href="https://shopify.com/">Shopify</a>、<a href="https://airbnb.com/">Airbnb</a>、<a href="https://twitch.tv/">Twitch</a>、<a href="https://soundcloud.com/">SoundCloud</a>、<a href="https://hulu.com/">Hulu</a>、<a href="https://zendesk.com/">Zendesk</a>、<a href="https://square.com/">Square</a>、<a href="https://highrisehq.com/">Hi</a></p>
+Rails 被用在很多站点中，包括：[Basecamp](https://basecamp.com/)、[GitHub](https://github.com/)、[Shopify](https://shopify.com/)、[Airbnb](https://airbnb.com/)、[Twitch](https://twitch.tv/)、[SoundCloud](https://soundcloud.com/)、[Hulu](https://hulu.com/)、[Zendesk](https://zendesk.com/)、[Square](https://square.com/)、[Hi](https://highrisehq.com/)
 
-<h3 id="ASP.NET">ASP.NET</h3>
+### ASP.NET
 
-<p><a href="https://www.asp.net/">ASP.NET</a> 是一个由微软开发的开源 Web 框架，用于构建现代的 Web 应用程序和服务。通过 ASP.NET 你能快速创建基于 HTML、CSS、JavaScript 的网站，并且能满足大量用户的需求，还可以很容易地添加诸如 Web API、数据表单、即时通讯的功能。</p>
+[ASP.NET](https://www.asp.net/) 是一个由微软开发的开源 Web 框架，用于构建现代的 Web 应用程序和服务。通过 ASP.NET 你能快速创建基于 HTML、CSS、JavaScript 的网站，并且能满足大量用户的需求，还可以很容易地添加诸如 Web API、数据表单、即时通讯的功能。
 
-<p>ASP.NET 的特点之一就是它建立在 <a href="https://en.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> (CLR 公共语言运行时) 之上。这使得程序员可以使用任何支持的.NET 语言（如 C#、Visual Basic) 来编写 ASP.NET 代码。和很多微软的产品一样，它得益于出色的开发工具（通常是免费的）、活跃的开发者社区，以及详尽的文档。</p>
+ASP.NET 的特点之一就是它建立在 [Common Language Runtime](https://en.wikipedia.org/wiki/Common_Language_Runtime) (CLR 公共语言运行时) 之上。这使得程序员可以使用任何支持的.NET 语言（如 C#、Visual Basic) 来编写 ASP.NET 代码。和很多微软的产品一样，它得益于出色的开发工具（通常是免费的）、活跃的开发者社区，以及详尽的文档。
 
-<p>ASP.NET 被微软、Xbox、Stack Overflow 等采用。</p>
+ASP.NET 被微软、Xbox、Stack Overflow 等采用。
 
-<h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3>
+### Mojolicious (Perl)
 
-<p><a href="https://mojolicious.org/">Mojolicious</a>是为 Perl 语言设计的新一代 Web 框架。 </p>
+[Mojolicious](https://mojolicious.org/)是为 Perl 语言设计的新一代 Web 框架。
 
-<p>在 Web 的早期阶段，许多人都为了一个叫做 <a href="https://metacpan.org/module/CGI">CGI</a> 的优秀的 Perl 库而学过 Perl。它简单到即使你不是太懂这门语言也可以开始使用，而且也强大到足以让你可以用下去。Mojolicious 通过最新的技术实现了这个想法。</p>
+在 Web 的早期阶段，许多人都为了一个叫做 [CGI](https://metacpan.org/module/CGI) 的优秀的 Perl 库而学过 Perl。它简单到即使你不是太懂这门语言也可以开始使用，而且也强大到足以让你可以用下去。Mojolicious 通过最新的技术实现了这个想法。
 
-<p>Mojolicious 提供的一些功能是：</p>
+Mojolicious 提供的一些功能是：
 
-<ul>
- <li><strong>实时 Web 框架</strong>，可轻松将单个文件原型，生成为结构良好的 MVC Web 应用程序；</li>
- <li>RESTful 路由，插件，命令，Perl-ish 模板，内容协商，会话管理，表单验证，测试框架，静态文件服务器，CGI /<a href="https://plackperl.org/">PSGI</a> 检测，一流的 Unicode 支持；</li>
- <li>全栈式 HTTP 和 WebSocket 客户机/服务器架構，由以下技术支持与实作－IPv6，TLS，SNI，IDNA，HTTP / SOCKS5 代理，UNIX 域套接字，Comet（长轮询），保持活动，连接池，超时，cookie，multipart，支持 gzip 压缩</li>
- <li>具有 CSS 选择器支持的 JSON 和 HTML / XML 解析器和生成器；</li>
- <li>非常干净，可移植且面向对象的纯 Perl API，没有任何隐藏的魔法；</li>
- <li>全新的代码基于多年的经验，免费和开源。</li>
-</ul>
+- **实时 Web 框架**，可轻松将单个文件原型，生成为结构良好的 MVC Web 应用程序；
+- RESTful 路由，插件，命令，Perl-ish 模板，内容协商，会话管理，表单验证，测试框架，静态文件服务器，CGI /[PSGI](https://plackperl.org/) 检测，一流的 Unicode 支持；
+- 全栈式 HTTP 和 WebSocket 客户机/服务器架構，由以下技术支持与实作－IPv6，TLS，SNI，IDNA，HTTP / SOCKS5 代理，UNIX 域套接字，Comet（长轮询），保持活动，连接池，超时，cookie，multipart，支持 gzip 压缩
+- 具有 CSS 选择器支持的 JSON 和 HTML / XML 解析器和生成器；
+- 非常干净，可移植且面向对象的纯 Perl API，没有任何隐藏的魔法；
+- 全新的代码基于多年的经验，免费和开源。
 
-<h2 id="总结">总结</h2>
+## 总结
 
-<p>这篇文章展示了 web 框架如何使得编写和维护服务器端代码变得简单。它也提供了对于几个流行的框架的评价，还讨论了选择一个 web 框架的标准。你现在至少应该了解了如何为你的服务器端开发选择一个 web 框架。如果还没有，也不要担心——接下来我们给你一个详细的 Django 和 Express 教程，从而让你有一些使用 web 框架的实战经验。</p>
+这篇文章展示了 web 框架如何使得编写和维护服务器端代码变得简单。它也提供了对于几个流行的框架的评价，还讨论了选择一个 web 框架的标准。你现在至少应该了解了如何为你的服务器端开发选择一个 web 框架。如果还没有，也不要担心——接下来我们给你一个详细的 Django 和 Express 教程，从而让你有一些使用 web 框架的实战经验。
 
-<p>这个模块的下一章节我们会稍微转变一下思路，我们会讨论一下网络安全。</p>
+这个模块的下一章节我们会稍微转变一下思路，我们会讨论一下网络安全。
 
-<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p>
+{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
diff --git a/files/zh-cn/learn/server-side/first_steps/website_security/index.md b/files/zh-cn/learn/server-side/first_steps/website_security/index.md
index 0a52ce18766ea8..2a7928ff9915f7 100644
--- a/files/zh-cn/learn/server-side/first_steps/website_security/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/website_security/index.md
@@ -6,160 +6,143 @@ tags:
   - 站点安全
 translation_of: Learn/Server-side/First_steps/Website_security
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
 
-<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
-
-<p>站点安全需要在网站设计和使用的各个方面保持警惕。这篇入门文章不会让你成为一个网站安全专家，但是可以帮助你理解威胁的来源以及如何保护你的 Web 应用来远离这些常见的攻击。</p>
+站点安全需要在网站设计和使用的各个方面保持警惕。这篇入门文章不会让你成为一个网站安全专家，但是可以帮助你理解威胁的来源以及如何保护你的 Web 应用来远离这些常见的攻击。
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">准备内容：</th>
-   <td>计算机基础知识。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标：</th>
-   <td>
-    <p>了解针对 Web 应用常见的攻击方式和用来减少网站被黑客攻击的风险的方法。</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">准备内容：</th>
+      <td>计算机基础知识。</td>
+    </tr>
+    <tr>
+      <th scope="row">目标：</th>
+      <td>
+        <p>
+          了解针对 Web 应用常见的攻击方式和用来减少网站被黑客攻击的风险的方法。
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="什么是站点安全">什么是站点安全？</h2>
+## 什么是站点安全？
+
+互联网很危险！我们经常听到网站因为拒绝服务攻击或主页显示被修改的（通常是有害的）内容而无法使用。在一些出名的案例中，上百万的密码、邮件地址和信用卡信息被泄露给了公众，导致网站用户面临个人尴尬和财务威胁。
+
+站点安全的目的就是为了防范这些（或者说所有）形式的攻击。更正式点说，站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践。
+
+有效的站点安全需要在对整个站点进行设计：包括 Web 应用编写、Web 服务器的配置、密码创建和更新的策略以及客户端代码编写等过程。尽管这听起来很凶险，好消息是如果你使用的是服务器端的 Web 服务框架，那么多数情况下它默认已经启用了健壮而深思熟虑的措施来防范一些较常见的攻击。其它的攻击手段可以通过站点的 Web 服务器配置来减轻威胁，例如启用 HTTPS. 最后，可以用一些公开可用的漏洞扫描工具来协助发现你是否犯了一些明显的错误。
 
-<p>互联网很危险！我们经常听到网站因为拒绝服务攻击或主页显示被修改的（通常是有害的）内容而无法使用。在一些出名的案例中，上百万的密码、邮件地址和信用卡信息被泄露给了公众，导致网站用户面临个人尴尬和财务威胁。</p>
+文章的剩余部分列举了一些常见威胁的细节以及用来保护站点的一些简单措施。
 
-<p>站点安全的目的就是为了防范这些（或者说所有）形式的攻击。更正式点说，站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践。</p>
+> **备注：** 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。
 
-<p>有效的站点安全需要在对整个站点进行设计：包括 Web 应用编写、Web 服务器的配置、密码创建和更新的策略以及客户端代码编写等过程。尽管这听起来很凶险，好消息是如果你使用的是服务器端的 Web 服务框架，那么多数情况下它默认已经启用了健壮而深思熟虑的措施来防范一些较常见的攻击。其它的攻击手段可以通过站点的 Web 服务器配置来减轻威胁，例如启用 HTTPS. 最后，可以用一些公开可用的漏洞扫描工具来协助发现你是否犯了一些明显的错误。</p>
+## 站点安全威胁
 
-<p>文章的剩余部分列举了一些常见威胁的细节以及用来保护站点的一些简单措施。</p>
+这个部分列举了常见网站攻击手段以及如何减轻它们带来的危害。当你读的时候请注意，这些攻击是如何得手的，当 web 应用相信这些来自浏览器的信息或者不够坚持自己的时候。
 
-<div class="note">
-<p><strong>备注：</strong> 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。</p>
-</div>
+### 跨站脚本 (XSS)
 
-<h2 id="站点安全威胁">站点安全威胁</h2>
+XSS 是一个术语，用来描述一类允许攻击者通过网站将客户端脚本代码注入到其他用户的浏览器中的攻击手段。由于注入到浏览器的代码来自站点，其是可信赖的，因此可以做类似将该用户用于站点认证的 cookie 发送给攻击者的事情。一旦攻击者拿到了这个 cookie，他们就可以登陆到站点，就好像他们就是那个用户，可以做任何那个用户能做的事情。根据站点的不同，这些可能包括访问他们的信用卡信息、查看联系人、更改密码等。
 
-<p>这个部分列举了常见网站攻击手段以及如何减轻它们带来的危害。当你读的时候请注意，这些攻击是如何得手的，当 web 应用相信这些来自浏览器的信息或者不够坚持自己的时候。</p>
+> **备注：** XSS 攻击在历史上较其他类型更为常见。
 
-<h3 id="跨站脚本_XSS">跨站脚本 (XSS)</h3>
+有两种主要的方法可以让站点将注入的脚本返回到浏览器 -- 通常被称做 反射型 和 持久型 XSS 攻击。
 
-<p>XSS 是一个术语，用来描述一类允许攻击者通过网站将客户端脚本代码注入到其他用户的浏览器中的攻击手段。由于注入到浏览器的代码来自站点，其是可信赖的，因此可以做类似将该用户用于站点认证的 cookie 发送给攻击者的事情。一旦攻击者拿到了这个 cookie，他们就可以登陆到站点，就好像他们就是那个用户，可以做任何那个用户能做的事情。根据站点的不同，这些可能包括访问他们的信用卡信息、查看联系人、更改密码等。</p>
+- 反射型 XSS 攻击发生在当传递给服务器的用户数据被立即返回并在浏览器中原样显示的时候 -- 当新页面载入的时候原始用户数据中的任何脚本都会被执行！
 
-<div class="note">
-<p><strong>备注：</strong> XSS 攻击在历史上较其他类型更为常见。</p>
-</div>
+  举个例子，假如有个站点搜索函数，搜索项被当作 URL 参数进行编码，这些搜索项将随搜索结果一同显示。攻击者可以通过构造一个包含恶意脚本的搜索链接作为参数（例如 `http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script> `），然后把链接发送给另一个用户。如果目标用户点击了这个链接，当显示搜索结果时这个脚本就会被执行。正如上述讨论的，这促使攻击者获取了所有需要以目标用户进入站点的信息 -- 可能会购买物品或分享联系人信息。
 
-<p>有两种主要的方法可以让站点将注入的脚本返回到浏览器 -- 通常被称做 反射型 和 持久型 XSS 攻击。</p>
+- 持久型 XSS 攻击：恶意脚本存储在站点中，然后再原样地返回给其他用户，在用户不知情的情况下执行。
 
-<ul>
- <li>反射型 XSS 攻击发生在当传递给服务器的用户数据被立即返回并在浏览器中原样显示的时候 -- 当新页面载入的时候原始用户数据中的任何脚本都会被执行！<br>
-  <br>
-  举个例子，假如有个站点搜索函数，搜索项被当作 URL 参数进行编码，这些搜索项将随搜索结果一同显示。攻击者可以通过构造一个包含恶意脚本的搜索链接作为参数（例如 <code>http://mysite.com?q=beer&lt;script%20src="http://evilsite.com/tricky.js"&gt;&lt;/script&gt; </code>），然后把链接发送给另一个用户。如果目标用户点击了这个链接，当显示搜索结果时这个脚本就会被执行。正如上述讨论的，这促使攻击者获取了所有需要以目标用户进入站点的信息 -- 可能会购买物品或分享联系人信息。<br>
-   </li>
- <li>持久型 XSS 攻击：恶意脚本存储在站点中，然后再原样地返回给其他用户，在用户不知情的情况下执行。<br>
-  <br>
-  举个例子，接收包含未经修改的 HTML 格式评论的论坛可能会存储来自攻击者的恶意脚本。这个脚本会在评论显示的时候执行，然后向攻击者发送访问该用户账户所需的信息。这种攻击类型及其常见而且有效，因为攻击者不需要与受害者有任何直接的接触。<br>
-  <br>
-  尽管 <code>POST</code> 和 <code>GET</code> 方式获取到的数据是 XSS 攻击最常见的攻击来源，任何来自浏览器的数据都可能包含漏洞（包括浏览器渲染过的 Cookie 数据以及用户上传和显示的文件等).</li>
-</ul>
+  举个例子，接收包含未经修改的 HTML 格式评论的论坛可能会存储来自攻击者的恶意脚本。这个脚本会在评论显示的时候执行，然后向攻击者发送访问该用户账户所需的信息。这种攻击类型及其常见而且有效，因为攻击者不需要与受害者有任何直接的接触。
 
-<p> 防范 XSS 攻击的最好方式就是删除或禁用任何可能包含可运行代码指令的标记。对 HTML 来说，这些包括类似 <code>&lt;script&gt;</code>, <code>&lt;object&gt;</code>, <code>&lt;embed&gt;</code>,和 <code>&lt;link&gt; </code>的标签。</p>
+  尽管 `POST` 和 `GET` 方式获取到的数据是 XSS 攻击最常见的攻击来源，任何来自浏览器的数据都可能包含漏洞（包括浏览器渲染过的 Cookie 数据以及用户上传和显示的文件等).
 
-<div>
-<p>修改用户数据使其无法用于运行脚本或其它影响服务器代码执行的过程被称作输入过滤。许多 Web 框架默认情况下都会对来自 HTML 表单的用户数据进行过滤。</p>
-</div>
+防范 XSS 攻击的最好方式就是删除或禁用任何可能包含可运行代码指令的标记。对 HTML 来说，这些包括类似 `<script>`, `<object>`, `<embed>`,和 `<link> `的标签。
 
-<h3 id="SQL_注入">SQL 注入</h3>
+修改用户数据使其无法用于运行脚本或其它影响服务器代码执行的过程被称作输入过滤。许多 Web 框架默认情况下都会对来自 HTML 表单的用户数据进行过滤。
 
-<p>SQL 注入漏洞使得恶意用户能够通过在数据库上执行任意 SQL 代码，从而允许访问、修改或删除数据，而不管该用户的权限如何。成功的注入攻击可能会伪造身份信息、创建拥有管理员权限的身份、访问服务器上的任意数据甚至破坏/修改数据使其变得无法使用。</p>
+### SQL 注入
 
-<p>如果传递给底层 SQL 语句的用户输入可以修改该语句的语义，这种漏洞便是存在的。例如下面一段代码，本来是用来根据 HTML 表单提供的特定名字（<code>userName</code>) 来列出所有的用户：</p>
+SQL 注入漏洞使得恶意用户能够通过在数据库上执行任意 SQL 代码，从而允许访问、修改或删除数据，而不管该用户的权限如何。成功的注入攻击可能会伪造身份信息、创建拥有管理员权限的身份、访问服务器上的任意数据甚至破坏/修改数据使其变得无法使用。
 
-<pre class="brush: sql notranslate">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre>
+如果传递给底层 SQL 语句的用户输入可以修改该语句的语义，这种漏洞便是存在的。例如下面一段代码，本来是用来根据 HTML 表单提供的特定名字（`userName`) 来列出所有的用户：
 
-<p>如果用户输入了真实的名字，这段代码会如预想的运行。然而一个恶意用户可以完全将这个 SQL 语句的行为改变为下面的新语句的行为，只要通过将 <code>userName</code>指定为下列“<strong>粗体</strong>”的文本。修改后的代码创建了一个合法的 SQL 语句，该语句删除了整个<code> users</code> 表，然后从 <code>userinfo</code> 表中获取了所有数据（所有用户的信息都被暴露了）。这是有效的，因为注入的文本的第一部分 (<code>a';</code>) 结束了原来的语句 ( ' 在 SQL 语句中是用来描述字符串常量的) 。</p>
+```sql
+statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+```
 
-<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't'</strong>;
-</pre>
+如果用户输入了真实的名字，这段代码会如预想的运行。然而一个恶意用户可以完全将这个 SQL 语句的行为改变为下面的新语句的行为，只要通过将 `userName`指定为下列“**粗体**”的文本。修改后的代码创建了一个合法的 SQL 语句，该语句删除了整个` users` 表，然后从 `userinfo` 表中获取了所有数据（所有用户的信息都被暴露了）。这是有效的，因为注入的文本的第一部分 (`a';`) 结束了原来的语句 ( ' 在 SQL 语句中是用来描述字符串常量的) 。
 
-<p>避免此种攻击的方法就是确保任何传递给 SQL 查询语句的用户数据都无法更改查询的本来用意。有种方式便是将用户输入中任何在 SQL 语句中有特殊含义的字符进行转义。</p>
+```sql
+SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+```
 
-<div class="note">
-<p><strong>备注：</strong> SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。</p>
-</div>
+避免此种攻击的方法就是确保任何传递给 SQL 查询语句的用户数据都无法更改查询的本来用意。有种方式便是将用户输入中任何在 SQL 语句中有特殊含义的字符进行转义。
 
-<p>在下面的语句中我们对 ' 字符进行了转义。SQL 会将<strong>粗体</strong>显示的整段字符串解释为 name(这个 name 很古怪，但至少是没有危害的！)</p>
+> **备注：** SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \\' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。
 
-<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>;
+在下面的语句中我们对 ' 字符进行了转义。SQL 会将**粗体**显示的整段字符串解释为 name(这个 name 很古怪，但至少是没有危害的！)
 
-</pre>
+```sql
+SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+```
 
-<p>Web 框架通常会为你进行这种转义操作。例如 Django，可以确保任何传递给查询集合 (model 查询) 的用户数据都是已经转义过的。</p>
+Web 框架通常会为你进行这种转义操作。例如 Django，可以确保任何传递给查询集合 (model 查询) 的用户数据都是已经转义过的。
 
-<div class="note">
-<p><strong>备注：</strong> 本章节引用了大量来自 <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia </a>的内容。</p>
-</div>
+> **备注：** 本章节引用了大量来自 [Wikipedia ](https://en.wikipedia.org/wiki/SQL_injection)的内容。
 
-<h3 id="跨站请求伪造_CSRF">跨站请求伪造 (CSRF)</h3>
+### 跨站请求伪造 (CSRF)
 
-<p>CSRF 攻击允许恶意用户在另一个用户不知情的情况下利用其身份信息执行操作。</p>
+CSRF 攻击允许恶意用户在另一个用户不知情的情况下利用其身份信息执行操作。
 
-<p>这种形式的攻击用实例来解释最好。John 是一个恶意用户，他知道某个网站允许已登陆用户使用包含了账户名和数额的 HTTP <code>POST</code>请求来转帐给指定的账户。John 构造了包含他的银行卡信息和某个数额做为隐藏表单项的表单，然后通过 Email 发送给了其它的站点用户（还有一个伪装成到“快速致富”网站的链接的提交按钮）.</p>
+这种形式的攻击用实例来解释最好。John 是一个恶意用户，他知道某个网站允许已登陆用户使用包含了账户名和数额的 HTTP `POST`请求来转帐给指定的账户。John 构造了包含他的银行卡信息和某个数额做为隐藏表单项的表单，然后通过 Email 发送给了其它的站点用户（还有一个伪装成到“快速致富”网站的链接的提交按钮）.
 
-<p>如果某个用户点击了提交按钮，一个 HTTP <code>POST</code> 请求就会发送给服务器，该请求中包含了交易信息以及浏览器中与该站点关联的所有客户端 cookie（将相关联的站点 cookie 信息附加发送是正常的浏览器行为) 。服务器会检查这些 cookie，以判断对应的用户是否已登陆且有权限进行上述交易。</p>
+如果某个用户点击了提交按钮，一个 HTTP `POST` 请求就会发送给服务器，该请求中包含了交易信息以及浏览器中与该站点关联的所有客户端 cookie（将相关联的站点 cookie 信息附加发送是正常的浏览器行为) 。服务器会检查这些 cookie，以判断对应的用户是否已登陆且有权限进行上述交易。
 
-<p>最终的结果就是任何已登陆到站点的用户在点击了提交按钮后都会进行这个交易。John 发财啦！</p>
+最终的结果就是任何已登陆到站点的用户在点击了提交按钮后都会进行这个交易。John 发财啦！
 
-<div class="note">
-<p><strong>备注：</strong> 这里的诀窍是，John 不需要访问那些用户的 cookie(或者说身份信息) -- 用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。</p>
-</div>
+> **备注：** 这里的诀窍是，John 不需要访问那些用户的 cookie(或者说身份信息) -- 用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。
 
-<p>杜绝此类攻击的一种方式是在服务器端要求每个 POST 请求都包含一个用户特定的由站点生成的密钥 ( 这个密钥值可以由服务器在发送用来传输数据的网页表单时提供）。这种方式可以使 John 无法创建自己的表单，因为他必须知道服务器提供给那个用户的密钥值。即使他找出了那个密钥值，并为那个用户创建了表单，他也无法用同样的表单来攻击其他的所有用户。</p>
+杜绝此类攻击的一种方式是在服务器端要求每个 POST 请求都包含一个用户特定的由站点生成的密钥 ( 这个密钥值可以由服务器在发送用来传输数据的网页表单时提供）。这种方式可以使 John 无法创建自己的表单，因为他必须知道服务器提供给那个用户的密钥值。即使他找出了那个密钥值，并为那个用户创建了表单，他也无法用同样的表单来攻击其他的所有用户。
 
-<p>Web 框架通常都会包含一些类似的 CSRF 防范技巧。</p>
+Web 框架通常都会包含一些类似的 CSRF 防范技巧。
 
-<h3 id="其他威胁">其他威胁</h3>
+### 其他威胁
 
-<p>其它常见的攻击/漏洞利用方式包括：</p>
+其它常见的攻击/漏洞利用方式包括：
 
-<ul>
- <li><a href="https://www.owasp.org/index.php/Clickjacking">劫持 </a>. 通过这种方式，恶意用户劫持了对可见上层站点的点击，然后将其转发给下层隐藏的页面。这种技术例如可以用来显示一个合法的银行网站，但是将登陆认证信息截获到由攻击者控制的隐藏的{{htmlelement("iframe")}}中。另外也可以用于促使用户点击可见网页的按钮，实际上却在不知情的情况点击了一个完全不同的按钮。作为防范手段，你的站点可以通过设置适当的 HTTP 头来防止其被嵌入到另一个站点的 iframe 中。</li>
- <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">拒绝服务</a> (DoS). Dos 通常通过使用伪造的请求淹没站点，这样合法用户的访问就会被中断。这些请求可能仅仅是数量巨大或者是单独消耗了大量资源 (如 延缓读，上传大文件等) 。DoS 防护通常通过识别并堵塞“恶意”的网络数据来工作，同时允许合法信息通过。这些防护一般都是在 Web 服务器之前或服务器中进行 (它们并非 web 应用本身所为).</li>
- <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">目录遍历</a>(File and disclosure). 在这种攻击中，攻击者会尝试访问 Web 服务器文件系统中他们本不该访问的部分。这种漏洞会在用户可以传递包含文件系统导航字符的文件名时出现（比如 ../../ ）。解决方法就是在使用前对用户输入进行过滤。</li>
- <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">文件包含</a>. 在此攻击方式中，用户在传递给服务器的数据中指定一个“非故意”的文件来显示或执行。一旦载入成功，这个文件就可以在服务器或客户端（造成 XSS 攻击）执行。解决方式就是在使用前对输入进行过滤。</li>
- <li><a href="https://www.owasp.org/index.php/Command_Injection">命令行注入</a>. 命令行注入攻击允许恶意用户在主机操作系统中执行任意系统命令。解决方法就是在系统调用中使用前对用户输入进行过滤。</li>
-</ul>
+- [劫持 ](https://www.owasp.org/index.php/Clickjacking). 通过这种方式，恶意用户劫持了对可见上层站点的点击，然后将其转发给下层隐藏的页面。这种技术例如可以用来显示一个合法的银行网站，但是将登陆认证信息截获到由攻击者控制的隐藏的{{htmlelement("iframe")}}中。另外也可以用于促使用户点击可见网页的按钮，实际上却在不知情的情况点击了一个完全不同的按钮。作为防范手段，你的站点可以通过设置适当的 HTTP 头来防止其被嵌入到另一个站点的 iframe 中。
+- [拒绝服务](/en-US/docs/Glossary/Distributed_Denial_of_Service) (DoS). Dos 通常通过使用伪造的请求淹没站点，这样合法用户的访问就会被中断。这些请求可能仅仅是数量巨大或者是单独消耗了大量资源 (如 延缓读，上传大文件等) 。DoS 防护通常通过识别并堵塞“恶意”的网络数据来工作，同时允许合法信息通过。这些防护一般都是在 Web 服务器之前或服务器中进行 (它们并非 web 应用本身所为).
+- [目录遍历](https://en.wikipedia.org/wiki/Directory_traversal_attack)(File and disclosure). 在这种攻击中，攻击者会尝试访问 Web 服务器文件系统中他们本不该访问的部分。这种漏洞会在用户可以传递包含文件系统导航字符的文件名时出现（比如 ../../ ）。解决方法就是在使用前对用户输入进行过滤。
+- [文件包含](https://en.wikipedia.org/wiki/File_inclusion_vulnerability). 在此攻击方式中，用户在传递给服务器的数据中指定一个“非故意”的文件来显示或执行。一旦载入成功，这个文件就可以在服务器或客户端（造成 XSS 攻击）执行。解决方式就是在使用前对输入进行过滤。
+- [命令行注入](https://www.owasp.org/index.php/Command_Injection). 命令行注入攻击允许恶意用户在主机操作系统中执行任意系统命令。解决方法就是在系统调用中使用前对用户输入进行过滤。
 
-<p>还有很多的方式。要查看更全面的列表，请访问 <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category:Web security exploits</a> (Wikipedia) 和 <a href="https://www.owasp.org/index.php/Category:Attack">Category:Attack</a> (Open Web Application Security Project).</p>
+还有很多的方式。要查看更全面的列表，请访问 [Category:Web security exploits](https://en.wikipedia.org/wiki/Category:Web_security_exploits) (Wikipedia) 和 [Category:Attack](https://www.owasp.org/index.php/Category:Attack) (Open Web Application Security Project).
 
-<h2 id="一些关键信息">一些关键信息</h2>
+## 一些关键信息
 
-<p>当 Web 应用信任来自浏览器的数据时，上述章节里提到的大多数攻击利用手段才能成功。无论你做什么其它的事情来提升你的网站的安全性能，在将信息展示在浏览器之前、在使用 SQL 语句进行查询之前、在传递给一个操作系统或者文件系统之前，你应该过滤掉所有的用户源信息。</p>
+当 Web 应用信任来自浏览器的数据时，上述章节里提到的大多数攻击利用手段才能成功。无论你做什么其它的事情来提升你的网站的安全性能，在将信息展示在浏览器之前、在使用 SQL 语句进行查询之前、在传递给一个操作系统或者文件系统之前，你应该过滤掉所有的用户源信息。
 
-<div class="warning">
-<p><strong>警告：</strong> 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是<strong>不要相信来自浏览器的数据</strong>。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。</p>
-</div>
+> **警告：** 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是**不要相信来自浏览器的数据**。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。
 
-<p>你可以采取一些简单的步骤：</p>
+你可以采取一些简单的步骤：
 
-<ul>
- <li>采取更加强大的密码管理措施。当密码频繁更换时鼓励更加健壮的密码。采取双因素认证，也就是说除了密码，用户还应该输入另一种认证码（通常是只有唯一一个用户拥有的通过一些物理硬件传输的，比如发送给用户手机的验证短信）。</li>
- <li>将你的服务器配制成 <a href="/en-US/docs/Glossary/https">HTTPS</a> 和 <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS)。HTTPS 会加密你的用户和服务器之间传输的信息。这使得登录认证、cookise、POST 数据及头信息不易被攻击者获得。</li>
- <li>持续追踪那些常见的网络攻击 (the <a href="/en-US/docs/">current OWASP list is here</a>)，先解决最脆弱的部分。</li>
- <li>使用 <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">vulnerability scanning tools</a> 来对你的网站进行一些安全测试 (然后，你的非常受欢迎的网站还可以靠提供赏金来寻找 bug，就像 Mozilla 这样（<a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">like Mozilla does here</a>）。</li>
- <li>只存储和展示你不得不需要的东西。比如，如果你的用户不得不存储一些敏感信息（如信用卡详明），只展示足以让用户识别卡号的几位数字即可，却不足以让黑客复制之后在另一个站点使用。现今最常见的是只展示信用卡卡号后 4 位数字。</li>
-</ul>
+- 采取更加强大的密码管理措施。当密码频繁更换时鼓励更加健壮的密码。采取双因素认证，也就是说除了密码，用户还应该输入另一种认证码（通常是只有唯一一个用户拥有的通过一些物理硬件传输的，比如发送给用户手机的验证短信）。
+- 将你的服务器配制成 [HTTPS](/en-US/docs/Glossary/https) 和 [HTTP Strict Transport Security](/en-US/docs/Web/Security/HTTP_strict_transport_security) (HSTS)。HTTPS 会加密你的用户和服务器之间传输的信息。这使得登录认证、cookise、POST 数据及头信息不易被攻击者获得。
+- 持续追踪那些常见的网络攻击 (the [current OWASP list is here](/en-US/docs/))，先解决最脆弱的部分。
+- 使用 [vulnerability scanning tools](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) 来对你的网站进行一些安全测试 (然后，你的非常受欢迎的网站还可以靠提供赏金来寻找 bug，就像 Mozilla 这样（[like Mozilla does here](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)）。
+- 只存储和展示你不得不需要的东西。比如，如果你的用户不得不存储一些敏感信息（如信用卡详明），只展示足以让用户识别卡号的几位数字即可，却不足以让黑客复制之后在另一个站点使用。现今最常见的是只展示信用卡卡号后 4 位数字。
 
-<p>web 框架可以帮助抵御很多常见的攻击。</p>
+web 框架可以帮助抵御很多常见的攻击。
 
-<h2 id="总结">总结</h2>
+## 总结
 
-<p>这篇文章介绍了有关网络安全的概念和你应该避免的一些常见的攻击。最重要的是，你应该明白一个 web 应用不可以相信任何来自网络服务器的数据！所有的用户数据在展示、使用 SQL 查询或者回应系统之前应该被过滤。</p>
+这篇文章介绍了有关网络安全的概念和你应该避免的一些常见的攻击。最重要的是，你应该明白一个 web 应用不可以相信任何来自网络服务器的数据！所有的用户数据在展示、使用 SQL 查询或者回应系统之前应该被过滤。
 
-<p>这也是<a href="/en-US/docs/Learn/Server-side/First_steps">这个模块</a>的结尾，涵盖了你之前在服务器端编程学到的知识。我们希望你非常享受这个学习基础概念的过程，并且你现在已经准备好选择一个 web 框架开始编程了。</p>
+这也是[这个模块](/en-US/docs/Learn/Server-side/First_steps)的结尾，涵盖了你之前在服务器端编程学到的知识。我们希望你非常享受这个学习基础概念的过程，并且你现在已经准备好选择一个 web 框架开始编程了。
 
-<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
diff --git a/files/zh-cn/learn/server-side/index.md b/files/zh-cn/learn/server-side/index.md
index 1f87083a511616..07dcb750298655 100644
--- a/files/zh-cn/learn/server-side/index.md
+++ b/files/zh-cn/learn/server-side/index.md
@@ -3,39 +3,35 @@ title: 服务器端网页编程
 slug: Learn/Server-side
 translation_of: Learn/Server-side
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p><strong><em>动态网页——服务器端编程 [Dynamic Websites </em></strong>–<em><strong> Server-side programming]</strong></em> 这主题是一系列的模块来演示如何创建动态的网页；可以交付自定义的信息来回应 HTTP 请求的网页。这些模块为服务器端编程提供了一个通用的介绍，以及如何使用 Django (Python) 和 Express (Node.js/JavaScript) 去创建基础应用的具体的入门指导。</p>
+***动态网页——服务器端编程***这主题是一系列的模块来演示如何创建动态的网页；可以交付自定义的信息来回应 HTTP 请求的网页。这些模块为服务器端编程提供了一个通用的介绍，以及如何使用 Django (Python) 和 Express (Node.js/JavaScript) 去创建基础应用的具体的入门指导。
 
-<p>大多数的主流网页使用一类服务器端的技术去动态地显示所要求的不同数据。举个例子，想象一下 Amazon 上有多少可购买的产品，以及 FaceBook 上有多少帖子？用完全不同的静态页面去显示所有的这些内容会彻底地低效，所以取而代之的是这些网站展示的是静态的模板 [templates] (用 <a href="/zh-CN/docs/Learn/HTML">HTML</a>, <a href="/zh-CN/docs/Learn/CSS">CSS</a>, 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 构建)，然后在有需要时动态地在这些模板中更新数据展示，比如说当你想要在 Amazon 上浏览一个不同的产品。</p>
+大多数的主流网页使用一类服务器端的技术去动态地显示所要求的不同数据。举个例子，想象一下 Amazon 上有多少可购买的产品，以及 FaceBook 上有多少帖子？用完全不同的静态页面去显示所有的这些内容会彻底地低效，所以取而代之的是这些网站展示的是静态的模板（用 [HTML](/zh-CN/docs/Learn/HTML), [CSS](/zh-CN/docs/Learn/CSS), 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 构建），然后在有需要时动态地在这些模板中更新数据展示，比如说当你想要在 Amazon 上浏览一个不同的产品。
 
-<p>在现代的网页开发世界里，学习服务器端开发是高度推荐的。</p>
+在现代的网页开发世界里，学习服务器端开发是高度推荐的。
 
-<p><strong>学习路径</strong></p>
+## 学习路径
 
-<p>开始服务器端编程通常比客户端编程要简单，因为动态的页面倾向于执行非常类似的操作（从数据库中获取数据然后显示到一个页面中，确认用户输入的数据以及保存到一个数据库中，检查用户的权限和登陆用户，以及更多），并且它是用能使这些和其他的常见网页服务端操作变简单的网页框架来构建的。</p>
+开始服务器端编程通常比客户端编程要简单，因为动态的页面倾向于执行非常类似的操作（从数据库中获取数据然后显示到一个页面中，确认用户输入的数据以及保存到一个数据库中，检查用户的权限和登陆用户，以及更多），并且它是用能使这些和其他的常见网页服务端操作变简单的网页框架来构建的。
 
-<p>知道一些关于编程概念（或者关于一个特定的编程语言）的基础知识会很实用，但不是必要的。类似的，精通客户端编程也不是必修的，但一些基本知识会帮助你和创建你的客户端的“前端”开发者更融洽地工作。</p>
+知道一些关于编程概念（或者关于一个特定的编程语言）的基础知识会很实用，但不是必要的。类似的，精通客户端编程也不是必修的，但一些基本知识会帮助你和创建你的客户端的“前端”开发者更融洽地工作。
 
-<p>你会需要去理解”网页是如何工作的“。我们推荐你先去阅读以下主题：</p>
+你会需要去理解“网页是如何工作的”。我们推荐你先去阅读以下主题：
 
-<ul>
- <li>什么是一个网页服务器 [<a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a>]</li>
- <li>我需要什么软件去构建一个网页？ [<a href="/zh-CN/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a>]</li>
- <li>你怎样上传文件到一个网页服务器？ [<a href="/zh-CN/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a>]</li>
-</ul>
+- 什么是一个网页服务器 \[[What is a web server](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server)]
+- 我需要什么软件去构建一个网页？ \[[What software do I need to build a website?](/zh-CN/docs/Learn/Common_questions/What_software_do_I_need)]
+- 你怎样上传文件到一个网页服务器？ \[[How do you upload files to a web server?](/zh-CN/docs/Learn/Common_questions/Upload_files_to_a_web_server)]
 
-<p>拥有这些基础理解，你会做好完成在这节中的模块的准备。 </p>
+拥有这些基础理解，你会做好完成在这节中的模块的准备。
 
-<h2 id="模块">模块</h2>
+## 模块
 
-<p>这个主题包含了以下的模块。你应该从第一个模块开始，然后接着到后面的任一模块，后面的模块演示了如何使用两个应用了合适的网页框架的非常流行的服务器端语言。</p>
+这个主题包含了以下的模块。你应该从第一个模块开始，然后接着到后面的任一模块，后面的模块演示了如何使用两个应用了合适的网页框架的非常流行的服务器端语言。
 
-<dl>
- <dt>服务器端编程的第一步 [<a href="/zh-CN/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>]</dt>
- <dd>这个模块提供了关于服务器端网页编程的服务器技术无关的信息 [server-technology-agnostic information]，包括了关于服务器端编程的根本问题的答案——”它是什么“，”它跟客户端编程的区别“，和”为什么它很实用“——以及关于一些流行的服务器端框架的概述和如何为你的网站选择最合适的框架的指南。最后我们提供了一个关于网页服务器安全的介绍性部分。</dd>
- <dt>Django 网页框架 [<a href="/zh-CN/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>]</dt>
- <dd>Django 是一个非常流行以及功能齐全的服务器端网页框架，它是用 Python 编写的。这个模块讲解了为什么 Django 是一个这么好的网页服务器框架，如何设立一个开发环境以及如何使用它来执行常见的任务。</dd>
- <dt>Express 网页框架 [<a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>]</dt>
- <dd>Express 是用 JavaScript 编写并在 node.js 运行时环境中托管的一个流行的网页框架。这个模块讲解了这个框架的一些主要优点，如何设立你的开发环境以及如何执行常见的网页开发和部署的任务。</dd>
-</dl>
+- 服务器端编程的第一步 \[[Server-side website programming first steps](/zh-CN/docs/Learn/Server-side/First_steps)]
+  - : 这个模块提供了关于服务器端网页编程的服务器技术无关的信息 \[server-technology-agnostic information]，包括了关于服务器端编程的根本问题的答案——”它是什么“，”它跟客户端编程的区别“，和”为什么它很实用“——以及关于一些流行的服务器端框架的概述和如何为你的网站选择最合适的框架的指南。最后我们提供了一个关于网页服务器安全的介绍性部分。
+- Django 网页框架 \[[Django Web Framework (Python)](/zh-CN/docs/Learn/Server-side/Django)]
+  - : Django 是一个非常流行以及功能齐全的服务器端网页框架，它是用 Python 编写的。这个模块讲解了为什么 Django 是一个这么好的网页服务器框架，如何设立一个开发环境以及如何使用它来执行常见的任务。
+- Express 网页框架 \[[Express Web Framework (Node.js/JavaScript)](/zh-CN/docs/Learn/Server-side/Express_Nodejs)]
+  - : Express 是用 JavaScript 编写并在 node.js 运行时环境中托管的一个流行的网页框架。这个模块讲解了这个框架的一些主要优点，如何设立你的开发环境以及如何执行常见的网页开发和部署的任务。