diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/learn/common_questions | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/learn/common_questions')
17 files changed, 2305 insertions, 0 deletions
diff --git a/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html new file mode 100644 index 0000000000..5b09080497 --- /dev/null +++ b/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,173 @@ +--- +title: 如何确保你的网站正常运行？ +slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +tags: + - 不完全翻译 + - 部分用词需要改善 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +<div class="summary"> +<p>在这篇文章中我们将重温针对网站的各种故障排除步骤以及解决这些问题的基本措施。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提 :</th> + <td>你需要知道怎么<a href="/en-US/docs/Learn/Upload_files_to_a_web_server">上传文件到web服务器</a>。</td> + </tr> + <tr> + <th scope="row">目的 :</th> + <td>你将学习如何诊断并解决你的网站可能遇到的一些基本问题。</td> + </tr> + </tbody> +</table> + +<p id="Summary">所以你已经发布你的网站了对吗 ? 非常棒！ 但是你确定它能够正常运行吗?</p> + +<p>远程 web 服务器与本地服务器的运行表现通常有很大差别，因此在你的网站上线之时对它进行测试是个不错的主意。你可能会对为数众多的问题表示惊讶：图片无法显示，页面无法加载或者加载缓慢，等等。大多数时候这个问题不严重，只是一个小小的错误或者你的web主机配置问题。 </p> + +<p>让我们看下如何诊断并解决那些问题。</p> + +<h2 id="主动学习">主动学习</h2> + +<p><em>当前没有主动学习的相关页面。<a href="/zh-CN/docs/MDN/Getting_started">请考虑作出你的贡献</a> 。</em></p> + +<h2 id="深入探索">深入探索</h2> + +<h3 id="在你的浏览器中测试">在你的浏览器中测试</h3> + +<p>如果你想知道你的网站是否正常运行，第一件要做的事就是打开你的浏览器并前往你想要测试的页面。</p> + +<h4 id="噢哦，图片去哪里了？"><strong>噢哦，图片去哪里了？</strong></h4> + +<p>让我们看下我们的个人网站， <code>http://demozilla.examplehostingprovider.net/</code>.。没有出现我们预期的图片！</p> + +<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/9643/image-missing.png" style="height: 189px; width: 380px;"></p> + +<p>打开 Firefox 的Network tool (<strong>Tools ➤ Web Developer ➤ Network</strong>) 并重新加载页面：</p> + +<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/9645/error404.png" style="height: 304px; width: 562px;"></p> + +<p>这就是问题所在，位于底部的"404" 。 "404" 意味着 "资源未找到", 也就是我们无法看到图片的原因。</p> + +<h4 id="HTTP_状态">HTTP 状态</h4> + +<p>服务器在收到请求时会以一条状态信息作出响应。以下是最常见的状态：</p> + +<dl> + <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt> + <dd>你请求的资源已递送。</dd> + <dt><strong>301: Moved permanently</strong></dt> + <dd>资源已被移到新的位置。你将无法在浏览器中看到，但了解"301"是件好事，因为搜索引擎利用这条信息更新它们的索引。</dd> + <dt><strong>304: Not modified</strong></dt> + <dd>文档在上次请求后没有再改动，因此你的浏览器可以从缓存中将其显示，从而缩短响应时间并提高带宽使用效率。</dd> + <dt><strong>403: Forbidden</strong></dt> + <dd>禁止向你显示资源。这通常与配置错误有关 (e.g. 你的托管服务提供商忘记授予你对目录的访问权限).</dd> + <dt><strong>404: Not found</strong></dt> + <dd>不言自明。我们接下来将会讨论如何解决这个问题。</dd> + <dt><strong>500: Internal server error</strong></dt> + <dd>服务器出了点问题。比如，也许是服务器端语言 ({{Glossary("PHP")}}, .Net, etc.) 停止工作，或者web服务器本身出现配置问题。通常，最好的方法是诉诸你的托管服务提供商的支持团队。</dd> + <dt><strong>503: Service unavailable</strong></dt> + <dd>通常是由于短期的系统过载造成的。服务器有一些问题，稍后重试。</dd> +</dl> + +<ul> +</ul> + +<p>作为初学者检查我们的 (简易) 网站，我们通常会处理200,304,403和404。</p> + +<h4 id="修复_404">修复 404</h4> + +<p>所以是哪里出错了？</p> + +<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/9649/demozilla-images-list.png" style="height: 71px; width: 407px;"></p> + +<p>乍一看，我们请求的图片似乎在正确的位置... 但是网络工具却出现了"404"的报错.。事实证明我们的HTML代码中出现了错别字： <code>unicorn_pics.png</code> 而不是<code>unicorn_pic.png</code>.。所以，通过在你的代码编辑器中改变图片的<code>src</code> 属性来纠正错别字。</p> + +<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/9651/code-correct.png" style="height: 125px; width: 775px;"></p> + +<p>保存, <a href="/en-US/Learn/Upload_files_to_a_web_server">推送到服务器</a>，并在你的浏览器中重现加载网页。</p> + +<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/9655/image-corrected.png" style="height: 554px; width: 565px;"></p> + +<p>搞定！ 让我们再看一遍 {{Glossary("HTTP")}} 状态：</p> + +<ul> + <li> <code>/</code> 和 <code>unicorn_pic.png</code> 的状态码为<strong>200</strong>，意味着我们成功加载了页面和图片。</li> + <li> <code>basic.css</code> 的状态码为<strong>304</strong>，意味着这个文件在上次请求后就没有再变动，因此浏览器可以在其缓存中使用该文件，而不是接收新的副本。</li> +</ul> + +<p>因此，我们修复了错误并且沿途了解了一些HTTP状态！</p> + +<h3 id="频繁的错误">频繁的错误</h3> + +<p>我们发现的最频繁的错误是这些：</p> + +<h4 id="地址中的错别字">地址中的错别字</h4> + +<p>我们想要输入 <code>http://demozilla.examplehostingprovider.net/</code> 但输入得太快而遗漏了一个 “l”：</p> + +<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/9657/cannot-find-server.png" style="height: 425px; width: 908px;"></p> + +<p>这个地址显然无法找到。</p> + +<h4 id="404_错误">404 错误</h4> + +<p>很多时候错误只是由一个错别字导致的，但有时候也许是你忘记上传资源或者在上传资源时网络连接中断。首先检查文件路径的拼写和准确性，如果仍然存在问题，重新上传你的文件。这也许可以解决问题。</p> + +<h4 id="JavaScript_错误">JavaScript 错误</h4> + +<p>有人 (也许是你) 给页面添加了脚本并且出了差错。页面仍然可以加载，但是你会觉得有点问题。</p> + +<p>打开控制台 (<strong>Tools ➤ Web developer ➤ Web Console</strong>) 并重新加载页面：</p> + +<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/9659/js-error.png" style="height: 511px; width: 523px;"></p> + +<p>在这个例子中，我们清楚（相当清楚）错误所在，可以马上进行修复(我们将在 <a href="/en-US/Learn/JavaScript">另一个系列 </a>的文章中提到JavaScript )。</p> + +<h3 id="更多需要检查的地方">更多需要检查的地方</h3> + +<p>我们列举了一些简单的方法来检查你的网站是否运行正常，以及你可能遇到的最常见的错误和修复方法。 你还可以测试你的页面是否符合这些标准：</p> + +<h4 id="性能如何？">性能如何？</h4> + +<p>页面加载足够快吗？ 类似 <a href="http://www.webpagetest.org/">WebPagetest.org</a> 的网站或者类似 <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> 的浏览器附加组件可以告诉你一些有趣的事情。</p> + +<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p> + +<p>等级从 A 到 F。我们的页面较小，符合大部分的标准。但是我们可以注意到如果使用 {{Glossary("CDN")}} 将会更好。 当我们只提供一张图片的时候，这无关紧要，但对于提供数千张图片的高带宽网站来说，这一点至关重要。</p> + +<h4 id="服务器响应是否足够快？">服务器响应是否足够快？</h4> + +<p><code>ping</code> 是一个很管用的 shell 工具，用以测试你提供的域名并告诉你服务器是否响应：</p> + +<pre class="notranslate">$ ping mozilla.org +PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms +64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms +64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms +64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms +^C +--- mozilla.org ping statistics --- +4 packets transmitted, 4 packets received, 0.0% packet loss +round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</pre> + +<p>记住一个方便的键盘快捷键：<strong>Ctrl+C </strong>。 Ctrl+C 给运行发送了一个 “中断” 信号并令其中止。如果你不中止运行, <code>ping</code> 将会不断地 ping 服务器。</p> + +<h3 id="一份简易清单">一份简易清单</h3> + +<ul> + <li>检查 404</li> + <li>确保所有的网页都按预期运行</li> + <li>在多个浏览器中查看你的网站，以确保它的运行表现一致</li> +</ul> + +<h2 id="下一步">下一步</h2> + +<p>恭喜，你的网站已经成功运作，任何人都可以访问。这是一项巨大的成就。现在，你可以开始深入探索各种主题。</p> + +<ul> + <li>来自世界各地的人会进入你的网站，你应该考虑 <a href="/en-US/docs/Learn/What_is_accessibility">让每个人都可以访问网站</a> 。</li> + <li>你的网站是否设计的得太粗糙了？是时候<a href="/zh-CN/docs/Learn/CSS/Using_CSS_in_a_web_page">了解更多 CSS</a> 了。</li> +</ul> diff --git a/files/zh-cn/learn/common_questions/common_web_layouts/index.html b/files/zh-cn/learn/common_questions/common_web_layouts/index.html new file mode 100644 index 0000000000..3975d387df --- /dev/null +++ b/files/zh-cn/learn/common_questions/common_web_layouts/index.html @@ -0,0 +1,114 @@ +--- +title: 常见web布局都包含什么？ +slug: Learn/Common_questions/Common_web_layouts +tags: + - CSS + - HTML + - “自主学习”待完善 + - 初学者 + - 设计 +translation_of: Learn/Common_questions/Common_web_layouts +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<div class="summary"> +<p>当你设计自己站点时，最好已经对常见的web页面布局所包含的内容有过构思。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">知识储备：</th> + <td>请先保证你已经考虑过 <a href="/en-US/Learn/Thinking_before_coding">《我该怎样开始设计我的网站？》</a> 所说的内容。</td> + </tr> + <tr> + <th scope="row">学习目标：</th> + <td>了解站点内容的布局规范，以及为什么这么放置。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>从头开始制作页面的时候，页面空白一片以至于会让人感到没有方向感。而同时如果你没有太多经验，这也许会让你感到不知所措。这也是为什么我们要讨论web设计的原因：我们有25年以上的经验并且会告诉你很多关于设计站点的常用规范。</p> + +<p>几乎所有的主流站点 -- 包含如今的新焦点：移动web -- 都由以下几点构成：</p> + +<dl> + <dt>”头部“</dt> + <dd>可以在每个页面的顶部看到。包含所有页面的相关信息（包括站点名字或logo）以及一个便于使用的导航系统。</dd> + <dt>“主要内容”</dt> + <dd>最大的区域，展示了当前页面的内容。</dd> + <dt>“边缘内容”（Stuff）</dt> + <dd>包括：1、主要内容的补充部分；2、信息分享列表；3、单选导航栏。 实际上，任何可以在当前页面展示又没有写入主要内容的部分都是可以划分在这的。</dd> + <dt>“页脚”</dt> + <dd>可以在每个页面的底部看到。和头部一样，包含一些对于整个页面而言不是很重要的信息，例如法律声明和联系信息。</dd> +</dl> + +<p>这些要素在所有组成元素中是相当普遍的，但是他们可以以多种形式被展示。下面是一些例子 （1 “头部”， 2 ”页脚“； A ”主要内容“； B1, B2 ”边缘内容”）：</p> + +<p><strong>“单列”布局。</strong> 这种布局在手机浏览时显得极为重要，因为这样肯定不会导致混乱。</p> + +<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p> + +<p><strong>”双列”布局。</strong> 一般针对于平板，因为屏幕尺寸适中。</p> + +<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p> + +<p><strong>“三列”布局。</strong>只适合大屏幕的桌面程序（即使很多时候用户更倾向于用小窗口浏览）。</p> + +<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p> + +<p>当你把上述布局灵活运用到一块的时候会非常赏心悦目：</p> + +<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p> + +<p>看完上述的例子，想必你在自己布局时会更加得心应手。你可能注意到了，“头部”和”页脚”永远是固定在顶部和底部；”主要内容”占有最大的空间以突出作用。</p> + +<p>面对复杂的设计和非常规情况，你可以利用很多设计规范。在别的文章中，我们会介绍根据屏幕尺寸、或者根据不同页面来动态变化的布局方式。但是现在，还是都保持统一为好。</p> + +<h2 id="深入学习">深入学习</h2> + +<p><em>目前还没有可以深入学习的文章。 <a href="/en-US/docs/MDN/Getting_started">何不考虑发一篇?</a>.</em></p> + +<h2 id="深入了解">深入了解</h2> + +<p>让我们开始学习一些知名站点的具体例子。</p> + +<h3 id="“单列”布局">“单列”布局</h3> + +<p><strong><a href="http://www.invisionapp.com/" rel="external">Invision application</a></strong>. 典型的“单列”布局，把所有信息线性排列在一个页面。</p> + +<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p> + +<p>相当直接。但是请记住，如果很多人从桌面软件浏览你的站点，那么一定得让”主要内容”具有较高的可用/读性。</p> + +<h3 id="“双列”布局">“双列”布局</h3> + +<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, 简单的博客布局。博客一般都是“两列“：一列偏宽用来承载主要内容，一列偏窄用来承载“边缘内容”（如小部件，二级导航栏，广告等）。</p> + +<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;"> <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p> + +<p>在这个例子中，B1在“头部”正下方，和“主要内容”有关联，但是”主要内容”去掉B1也能够表达清楚内容。这时候，你把它归类到“主要内容“或者“边缘内容”都可以。但是要注意，如果有一块区域，位于头部正下方，那么这块区域必须是“主要内容“或者和”主要内容”有关联。</p> + +<h3 id="这有个陷阱">这有个陷阱</h3> + +<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. 这里有点奇怪，以基本布局概念来看，好像是“三列”布局...</p> + +<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p> + +<p>...但是并不是的。 B1 and B2 浮在“主要内容”上面。记住“浮”这个概念 -- 当你学习CSS术语的时候你会不再陌生。</p> + +<p>为什么你会认为它是一个“三列”布局? 因为右上角的图片是L形的，又因为B1区域看起来像是用列来支持“主要内容”的切换功能，还因为logo里的“M”和“I”恰好看起来和B1组成了一部分。</p> + +<p>这是经典布局支持设计创新的一个很好的例子。简单的布局易于实现，但又不会缩减你自己的创造空间。</p> + +<h3 id="更狡猾的布局">更狡猾的布局</h3> + +<p><strong>The <a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opera de Paris</a>.</strong></p> + +<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p> + +<p>这是基于“两列”布局的，但是你会发现这里有很多转角以至于布局看起来零零碎碎的。尤其是”头部”盖在了”主要内容”的图片上面。“头部“的曲线和”主要内容”的图片的曲线是有关联的，这样子会让人觉得“头部”和“主要内容”浑然一体，虽然我们都知道在技术上它们是完全不同的两个事物。这个示例看起来要比MICA示例更加复杂，但是实际上更好实现。</p> + +<p>如你所见，你可以用最基本的布局搭建出工艺卓绝的站点。你可以重新打开你最喜欢的站点，然后看看里面的“头部“，“页脚“，“主要内容“和“边缘内容”。这会更好的激发你的设计灵感并且对选择更符合设计目标的站点会有冥冥中的指导作用。</p> diff --git a/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html new file mode 100644 index 0000000000..997899fc6e --- /dev/null +++ b/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html @@ -0,0 +1,64 @@ +--- +title: 如何在Google App Engine上托管你的网站? +slug: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine +translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine +--- +<p class="summary"><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud">Google App Engine</a> 是一个功能强大的平台，它能让你在谷歌的infrastructure 上构建并运行应用，你可以在这上面：从头构建多层WEB应用，或建立一个静态网站。</p> + +<p class="summary">接下来是手把手入门的教程：</p> + +<h2 id="创建一个谷歌云平台项目">创建一个谷歌云平台项目</h2> + +<p>为了在你自己的网站或者app使用谷歌的工具, 你需要在谷歌云平台上创建一个新项目( a new project ) 当然，需要谷歌账号。</p> + +<ol> + <li>打开谷歌云平台控制台（Google Cloud Platform Console），再打开 <a href="https://console.cloud.google.com/projectselector/appengine">App Engine dashboard</a> 页面 并点击 <em>Create</em> .</li> + <li>如果从未创建过项目(project)，会提示你是否选择接收邮箱升级，并需要同意团队服务条款才能继续。</li> + <li>键入项目名，并编辑项目ID(请记下你的项目ID) <br> + 本教程的示例值: + <ul> + <li>Project Name: <em>GAE Sample Site</em></li> + <li>Project ID: <em>gaesamplesite</em></li> + </ul> + </li> + <li><em>点击Create</em> 以创建工程</li> +</ol> + +<h2 id="创建一个应用(application)">创建一个应用(application)</h2> + +<p>每个云平台项目都可以包含一个APP引擎应用，所以我们来为自己的项目准备一个app</p> + +<ol> + <li>我们需要一个样例应用来发布. 如果你还没有, 请下载 <a href="http://gaesamplesite.appspot.com/downloads.html">sample app</a> 并解压.</li> + <li>看一下这个样例应用的结构—<code>website</code>文件夹包括你的网站内<code>容，app.yaml</code>文件是你的应用配置文件 + <ul> + <li>你的网站内容必须放在<code>website</code>文件夹下，并且入口文件必须取名为<code>index.html</code>，其他部分可以自行定义。</li> + <li> <code>app.yaml</code> 文件是一个配置文件，它高速应用引擎怎么映射UR到你的静态文件，你不需要编辑它。</li> + </ul> + </li> +</ol> + +<h2 id="发布你的应用">发布你的应用</h2> + +<p>现在我们已经制作了我们的项目并将示例应用程序文件收集在一起，下面发布应用程序。</p> + +<ol> + <li>打开<a href="https://console.cloud.google.com/cloudshell/editor">Google Cloud Shell</a>.</li> + <li>把 <code>sample-app</code>目录拖拽到代码编辑器左边</li> + <li>在命令行中键入如下命令选择你的项目: + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud config set project <em>gaesamplesite</em></pre> + </li> + <li>键入如下命令 进入到 app的 目录: + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">cd <em>sample-app</em></pre> + </li> + <li>你现在可以部署应用程序，即将应用程序上传到App Engine： + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud app deploy</pre> + </li> + <li>输入一个数字以选择你希望应用程序所在的区域。.</li> + <li>键入 <code>Y</code> 确认.</li> + <li>现在你可以在浏览器中访问你的站点了，比如对于项目ID 是<em>gaesamplesite的网站</em>, go输入 <a href="http://gaesamplesite.appspot.com/"><em>gaesamplesite</em>.appspot.com</a>访问。</li> +</ol> + +<h2 id="更多信息">更多信息</h2> + +<p>请访问<a href="https://cloud.google.com/appengine/docs/">Google App Engine Documentation</a>.</p> diff --git a/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html b/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..46c72aee11 --- /dev/null +++ b/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html @@ -0,0 +1,157 @@ +--- +title: 在互联网上做一件事要花费多少？ +slug: Learn/Common_questions/How_much_does_it_cost +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +<div class="summary"> +<p>参与互联网（运营网站）并不像看起来那么便宜。本文中我们将讨论你所需的花费及理由。 </p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">准备工作：</th> + <td> + <p>你已经了解<a href="https://developer.mozilla.org/en-US/Learn/What_software_do_I_need">你需要什么软件</a>，以及<a href="https://developer.mozilla.org/en-US/Learn/page_vs_site_vs_server_vs_search_engine">网页、网站等术语</a>之间的差异， 以及<a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">域名是什么</a> 。</p> + </td> + </tr> + <tr> + <th scope="row">目的：</th> + <td>评估创建一个网站的完整流程，计算每个步骤的花费。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>经营一个网站可以一毛不拔，也可以倾家荡产。 本文中我们将讨论各种事项的花费，以及如何将钱花得物有所值（或者白嫖）。</p> + +<h2 id="软件">软件</h2> + +<h3 id="文本编辑器">文本编辑器</h3> + +<p>你八成已经拥有一个文本编辑器，例如 Windows 上的记事本、Linux 上的 Gedit 或是 Mac 上的 TextEdit。但如果选择一个拥有语法高亮、语法检查和代码组织功能的编辑器，就能更得心应手地写代码。</p> + +<p>有很多免费的编辑器，例如 <a href="https://atom.io/">Atom</a>、<a href="http://brackets.io/">Brackets</a>、<a href="http://bluefish.openoffice.nl/">Bluefish</a>、<a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>、<a href="http://eclipse.org/">Eclipse</a>、<a href="https://netbeans.org/">Netbeans</a> 和 <a href="https://code.visualstudio.com/">Visual Studio Code</a>。<a href="http://www.sublimetext.com/">Sublime Text</a> 之类的编辑器可以无限制试用，但最好还是付费购买。<a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a> 之类的编辑器则需花费几十至两百美元不等，取决于你购买的种类。<a href="http://www.visualstudio.com/">Microsoft Visual Studio</a> 之类的编辑器则可能需要花费数百至数千美元，不过 Visual Studio Express 对独立开发者和开源项目免费。付费编辑器通常都有试用版。</p> + +<p>开始学习时，我们建议你尝试几个不同的编辑器，找到最适合自己的。 如果你只写简单的 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("Javascript")}}，就挑个简易的编辑器。</p> + +<p>价格并不一定能体现编辑器的品质和实用程度。试过才知道满不满足需求。比如说 Sublime Text 很便宜，但有很多免费插件可供极大程度的扩展功能。</p> + +<h3 id="图像编辑器">图像编辑器</h3> + +<p>你的系统可能已经自带了一个简单的图像编辑器或者图像浏览器（Windows上的画图，Ubuntu上的 Eye of Gnome, Mac上的Preview）。但是这些程序功能都很有限然后很快，你就会需要一个更强大的编辑器来添加图层，效果和分组。</p> + +<p>编辑器的价格可以是免费的（GIMP），还有中等价位（PaintShop Pro，少于100美元）或几百美元（Adobe Photoshop）。</p> + +<p>你可以使用其中的任何一款。 它们都具有大致相同的功能（尽管其中一些功能非常完整，你可能永远不会使用所提供的每个功能)。无论如何，如果在某些时候你需要与其他设计师交流正在进行的项目，那么你应该首先了解他们正在使用的工具。编辑器可以将完成的项目导出为标准文件格式，但每个编辑器都可以按照专门的项目格式保存正在进行的项目。</p> + +<h3 id="媒体编辑器">媒体编辑器</h3> + +<p>如果你想在你的网站中添加音频或者视频，那么您可以嵌入在线服务（例如YouTube，Vimeo或Dailymotion）或包含您自己的视频（请参阅下面的带宽费用)。</p> + +<p>对于音频文件，你可以找到免费软件（Audacity，Wavosaur）或支付高达几百美元（Sony Sound Forge，Adobe Audition）。视频编辑软件同样可以免费使用（PiTiVi，OpenShot for Linux，iMovie for Mac），少于100美元（Adobe Premiere Elements）或几百美元（Adobe Premiere Pro，Avid Media Composer，Final Cut Pro）。 你使用数码相机购买的软件可能已经涵盖了你的所有需求。</p> + +<h3 id="发布工具">发布工具</h3> + +<p>你还需要一种将文件从本地硬盘上传到远程Web服务器的方法。 为了做到这一点，你必须使用FTP客户端。</p> + +<p>每个系统都包含一个FTP客户端作为文件管理器的一部分。 Windows资源管理器，Nautilus（一个常见的Linux文件管理器）和Mac Finder都包含该功能。 然而，人们更经常选择专门的FTP客户端，可以存储密码并且并行显示本地和远程目录。</p> + +<p>如果你需要安装一个FTP客户端，这里有很多免费的选择：例如， 可以全平台使用的 <a href="https://filezilla-project.org/">FileZilla</a> , windows上使用的<a href="http://winscp.net/">WinSCP</a> , Mac和 windows上都能使用的 <a href="https://cyberduck.io/">Cyberduck</a> ，还有很多)。</p> + +<div class="note"> +<p>注意：还有其他方法可以在远程服务器上发布内容，如rsync和git，但并不像FTP那样简单，我们不会在这里讨论。</p> +</div> + +<h2 id="浏览器">浏览器</h2> + +<p>你已经拥有了一个浏览器或者可以免费下载一个。如果需要的话， 在这下载<a href="http://www.firefox.com.cn/">火狐浏览器</a>或者 <a href="https://www.google.cn/chrome/index.html">Google Chrome浏览器</a>。</p> + +<h2 id="网络访问">网络访问</h2> + +<h3 id="电脑_调制解调器">电脑 / 调制解调器</h3> + +<p>你需要一台电脑。费用根据你的预算和你住的地方而有很大的不同。 要发布准系统网站，你只需要一台能够启动编辑器和浏览器的基本计算机，因此整个的价格相当低。</p> + +<p>如果你要做更深入的设计，编辑图像，或是生产音频和视频文件，当然需要更高级的电脑。</p> + +<p>你要上传内容到远程服务器上（见下面的hosting），所以你需要一个调制解调器。更多时候你的网络服务提供商以每个月一些钱出租互联网连接给你。</p> + +<h3 id="互联网提供商连接">互联网提供商连接</h3> + +<p>确保你有足够的带宽</p> + +<ul> + <li>低带宽连接或许能够支持一个“简单的”网站（合理大小的图像，文本，一些层叠样式表CSS和JavaScript）。这些将会花费数十美元，包括租赁调制解调器。</li> + <li>另一方面，你可能需要更高级的数字用户线路，电缆，光纤通道如果你想要一个带有数以百计文件的大型网站或者你想要从ide网页服务器传输大量的音/视频。这可能花费的和低带宽连接一样，或者每个月几百美元用以专业使用。</li> +</ul> + +<h2 id="主机">主机</h2> + +<h3 id="理解带宽">理解带宽</h3> + +<p>主机供应商通过你网站消耗的带宽来收费。这些取决于在一个给定的时间内多少人或机器人访问你的内容、你的内容占用多少的服务空间（这就解释了为什么人们通常把他们的视频存储在比如Youtube、Dailymotion和Vimeo等专用服务上）。实际上，你的供应商可能 有个计划规定某个实例每天至多有几千访问的可用带宽用量（不同的主机供应商的规定通常都不同）。根据经验，考虑那些月付十到五十美元的个人主机。</p> + +<div class="note"> +<p>注意：从来没有“无限”带宽这样的东西。如果你真的需要消耗大量的带宽，等着付一大把的票子吧。</p> +</div> + +<h3 id="域名">域名</h3> + +<p>您的域名必须由域名提供商（注册商）购买。 您的托管服务提供商也可能是注册服务商（<a href="https://www.1and1.com/">1＆1</a>，例如 <a href="https://www.gandi.net/?lang=en">甘地</a> 同时是注册商和托管服务提供商）。 域名通常每年花费5-15美元。 费用取决于：</p> + +<ul> + <li>地方合同（一些国家顶级域名的成本非常高，因为不同的国家设定了不同的价格）</li> + <li>与域名相关的服务：一些注册商通过将您的邮政地址和电子邮件地址隐藏在他们自己的地址后面来提供垃圾邮件保护（相应地，邮政地址可以提供给注册服务商，邮件地址可以隐藏在属于注册服务商的别名下）。</li> +</ul> + +<h3 id="自己动手托管与“打包”托管">自己动手托管与“打包”托管</h3> + +<p>当你想发布一个网站时，你可以自己做所有事情：建立一个数据库（如果需要的话），建立一个内容管理系统或{{Glossary("CMS")}}（如 <a href="http://wordpress.org/">Wordpress</a> ， <a href="http://dotclear.org/">Dotclear</a> ，<a href="http://www.spip.net/en_rubrique25.html">spip</a> ， 等等），上传预制的模板或你自己的模板。</p> + +<p>您还可以依赖您的托管服务提供商已设置的环境，通常每月支付十美元至十五美元的费用，或者直接通过预先打包的CMS（例如 <a href="http://wordpress.com/">Wordpress</a> ，<a href="https://www.tumblr.com/">Tumblr</a>，<a href="https://www.blogger.com/">Blogger</a> ）直接订阅专用托管服务。 在后一种情况下，您不需要支付任何费用，但是您对模板的控制可能较少。</p> + +<h3 id="免费托管与付费托管对比">免费托管与付费托管对比</h3> + +<p>您可能会问，为什么在有这么多免费服务时，我还应该去支付我的托管费用？</p> + +<ol> + <li>当你付费，你有更多的自由。 你的网站是你的，你可以从一个主机提供商无缝迁移到下一个。</li> + <li>免费托管服务提供商可能会将您的内容广告添加到您的内容中，而不受您的控制</li> +</ol> + +<p>有些人选择了一种混合的方式：例如，将他们的主博客放在带有适当域名的付费主机上，并使用另一种免费服务来托管自发的，不太具有战略性的内容。</p> + +<h2 id="专业网站机构和托管">专业网站机构和托管</h2> + +<p>如果你想拥有一个专业的网站，你很可能会要求网络公司为你做这件事。</p> + +<p>这里的成本取决于多种因素，例如：</p> + +<ul> + <li>这是一个有几页文字的简单网站吗？ 还是一个复杂的，长达千页的网站？</li> + <li>你想定期更新吗？ 或者它将成为一个静态网站？</li> + <li>网站必须连接到公司的IT部门以收集内容（比如内部数据）吗？</li> + <li>你是否想要一些在当下的闪亮的新功能？ （例如：在撰写本文时，页面客户端具有复杂视差）</li> + <li>您是否需要该机构来考虑用户信息或解决复杂的<code>{{Glossary("UX")}}</code>问题（例如，创建一个吸引用户的策略或者进行一些A 或 B测试以在几个想法中选择最佳解决方案）？</li> +</ul> + +<p>另外，为了托管的目的，</p> + +<ul> + <li>你是否想要冗余服务器，以防服务器故障吗？</li> + <li>95％的可靠性已经足够了，还是需要专业的全天候服务？</li> + <li>你需要高性能，高响应速度的专用服务器，还是只可以应付慢速共享的机器？</li> +</ul> + +<p>根据您对这些问题的选择，您的网站可能会花费数千到数十万美元。</p> + +<h2 id="下一步">下一步</h2> + +<p>现在您已经了解了您的网站可能会花费哪些方面的资金，现在该开始设计该网站，并<a href="/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server">设置您的工作环境</a>了。</p> + +<ul> + <li>阅读<a href="/zh-CN/docs/Learn/Common_questions/实用文本编辑器">如何选择和安装文本编辑器</a> 。</li> + <li>如果您更专注于设计，请查看<a href="/zh-CN/Learn/Anatomy_of_a_web_page">网页的解剖结构</a> 。</li> +</ul> diff --git a/files/zh-cn/learn/common_questions/index.html b/files/zh-cn/learn/common_questions/index.html new file mode 100644 index 0000000000..fed77b5cb7 --- /dev/null +++ b/files/zh-cn/learn/common_questions/index.html @@ -0,0 +1,128 @@ +--- +title: 常见问题 +slug: Learn/Common_questions +tags: + - 基础知识 + - 学习 + - 网络 + - 网络工程 + - 脚本语言 +translation_of: Learn/Common_questions +--- +<p class="summary">学习区域的这一部分旨在为可能出现的常见问题提供答案，这些问题不一定是结构化的核心学习途径的一部分 (例如：<a href="/zh-CN/docs/learn/HTML">HTML</a> 或 <a href="/zh-CN/docs/Learn/CSS">CSS</a> 的学习文章。) 这些文章旨在自己工作。</p> + +<h2 id="Web怎样工作">Web怎样工作</h2> + +<p>本部分涵盖Web机制 - 与Web生态系统的一般知识及其工作原理相关的问题。</p> + +<dl> + <dt> + <h3 id="互联网是怎么工作的？"><a href="/zh-CN/docs/learn/How_the_Internet_works">互联网是怎么工作的？</a></h3> + </dt> + <dd>互联网是Web的基石，是让Web变得可能的基础设施。本质上来说，互联网是一个大型的相互交流的计算机网络。本文讨论了它在底层是如何工作的。</dd> + <dt> + <h3 id="网页，网站，网络服务器和搜索引擎的区别是什么？"><a href="/zh-CN/docs/learn/常见问题/网页，网站，网页服务器和搜索引擎的区别是什么？">网页，网站，网络服务器和搜索引擎的区别是什么？</a></h3> + </dt> + <dd>本文中我们讲述了各种和Web相关的概念：网页，网站，网络服务器，以及搜索引擎。这些概念常常被网络新手混淆，或者被误用。让我们看看它们到底代指的是什么吧！</dd> + <dt> + <h3 id="什么是URL？"><a href="https://developer.mozilla.org/zh-CN/docs/learn/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/What_is_a_URL">什么是URL？</a></h3> + </dt> + <dd>利用 {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL 网络上的关键概念之一。 它现在是 {{Glossary("Browser","browsers")}} 用来在网络上检索任何已经发布的资源的主要机制。</dd> + <dt> + <h3 id="什么是域名？"><a href="/zh-CN/docs/learn/常见问题/What_is_a_domain_name">什么是域名？</a></h3> + </dt> + <dd>域名是互联网基础架构的关键部分。它们为互联网上任何可用的网络服务器提供了人类可读的地址。</dd> + <dt> + <h3 id="什么是网络服务器？"><a href="/zh-CN/docs/learn/常见问题/What_is_a_web_server">什么是网络服务器？</a></h3> + </dt> + <dd>术语“Web服务器”可以指在Web上向客户端提供网站的硬件或软件，或者两者一起工作。在本文中，我们将讨论Web服务器如何工作，以及为什么它们是重要的。</dd> + <dt> + <h3 id="什么是超链接？"><a href="/zh-CN/docs/learn/常见问题/What_are_hyperlinks">什么是超链接？</a></h3> + </dt> + <dd>在本文中，我们将讨论超链接是什么，以及它们为什么重要。</dd> +</dl> + +<h2 id="工具和安装">工具和安装</h2> + +<p>与可用于构建网站的工具/软件相关的问题。</p> + +<dl> + <dt> + <h3 id="在网上做点什么需要花多少钱？"><a href="/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost">在网上做点什么需要花多少钱？</a></h3> + </dt> + <dd>当您推出网站时，您可能没有花费，或者您的费用可能会爆表。在这篇文章中，我们讨论了多少一切成本和你得到什么你支付（或不支付）</dd> + <dt> + <h3 id="你需要什么软件用来造一个网站"><a href="/zh-CN/docs/Learn/Common_questions/What_software_do_I_need">你需要什么软件用来造一个网站?</a></h3> + </dt> + <dd>在本文中，我们将解释在编辑，上传或查看网站时需要使用哪些软件组件。</dd> + <dt> + <h3 id="什么文本编辑器比较好用"><a href="/zh-CN/docs/Learn/Common_questions/%E5%AE%9E%E7%94%A8%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8">什么文本编辑器比较好用?</a></h3> + </dt> + <dd>在本文中，我们重点介绍在选择和安装用于Web开发的文本编辑器时需要考虑的一些事项。</dd> + <dt> + <h3 id="怎么搭建一个基础的开发环境"><a href="/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server">怎么搭建一个基础的开发环境?</a></h3> + </dt> + <dd>当在一个web项目上工作时，你需要在本地测试它，然后再显示给世界。一些类型的代码需要一个服务器来测试， 在本文中，我们将向您介绍如何设置。我们还将介绍如何将可扩展的结构放置到位，这样即使您的项目变大，您的文件仍然保持有序。</dd> + <dt> + <h3 id="什么是浏览器开发者工具？"><a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">什么是浏览器开发者工具？</a></h3> + </dt> + <dd>每个浏览器都有一组devtools，用于调试HTML，CSS和其他Web代码。本文解释如何使用浏览器的devtools的基本功能。</dd> + <dt> + <h3 id="你怎么来确保你的网站顺利的运行？"><a href="/zh-CN/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly"> 你怎么来确保你的网站顺利的运行？</a></h3> + </dt> + <dd>所以你已经在网上发布了你的网站 - 非常好！但你确定它工作正常吗？本文提供一些基本的故障排除步骤。</dd> + <dt> + <h3 id="怎么上传文件们到服务器？"><a href="/zh-CN/docs/Learn/Common_questions/Upload_files_to_a_web_server">怎么上传文件们到服务器？</a></h3> + </dt> + <dd>本文介绍如何使用FTP工具在线发布您的网站 - 这是一种使网站上线的最常见方法，以便其他人可以通过计算机访问网站。</dd> + <dt> + <h3 id="怎么使用_GitHub_Pages"><a href="/zh-CN/docs/Learn/Common_questions/Using_Github_pages">怎么使用 GitHub Pages?</a></h3> + </dt> + <dd>本文提供了使用GitHub的gh-pages功能发布内容的基本指南。</dd> + <dt> + <h3 id="如何在Google_App_Engine上托管你的网站"><a href="/zh-CN/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">如何在Google App Engine上托管你的网站?</a></h3> + </dt> + <dd>寻找一个托管您的网站的地方？以下是在Google App Engine上托管您的网站的分步指南。</dd> + <dt> + <h3 id="有哪些工具可用于调试和提高网站性能"><a href="/zh-CN/docs/Tools/Performance">有哪些工具可用于调试和提高网站性能?</a></h3> + </dt> + <dd>这组文章向您展示了如何使用Firefox中的开发工具来调试和提高网站性能，使用工具检查内存使用情况，JavaScript调用树，渲染的DOM节点数量等。</dd> +</dl> + +<h2 id="设计和可访问性">设计和可访问性</h2> + +<p>本节列出了与美学，页面结构，辅助功能等相关的问题。</p> + +<dl> + <dt> + <h3 id="我该怎样开始设计我的网站？"><a href="/zh-CN/docs/learn/常见问题/Thinking_before_coding">我该怎样开始设计我的网站？</a></h3> + </dt> + <dd>本文涵盖了每个项目的所有重要的第一步：定义你想要完成的任务。</dd> + <dt> + <h3 id="一般的网页布局是怎样的"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">一般的网页布局是怎样的?</a></h3> + </dt> + <dd>在为您的网站设计网页时，最好了解最常见的布局。这篇文章运行一些典型的网页布局，看看组成每一个的部分。</dd> + <dt> + <h3 id="何为可访问性？"><a href="/zh-CN/docs/learn/常见问题/What_is_accessibility">何为可访问性？</a></h3> + </dt> + <dd>这篇文章介绍了可访问性背后的一些基本概念</dd> + <dt> + <h3 id="怎么设计才能适用于所有用户"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">怎么设计才能适用于所有用户?</a></h3> + </dt> + <dd>本文提供了基本的技术，以帮助您为任何类型的用户设计网站 - 快速无障碍获胜和其他这样的事情。</dd> + <dt> + <h3 id="残疾人的特殊关怀"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">残疾人的特殊关怀?</a></h3> + </dt> + <dd>本文介绍了HTML的特定功能，可用于使不同残疾人更容易访问网页。</dd> + <dt> + <h2 id="HTMLCSS和JavaScript_问题">HTML,CSS和JavaScript 问题</h2> + + <p>对于HTML / CSS / JavaScript问题的常见解决方案，请尝试以下文章：</p> + + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">使用HTML解决常见问题</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto">使用CSS解决常见问题</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Howto">使用 JavaScript 解决常见问题</a></li> + </ul> + </dt> +</dl> diff --git a/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..38440aea8d --- /dev/null +++ b/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,101 @@ +--- +title: 网页，网站，网络服务器和搜索引擎的区别是什么？ +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +tags: + - 初学者 +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">在本文中我们描述了各种与网络相关的概念：网页，网站，网络服务器，以及搜索引擎。这些概念常被网络新手混淆，或被误用。让我们看看它们到底代指的是什么吧！</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>了解 <a href="/zh-CN/docs/learn/How_the_Internet_works">互联网是怎么工作的</a></td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解网页，网站，网络服务器和搜索引擎间的区别</td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p>正如任何领域的知识一样，网络也有很多的术语。别担心，我们不会把你淹没在这些术语里的（但如果你感兴趣的话，我们也弄了一个<a href="https://developer.mozilla.org/zh-CN/docs/Glossary">术语表</a>）然而，一开始你还是需要了解一些基本概念，因为当你读下去的时候，这些词汇会一再出现。有时候这些概念容易被混淆，因为他们指的是相关但不同的功能。事实上，有时你会见到这些概念在新闻中或者其他地方被误用，所以把他们弄混了也是情有可原的！</p> + +<p>随着进一步地探讨，我们将会涵盖这些概念和技术的方方面面，但以下的这些简单定义可以帮助你快速开始：</p> + +<dl> + <dt>网页（webpage）</dt> + <dd>一份能够显示在网络浏览器（如Firefox,，Google Chrome，Microsoft Internet Explorer 或Edge，Apple的Safari）上的文档。网页也常被称作"web pages"（网页）或者就叫"pages"（页面）。</dd> + <dt>网站（website）</dt> + <dd>一个由许多组合在一起，并常常以各种方式相互连接的网页组成的集合。网站常被称作"web site"（网站）或简称"site"（站点）。</dd> + <dt>网络服务器（web server）</dt> + <dd>一个在互联网上托管网站的计算机。</dd> + <dt>搜索引擎（search engine）</dt> + <dd>帮助你寻找其他网页的网站，比如Google，Bing，或Yahoo。</dd> +</dl> + +<h2 id="自主学习">自主学习</h2> + +<p><em>还没有可用的资料。<a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="深入探索">深入探索</h2> + +<p>所以，让我们深入了解这四个术语是如何相关联的以及为什么有时会相互混淆。</p> + +<h3 id="网页">网页</h3> + +<p>一份网页文档是交给{{Glossary("浏览器")}}显示的简单文档。这种文档是由{{Glossary("超文本标记语言HTML")}}来编写的(在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">other articles</a>可查看更多详细内容)。网页文档可以插入各种各样不同类型的资源，例如：</p> + +<ul> + <li><em>样式信息</em> — 控制页面的观感</li> + <li><em>脚本</em>— 为页面添加交互性</li> + <li><em>多媒体</em>— 图像，音频，和视频</li> +</ul> + +<div class="note"> +<p><strong>提示: 浏览器也能显示其他文档，例如</strong>{{Glossary("PDF")}}<strong>文件或图像，但网页（webpage）这一概念专指HTML文档。其他情况我们则只会使用文档（document）这一概念</strong></p> +</div> + +<p>网络上所有可用的网页都可以通过一个独一无二的地址访问到。要访问一个页面，只需在你的浏览器地址栏中键入页面的地址。 </p> + +<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> + +<h3 id="网站">网站</h3> + +<p>网站是共享唯一域名的相互链接的网页的集合。给定网站的每个网页都提供了明确的链接—一般都是可点击文本的形式—允许用户从一个网页跳转到另一个网页。</p> + +<p>要访问网站，请在浏览器地址栏中输入域名，浏览器将显示网站的主要网页或主页。</p> + +<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> + +<p><em>当网站只包含一个网页时，网站和网页二者尤其容易弄混。这样的网站有时称之为单页网站（single-page website）。</em></p> + +<h3 id="网络服务器">网络服务器</h3> + +<p>一个网络服务器是一台托管一个或多个网站的计算机。 "托管"意思是所有的网页和它们的支持文件在那台计算机上都可用。网络服务器会根据每位用户的请求，将任意网页从托管的网站中发送到任意用户的浏览器中。</p> + +<p><em>别把</em><em><em>网站和网络服务器弄混了</em>。</em>例如，当你听到某人说："我的网站没有响应"，这实际上指的是网络服务器没响应，并因此导致网站不可用。更重要的是，自从一个网络服务器能够托管多个网站，"网络服务器"这个术语从来都没被用来指定一个网站，因为这可能导致很大的混乱。在上面的例子中，如果我们说，“我的网络服务器没有响应”，这就指的是在那台网络服务器上的所有网页都不可用。</p> + +<h3 id="搜索引擎">搜索引擎</h3> + +<p>搜索引擎是网络上常见的混乱之源。搜索引擎是一个特定类型的网站，用以帮助用户在其他网站中寻找网页。</p> + +<p>搜索引擎数不胜数，有<a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>等等。其中有的功能宽泛，有的专注于特定的主题。你可按需使用。</p> + +<p>许多网上的初学者将搜索引擎和浏览器混淆了。让我们明确一下：浏览器是一个接收并显示网页的软件，搜索引擎则是一个帮助用户从其他网站中寻找网页的网站。这种混淆之所以出现是因为当一个人打开一个浏览器的时候，浏览器展现的是一个搜索引擎的主页。这有什么意义呢？很明显，因为你打开浏览器要做的第一件事就是去寻找一个网站。不要把基础设施（浏览器）和服务（搜索引擎）混淆。这种区分会对你很有帮助，但是甚至有些专业人员也还把它们说得很宽泛，所以不用对这种区分太过谨慎。</p> + +<p>下图是一个火狐浏览器把谷歌搜索框当作它默认开始页面的实际例子：</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> + +<h2 id="下一步">下一步</h2> + +<ul> + <li>继续探索： <a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">网络服务器</a></li> + <li>看网页是如何被链接到网站中的：<a href="/zh-CN/docs/Learn/Common_questions/What_are_hyperlinks">理解超链接</a></li> +</ul> diff --git a/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html b/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..72afea5060 --- /dev/null +++ b/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,98 @@ +--- +title: 如何设置一个本地测试服务器？ +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - 初学者 + - 服务器 +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +<div class="summary"> +<p>本文将会介绍如何在你的计算机上安装一个简单的本地测试服务器，以及它的基本用法。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>你需要知道<a href="https://developer.mozilla.org/zh-CN/docs/learn/How_the_Internet_works">互联网是怎么工作的</a>，以及<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是网络服务器</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>你将学习如何配置本地测试服务器。</td> + </tr> + </tbody> +</table> + +<h2 id="本地文件与远程文件">本地文件与远程文件</h2> + +<p>在大多数示例中，我们告诉你只需在浏览器中直接打开您的示例，有很多方法可以实现这一点，你可以通过双击 HTML 文件或将其拖拽到浏览器窗口中，或者在浏览器中选择 <code>文件 > 打开... </code> 选择 HTML 文件等。</p> + +<p>如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 <code>file://</code> 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），Web 地址会以 <code>http://</code> 或 <code>https://</code> 开头，说明该文件是通过 HTTP 传输的。</p> + +<h2 id="测试本地文件存在的问题">测试本地文件存在的问题</h2> + +<p>某些示例如果你将其作为本地文件打开的话，它将不会运行。 这可能是由于各种原因，最有可能是：</p> + +<ul> + <li><strong>它们具有异步请求。</strong> 如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">从服务器获取数据</a>）。 这是因为安全限制（更多关于 Web 安全的信息，请参阅 <a href="https://developer.mozilla.org/zh-CN/docs/learn/Server-side/First_steps/Website_security">站点安全</a>）。</li> + <li><strong>它们具有服务端代码。</strong> 服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。</li> +</ul> + +<h2 id="运行一个简单的本地_HTTP_服务器">运行一个简单的本地 HTTP 服务器</h2> + +<p><font><font>为了解决异步请求的问题，我们需要通过在本地Web服务器上运行这些示例来测试这些示例。</font><font>为我们的目的，最简单的方法之一就是使用Python的</font></font><code>SimpleHTTPServer</code><font><font>模块。</font></font></p> + +<p>我们需要：</p> + +<ol> + <li> + <p><font>安装Python。</font><font>如果您正在使用Linux或Mac OS X，则应该已经在您的系统上可用。</font><font>如果您是Windows用户，则可以从Python主页获取安装程序，并按照说明进行安装：</font></p> + + <ul> + <li><font><font>转到</font></font><a href="https://www.python.org/"><font><font>python.org</font></font></a></li> + <li><font><font>在“下载”部分下，单击Python“3.xxx”的链接。</font></font></li> + <li><font><font>在页面的底部，选择</font></font><em><font><font>Windows x86可执行文件安装程序</font></font></em><font><font>并下载它。</font></font></li> + <li><font><font>当它已经下载，运行它。</font></font></li> + <li><font><font>在第一个安装程序页面上，确保选中了“将Python 3.xxx添加到PATH”复选框。</font></font></li> + <li><font><font>单击</font></font><em><font><font>安装</font></font></em><font><font>，然后</font><font>在安装完成</font><font>后单击</font></font><em><font><font>关闭</font></font></em><font><font>。</font></font></li> + </ul> + </li> + <li> + <p><font>打开你的命令提示符（Windows）/终端（OS X / Linux）。</font><font>要检查Python是否安装，请输入以下命令：</font></p> + + <pre class="brush: bash">python -V</pre> + </li> + <li> + <p><font><font>下面应该给出你安装的版本号</font><font>，使用</font></font><code>cd</code><font><font>命令</font><font>导航到您的示例所在的目录</font><font>。</font></font></p> + + <pre class="brush: bash"># 输入你想要进入的目录，举例 +cd Desktop +# 用两个点来表示进入上一层级的目录 +cd ..</pre> + </li> + <li> + <p>输入命令在该目录中启动服务器：</p> + + <pre><font><font>＃如果上面返回的Python版本是3.X </font></font><font><font> +python -m http.server </font></font><font><font> +＃如果上面返回的Python版本是2.X </font></font><font><font> +python -m </font></font><code>SimpleHTTPServer</code></pre> + </li> + <li> + <p><font><font>默认情况下，这将在本地Web服务器上的端口8000上运行目录的内容。您可以通过转到</font></font><code>localhost:8000</code><font><font>Web浏览器中</font><font>的URL来访问此服务器</font><font>。</font><font>在这里你会看到列出的目录的内容 - 点击你想运行的HTML文件。</font></font></p> + </li> +</ol> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：如果您已经在端口8000上运行了某些东西，则可以通过运行server命令，然后选择另一个端口号（例如</font></font><code>python -m http.server 7800</code><font><font> （Python 3.x）或</font></font><code>python -m SimpleHTTPServer 7800</code><font><font> （Python 2.x））</font><font>来选择另一个端口</font><font>。</font><font>然后您可以访问您的内容</font></font><code>localhost:7800</code><font><font>。</font></font></p> +</div> + +<h2 id="在本地运行服务器端语言"><font><font>在本地运行服务器端语言</font></font></h2> + +<p><font><font>Python的</font></font><code>SimpleHTTPServer</code><font><font>模块是有用的，但它不知道如何运行用PHP或Python等语言编写的代码。</font><font>为了处理这个问题，你需要更多的东西 - 正是你需要的东西取决于你正在运行的服务器端语言。</font><font>这里有几个例子：</font></font></p> + +<ul> + <li><font><font>要运行Python服务器端代码，您需要使用 Python 网络框架。</font><font>您可以通过阅读</font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django"><font><font>Django Web Framework（Python）</font></font></a><font><font>来了解如何使用Django框架</font><font>。</font></font><a href="http://flask.pocoo.org/">Flask</a><font><font>也是一个不错的选择（稍微轻量一点）。</font><font>要运行Flask，你需要先</font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3"><font><font>安装Python / PIP</font></font></a><font><font>，然后使用</font></font><code>pip3 install flask </code>来安装Flask<font><font>。</font><font>此时，您应该能够运行Python Flask示例</font></font><code>python3 python-example.py</code><font><font>，然后在</font></font><font><font>您的浏览器中打开 <code>localhost:5000</code> 查看。</font></font></li> + <li><font><font>要运行Node.js（JavaScript）服务器端代码，您可以直接使用Node或选择构建于其上的框架。</font><font>Express是一个不错的选择 - 请参阅</font></font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs"><font><font>Express Web Framework（Node.js / JavaScript）</font></font></a><font><font>。</font></font></li> + <li><font><font>要运行PHP服务器端代码，您需要一个可以解释PHP的服务器设置。</font><font>本地PHP测试的好选择是</font></font><a href="https://www.mamp.info/en/downloads/"><font><font>MAMP</font></font></a><font><font>（Mac和Windows）， </font></font><a href="http://ampps.com/download"><font><font>AMPPS</font></font></a><font><font>（Mac，Windows，Linux）和</font></font><a href="https://www.linux.com/learn/easy-lamp-server-installation"><font><font>LAMP</font></font></a><font><font>（Linux，Apache，MySQL和PHP / Python / Perl）。</font><font>这些是完整的包，创建本地设置，允许您运行Apache服务器，PHP和MySQL数据库。</font></font></li> +</ul> diff --git a/files/zh-cn/learn/common_questions/thinking_before_coding/index.html b/files/zh-cn/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..6a2bde0492 --- /dev/null +++ b/files/zh-cn/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,169 @@ +--- +title: 我该怎样开始设计我的网站？ +slug: Learn/Common_questions/Thinking_before_coding +translation_of: Learn/Common_questions/Thinking_before_coding +--- +<p class="summary">这篇文章介绍了所有项目最重要的第一步：确定你想要做什么</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>无</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学会设定目标来给自己的web项目导航</td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p><span class="seoSummary">当刚开始一个Web项目时，大多数人所关心更多是技术方面。当然你必须先能熟练运用各种工具，但是最关键的其实是你想要做出一个怎样的产品。这看上去很简单，但是有很多的项目的失败并不是因为缺少相应的技术水平，而是缺少一个明确的目标。</span></p> + +<p>所以当你有一个想法并且想把它付诸实践的话，在一切启动之前你首先要问一问自己下面这几个问题：</p> + +<ul> + <li>我到底想完成什么？</li> + <li>网站如何实现我的目标？</li> + <li>做什么，以怎样的顺序，才能达成我的目标？</li> +</ul> + +<p>这就是项目构思(<em>project ideation</em>)，这是达成你目标的第一步，无论你是初学者还是经验丰富的开发者。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>暂时还没有相关内容 <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="深入探索">深入探索</h2> + +<p>一个项目永远不应该从技术的一方开始建立。音乐家没办法谱写任何旋律除非他知道他要创作出怎样的歌曲，对于画家、作家、Web开发者来说同样如此。技术是我们接下来才需要考虑的。</p> + +<p>技术显然是重要的。音乐家必须精通他们手中的乐器。但再好的音乐家也不能在没有想法的情况下制作出美妙的音乐。因此，在我们考虑技术(采用怎样的编程语言和工具)之前，你首先应该停下来好好想一想关于你想要做出的产品的各种细节。</p> + +<p>和朋友们讨论讨论你的想法是一个好的开始，但是光这样还不够。你需要安静地坐下来好好捋一捋你的想法，为了能有一个清晰的思路关于如何实现你的想法。想要做到这些，你只需要一支笔和一张纸并回答下面这些问题。</p> + +<div class="note"> +<p><strong>注意:</strong> 有数不清的方法来实现你的想法，这里就不一一列举了。（不单独写本书不足以说明它）我们这里只采用一些简单的方法来处理专业人士所谓的 <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">项目想法</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">项目计划</a>和<a href="http://en.wikipedia.org/wiki/Project_management">项目管理</a>。</p> +</div> + +<h3 id="我到底想完成什么？">我到底想完成什么？</h3> + +<p>这是你需要想清楚的最重要的问题，因为它主导着所有其它的事情。列出你想要达到的所有目标。这个目标可以是任何事情：销售商品来赚钱、发表时政评论......</p> + +<p>假设你是一位音乐家，你可能希望：</p> + +<ul> + <li>让人们听你的音乐</li> + <li>卖糖果</li> + <li>拜会其他的音乐家</li> + <li>谈论你的音乐</li> + <li>通过视频教授音乐</li> + <li>将你的爱猫图片发布到互联网</li> + <li>找一个男朋友或女朋友</li> +</ul> + +<p>一旦你有了一张如上的表，你需要按照重要性进行排序（从最重要的到最次要的）：</p> + +<ol> + <li>找一个男朋友或女朋友</li> + <li>让人们听你的音乐</li> + <li>谈论你的音乐</li> + <li>拜会其他的音乐家</li> + <li>卖糖果</li> + <li>通过视频教授音乐</li> + <li>将你的爱猫图片发布到互联网</li> +</ol> + +<p>这些简单的步骤（也就是写下目标并进行分类）将在你需要做出重大决定的时候帮助你（比如，我需要植入这些功能吗？需要使用这些服务吗？需要做这些设计吗？）</p> + +<p>现在你有了按照重要程度排序的列表，我们进入到下一个问题！</p> + +<h3 id="网站如何实现我的目标？">网站如何实现我的目标？</h3> + +<p>现在，你有了一个目录清单，而且你迫切需要一个网站来实现这些目标。你确定吗?</p> + +<p>让我们回过头看看我们的例子。我们有5个目标和音乐相关，另一个和日常生活相关(找到你的另一半)，还有一个和这些完全无关：猫的照片。建立一个网站来实现这所有的目标合理吗？甚至是必要的吗？ 毕竟现有的很多网站服务就能达成你的目标，不需要新建一个网站。</p> + +<p>找一个男（女）朋友就是一个很好的例子，体现了使用现有资源比构建一个全新的网站更有意义。为什么呢？因为比起实际去找个男（女）朋友，构建和维护网站将会花费我们更多的时间。既然我们的目标是最重要的，我们应该把我们的精力放在借助已有的工具而不是从头开始。还有，我们有很多可以用来展示相片的web服务，所以如果只是为了传播我们的猫咪多么可爱而构建一个新网站，就太不值得在这上面下功夫了。</p> + +<p>其他的五个目标都和音乐有关。当然，有许多 web 服务能够达成这些目标，但是在这种情况下构建一个我们自己的专用网站是有意义的。这样的一个网站是<strong><em>整合</em></strong>所有我们想要发布在同一个地方的内容的最佳方式（有利于目标3,5和6），而且能促进我们与公众的<strong><em>互动</em></strong>（有利于目标2和4）。总之，既然这些目标都围绕着同一个主题，把一切放在一起将帮助我们达成目标，同时帮助我们的读者与我们联系。</p> + +<p>那么一个网站如何帮助我达成我的目标呢? 通过回答这个问题，你将找到达成目标的最佳方式，同时把自己从白费力气中解救出来。</p> + +<h3 id="做什么，以怎样的顺序，才能达成我的目标？">做什么，以怎样的顺序，才能达成我的目标？</h3> + +<p>现在你知道你想要完成什么，是时候把这些目标变成可行的步骤了。另外我补充一点，你的目标可能会不断变化。在项目的过程中，它们也会随着时间的推移而发生变化，可能是你遇到了意想不到的困难，或者只是改变了你的想法。</p> + +<p>与其一个冗长的解释, 不如让我们回到如下表格中的例子上:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">目标</th> + <th scope="col">要做的事</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">让人们听到你的音乐</td> + <td> + <ol> + <li>录制一段音乐</li> + <li>准备一些可在线使用的音频文件（你能用现有的Web服务来实现吗？)</li> + <li>让人们在网站的某个地方听见你的音乐</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">讨论关于你的音乐</td> + <td> + <ol> + <li>写下一些文章来开启讨论</li> + <li>明确文章的外观</li> + <li>在网站上发布这些文章 （怎么做？）</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">与其他音乐家见面</td> + <td> + <ol> + <li>向人们提供你的联系方式 (电子邮件? Facebook? 电话? 邮件?)</li> + <li>明确人们怎样从你的网站上找到那些联系方式</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">出售商品</td> + <td> + <ol> + <li>创造商品</li> + <li>储存商品</li> + <li>寻找方式解决运输</li> + <li>寻找方式解决支付</li> + <li>在你的网站上建立一个机制让人们能下订单。</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">通过视频教授音乐</td> + <td> + <ol> + <li>录制视频课程</li> + <li>让视频文件可以在线观看（再一次，你能否用已经存在的 Web 服务做到这件事）</li> + <li>让人们在你网站的某个部分访问你的视频。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>有两件事需要注意。第一， 其中的有些事情和 web 不相关（例如：录制音乐，写文章）。 通常这些线下活动比项目的 Web 端更重要。例如，在销售方面，处理供应、付款和发货比建立一个人们可以订购的网站更为重要和耗时。 </p> + +<p>第二， 制定可行的步骤会导致你需要回答新的问题。通常情况下，问题比我们最初想的要多。（例如，我应该学习如何自己做这些，请别人帮我做，或者使用第三方服务？）</p> + +<h2 id="总结">总结</h2> + +<p>正如你所看到的，一个最简单的“我想建一个网站”的想法，也会产生一个长长的待办事物清单，并且随着你的想法改变而变得更长，很快你就将会被这些事物所淹没。但是不用担心，不是所有清单上的问题都要得到答案，也不是每一件清单上的事情都需要完成。重要的是你首先要弄清楚目标是什么，以及如何实现它。目前确定之后，你需要决定什么时候以及如何来实现它。将大的目标分成小的，较容易且可控制的目标，逐一实现它们，你就能达成那个在之前看起来是不可能的目标。</p> diff --git a/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html b/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..d554870125 --- /dev/null +++ b/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,143 @@ +--- +title: 如何将文件上传到网络服务器 +slug: Learn/Common_questions/Upload_files_to_a_web_server +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +<div class="summary"> +<p>这篇文章将会告诉你如何利用 {{Glossary("FTP")}} 工具来发布你的网站。 </p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>你必须知道<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是网络服务器？</a> 以及<a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">域名是如何工作的</a>。你必须知道如何<a href="https://developer.mozilla.org/en-US/Learn/Set_up_a_basic_working_environment">搭建一个基本环境</a>，还有如何<a href="https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML">写一个简单的网页</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习如何将文件上传到FTP服务器。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>如果<a href="https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML">你已经建立了一个简单的页面</a>, 你会想将它放到某些网络服务器上。在这章里，我们将讨论如何使用“<strong>FTP</strong>”。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>目前还没有有效的自主学习方法。 <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">请考虑贡献</a>。</em></p> + +<h2 id="深入探究">深入探究</h2> + +<h3 id="了解FTP客户端：FireFTP">了解FTP客户端：FireFTP</h3> + +<p>有很多FTP客户端。我们的demo使用FireFTP演示，因为用FireFTP构建是非常容易的。如果你使用FireFTP,只要<a href="https://addons.mozilla.org/firefox/addon/fireftp/">转到FireFTP插件页面</a>并安装FireFTP。</p> + +<div class="note"> +<p>当然这有许多其他的选项。参见<a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">发布工具：获取FTP</a>更多的信息。</p> +</div> + +<p>在个新的标签中打开FireFTP，FireFTP有两种办法。</p> + +<ol> + <li><strong>Firefox menu <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li> + <li><strong>Tools </strong>➤ <strong>Web Develope</strong>r ➤ <strong>FireFTP</strong></li> +</ol> + +<p>现在你应该可以看到如下界面：</p> + +<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p> + +<h3 id="登入（Logging_in）">登入（Logging in）</h3> + +<p>在这个例子中，我们假设我们的托管提供商（将托管我们的HTTP Web服务器的服务）是一个虚构的公司“Example Hosting Provider”，其URL如下所示：</p> + +<p><code>mypersonalwebsite.examplehostingprovider.net</code>.</p> + +<p>我们刚刚开通了一个帐户，并从他们那里收到了这些信息：</p> + +<blockquote> +<p>恭喜在Example Hosting Provider开设帐户。</p> + +<p>你的账户是: <code>demozilla</code></p> + +<p>您的网站将在：</p> + +<p><code>demozilla.examplehostingprovider.net</code></p> + +<p>要发布到此帐户，请使用以下凭据通过FTP进行连接：</p> + +<ul> + <li>FTP 服务: <code>ftp://demozilla.examplehostingprovider.net</code></li> + <li>用户名: <code>demozilla</code></li> + <li>密码: <code>quickbrownfox</code></li> + <li>要在Web上发布，请将文件放入<code>Public / htdocs</code>目录中。</li> +</ul> +</blockquote> + +<p>让我们查看一下此网页<code>http://demozilla.examplehostingprovider.net/</code> — 正如你所见，现在这里什么也没有:</p> + +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p> + +<div class="note"> +<p><strong>注意:</strong> 根据您的托管服务提供商的不同，大部分时间您会看到一个页面，内容如下：“此网站由[托管服务]托管”。</p> +</div> + +<p>要将FTP客户端连接到远程服务器，请按“创建帐户...”按钮并使用托管提供商提供的信息填写字段：</p> + +<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p> + +<h3 id="在这里和那里：本地和远程视图">在这里和那里：本地和远程视图</h3> + +<p>现在让我们连接这个新创建的帐户：</p> + +<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p> + +<p>让我们来看看你所看到的：</p> + +<ul> + <li>在左边，你会看到你的本地文件。 导航到您存储网站的目录（本例中为<code>mdn</code>）。</li> + <li>在右侧，您会看到远程文件。 我们登录到了我们远程的FTP根目录（在这种情况下，<code>users/ demozilla</code>）</li> + <li>现在您可以忽略底部区域。 它是您的FTP客户端和服务器之间每次交互的实时日志。</li> +</ul> + +<h3 id="上传到服务器">上传到服务器</h3> + +<p>您应该记得，我们的主机提供商告诉我们，我们的文件必须存储在<code>Public / htdocs</code>目录中，如右窗格中导航所示：</p> + +<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p> + +<p>现在，要将文件上传到服务器，请将它们从左侧窗格拖放到右侧窗格中：</p> + +<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p> + +<h3 id="文件都上传成功了吗">文件都上传成功了吗?</h3> + +<p>到目前为止，很好，但文件真的在线吗？ 您可以在浏览器中返回您的网站（例如<code>http://demozilla.examplehostingprovider.net/</code>）进行仔细检查：</p> + +<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p> + +<p>瞧！ 我们的网站已经活灵活现了！</p> + +<h3 id="其他方式上传文件">其他方式上传文件</h3> + +<p>FTP协议是发布网站的一种众所周知的方法，但不是唯一的方法。 以下是其他一些可能性：</p> + +<ul> + <li> <strong>Web界面</strong>。 作为远程文件上传服务前端的HTML界面。 由您的托管服务提供。</li> + <li><strong>GitHub</strong>（高级）。 使用 提交/推送 方法的组合上传{{Glossary('git')}} 。 请参阅我们的 “<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web">Web指南入门</a>” 中 <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">发布您的网站</a> 文章。</li> + <li><strong>{{Glossary("Rsync")}}</strong>（高级）。 本地到远程的文件同步系统。</li> + <li><strong>{{Glossary('WebDAV')}}。</strong></li> + <li><strong>{{Glossary('WebDAV')}}</strong>. {{Glossary('HTTP')}}协议的扩展，允许更多的高级文件管理。</li> +</ul> + +<h2 id="下一步">下一步</h2> + +<p>干得好，你几乎快完成了。 最后一项重要任务是确保您的网站正常工作。</p> + +<p> </p> + +<p> + <audio style="display: none;"> </audio> +</p> diff --git a/files/zh-cn/learn/common_questions/using_github_pages/index.html b/files/zh-cn/learn/common_questions/using_github_pages/index.html new file mode 100644 index 0000000000..16a7682672 --- /dev/null +++ b/files/zh-cn/learn/common_questions/using_github_pages/index.html @@ -0,0 +1,105 @@ +--- +title: 应该如何使用Github Pages? +slug: Learn/Common_questions/Using_Github_pages +tags: + - GitHub + - Web + - git + - 初学者 + - 指导 +translation_of: Learn/Common_questions/Using_Github_pages +--- +<p class="summary"><a href="https://github.com/">GitHub</a>是一个“公共编码”网站。它允许您上传代码存储库并存储在 <a href="http://git-scm.com/">Git</a> 版本控制系统上。然后，您可以在代码项目上进行协作，默认情况下系统是开源的，这意味着世界上任何人都可以找到您的GitHub代码，使用它，从中学习，并改进它。同样的，对于其他人的代码您也可以这么做！本文提供了一个基本的指南，即使用Github的gh-pages功能发布内容。</p> + +<h2 id="发布内容">发布内容</h2> + +<p>GitHub是一个非常重要和有用的社区，值得参与其中，Git / GitHub也是一个非常受欢迎的<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">版本控制系统</a> - 现在大多数科技公司在其工作流程中使用它。 GitHub有一个非常有用的功能，称为<a href="https://pages.github.com/">GitHub Pages</a>，它允许您在Web上实时发布网站代码。</p> + +<h3 id="基本Github设置">基本Github设置</h3> + +<ol> + <li>首先，在您的机器上<a href="http://git-scm.com/downloads">安装Git</a>。这是GitHub工作的底层版本控制系统软件。</li> + <li>接下来，<a href="https://github.com/join">注册一个GitHub帐户</a>。这很简单易操作。</li> + <li>注册后，用您的用户名和密码登录<a href="https://github.com/">github.com</a>。</li> +</ol> + +<h3 id="准备上传代码">准备上传代码</h3> + +<p>您可以将任何您喜欢的代码存储在Github资源库中，但要使用GitHub Pages功能实现全面效果，您的代码应该被构造为典型的网站，例如主入口点是一个名为index.html的HTML文件。</p> + +<p>第一步，您需要做的另一件事是将您的代码目录初始化为Git存储库。按照下述步骤：</p> + +<ol> + <li>将命令行指向您的test-site目录（或者任何一个您能调用的包含有您的网站的目录）。为此，请使用cd命令（即“更改目录”）。如果您已经将您的网站放到了位于桌面上的test-site目录中，则可以输入以下内容： + <pre class="brush: bash">cd Desktop/test-site</pre> + </li> + <li>当命令行指向您的网站所在目录时，键入以下命令，该命令告诉git工具将目录转换为git仓库： + <pre class="brush: bash">git init</pre> + </li> +</ol> + +<h4 id="命令行界面">命令行界面</h4> + +<p>将代码上传到Github的最佳方法是通过命令行 - 这是一个窗口，您可以在其中输入命令来执行诸如创建文件和运行程序等操作，而不是在用户界面内单击。它看起来像这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p> + +<div class="note"> +<p><strong>注意</strong>: 您也可以考虑使用<a href="http://git-scm.com/downloads/guis">Git图形用户界面</a>来执行相同的工作，如果您不熟悉命令行。</p> +</div> + +<p>每个操作系统都附带有一个命令行工具：</p> + +<ul> + <li><strong>Windows</strong>: 可以通过按Windows键，键入<strong>命令提示符</strong>，并从出现的列表中选择命令提示符。请注意，Windows具有与Linux和OS X不同的命令约定，因此以下命令可能因您的机器而异。</li> + <li><strong>OS X</strong>: <strong>终端</strong>可以在应用程序>实用程序中找到。</li> + <li><strong>Linux</strong>: 通常你可以用Ctrl + Alt + T启动一个终端。如果不行，请在应用程序栏或菜单中查找<strong>Terminal</strong>。</li> +</ul> + +<p>起初这可能看起来有点吓人，但不要担心 - 你很快就会得到基本的窍门。您可以通过键入命令并按Enter键来告诉计算机在终端中执行某些操作，如上所示。</p> + +<h3 id="为您的代码创建一个仓库">为您的代码创建一个仓库</h3> + +<ol> + <li>接下来，您需要为您的文件创建一个新的仓库。单击GitHub主页右上角的加号（+），然后选择“ <em>New Repository</em>”。</li> + <li>在此页面的“<em>Repository name</em>”框中，为您的代码库起一个名字，例如:<em>my-repository</em>。</li> + <li>还要填写一个描述来说明您的存储库将包含哪些内容。你的屏幕应该是这样的<br> + <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li> + <li>单击<em>Create repository</em>;您将会看到如下页面：<br> + <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li> +</ol> + +<h3 id="将您的文件上传到GitHub">将您的文件上传到GitHub</h3> + +<ol> + <li>在当前页面上，您可能对本节的这部分感兴趣“<strong><em>…or push an existing repository from the command line</em></strong>（或者从命令行推送一个现有存储库）”。您应该看到本节中列出的两行代码。复制整个第一行，将其粘贴到命令行中，然后按Enter键。命令应该看起来像是这样的： + + <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre> + </li> + <li>接下来，键入以下两个命令，每个命令之后按Enter。这些指令将会把代码上传到GitHub，并要求Git管理这些文件。 + <pre class="brush: bash">git add --all +git commit -m 'adding my files to my repository'</pre> + </li> + <li>最后，将代码推送到GitHub，通过您正在访问的GitHub网页，然后输入我们看到的两个命令中的第二个命令“ <em><strong>…or push an existing repository from the command line</strong>（</em>或从命令行部分推入现有存储库）部分”： + <pre class="brush: bash">git push -u origin master</pre> + </li> + <li>现在你需要为你的仓库创建一个gh-pages分支;刷新当前页面，您将看到一个类似下面的存储库页面。您需要点击<strong>Branch：master</strong>按钮，在文本输入框中输入gh-pages，然后按蓝色按钮，即创建分支<strong><em>Create branch: gh-pages</em></strong>。这将创建一个特殊的代码分支，称为gh-pages，该分支会在特殊位置发布。它的URL采用username.github.io/my-repository-name的格式，所以在我的例子中，URL是https://chrisdavidmills.github.io/my-repository。显示的页面是index.html页面。<br> + <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li> + <li>在新的浏览器标签中浏览您的GitHub Pages的网址，您将能够在线访问您的网站！通过电子邮件把地址发送给你的朋友，炫耀你的掌握的成果吧。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong> ：如果卡住了，<a href="https://pages.github.com/">GitHub Pages主页</a>也是非常有帮助的。</p> +</div> + +<h3 id="更多的GitHub知识">更多的GitHub知识</h3> + +<p>如果您想对test-site进行更多更改并将其上传到GitHub，那么您只需像以前一样对文件进行更改。然后，您需要输入以下命令（在每个之后按Enter键）将这些更改推送到GitHub：</p> + +<pre>git add --all +git commit -m 'another commit' +git push</pre> + +<p>您可以使用更合适的消息替换上一次的提交信息，以描述您刚刚做出的更改。</p> + +<p>我们仅仅提供了Git的浅显基本的信息。要了解更多信息，请先从<a href="https://help.github.com/index.html">GitHub帮助站点</a>开始。</p> diff --git a/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html b/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..c57eb959bc --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,96 @@ +--- +title: 什么是超链接? +slug: Learn/Common_questions/What_are_hyperlinks +tags: + - 初学者 + - 基础 + - 导航 +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +<div class="summary"> +<p>通过这篇文章，我们将了解什么是超链接以及超链接的重要性。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>你该知道 <a href="/zh-CN/docs/learn/How_the_Internet_works">互联网是怎样工作的 </a>，并且熟悉 <a href="/zh-CN/docs/learn/常见问题/网页，网站，网页服务器和搜索引擎的区别是什么？">网页，网站，网络服务器和搜索引擎间的区别</a></td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解 Web 上的超链接概念以及超链接的重要性。</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p>超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念。为了解释什么是链接，我们需要回到网络架构的底层。</p> + +<p>早在1989年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：</p> + +<ol> + <li>{{Glossary("URL")}}, 跟踪Web文档的地址系统</li> + <li>{{Glossary("HTTP")}}, 一个传输协议，以便在给定URL时查找文档</li> + <li>{{Glossary("HTML")}}, 允许嵌入超链接的文档格式</li> +</ol> + +<p>正如您在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。 Web的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。</p> + +<p>在Web之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的URL已经使得文档容易被访问，但是你很难通过输入一个长URL来访问一个文档。超链接改变了这一切。链接可以将任何文本与URL相关联，因此用户只要激活链接就可以到达目标文档。</p> + +<p>默认情况下，链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按Tab键直到链接处于焦点，然后按Enter键或空格键来激活链接。</p> + +<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> + +<p>链接是一个突破，它使得网络变得非常有用和成功。在本文的其余部分，我们讨论各种类型的链接及链接在现代网页设计中的重要性。</p> + +<h2 id="深入探索">深入探索</h2> + +<p>正如我们所说的，链接是一段链接到URL的文本，我们使用链接来跳转到另一个文档。关于链接，有一些细节值得考虑：</p> + +<h3 id="链接的类型">链接的类型</h3> + +<dl> + <dt>内链</dt> + <dd>内链是您的网页之间的链接。没有内部链接，就没有网站（当然，除非是只有一页的网站）。</dd> + <dt>外链</dt> + <dd>外链是从您的网页链接到其他人的网页的链接。没有外部链接，就没有web，因为web是网页的网络。使用外部链接提供除您自己维护的内容之外的信息。</dd> + <dt>传入链接</dt> + <dd>传入链接是从其他人的网页链接到您的网页的链接。这只是从被链接者的角度看到的外部链接。请注意，当有人链接到您的网站时，您不必链接回去。</dd> +</dl> + +<p>当你建立一个网站时，集中精力处理内部链接，因为这些使你的网站可用。权衡链接的数量，既不要太多也不要太少。我们将在另一篇文章中讨论网站导航的设计问题，但是一般情况下，无论何时添加一个新网页，都要确保至少有一个其他网页链接到新网页。另一方面，如果您的网站的页面多于十个，那么每个页面都需要链接到其他页面。</p> + +<p>当你刚开始的时候，你不必担心外部链接和传入链接，但是如果你想让搜索引擎找到你的网站，这些链接就非常重要。（请参阅下面的更多细节。）</p> + +<h3 id="锚">锚</h3> + +<p><strong>大多数链接将两个网页相连。而锚将一个网页中的两个段落相连。</strong> 当您点击指向锚点的链接时，浏览器跳转到当前文档的另一部分，而不是加载新文档。但是，您可以像使用其他链接一样制作和使用锚点。</p> + +<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> + +<h3 id="链接和搜索引擎">链接和搜索引擎</h3> + +<p>链接对您的用户和搜索引擎都很重要。每次搜索引擎抓取一个网页时，他们都会按照网页上提供的链接对网站进行索引。搜索引擎不仅可以通过链接来发现网站的各种页面，还可以使用链接的可见文本来确定哪些搜索查询适合到达目标网页。</p> + +<p>所以链接会影响搜索引擎链接到您的网站的方式。麻烦的是，很难衡量搜索引擎的活动。公司自然希望他们的网站在搜索结果中排名很高，所有研究结果至少可以说明一些事情：</p> + +<ul> + <li>链接的可见文本会影响哪些搜索查询会找到给定的网址。</li> + <li>一个网页所拥有的链接越多，它在搜索结果中排名越高。</li> + <li>外部链接影响源和目标网页的搜索排名，但有多少不明确。</li> +</ul> + +<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (search engine optimization) 是如何使网站在搜索结果中排名高的研究。改善网站的链接使用是一种有用的搜索引擎优化技术。</p> + +<h2 id="下一步">下一步</h2> + +<p>所以现在当然你想要建立一些链接的网页！</p> + +<ul> + <li>为了获得更多的理论背景, 了解 <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URL以及其结构</a>,因为每个链接都指向一个URL.</li> + <li>想要一些更实际的东西? 我们的 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a> 模块中的<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a> 解释了如何实现详细的超链接</li> +</ul> diff --git a/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html b/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..1fd68a3cb2 --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,168 @@ +--- +title: 什么是域名？ +slug: Learn/Common_questions/What_is_a_domain_name +tags: + - 初学者 + - 域名 + - 网络 + - 网络基础架构 +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +<div class="summary"> +<p>本文中我们讨论了域名是什么，域名是如何被构建的，以及如何获得一个域名。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>首先你得知道 <a href="/zh-CN/docs/learn/How_the_Internet_works">互联网是怎么工作的</a> 并理解 <a href="/zh-CN/docs/learn/常见问题/What_is_a_URL">什么是URL</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习域名是什么，域名的工作方式，以及域名的重要性。</td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p><span class="seoSummary">域名（Domain names）是互联网基础架构的关键部分。它们为互联网上任何可用的网页服务器提供了方便人类理解的地址。</span></p> + +<p>任何连上互联网的电脑都可以通过一个公共{{Glossary("IP")}}地址访问到，对于IPv4地址来说，这个地址有32位（它们通常写成四个范围在0~255以内，由点分隔的数字组成，比如173.194.121.32），而对于IPv6来说，这个地址有128位，通常写成八组由冒号分隔的四个十六进制数(e.g., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). 计算机可以很容易地处理这些IP地址, 但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变 。为了解决这些问题，我们使用方便记忆的地址，称作域名。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>还没有可用的资料。请考虑为此投稿[<a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>]。</em></p> + +<h2 id="深入探索">深入探索</h2> + +<h3 id="域名的结构">域名的结构</h3> + +<p>一个域名是由几部分（有可能只是一部分，也许是两部分，三部分...）组成的简单结构，它被点分隔，不同于中文书写顺序，它<strong>需要从右到左阅读</strong>。</p> + +<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p> + +<p>域名的每一部分都提供着特定信息。</p> + +<p>{{Glossary("TLD")}} （Top-Level Domain，顶级域名）</p> + +<p>顶级域名可以告诉用户域名所提供的服务类型。最通用的顶级域名（.com, .org, .net）不需要web服务器满足严格的标准，但一些顶级域名则执行更严格的政策。比如：</p> + +<ul> + <li>地区的顶级域名，如.us，.fr，或.sh，可以要求必须提供给定语言的服务器或者托管在指定国家。这些TLD通常表明对应的网页服务从属于何种语言或哪个地区。</li> + <li>包含.gov的顶级域名只能被政府部门使用。</li> + <li>.edu只能为教育或研究机构使用。</li> +</ul> + +<p>顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到63个字符，不过为了使用方便，大多数顶级域名都是两到三个字符。</p> + +<p>顶级域名的完整列表是<a href="https://www.icann.org/resources/pages/tlds-2012-02-25-en">ICANN</a>维护的。</p> + +<dl> + <dt>标签 (或者说是组件)</dt> + <dd>标签都是紧随着TLD的。标签由1到63个大小写不敏感的字符组成，这些字符包含字母A-z，数字0-9，甚至 “-” 这个符号（当然，“-” 不应该出现在标签开头或者标签的结尾）。举几个例子，<code>a</code>，<code>97</code>，或者 <code>hello-strange-person-16-how-are-you</code> 都是合法的标签。</dd> + <dt>Secondary Level Domain, 二级域名</dt> + <dd>刚好位于TLD前面的标签也被称为二级域名 (SLD)。一个域名可以有多个标签（或者说是组件），没有强制规定必须要3个标签来构成域名。例如，www.inf.ed.ac.uk 是一个正确的域名。当拥有了“上级”部分(例如 <a href="https://mozilla.org">mozilla.org</a>)，你还可以创建另外的域名 (有时被称为 "子域名") (例如 <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd> +</dl> + +<h3 id="购买域名">购买域名</h3> + +<h4 id="谁拥有域名？">谁拥有域名？</h4> + +<p>你不能真正地 “购买一个域名”，你只能花钱获得一个域名在一年或多年内的使用权。不过你可以延长你的使用权，同时你的续期将优先于其他人的使用申请。但你从来都没有拥有过域名。</p> + +<p>被称为域名注册商的公司通过域名登记来记录连接你和你的域名的技术与管理信息。</p> + +<div class="note"> +<p><strong>提示 : </strong>对于一些域名，它可能不归属于某个域名注册商来负责记录。比如说，每个在.fire下的域名由Amazon管理。</p> +</div> + +<h4 id="找个可用的域名">找个可用的域名</h4> + +<p>想要知道一个给定的域名是否可用，</p> + +<ul> + <li>去域名注册商的网站。它们大多会提供"whois"服务，告诉你一个域名是否可用。</li> + <li>另外，如果你使用系统的内置shell，可以在里面输入whois命令，下面显示的是mozilla.org网站的结果：</li> +</ul> + +<pre class="notranslate">$ whois mozilla.org +Domain Name:MOZILLA.ORG +Domain ID: D1409563-LROR +Creation Date: 1998-01-24T05:00:00Z +Updated Date: 2013-12-08T01:16:57Z +Registry Expiry Date: 2015-01-23T05:00:00Z +Sponsoring Registrar:MarkMonitor Inc. (R37-LROR) +Sponsoring Registrar IANA ID: 292 +WHOIS Server: +Referral URL: +Domain Status: clientDeleteProhibited +Domain Status: clientTransferProhibited +Domain Status: clientUpdateProhibited +Registrant ID:mmr-33684 +Registrant Name:DNS Admin +Registrant Organization:Mozilla Foundation +Registrant Street: 650 Castro St Ste 300 +Registrant City:Mountain View +Registrant State/Province:CA +Registrant Postal Code:94041 +Registrant Country:US +Registrant Phone:+1.6509030800 +</pre> + +<p>正如你所见，我不能注册<code>mozilla.org</code>，因为Mozilla基金会已经注册它了。</p> + +<p><font face="Open Sans, Arial, sans-serif">另外，如果你想看看我能不能注册</font><code>afunkydomainname.org</code>：</p> + +<pre class="notranslate">$ whois afunkydomainname.org +NOT FOUND +</pre> + +<p>正如你所见，（在本文写作时）这个域名在whois数据库中不存在，所以我们可以要求去注册它。祝你好运吧！</p> + +<h4 id="获得一个域名">获得一个域名</h4> + +<p>过程很简单：</p> + +<ol> + <li>去域名注册商的网站。</li> + <li>通常那些网站上都有突出的"获得域名"宣传，点击它。</li> + <li>按要求仔细填表。一定要<strong>仔细检查</strong>你是否有将你想要的域名拼错。一旦你给错误域名付款了，便为时已晚！</li> + <li>注册商将会在域名正确注册后通知你。数小时之内，所有DNS服务器都会收到你的DNS信息。</li> +</ol> + +<div class="note"> +<p><strong>注意:</strong> 在这个过程中注册商会要求你的真实住址。请保证你正确地填写了，因为在一些国家，如果你没有提供合法的地址，注册商会关闭你的域名。</p> +</div> + +<h4 id="DNS_刷新">DNS 刷新</h4> + +<p>DNS数据库存储在全球每个DNS服务器上，所有这些服务器都源于(refer to)几个被称为“权威名称服务器”或“顶级DNS服务器”。只要您的注册商创建或更新给定域名的任何信息，信息就必须在每个DNS数据库中刷新。 知道给定域名的每个DNS服务器都会存储一段时间的信息，然后再次刷新（DNS服务器再次查询权威服务器）。 因此，知道此域名的DNS服务器需要一些时间才能获取最新信息。</p> + +<div class="note"> +<p><strong>注意 :</strong> 这个时间一般被称为 <strong>传播时间 </strong>。 然而这个术语是不精准的，因为更新本身没有传播 (top → down)。被你电脑(down)查询的 DNS 服务器只在他需要的时候才从权威服务器(top)中获取信息。</p> +</div> + +<h3 id="DNS请求如何工作？">DNS请求如何工作？</h3> + +<p>正如我们所看到的，当你想在浏览器中展示一个网页的时候，输入域名比输入IP简单多了。让我们看一下这个过程：</p> + +<ol> + <li><font face="Open Sans, Arial, sans-serif">在你的浏览器地址栏输入</font><code>mozilla.org</code>。</li> + <li>您的浏览器询问您的计算机是否已经识别此域名所确定的IP地址（使用本地DNS缓存）。 如果是的话，这个域名被转换为IP地址，然后浏览器与网络服务器交换内容。结束。</li> + <li>如果你的电脑不知道 <code>mozilla.org</code> 域名背后的IP, 它会询问一个DNS服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的IP。</li> + <li>现在电脑知道了要请求的IP地址，你的浏览器能够与网络服务器交换内容。</li> +</ol> + +<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p> + +<h2 id="下一步">下一步</h2> + +<p>好了,我们讲了许多有关的步骤和结构. 接下来.</p> + +<ul> + <li>如果你想亲自实践, 现在最好开始深入设计和探索 <a href="/zh-CN/docs/Learn/Common_questions/Common_web_layouts">对一个网页的剖析</a>.</li> + <li>关于建站需要的花销这类问题的讨论也是有价值的. 请参考 <a href="/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost">建站需要花费多少钱 </a>.</li> + <li>或者在维基百科上阅读更多关于 <a href="http://en.wikipedia.org/wiki/Domain_name">域名</a> .</li> +</ul> diff --git a/files/zh-cn/learn/common_questions/what_is_a_url/index.html b/files/zh-cn/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..a2fc792b0a --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,148 @@ +--- +title: 什么是URL？ +slug: Learn/Common_questions/What_is_a_URL +translation_of: Learn/Common_questions/What_is_a_URL +--- +<div class="summary"> +<p>本文讨论了统一资源定位符(URL)，并解释了他们是什么，以及如何被构建的。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>你首先需要知道<a href="/zh-CN/docs/Learn/How_the_Internet_works"> 互联网是如何工作的</a>，<a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是网络服务器</a> 以及 <a href="/zh-CN/docs/Learn/Common_questions/What_are_hyperlinks">网络中超链接的概念</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>你将会学习到 URL是什么，以及它在网络上是如何工作的 。</td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p><span class="seoSummary">和 {{Glossary("Hypertext")}} 以及 {{Glossary("HTTP")}} 一样，<strong><dfn>URL </dfn></strong><dfn>是 Web 中的一个核心概念。它是</dfn>{{Glossary("Browser","浏览器")}}<dfn>用来检索 web 上公布的任何资源的机制。</dfn></span></p> + +<p><strong>URL 代表着是统一资源定位符（</strong><em>Uniform Resource Locator</em><strong>）</strong>。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 web 服务器的拥有者需要认真地维护资源以及与它关联的URL。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>还没有可用的资料。<a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="深入探索">深入探索</h2> + +<h3 id="基础：剖析URL">基础：剖析URL</h3> + +<p>下面是一些URL的示例：</p> + +<pre class="notranslate">https://developer.mozilla.org +https://developer.mozilla.org/en-US/docs/Learn/ +https://developer.mozilla.org/en-US/search?q=URL</pre> + +<p>您可以将上面的这些网址输进您的浏览器地址栏来告诉浏览器加载相关联的页面（或资源）。</p> + +<p>一个URL由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个URL为例看看其中最重要的部分：</p> + +<pre class="notranslate">http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument</pre> + +<dl> + <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt> + <dd><code>http</code> 是协议。它表明了浏览器必须使用何种协议。它通常都是HTTP协议或是HTTP协议的安全版，即HTTPS。Web需要它们二者之一，但浏览器也知道如何处理其他协议，比如<code>mailto:（打开邮件客户端）或者<font face="Open Sans, Arial, sans-serif"> </font></code><code>ftp:（处理文件传输），所以当你看到这些协议时，不必惊讶。</code></dd> + <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>www.example.com</code> 是域名。 它表明正在请求哪个Web服务器。或者，可以直接使用{{Glossary("IP address")}}, 但是因为它不太方便，所以它不经常在网络上使用。.</dd> + <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>:80</code> 是端口。 它表示用于访问Web服务器上的资源的技术“门”。如果Web服务器使用HTTP协议的标准端口（HTTP为80，HTTPS为443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。</dd> + <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>/path/to/myfile.html</code> 是网络服务器上资源的路径。在Web的早期阶段，像这样的路径表示Web服务器上的物理文件位置。如今，它主要是由没有任何物理现实的Web服务器处理的抽象。</dd> + <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>?key1=value1&key2=value2</code> 是提供给网络服务器的额外参数。 这些参数是用 <code>& </code>符号分隔的键/值对列表。在返回资源之前，Web服务器可以使用这些参数来执行额外的操作。每个Web服务器都有自己关于参数的规则，唯一可靠的方式来知道特定Web服务器是否处理参数是通过询问Web服务器所有者。</dd> + <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>#SomewhereInTheDocument</code> 是资源本身的另一部分的锚点. 锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在HTML文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。值得注意的是，＃后面的部分（也称为片段标识符）从来没有发送到请求的服务器。</dd> +</dl> + +<p>{{Note('这里是关于URLs的 <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">一些额外的部分和一些额外的规则</a> , 但它们对于普通用户或Web开发者不是非常重要。 你不必担心这个，要构筑和使用完全实用的URLs不必了解这些。')}}</p> + +<p>你可能想到一个URL类似普通信件的地址：协议代表你要使用的邮政服务，域名是城市或者城镇，端口则像邮政编码；路径代表着你的信件所有递送的大楼；参数则提供额外的信息，如大楼所在单元；最后，锚点表示信件的收件人。</p> + +<h3 id="如何使用URL">如何使用URL</h3> + +<p>可以直接在浏览器的地址栏里输入任何URL，来获得后台的资源。但是这仅仅是冰山一角。</p> + +<p> {{Glossary("HTML")}} 语言 — <a href="/en-US/docs/Learn/HTML/HTML_tags">后续会再来讨论</a> — 对URLs有大量的使用:</p> + +<ul> + <li>为在其他文档中新建链接，用 {{HTMLElement("a")}} ;</li> + <li>为将文档与它的相关资源关联，用各种标签如 {{HTMLElement("link")}} 或 {{HTMLElement("script")}} ;</li> + <li>为显示多媒体如图片 (用 {{HTMLElement("img")}} ), 视频 (用 {{HTMLElement("video")}} ), 声音和音乐 (用 {{HTMLElement("audio")}} ), 等等;</li> + <li>为显示其他HTML文档，用 {{HTMLElement("iframe")}} .</li> +</ul> + +<p>其他大量使用URLs的技术如 {{Glossary("CSS")}} 或 {{Glossary("JavaScript")}}, 这些才是Web的中心。</p> + +<h3 id="绝对URL和相对URL">绝对URL和相对URL</h3> + +<p>我们上面看到的是一个绝对的URL，但也有一个叫做相对URL的东西。我们来看看这个区别意味着什么呢？</p> + +<p>URL的必需部分在很大程度上取决于使用URL的上下文。在浏览器的地址栏中，网址没有任何上下文，因此您必须提供一个完整的（或绝对的）URL，就像我们上面看到的一样。您不需要包括协议（浏览器默认使用HTTP）或端口（仅当目标Web服务器使用某些异常端口时才需要），但URL的所有其他部分都是必需的。</p> + +<p>当文档中使用URL时，例如HTML页面中的内容有所不同。因为浏览器已经有文档自己的URL，它可以使用这些信息来填写该文档中可用的任何URL的缺失部分。我们可以通过仅查看URL的路径部分来区分绝对URL和相对URL。<strong>如果URL的路径部分以“/”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文</strong>。</p> + +<p>我们来看一些例子来使这个更清楚。</p> + +<h4 id="绝对URL示例">绝对URL示例</h4> + +<dl> + <dt>完整网址（与之前使用的网址相同）</dt> + <dd> + <pre class="notranslate">https://developer.mozilla.org/en-US/docs/Learn</pre> + </dd> + <dt>隐去协议</dt> + <dd> + <pre class="notranslate">//developer.mozilla.org/en-US/docs/Learn</pre> + + <p>在这种情况下，浏览器将使用与用于加载该URL的文档相同的协议来调用该URL。</p> + </dd> + <dt>隐去域名</dt> + <dd> + <pre class="notranslate">/en-US/docs/Learn</pre> + + <p>这是HTML文档中绝对URL最常见的用例。浏览器将使用与用于加载托管该URL的文档相同的协议和相同的域名。<strong>注意</strong>：不可能省略该域名而不省略协议。</p> + </dd> +</dl> + +<h4 id="相对URL示例">相对URL示例</h4> + +<p>为了更好地了解以下示例，我们假设从位于以下URL的文档中调用URL： <code>https://developer.mozilla.org/en-US/docs/Learn</code></p> + +<dl> + <dt>子资源</dt> + <dd> + <pre class="notranslate">Skills/Infrastructure/Understanding_URLs +</pre> + 因为该URL不以/开头，浏览器将尝试在包含当前资源的子目录中查找文档。所以在这个例子中，我们真的想要达到这个URL<code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd> + <dt>回到目录树中</dt> + <dd> + <pre class="notranslate">../CSS/display</pre> + + <p>在这种情况下，我们使用从UNIX文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器。在这里，我们要达到以下URL：https://developer.mozilla.org/en-US/docs/Learn/../CSS/display，可以将其简化为：https://developer.mozilla.org/en-US/docs/CSS/display</p> + </dd> +</dl> + +<h3 id="语义_URLs">语义 URLs</h3> + +<p>尽管URL具有非常的技术性，但URL表示一个可读性的网站入口点。它们可以被记住，并且任何人都可以将它们输入浏览器的地址栏。人是Web的核心，因此建立所谓的 <em><a href="http://en.wikipedia.org/wiki/Semantic_URL">semantic URLs</a> </em>被认为是最佳实践。语义URL使用具有固有含义的单词，任何人都可以理解，无论他们的技术水平如何。</p> + +<p>语言语义当然与电脑无关。您可能经常看到看起来像随机字符混搭的网址。但创建人类可读的URL有很多优点：</p> + +<ul> + <li>操作它们更容易</li> + <li>它根据用户在哪里，他们在做什么，他们正在阅读或在网络上进行互动来澄清用户的情况。</li> + <li>一些搜索引擎可以使用这些语义来改进相关页面的分类。</li> +</ul> + +<h2 id="下一步">下一步</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name">理解域名</a></li> +</ul> diff --git a/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html b/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..406b8e88be --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,116 @@ +--- +title: 什么是网络服务器？ +slug: Learn/Common_questions/What_is_a_web_server +translation_of: Learn/Common_questions/What_is_a_web_server +--- +<div class="summary"> +<p>在这篇文章中我们会重温什么是网络服务器，它们如何工作，以及为什么它们很重要。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>您应该已经知道 <a href="/en-US/docs/learn/How_the_Internet_works">互联网是怎么工作的</a>，并且<a href="/zh-CN/docs/learn/常见问题/网页，网站，网页服务器和搜索引擎的区别是什么？">了解网页，网站，网络服务器和搜索引擎的区别是什么</a></td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解网络服务器，明白它大概的工作原理</td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p>“网络服务器（Web server）”可以代指硬件或软件，或者是它们协同工作的整体。</p> + +<ol> + <li>硬件部分，一个网络服务器是一台存储了网络服务软件以及网站的组成文件（比如，HTML文档、图片、CSS样式表和JavaScript文件）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。</li> + <li>软件部分，网络服务器包括控制网络用户如何访问托管文件的几个部分，至少他要是一台HTTP服务器。一台HTTP服务器是一种能够理解URL（网络地址）和HTTP（浏览器用来查看网页的协议）的软件。通过服务器上存储的网站的域名（比如mozilla.org）可以访问这个服务器，并且他还可以将他的内容分发给最终用户的设备。</li> +</ol> + +<p>基本上，当浏览器需要一个托管在网络服务器上的文件的时候，浏览器通过HTTP请求这个文件。当这个请求到达正确的网络服务器（硬件）时，HTTP服务器（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个404响应）， 并把这个文档通过HTTP发送给浏览器。</p> + +<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p> + +<p>要发布一个网站，你需要一个静态或动态的服务器。</p> + +<p>静态网络服务器（<strong>static web server</strong>），或者堆栈，由一个计算机（硬件）和一个 HTTP 服务器（软件）组成。我们称它为 “静态” 是因为这个服务器把它托管文件的 “保持原样” 地传送到你的浏览器。</p> + +<p>动态网络服务器（<strong>dynamic web server</strong>）<strong> </strong>由一个静态的网络服务器加上额外的软件组成，最普遍的是一个应用服务器 [<em>application server</em>] 和一个数据库 [<em>database</em>]。我们称它为 “动态” 是因为这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新。</p> + +<p>举个例子，要生成你在浏览器中看到的最终网页，应用服务器或许会用一个数据库中的内容填充一个 HTML 模板。网站像 MDN 或者维基百科 [Wikipedia] 有成千上万的网页，但是它们不是真正的 HTML 文档，它们只是少数的 HTML 模板以及一个巨大的数据库。这样的设置让它更快更简单地维护以及分发内容。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>还没有可用的资料。请考虑为此投稿 [<a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>]。</em></p> + +<h2 id="深入探索">深入探索</h2> + +<p>要取得一个网页，如同我们已经说过的那样，你的浏览器会发送一个请求到网络服务器，继而这个网络服务器会在它自己的存储空间中搜索所请求的文件。当找到这文件时，这个服务器会读取它，按需处理它，并且把它传送回浏览器。让我们更仔细地观察这些步骤。</p> + +<h3 id="托管文件">托管文件</h3> + +<p>一个网络服务器首先需要存储这个网站的文件，也就是说所有的 HTML 文档和它们的相关资源 （related assets），包括图片，CSS 样式表，JavaScript 文件，字形 （fonts） 以及影像。</p> + +<p>严格来说，你可以在你自己的计算机上托管所有的这些文件，但是在一个专用的网络服务器上存储它们会方便得多，因为它</p> + +<ul> + <li>会一直启动和运行</li> + <li>会一直与互联网连接</li> + <li>会一直拥有一样的 IP 地址（不是所有的 {{Glossary("ISP", "ISPs")}} 都会为家庭线提供一个固定的 IP 地址）</li> + <li>由一个第三方提供者维护</li> +</ul> + +<p>因为所有的这些原因，寻找一个优秀的托管提供者是建立你的网站的一个重要部分。比较不同公司提供的服务并选择一个适合你的需求和预算的服务（服务的价格从免费到每月上万美金不等）。你可以在这篇文章 （<a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">article</a>）中找到更多的细节。</p> + +<p>一旦你设置好一个网络托管解决方案，你只需要去上传你的文件到你的网络服务器 [<a href="/en-US/docs/Learn/Upload_files_to_a_web_server">upload your files to your web server</a>]。</p> + +<h3 id="通过HTTP交流">通过HTTP交流</h3> + +<p>第二点，一个网络服务器提供了 {{Glossary("HTTP")}}（超文本传输协议）支持。正如它的名字暗示，HTTP 明确提出了如何在两台计算机间传输超文本（比如说链接的网络文档 （linked web documents））。</p> + +<p>一个<em>协议（</em>{{Glossary("Protocol")}}<em>）</em>是一套为了在两台计算机间交流而制定的规则。 HTTP 是一个文本化的 （textual），无状态的 （stateless）协议。</p> + +<dl> + <dt>文本化</dt> + <dd>所有的命令都是纯文本的 （plain-text） 和人类可读的 （human-readable）。</dd> + <dt>无状态</dt> + <dd>无论是服务器还是客户都不会记住之前的交流。举个例子，仅依靠 HTTP，一个服务器不能记住你输入的密码或者你正处于业务中的哪一步。你需要一个应用服务器来进行这样的工作。（我们会在日后的文章中涵盖这类的技术。）</dd> +</dl> + +<p>HTTP 为客户和服务器间的如何沟通提供清晰的规则。我们会在日后的一篇<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">技术文章 </a>中覆盖 HTTP 本身。就目前而言，只需要知道这几点：</p> + +<ul> + <li>只有<em>用户</em>可以制定 HTTP 请求，然后只会发送到<em>服务器</em>。服务器只能响应客户端的HTTP请求。</li> + <li>当通过 HTTP 请求一个文件时，客户必须提供这个文件的{{Glossary("URL")}}。</li> + <li>网络服务器<em>必须应答</em>每一个 HTTP 请求，至少也要回复一个错误信息。</li> +</ul> + +<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>在一个网络服务器上，HTTP服务器负责处理和应答传入的请求。</p> + +<ol> + <li>当收到一个请求时， HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。</li> + <li>如果是，网络服务器会传送文件内容回到浏览器。如果不是，一个应用服务器会建立必要的文件。</li> + <li>如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是 “404 未找到” ["404 Not Found"]。（这错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面 [<a href="http://www.404notfound.fr/" rel="external">404 error pages</a>]。）</li> +</ol> + +<h3 id="静态和动态内容">静态和动态内容</h3> + +<p>粗略地说，一个服务器可以提供静态或者动态的内容。“静态” 意味着 “保持原样地提供”。静态的网站是最容易建立的，所以我们建议你制作一个静态的网站作为你的第一个网站。</p> + +<p>“动态” 意味着服务器会处理内容甚至实时地从一个数据库中产生它。这个解决方案提供了更多的灵活性，但是技术堆栈变得更难去处理，让建立网站更惊人地复杂。</p> + +<p>以你正在阅读的页面为例子。在正在托管它的网络服务器里，有一个应用服务器会从数据库提取文章内容，安排它的布局，把它放置在一些 HTML 模板中，然后为你传输结果。在这里，这个应用服务器叫做 <a href="/en-US/docs/MDN/Kuma">Kuma</a> 并且是由 <a href="https://www.python.org/">Python</a> （使用 <a href="https://www.djangoproject.com/">Django</a> 构架) 构建的。Mozilla 团队为了 MDN 的特殊要求开发 Kuma，但是这里有很多相似的建立在很多其他技术之上的应用。</p> + +<p>这里有太多的应用服务器，所以提供一个具体的服务器是挺难的。有些应用服务器迎合具体的网站类别，像是博客，百科或者电子商店；其他的应用服务器，叫做 {{Glossary("CMS", "CMSs")}}（内容管理系统 [content management systems]），则更加通用。如果你正在开发一个动态网站，请花一些时间去选择适合你需求的工具。除非你想要学习一些网络服务器编程 [web server programming]（而这本身就是一个令人兴奋的领域！），否则你不需要去创建你自己的应用服务器。这只是在重新创造轮子（{{Interwiki("wikipedia", "reinventing the wheel")}}）。</p> + +<h2 id="下一步">下一步</h2> + +<p>现在您已熟悉了网络服务器，您可以</p> + +<ul> + <li>钻研在网络上做某些事情要花费多少 [<a href="/en-US/docs/Learn/How_much_does_it_cost">how much it costs to do something on the web</a>]</li> + <li>学习关于创建一个网页所需要的各种软件 [<a href="/en-US/docs/Learn/What_software_do_I_need">various software you need to create a website</a>]</li> + <li>移步到某些实用的东西，像是如何上传文件到一个网页服务器 [<a href="/en-US/docs/Learn/Upload_files_to_a_web_server">how to upload files on a web server</a>]。</li> +</ul> diff --git a/files/zh-cn/learn/common_questions/what_is_accessibility/index.html b/files/zh-cn/learn/common_questions/what_is_accessibility/index.html new file mode 100644 index 0000000000..92c0f6f0e5 --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_is_accessibility/index.html @@ -0,0 +1,90 @@ +--- +title: 何为可访问性？ +slug: Learn/Common_questions/What_is_accessibility +translation_of: Learn/Common_questions/What_is_accessibility +--- +<div class="summary"> +<p>本文介绍了Web可访问性背后的一些基本概念。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>无</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习可访问性，了解其重要性</td> + </tr> + </tbody> +</table> + +<h2 id="概述">概述</h2> + +<p>由于身体或技术上的限制，你的访客也许无法以像你期望的方式体验网站。本文中，我们给出了可访问性的一般原则，并解释了其中的一些规则。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>还没有可用的资料。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="深入探索">深入探索</h2> + +<h3 id="可访问性_一般原则">可访问性: 一般原则</h3> + +<p>We might associate accessibility at first with negative limitations. This building has to be accessible, so it must follow these regulations for door width and toilet size and elevator placement.</p> + +<p>That's a narrow way to think of accessibility. Think of it as a wonderful way to empower people and serve more customers. What can the people in Brazil do with your English website? Can the people with smartphones browse a heavy, cluttered website designed for a large desktop monitor and unlimited bandwidth? They'll go somewhere else. In general, <em>we must think about our product from the viewpoints of all our target customers, and adapt accordingly. </em>Hence accessibility.</p> + +<h3 id="Web可访问性">Web可访问性</h3> + +<p>In the specific context of the web, accessibility means that anyone can benefit from your content, regardless of disability, location, technical limitations, or other circumstances.</p> + +<p>Let's consider video:</p> + +<dl> + <dt>听力障碍</dt> + <dd>How does a hearing-impaired person benefit from a video? You have to provide subtitles —or even better, a full text transcript.</dd> + <dd>Also, make sure people can adjust the volume to accommodate their unique needs.</dd> + <dt>视觉障碍</dt> + <dd>Again, provide a text transcript that a user can consult without needing to play the video, and an audio-description (an off-screen voice that describes what is happening in the video).</dd> + <dt>暂停功能</dt> + <dd>Users may have trouble understanding someone in a video. Let them pause the video to read the subtitles or process the information.</dd> + <dt>键盘功能</dt> + <dd>Let the user tab into/out of a video, play it, and pause it without being trapped in it.</dd> +</dl> + +<h4 id="Web可访问性基础">Web可访问性基础</h4> + +<p>A few necessities for basic Web accessibility include:</p> + +<ul> + <li>Whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections.</li> + <li>Make sure all users can operate graphical interfaces (like unfolding menus) solely with a keyboard (e.g., with Tab and the Return key).</li> + <li>Provide an attribute explicitly specifying your content's language, so that screen readers read your text properly.</li> + <li>Make sure that a user can navigate to all widgets on a page solely with the keyboard, without getting trapped. (At least let them Tab in and out.)</li> +</ul> + +<p>而这只是个开始。</p> + +<h3 id="可访问性的拥护者">可访问性的拥护者</h3> + +<p>Since 1999, the {{Glossary("W3C")}} has operated a working group called the {{Glossary("WAI","Web Accessibility Initiative")}} (WAI) promoting accessibility through guidelines, support material, and international resources.</p> + +<h2 id="更多细节">更多细节</h2> + +<p>请参阅</p> + +<ul> + <li>关于可访问性的 <a href="https://en.wikipedia.org/wiki/Accessibility">维基百科文章</a></li> + <li><a href="http://www.w3.org/WAI/">WAI (W3C's Web Accessibility Initiative)</a></li> +</ul> + +<h2 id="下一步">下一步</h2> + +<p>Accessibility can impact both a website's design and technical structure.</p> + +<ul> + <li>From a design point of view, we suggest learning about <a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">designing for all types of users</a>.</li> + <li>If the technical side interests you more, you could learn how to <a href="/en-US/docs/Learn/Using_images">embed images in webpages</a>.</li> +</ul> diff --git a/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html b/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..0759eb0381 --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,140 @@ +--- +title: 我需要什么软件来构建一个网站 +slug: Learn/Common_questions/What_software_do_I_need +translation_of: Learn/Common_questions/What_software_do_I_need +--- +<div class="summary"> +<p>在这篇文章我们会展示当你编辑，上传或者浏览一个网站时所需要的软件成分。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">先决条件：</th> + <td>你应当已经知道 网页，网站，网络服务器，以及搜索引擎间的区别 [<a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">the difference between webpages, websites, web servers, and search engines</a>]。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习当你想要编辑，上传，或者浏览一个网站时所需要的软件成分。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>你可以免费下载大部分网络开发所需要的程序。我们会在此文章中提供一些链接。你会需要工具去 1) 创建和编辑网页，2) 上传文件到你的网络服务器，和 3) 浏览你的网站。</p> + +<p>几乎所有的操作系统内置了一个文本编辑器和网站阅读器（被称作 浏览器）。所以通常你只需要获得用来传输文件到你的网络服务器的软件。</p> + +<h2 id="自主学习">自主学习</h2> + +<p><em>现在还没有自主学习活动。请考虑投稿 [<a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>]。</em></p> + +<h2 id="深度探索">深度探索</h2> + +<h3 id="创建和编辑网页">创建和编辑网页</h3> + +<p>要创建和编辑一个网站，你需要一个文本编辑器。文本编辑器创建并修改无格式的文本文件。（其他格式，像是 <strong>{{Glossary("RTF")}}</strong>，允许你去添加格式，像是加粗或者下划线。这些格式并不适用于编写网页。）你应当明智地选择一个文本编辑器，因为当你建立网站时，你会广泛地使用到它。</p> + +<p>所有的桌面操作系统内置了一个基本的文本编辑器。这些编辑器是很直白的，但是缺乏了网页编码所需的特殊功能。如果你想要一些更花俏的东西，这里有很多可用的第三方工具。第三方编辑器通常包含了额外的功能，包括句法填色 [syntax coloring]，自动填充 [auto-completion]，可折叠区间 [collapsible sections]，以及代码搜索 [code search]。这里有一个短的编辑器列表：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">操作系统</th> + <th scope="col">内置编辑器</th> + <th scope="col">第三方编辑器</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></td> + <td> + <p><a href="http://notepad-plus-plus.org/">Notepad++</a></p> + + <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p> + + <p><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></p> + </td> + </tr> + <tr> + <td>Mac OS</td> + <td><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></td> + <td><a href="http://www.barebones.com/products/textwrangler/">TextWrangle</a></td> + </tr> + <tr> + <td>Linux</td> + <td><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)<br> + <a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)<br> + <a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)<br> + <a href="http://en.wikipedia.org/wiki/Kate_(text_editor)" rel="external">LeafPad</a> (Xfce)</td> + <td><a href="http://www.gnu.org/software/emacs/">Emacs</a><br> + <a href="http://www.vim.org/" rel="external">Vim</a></td> + </tr> + </tbody> +</table> + +<p>这里是一个高级文本编辑器的截图：</p> + +<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p> + +<h3 id="上传文件到网络">上传文件到网络</h3> + +<p>当你的网站已经为公众浏览做好准备，你会需要上传你的网页到你的网络服务器。你可以从不同的供应者（查看 在网络上做某些东西要花费多少 [<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a>]）处购买服务器的空间。一旦你选择好供应者，供应者会通过电子邮件给你发送 FTP（文件传输协议 [file transfer protocol]）访问信息。上传文件到一个网络服务器是创建一个网站的重要一环，所以我们会在一篇独立的文章 [<a href="/en-US/docs/Learn/Upload_files_to_a_web_server">a separate article</a>] 中介绍它。就目前而言，这里有一小列免费的基本 FTP 客户端：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">操作系统</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"> FTP 软件</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td> + <p><a href="http://winscp.net" rel="external">WinSCP</a></p> + + <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p> + </td> + <td colspan="1" rowspan="3"><a href="https://filezilla-project.org/">FileZilla</a> (All OS)</td> + </tr> + <tr> + <td>Linux</td> + <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br> + <a href="http://www.konqueror.org/">Konqueror</a> (KDE)</td> + </tr> + <tr> + <td>Mac OS</td> + <td><a href="http://cyberduck.de/">Cyberduck</a></td> + </tr> + </tbody> +</table> + +<h3 id="浏览页面">浏览页面</h3> + +<p>正如你所知，你需要一个网页浏览器去查看网页。这里有一系列的 [<a href="http://en.wikipedia.org/wiki/List_of_web_browsers">dozens</a>] 可选浏览器供你个人实用，不过当你在开发一个网页时，你应当至少用以下的主流浏览器测试它，以保证你的网站可供大部分人浏览：</p> + +<ul> + <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox</a></li> + <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li> + <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li> + <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li> +</ul> + +<p>如果你正以特定的群体（比如说技术平台或者国家）为目标，你或许需要用额外的浏览器，像是 <a href="http://www.opera.com/" rel="external">Opera</a>、 <a href="http://dolphin.com/" rel="external">Dolphin</a> 或者<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>，来测试它。</p> + +<p>但是因为某些浏览器只会在特定的操作系统上运行，测试会变得复杂。Apple Safari 在 iOS 和 Mac OS 上运行，而 Internet Explorer 则只在 Windows 上运行。这时候最好利用像是 <a href="http://browsershots.org/" rel="external">Browsershots</a> 或者 <a href="http://www.browserstack.com/" rel="external">Browserstack</a> 之类的服务。Browsershots 提供你的网站的截图，就如同它会在不同浏览器中所看到那样。Browserstack 实际上给予你完全远程访问虚拟机 [virtual machines] 的权限，所以你可以在最普遍的环境中测试你的网站。或者，你可以设置你自己的虚拟机，不过这需要一些专业知识。（如果你选择了这样做，微软 [Microsoft] 在 <a href="https://modern.ie" rel="external">modern.ie</a> 上为开发者提供了一些工具，包括随时可用的虚拟机。)</p> + +<p>务必在一个真实设备上运行一些测试，尤其是在真实的移动设备 [mobile devices] 上。移动设备模拟是一个崭新的，进化中的技术，而且它并不及桌面模拟可靠。当然，移动设备耗费金钱，所以我们推荐你查看一下 <a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>。你同时也可以分享设备，如果你想要不花费太多地在多平台上测试的话。</p> + +<h2 id="下一步">下一步</h2> + +<ul> + <li>这里的一些软件是免费的，但不是所有都是。探寻在网络上做一些事情需要花费多少 [<a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Find out how much it costs to do something on the web</a>]。</li> + <li>如果你想要了解更多关于文本编辑器的知识，阅读我们关于如何选择并安装一个文件浏览器 [<a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>] 的文章。</li> + <li>如果你寻思如何在网络上发布你的网站，查阅 “如何上传文件到一个网络服务器 [<a href="/en-US/docs/Learn/Upload_files_to_a_web_server">How to upload files to a web server</a>]”。</li> +</ul> + +<p> </p> diff --git a/files/zh-cn/learn/common_questions/实用文本编辑器/index.html b/files/zh-cn/learn/common_questions/实用文本编辑器/index.html new file mode 100644 index 0000000000..f8f394191d --- /dev/null +++ b/files/zh-cn/learn/common_questions/实用文本编辑器/index.html @@ -0,0 +1,295 @@ +--- +title: 什么文本编辑器比较好用？ +slug: Learn/Common_questions/实用文本编辑器 +translation_of: Learn/Common_questions/Available_text_editors +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<div class="summary"> +<p>在这篇文章中我们强调了关于web开发者安装文本编辑器的一些考虑事项。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>你应该已经知晓了<a href="/en-US/Learn/What_software_do_I_need"> 为了建立一个网站所需的各种软件</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习作为一个web开发者如何选择一个最适合自己需求的文本编辑器。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>一个网站包括很多文本文件， 所以为了拥有一个有趣的，令人愉快的开发经历你应该明智地选择你的文本编辑器。 </p> + +<p>可做选择的文本编辑器数量实在是太多了，因为文本编辑器对于计算机科学来说是如此基础（是的，web开发是计算机科学）。按理想来说，你应该尽你可能的尝试足够多的编辑器然后感受出来哪一款适合你的工作流程。但是我们将会给予你一些初学者的建议。</p> + +<p>以下是一些你应该考虑的基本问题：</p> + +<ul> + <li>我想在哪一个操作系统上工作?</li> + <li>我想使用什么样的技术?</li> + <li>我希望我的文本编辑器具备哪些基本功能?</li> + <li>我想为我的文本编辑器添加额外功能吗?</li> + <li>当使用文本编辑器时我需要支持或者帮助吗?</li> + <li>对我来说文本编辑器的外观和感觉重要吗?</li> +</ul> + +<p>注意我们没有提及价格。显然，这也是要注意的，但一件产品的成本和它的质量或性能几乎没有关系。很大概率下，你能找到一个合适的免费文本编辑器。</p> + +<p>以下是一些流行的编辑器：</p> + +<table class="standard-table" style="height: 522px; width: 917px;"> + <thead> + <tr> + <th scope="col">编辑器</th> + <th scope="col">授权条款</th> + <th scope="col">价格</th> + <th scope="col">操作系统</th> + <th scope="col">支持</th> + <th scope="col">文档</th> + <th scope="col">可延展性</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://atom.io/">Atom</a></td> + <td>MIT/BSD</td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://discuss.atom.io/categories" rel="external">论坛</a></td> + <td><a href="https://atom.io/docs/latest/">在线指南</a></td> + <td style="text-align: center;"><a href="https://atom.io/packages">是</a></td> + </tr> + <tr> + <td><a href="http://brackets.io/" rel="external">Brackets</a></td> + <td>MIT/BSD</td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">论坛</a>， <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td> + <td><a href="https://github.com/adobe/brackets/wiki" rel="external">GitHub Wiki</a></td> + <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">是</a></td> + </tr> + <tr> + <td><a href="https://panic.com/coda/" rel="external">Coda</a></td> + <td>闭源</td> + <td style="text-align: center;">$99</td> + <td>Mac</td> + <td><a href="https://twitter.com/panic">推特</a>, <a href="https://panic.com/qa" rel="external">论坛</a>, <a href="mailto:coda@panic.com">电子邮件</a></td> + <td><a href="https://panic.com/coda/#book">电子书</a></td> + <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">是</a></td> + </tr> + <tr> + <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td> + <td>GPL 3</td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">常见问题</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">邮件清单</a>, <a href="news://gnu.emacs.help" rel="external">新闻组</a></td> + <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">在线指南</a></td> + <td style="text-align: center;">是</td> + </tr> + <tr> + <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td> + <td>闭源</td> + <td style="text-align: center;">$75</td> + <td>Mac</td> + <td><a href="http://www.macrabbit.com/support/" rel="external">常见问题</a>, <a href="mailto:support@macrabbit.com">电子邮件</a></td> + <td>没有终端用户文档，但有<a href="http://wiki.macrabbit.com/">插件文档</a></td> + <td style="text-align: center;">是</td> + </tr> + <tr> + <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td> + <td>GPL</td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">邮件清单</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td> + <td><a href="https://help.gnome.org/users/gedit/stable/">在线指南</a></td> + <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">是</a></td> + </tr> + <tr> + <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td> + <td>MPL</td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://forum.komodoide.com/" rel="external">论坛</a></td> + <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">在线指南</a></td> + <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">是</a></td> + </tr> + <tr> + <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td> + <td>GPL</td> + <td style="text-align: center;">免费</td> + <td>Windows</td> + <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">论坛</a></td> + <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td> + <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">是</a></td> + </tr> + <tr> + <td><a href="http://www.pspad.com/">PSPad</a></td> + <td>闭源</td> + <td style="text-align: center;">免费</td> + <td>Windows</td> + <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">常见问题</a>, <a href="http://forum.pspad.com/" rel="external">论坛</a></td> + <td><a href="http://gogogadgetscott.info/pspad/">在线帮助</a></td> + <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">是</a></td> + </tr> + <tr> + <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td> + <td>闭源</td> + <td style="text-align: center;">$70</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">论坛</a></td> + <td><a href="http://www.sublimetext.com/docs/3/">官方文档</a>，<a href="http://docs.sublimetext.info/en/latest/index.html"> 非官方文档</a></td> + <td style="text-align: center;"><a href="https://sublime.wbond.net/">是</a></td> + </tr> + <tr> + <td><a href="http://macromates.com/" rel="external">TextMate</a></td> + <td>闭源</td> + <td style="text-align: center;">$50</td> + <td>Mac</td> + <td><a href="https://twitter.com/macromates">推特</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">邮件清单</a>, <a href="mailto:tm-support@macromates.com">电子邮件</a></td> + <td><a href="http://manual.macromates.com/en/">在线指南</a>， <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td> + <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">是</a></td> + </tr> + <tr> + <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td> + <td>闭源</td> + <td style="text-align: center;">免费</td> + <td>Mac</td> + <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">常见问题</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">论坛</a></td> + <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">PDF指南</a></td> + <td style="text-align: center;">否</td> + </tr> + <tr> + <td><a href="http://www.vim.org/" rel="external">Vim</a></td> + <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">特殊开放式许可证</a></td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://www.vim.org/maillist.php#vim" rel="external">邮件清单</a></td> + <td><a href="http://vimdoc.sourceforge.net/">在线指南</a></td> + <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&direction=descending" rel="external">是</a></td> + </tr> + <tr> + <td><a href="https://code.visualstudio.com/download">Visual Studio Code</a></td> + <td>MIT许可下的<a href="https://github.com/microsoft/vscode">开放源码</a>/ 产品的具体许可证</td> + <td style="text-align: center;">免费</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://code.visualstudio.com/docs/supporting/faq">常见问题</a> </td> + <td><a href="https://code.visualstudio.com/docs">文件</a></td> + <td style="text-align: center;"><a href="https://marketplace.visualstudio.com/VSCode">是</a></td> + </tr> + </tbody> +</table> + +<h2 id="主动学习">主动学习</h2> + +<p><em>还没有主动学习。 <a href="/en-US/docs/MDN/Getting_started">请考虑投稿贡献。</a></em></p> + +<h2 id="深入挖掘">深入挖掘</h2> + +<h3 id="选择标准">选择标准</h3> + +<p>所以，更详细地说，你在选择文本编辑器时应该怎么考虑？</p> + +<h4 id="我想在哪个操作系统上工作？">我想在哪个操作系统上工作？</h4> + +<p>当然这是你的选择。然而，一些编辑器只支持特定的操作系统，所以如果你喜欢切换系统，这将会缩小你的选择范围。只要在你的系统上运行了，任何文本编辑器都<em>能 </em>完成工作，但跨平台的编辑器可以轻松的在操作系统间迁移。</p> + +<p><font>所以首先找出你使用的操作系统，然后检查指定的编辑器是否支持你的操作系统。</font><font>大多数编辑器在他们的网站上指定了是否支持Windows或Mac，尽管一些编辑器只支持某些版本（比如说只有Windows 7或更高版本而不是Vista）。</font><font>如果正在运行Ubuntu，最好的方法是在Ubuntu软件中心内进行搜索。当然，一般来说，Linux / UNIX系列是一个相当多元化的地方，其中不同的发行版与不同的不兼容的包装系统配合使用。这意味着，如果你强烈地（而不是微弱的）想使用某些未经编译的文本编辑器，则可能需要下载源码自己编译它。</font></p> + +<h4 id="我想使用什么样的技术">我想使用什么样的技术?</h4> + +<p><font><font>一般来说，任何文本编辑器都可以打开任意文本文件。</font><font>这对于自己写笔记来说是非常有用的，但是当你使用</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML：HTML（超文本标记语言）是指定网页结构的描述性语言。"><font><font>HTML</font></font></a><font><font>，</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" title="CSS：CSS（Cascading Style Sheets）是一种声明性语言，用于控制浏览器中网页的外观。"><font><font>CSS</font></font></a><font><font>和</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/JavaScript" title="JavaScript：JavaScript（JS）是一种编程语言，主要用于客户端动态脚本的页面，但往往也是服务器端。"><font><font>JavaScript</font></font></a><font><font>进行Web开发和编写时</font><font>，你将生产出很大的复杂文件。</font><font>通过选择一个适用你使用的技术的文本编辑器，可以使你更轻松自如。</font><font>许多文本编辑器可以帮助你实现如下功能</font></font></p> + +<ul> + <li><strong><font><font>代码着色。</font></font></strong><font><font>根据你使用的技术，通过对关键字进行颜色编码，使你的文件更清晰。</font></font></li> + <li><strong><font><font>代码完成。</font></font></strong><font><font>通过自动完成循环结构（例如，自动关闭HTML标签或为给定的CSS属性建议有效值）为你节省时间。</font></font></li> + <li><strong><font><font>代码段 。</font></font></strong><font><font>正如你在启动一个新的HTML文档时看到的，许多技术一遍又一遍地使用相同的文档结构。</font><font>通过使用代码段预先填写你的文档，可以节省你重新输入所有这些的麻烦。</font></font></li> +</ul> + +<p><font><font>大多数文本编辑器现在都支持代码着色，但不一定是支持其他两个功能。尤其</font><font>确保你的文本编辑器会对</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML：HTML（超文本标记语言）是指定网页结构的描述性语言。"><font><font>HTML</font></font></a><font><font>，</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" title="CSS：CSS（Cascading Style Sheets）是一种声明性语言，用于控制浏览器中网页的外观。"><font><font>CSS</font></font></a><font><font>和</font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Glossary/JavaScript" title="JavaScript：JavaScript（JS）是一种编程语言，主要用于客户端动态脚本的页面，但往往也是服务器端。">JavaScript</a>进行</font></font><font><font>颜色编码</font><font>。</font></font></p> + +<h4 id="我希望我的文本编辑器具备哪些基本功能">我希望我的文本编辑器具备哪些基本功能?</h4> + +<p><font><font>这取决于你的需求和计划。</font><font>以下功能通常是很有帮助的：</font></font></p> + +<ul> + <li><font><font>根据</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Regular_Expression" title="正则表达式：正则表达式（或正则表达式）是管理搜索中出现哪些字符序列的规则。"><font><font>正则表达式</font></font></a><font><font>或其他模式的需要</font><font>，在一个或多个文档中搜索和替换</font></font></li> + <li><font><font>快速跳到指定行</font></font></li> + <li><font><font>分别查看一个大文件的两个部分</font></font></li> + <li><font><font>预览HTML在浏览器中的显示情况</font></font></li> + <li><font><font>一次性选择多处文字</font></font></li> + <li><font><font>查看项目的文件和目录</font></font></li> + <li><font><font>使用代码美化程序自动格式化代码</font></font></li> + <li><font><font>检查拼写</font></font></li> +</ul> + +<h4 id="我想为我的文本编辑器添加额外功能吗">我想为我的文本编辑器添加额外功能吗?</h4> + +<p><font><font>可扩展的编辑器具有较少的内置功能，但可以根据你的需要进行扩展。</font></font></p> + +<p><font><font>如果你不确定要使用哪些功能，或者你最喜欢的编辑器缺少这些功能，使用可扩展编辑器吧。</font><font>最好的编辑器将会提供许多插件，理想的方法是自动查找和安装新的插件。</font></font></p> + +<p><font><font>如果你喜欢的功能</font></font><em><font><font>很多 </font></font></em><font><font>，并且你的编辑器因为安装的插件而变慢，请尝试使用IDE（集成开发环境）。</font><font>IDE在一个界面中提供了许多工具，对于初学者来说，这是一个令人望而生畏的工作，但是如果你感觉你的文本编辑器功能有限，这是一个不错的选项。</font><font>以下是一些流行的IDE：</font></font></p> + +<ul> + <li><a href="http://www.aptana.com/">Aptana Studio</a></li> + <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li> + <li><a href="http://komodoide.com/" rel="external">Komodo IDE</a></li> + <li><a href="https://netbeans.org/" rel="external">NetBeans IDE</a></li> + <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li> + <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li> +</ul> + +<h4 id="当使用文本编辑器时我需要支持或者帮助吗">当使用文本编辑器时我需要支持或者帮助吗?</h4> + +<p><font><font>如果在使用软件时可以获得帮助总是令人高兴的。</font><font>对于文本编辑器，请检查两种不同类型的支持：</font></font></p> + +<ol> + <li><font><font>面向用户的内容（常见问题，指南，在线帮助）</font></font></li> + <li><font><font>与开发者和其他用户讨论（论坛，电子邮件，IRC）</font></font></li> +</ol> + +<p><font><font>在学习如何使用编辑器时使用书面文档。</font><font>如果在安装或使用编辑器时遇到了疑难问题，请与其他用户联系。</font></font></p> + +<h4 id="对我来说文本编辑器的外观和感觉重要吗">对我来说文本编辑器的外观和感觉重要吗?</h4> + +<p><font>这个问题在于个人品味，但有些人喜欢自定义UI（用户界面）的每一个细节，从颜色到按钮位置。编辑器的灵活性差异很大，所以选择前先检查一下。找到一个</font><font>可以改变配色方案的文本编辑器并不难，但是如果你想要大量的自定义，你可能最好使用IDE。</font></p> + +<h3 id="安装并设置">安装并设置</h3> + +<p><font><font>安装文本编辑器通常很简单。</font><font>方法根据您的平台而有所不同，但都不难：</font></font></p> + +<ul> + <li><strong><font><font>Windows </font></font></strong><font><font>开发人员会给你一个</font></font><code>.exe</code><font><font>或</font></font><code>.msi</code><font><font>文件。也</font><font>有时候，软件为自带的压缩归档格式</font></font><code>.zip</code><font><font>，</font></font><code>.7z</code><font><font>或者</font></font><code>.rar</code><font><font>，在这种情况下，你需要安装其他程序来提取压缩文件的内容。</font></font><font><font>Windows支持默认情况下</font></font><code>.zip</code><font><font>。</font></font></li> + <li><strong><font><font>Mac </font></font></strong><font><font>在编辑器的网站上，您可以下载一个</font></font><code>.dmg</code><font><font>文件。</font><font>您也可以直接在Apple Store找到一些文本编辑器，使安装更简单。</font></font></li> + <li><strong><font><font>Linux。</font></font></strong><font><font>在最受欢迎的发行版中，您可以从图形包管理器（Ubuntu Software Center，mintInstall，GNOME Software等）开始。你通常可以发现一个预先包装软件的</font></font><code>.deb</code><font><font>或</font></font><code>.rpm</code><font><font>文件，但大多数时候你将使用你的发行版系统的存储库服务器，或者在最坏的情况下，从源代码编译编辑器。花时间仔细检查文本编辑器网站上的安装说明。</font></font></li> +</ul> + +<p><font><font>当您安装新的文本编辑器时，您的操作系统可能会继续使用其默认编辑器打开文本文件，直到您更改</font></font><em><font><font>文件关联。</font></font></em><font><font>这些说明将帮助您在指定操作系统中双击打开文件时选定首选编辑器：</font></font></p> + +<ul> + <li>Windows + <ul> + <li><a href="http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li> + <li><a href="http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li> + <li><a href="http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm">其他系统</a></li> + </ul> + </li> + <li><a href="http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/" rel="external">Mac OS X</a></li> + <li>Linux + <ul> + <li><a href="http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally" rel="external">Ubuntu Unity</a></li> + <li><a href="https://help.gnome.org/users/gnome-help/stable/files-open.html.en" rel="external">GNOME</a></li> + <li><a href="http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass">KDE</a></li> + </ul> + </li> +</ul> + +<h2 id="下一步">下一步</h2> + +<p><font><font>现在你已经选择了一个合适的文本编辑器，现在你可以花一些时间来搭建</font></font><a href="https://developer.mozilla.org/en-US/Learn/Set_up_a_basic_working_environment"><font><font>你的基本工作环境</font></font></a><font><font>，或者你想立即使用它，你可以写下</font></font><a href="https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML"><font><font>你的第一个网页</font></font></a><font><font>。</font></font></p> |