path: root/files/zh-tw/learn/index.html

---
title: 學習該如何開發 Web
slug: Learn
tags:
  - Beginner
  - Index
  - Landing
  - Learn
  - NeedsTranslation
  - TopicStub
  - Web
translation_of: Learn
---
<div class="boxed translate-rendered">
<div>
<p class="summary"></p>

<p>{{LearnSidebar}}</p>

<p class="summary"></p>

<p class="summary">歡迎來到 MDN 的「學習專區（Learning Area）」。本系列文章將提供撰寫程式碼的必要網站，讓剛接觸的新手也能開發 Web。</p>
</div>

<p>MDN 學習專區不是要讓「初學者」變成「專家」；而是想讓「初學者」能夠更怡然自得。你在這裡可完全安排自己的進度，逐步探索<a href="https://developer.mozilla.org/zh-TW/"> MDN 的其他部分</a>，再接觸進階資源來堆砌之前所習得的知識。</p>

<p>如果你是完全的新手，那 Web 開發過程可能頗有難度。我們希望能帶領你輕鬆學習，另提供相關細節以培養你的正確觀念。不論你是要學習 Web 開發（自學或參與課程）的學生、尋找教材的老師、純粹興趣使然的業餘工程師，甚至只是想進一步了解 Web 技術的人，都希望你在這裡就像在家裡一樣自在。</p>

<div class="warning">
<p><strong>重要：</strong>此學習專區將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題，或覺得某個地方尚有缺漏，請到下方的{{anch("聯絡我們")}}尋找相關資訊並取得聯繫。</p>
</div>

<h2 id="入門">入門</h2>

<ul class="card-grid">
 <li><span>完全新手：</span>如果你正打算接觸 Web 開發，我們建議先從提供了實用 Web 開發介紹的<a href="/zh-TW/docs/Learn/Getting_started_with_the_web">入門 Web</a>模組。</li>
 <li><span>特殊問題：</span>如果你對 Web 開發有著特殊問題，<a href="/zh-TW/docs/Learn/Common_questions">常見問題</a>可能有你所需要的資訊。</li>
 <li><span>基礎以外：</span>如果你已經具備基本知識，則下一步就是了解 {{glossary("HTML")}} 與 {{glossary("CSS")}} 的細節。可從<a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 介紹</a>模組著手，再進到<a href="/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a>。</li>
 <li><span>寫些腳本：</span>如果你嫻熟 HTML 與 CSS 或想動手寫程式碼，要不要去 {{glossary("JavaScript")}} 或伺服器端語言那邊看看呢──就從我們的 <a href="/zh-TW/docs/Learn/JavaScript/First_steps">JavaScript 起步走</a>與<a href="/zh-TW/docs/Learn/Server-side/First_steps">伺服器端程式設計起步走</a>開始吧。</li>
</ul>

<div class="note">
<p><strong>注意：</strong>我們的<a href="https://developer.mozilla.org/zh-TW/docs/Glossary">字彙庫</a>另提供專有名詞的定義。</p>
</div>

<p>{{LearnBox({"title":"Random glossary entry"})}}</p>

<h2 id="涵蓋主題">涵蓋主題</h2>

<p>以下是 MDN 學習專區內涵蓋的主題清單。</p>

