Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1081438 of 學習該如何開發 Web

  • 版本網址代稱: Learn
  • 版本標題: 學習該如何開發 Web
  • 版本 ID: 1081438
  • 建立日期:
  • 建立者: afutseng
  • 是目前線上的版本?
  • 回應 目錄 3.3 Styling text

版本內容

歡迎來到 MDN 的「學習專區 (Learning Area)」。本系列文章將提供撰寫程式碼的必要網站,讓剛接觸的新手也能開發 Web。

MDN 學習專區不是要讓「初學者」變成「專家」;而是想讓「初學者」能夠更怡然自得。你在這裡可完全安排自己的進度,逐步探索 MDN 的其他部分,再接觸進階資源來堆砌之前所習得的知識。

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

重要:此學習專區目前僅限於建構網頁內容的早期階段,另將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題,或覺得某個地方尚有缺漏,請到下方的 {{anch("聯絡我們")}} 尋找相關資訊並取得聯繫。

入門

  • 完全新手 如果你正打算接觸 Web 開發,我們建議先從「入門 Web」模組開始,並嘗試其中 Web 開發的實作介紹。
  • 特殊問題 如果你對 Web 開發有著特殊問題,則「常見問題」可能有你所需要的資訊。
  • 基礎以外 如果你已經具備基本知識,則下一步就是了解 {{glossary("HTML")}} 與 {{glossary("CSS")}} 的細節。可從「HTML 介紹」模組著手,再進入到「CSS 介紹」。
  • 寫指令碼 如果你已嫻熟 HTML 與 CSS,或是主要想動手寫程式碼,就直接前往 {{glossary("JavaScript")}} 吧。MDN 的「JavaScript」區塊已經納入了詳細的 JavaScript 指南

注意:我們的字彙庫另提供專有名詞的定義。

注意:我們將陸續提供更多核心的學習教材。左側所列的「進階學習教材」選單,將引領你到 MDN 上的其他學習教材。這些教材雖然不屬於學習專區的必要部分,但仍能提供許多資訊。

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

聯絡我們

如果你想向我們詢問任何事情,最快的方式就是透過郵件群組IRC 頻道留下訊息。不論你覺得網站有哪個地方做錯或缺漏,想看到新的學習主題、對自己不了解的地方尋求協助,或其他疑難雜症,都歡迎你提供意見給我們。

如果你想幫我們添增\改善內容,則請先了解該如何協助並聯絡我們!不論你是學生、教師、Web 開發老手,或是想幫我們改善學習經驗,都歡迎和我們聯絡。

{{CommunityBox("Learn", "dev-mdc", "mozilla.dev.mdc", "mdn")}}

另可參閱

Codecademy
絕妙的互動式網站,可從頭開始學習程式設計語言。
Code.org
基本的編碼理論與實作,主要為孩童與初學者所設計。
Web Literacy Map
Web 素養與 21 世紀常見技術的入門,亦已分門別類提供教學活動。
Teaching activities
由 Mozilla 基金會所設計的一系列教學 (與學習) 活動,涵蓋 JavaScript 的基本 Web 素養與隱私概念,並可嘗試開發 Minecraft。
  1. Web 入門
  2. HTML — 建構 Web
    1. HTML 概述
    2. HTML 介紹
      1. HTML 基本介紹
      2. HTML 入門
      3. 先入為主?HTML 的 Metadata
      4. HTML 文字基本概念
      5. 建立超連結
      6. 進階文字格式
      7. 文件與網站架構
      8. HTML 除錯
      9. 評量習題:對字母標記
      10. 評量習題:建構內容網頁
    3. 多媒體與嵌入
      1. 多媒體與嵌入概述
      2. HTML 圖像
      3. 視訊與音訊內容
      4. 從物件到 iframe — 其他嵌入技術
      5. 為 Web 新增向量圖像
      6. 有所回應互動的圖像
      7. 評量習題:Mozilla splash 頁面
  3. CSS — 讓 Web 別有風格
    1. CSS 概述
    2. CSS 介紹
      1. CSS 基本介紹
      2. CSS 運作方式
      3. CSS 語法
      4. Selectors
      5. CSS 數值與單位
      6. 串接 (Cascade) 與繼承 (Inheritance)
      7. 區塊模型 (Box model)
      8. CSS 除錯
      9. 評量習題:基礎的 CSS 綜合運算 (Comprehension)
    3. 文字樣式
      1. 文字樣式概述
      2. 文字與字體樣式基本原則
      3. 清單樣式
      4. 連結樣式
      5. Web 字型
      6. 評量習題:Typesetting a community school homepage
    4. Styling boxes
      1. Styling boxes overview
      2. Box model recap
      3. Backgrounds
      4. Borders
      5. Styling tables
      6. Advanced box effects
      7. 評量習題:Creating fancy letterheader paper
      8. 評量習題:A cool looking box
    5. CSS 配置
      1. CSS 配置概述
      2. Floats
      3. Positioning
      4. Practical positioning examples
      5. Flexbox
  4. 進階學習教材
    1. JavaScript — 動態指令
    2. WebGL — 圖像處理
  5. 常見問題
    1. HTML 問題
    2. CSS 問題
    3. Web 運作方式
    4. 工具與設定
    5. 設計與親和度
  6. 該如何貢獻

版本來源

<div class="boxed translate-rendered">
<div>
<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 開發,我們建議先從「<a href="https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web">入門 Web</a>」模組開始,並嘗試其中 Web 開發的實作介紹。</li>
 <li><span>特殊問題</span> 如果你對 Web 開發有著特殊問題,則「<a href="https://developer.mozilla.org/zh-TW/docs/Learn/Common_questions">常見問題</a>」可能有你所需要的資訊。</li>
 <li><span>基礎以外</span> 如果你已經具備基本知識,則下一步就是了解 {{glossary("HTML")}} 與 {{glossary("CSS")}} 的細節。可從「<a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 介紹</a>」模組著手,再進入到「<a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a>」。</li>
 <li><span>寫指令碼</span> 如果你已嫻熟 HTML 與 CSS,或是主要想動手寫程式碼,就直接前往 {{glossary("JavaScript")}} 吧。MDN 的「JavaScript」區塊已經納入了詳細的 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide">JavaScript 指南</a>。</li>
</ul>

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

<div class="note">
<p><strong>注意:</strong>我們將陸續提供更多核心的學習教材。左側所列的「進階學習教材」選單,將引領你到 MDN 上的其他學習教材。這些教材雖然不屬於學習專區的必要部分,但仍能提供許多資訊。</p>
</div>

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

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

<p>如果你想向我們詢問任何事情,最快的方式就是透過<a href="https://developer.mozilla.org/zh-TW/docs/MDN/Community/Conversations#Asynchronous_discussions">郵件群組</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>

<p>{{CommunityBox("Learn", "dev-mdc", "mozilla.dev.mdc", "mdn")}}</p>

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

<dl>
 <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://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></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">Styling boxes</a>
    <ol>
     <li><strong><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes">Styling boxes overview</a></strong></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a></li>
     <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">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></li>
</ol>
</div>
還原至此版本