---
title: 如何建设一个网站
slug: Learn/tutorial/How_to_build_a_web_site
translation_of: Learn
translation_of_original: Learn/tutorial/How_to_build_a_web_site
---
<p>  当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。</p>

<p>我们建议你先从这儿的文章开始 ，认真学习它们，如果你在学习中有关术语的问题，请用我们的<a href="/en-US/docs/Glossary">词汇表</a>.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row" style="text-align: center;"> </th>
   <th scope="col" style="text-align: center;">理论<br>
    知识</th>
   <th scope="col" style="text-align: center;">技术<br>
    知识</th>
   <th scope="col" style="text-align: center;">实践<br>
    知识</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row" style="text-align: center;">1</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Thinking_before_coding">开始你的web项目</a></strong><br>
    <em>在这篇文章中我们首先讨论了在任何一个项目中你所必要的一步：确定你要完成什么和为什么.</em></td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">2</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_the_Internet_works">英特网是如何工作的</a></strong><br>
    <em>这篇文章将为你解释什么是英特网以及它是如何工作的。</em></td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">3</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> 了解网页、网站、服务器、以及搜索引擎之间的不同</a></strong></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_is_a_web_server">网络服务器是什么?</a></strong><br>
    <em>在这篇文章中，我们将要论述什么是网络服务器，它们是如何运作的以及它们为什么如此重要.</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_software_do_I_need">我们需要什么软件（它们用来干什么）?</a></strong><br>
    <em>在文中我们将要介绍你在编辑网页，上传文件，以及管理网站中你需要什么软件。</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">4</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_links_on_the_web">了解网络上的链接</a></strong><br>
    <em>在文章中, 我们将详细的论述网络链接, 这个在万维网中相当重要的一个角色.</em></td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">5</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_URLs">了解URLs以及它们的构成</a></strong><br>
    <em>在这篇文章中，我们将介绍URLs是什么（同一资源定位器）以及它们是如何构成的。</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_domain_names">认识域名</a></strong><br>
    <em>在这篇文章中，我们将对域名留下深刻印象：域名是什么，它们如何构成，以及怎样获取一个域名。</em></td>
   <td style="vertical-align: top;"> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">6</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">剖析一个网页</a></strong><br>
    <em>当你在做你自己的网站时，你最好知道一些普通的设计</em>.</td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_much_does_it_cost">在网上做些什么花费多少钱？</a></strong><br>
    <em>涉及到互联网的东西并不像它看起来那么便宜。在文中我们将论述你可能花费多少钱以及为什么。</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">7</th>
   <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">设计之外，基础的网页设计</a></td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">选择下载安装一个编辑器</a></strong><br>
    <em>在这篇文章中，我们强调一些事情关于下载安装编译器用于网站开发。</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">8</th>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">创建一个基本的工作环境</a></strong><br>
    <em>这篇文章让你用工作站建立你的网站</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">9</th>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">用HTML写一个简单的网页</a></strong><br>
    <em>学习如何创造一个简单的网页。</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Open_a_file_in_a_browser">打开文件在你的浏览器中r</a></strong><br>
    <em>这篇文章讲解了在浏览器中通过各种方式接入文件，以及这种正确的方式为什么如此重要。</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">10</th>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/HTML_tags">什么是HTML标签&amp;如何使用它们</a></strong><br>
    <em>这篇文章包含了 <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: The HyperText Markup Language (HTML) is a descriptive language specifically designed to structure web pages.">HTML</a> 基础:什么是标签以及如何使用它们。</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">上传文件到服务器</a></strong><br>
    <em>本文介绍了如何使用FTP工具发布你的网站</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">11</th>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;"> </td>
   <td style="vertical-align: top;">
    <p><strong><a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">检查你的网站是否工作正常</a></strong><br>
     <em>本指南概述了一些找到并修复常见错误的策略</em></p>
   </td>
  </tr>
 </tbody>
</table>

<p>这些是都是你需要的第一个网站学习的基本知识，但如果你想做出更高端更专业的网站，请继续往下读：</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row" style="text-align: center;"> </th>
   <th scope="col" style="text-align: center;">理论<br>
    知识</th>
   <th scope="col" style="text-align: center;">技术<br>
    知识</th>
   <th scope="col" style="text-align: center;">实践<br>
    知识</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row" style="text-align: center;">12</th>
   <td><a href="/en-US/docs/Learn/What_do_people_need_for_viewing_my_website">人们需要什么才能查看你的网站</a></td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">13</th>
   <td> </td>
   <td><strong><a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">在你的网页中使用CSS</a></strong><br>
    <em>本文将介绍如何使用CSS样式表来改变你的网页样式</em></td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">14</th>
   <td><strong><a href="/en-US/docs/Learn/What_is_accessibility">什么是无障碍性网页</a></strong><br>
    <em>本文介绍了无障碍性网页背后的基本概念。</em></td>
   <td><strong><a href="/en-US/docs/Learn/CSS/CSS_properties">什么是CSS属性以及该如何使用它们</a></strong><br>
    <em>CSS特性应该如何使用。本文介绍了图和使用CSS属性选择器应用HTML元素</em></td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">15</th>
   <td><strong><a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">为各类用户设计101</a></strong><br>
    <em>本文提供了基本的无障碍性网站技巧</em></td>
   <td>
    <p><strong><a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">CSS基本的文字排版</a></strong><br>
     <em>最常见的CSS属性概述</em></p>
   </td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">16</th>
   <td> </td>
   <td><a href="/en-US/docs/Learn/Using_images">使用图片</a></td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">17</th>
   <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">避开在网页设计中的常见陷阱</a></td>
   <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">用户体验（UX）基础</a></td>
   <td><a href="/en-US/docs/Learn/Design_of_navigation_menus">设计导航菜单</a></td>
  </tr>
 </tbody>
</table>

<p> </p>