<dl>
 <dt><a href="/zh-TW/docs/Learn/Getting_started_with_the_web">Web 入門</a></dt>
 <dd>針對完全新手提供實際介紹。</dd>
 <dt><a href="/zh-TW/docs/Learn/HTML">HTML：構建 Web</a></dt>
 <dd>HTML 是構建不同區域的內容、還有定義這些區域意義和用途的語言。這個主題詳述了 HTML。</dd>
 <dt><a href="/zh-TW/docs/Learn/CSS">CSS：裝飾 Web</a></dt>
 <dd>CSS 是用來妝點和編排 web 內容、添加動畫行為之類的語言。這個主題總括 CSS 的一切。</dd>
 <dt><a href="/zh-TW/docs/Learn/JavaScript">JavaScript：動態用戶端腳本</a></dt>
 <dd>JavaScript 是給網頁添加動態功能的語言。這個主題會教你要自在理解並撰寫 JavaScript 所需的一切。</dd>
 <dt><a href="/zh-TW/docs/Learn/Accessibility">無障礙網頁：讓大家都能用上 Web</a></dt>
 <dd>無障礙網頁是給盡可能給任何人提供 Web 內容的做法，無論那個人是否受障礙、設備、地點、或其他原因影響。這個主題提供你需要知道的一切。</dd>
 <dt><a href="/zh-TW/docs/Learn/Tools_and_testing">工具與測試</a></dt>
 <dd>這個主題介紹開發者用來改善工作的工具，如跨瀏覽器測試工具。</dd>
 <dt><a href="/zh-TW/docs/Learn/Server-side">伺服端網站程式設計</a></dt>
 <dd>就算對用戶端 Web 開發熟悉了，理解伺服器和伺服器端程式如何做動是很有用的。這個主題提供了伺服器端做動原理的總體介紹，並藉著兩大熱門框架──Django（Python）與 Express（node.js）──詳細說明如何建立伺服器端 app。</dd>
</dl>

<h2 id="取得我們的範例程式碼">取得我們的範例程式碼</h2>

<p>在學習專區看到的所有程式碼都<a href="https://github.com/mdn/learning-area/">放在 GitHub 上了</a>。如果想把它們複製到自己的電腦，最簡單的方法是：</p>

<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>
 <li>開啟你的<a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">命令提示字元</a>（Windows）（譯註：如果使用 Windows 7 以後，建議使用 <a href="https://msdn.microsoft.com/en-us/powershell">Powershell</a>）或是終端機（<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>、<a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOSX</a>）</li>
 <li>要把學習專區的 repo 透過命令提示字元/終端機複製到目錄裡面，稱作 learning-area 的資料夾，只要鍵入以下指令：
  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
 </li>
 <li>現在你能透過檔案管理員或 <a href="https://zh.wikipedia.org/wiki/Cd_(%E5%91%BD%E4%BB%A4)">cd 指令</a>進入目錄，找到想要的檔案了。</li>
</ol>

<p>你可以在 GitHub 的 <code>learning-area</code> repository 做任何更新，只要這麼做：</p>

<ol>
 <li>在命令提示字元/終端機裡面，用 <code>cd</code> 進到 <code>learning-area</code> 目錄，例如說你要是在上一層目錄的話：

  <pre class="brush: bash notranslate">cd learning-area</pre>
 </li>
 <li>用這個指令更新 repository：
  <pre class="brush: bash notranslate">git pull</pre>
 </li>
</ol>

<p>{{LearnBox({"title":"隨機了解常見的相關術語"})}}</p>

<h2 id="聯絡我們">聯絡我們</h2>

<p>如果你想向我們詢問任何事情，最快的方式就是透過<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">學習專區討論串</a>或 <a href="https://developer.mozilla.org/zh-TW/docs/MDN/Community/Conversations#Chat_in_IRC">IRC 頻道</a>留下訊息。不論你覺得網站有哪個地方做錯或缺漏，想看到新的學習主題、對自己不了解的地方尋求協助，或其他疑難雜症，都歡迎你提供意見給我們。</p>

<p>如果你想幫我們添增＼改善內容，則請先了解<a href="https://developer.mozilla.org/zh-TW/Learn/How_to_contribute">該如何協助</a>並聯絡我們！不論你是學生、教師、Web 開發老手，或是想幫我們改善學習經驗，都歡迎和我們聯絡。</p>

<h2 id="另可參閱">另可參閱</h2>

<dl>
 <dt><a href="https://www.mozilla.org/zh-TW/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
 <dd>我們針對網頁開發者發行的電子報，對於所有程度的開發者都是很好的學習資源。</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
 <dd>免費和開放的課程，學習技術技能，指導和基於項目的學習</dd>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>絕妙的互動式網站，可從頭開始學習程式設計語言。</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>基本的編碼理論與實作，主要為孩童與初學者所設計。</dd>
 <dt><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt>
 <dd>富含教學與專案實做的互動式網路開發學習網站。</dd>
</dl>

<dl>
 <dt><a href="https://teach.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
 <dd>Web 素養與 21 世紀常見技術的入門，亦已分門別類提供教學活動。</dd>
 <dt><a href="https://teach.mozilla.org/activities">Teaching activities</a></dt>
 <dd>由 Mozilla 基金會所設計的一系列教學 (與學習) 活動，涵蓋 JavaScript 的基本 Web 素養與隱私概念，並可嘗試開發 Minecraft。</dd>
</dl>

<h5 id="Subnav">Subnav</h5>

<ol>
 <li><a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web">Web 入門</a>

  <ol>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></li>
  </ol>
 </li>
 <li><a href="https://developer.mozilla.org/zh-TW/Learn/HTML">HTML — 建構 Web</a>
  <ol>
   <li><strong><a href="https://developer.mozilla.org/zh-TW/Learn/HTML">HTML 概述</a></strong></li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 介紹</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 基本介紹</a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">先入為主？HTML 的 Metadata</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字基本概念</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">建立超連結</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">進階文字格式</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文件與網站架構</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 除錯</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">評量習題：對字母標記</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">評量習題：建構內容網頁</a></li>
    </ol>
   </li>
   <li><a href="https://developer.mozilla.org/zh-TW/Learn/HTML/Multimedia_and_embedding">多媒體與嵌入</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding">多媒體與嵌入概述</a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 圖像</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">視訊與音訊內容</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">從物件到 iframe — 其他嵌入技術</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">為 Web 新增向量圖像</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">有所回應互動的圖像</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">評量習題：Mozilla splash 頁面</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="https://developer.mozilla.org/zh-TW/Learn/CSS">CSS — 讓 Web 別有風格</a>
  <ol>
   <li><strong><a href="https://developer.mozilla.org/zh-TW/Learn/CSS">CSS 概述</a></strong></li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 基本介紹</a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS 運作方式</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS 語法</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Selectors">選擇器(Selectors)</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 數值與單位</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">串接 (Cascade) 與繼承 (Inheritance)</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Box_model">區塊模型 (Box model)</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">CSS 除錯</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">評量習題：基礎的 CSS 綜合運算 (Comprehension)</a></li>
    </ol>
   </li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text">文字樣式</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text">文字樣式概述 </a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text/Fundamentals">文字與字體樣式基本原則</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text/Styling_lists">清單樣式</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text/Styling_links">連結樣式</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text/Web_fonts">Web 字型</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">評量習題：Typesetting a community school homepage</a></li>
    </ol>
   </li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes">框盒 (boxes) 樣式</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes">框盒樣式概述</a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Box_model_recap">框盒模型 (Box model) 回顧</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Borders">邊框</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Styling_tables">表格樣式</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">進階框盒效果</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">評量習題：Creating fancy letterheader paper</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">評量習題：A cool looking box</a></li>
    </ol>
   </li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/CSS_layout">CSS 配置</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/CSS_layout">CSS 配置概述</a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/CSS_layout/Floats">浮動布局(Floats)</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox">彈性盒子(Flexbox)</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="https://developer.mozilla.org/zh-TW/Learn/Other_learning_material">進階學習教材</a>
  <ol>
   <li><a href="https://developer.mozilla.org/zh-TW/Learn/JavaScript">JavaScript — 動態指令</a></li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/WebGL">WebGL — 圖像處理</a></li>
  </ol>
 </li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/Common_questions">常見問題</a>
  <ol>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Howto">HTML 問題</a></li>
   <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Howto">CSS 問題</a></li>
   <li><a href="https://developer.mozilla.org/zh-TW/Learn/Common_questions#How_the_Web_works">Web 運作方式</a></li>
   <li><a href="https://developer.mozilla.org/zh-TW/Learn/Common_questions#Tools_and_setup">工具與設定</a></li>
   <li><a href="https://developer.mozilla.org/zh-TW/Learn/Common_questions#Design_and_accessibility">設計與親和度</a></li>
  </ol>
 </li>
 <li><a href="https://developer.mozilla.org/zh-TW/Learn/How_to_contribute">該如何貢獻</a><a href="https://developer.mozilla.org/zh-TW/Learn/How_to_contribute"> </a></li>
</ol>
</div>