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

---
title: HTML 基礎
slug: Learn/Getting_started_with_the_web/HTML_basics
tags:
  - HTML
  - Web
  - 學習
  - 寫程式
  - 新手
translation_of: Learn/Getting_started_with_the_web/HTML_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>HTML（<strong>H</strong>ypertext <strong>M</strong>arkup <strong>L</strong>anguage），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。透過這篇文章，希望能幫助大家對 HTML 及其功能有基本的認識。</p>
</div>

<h2 id="HTML_到底是什麼？">HTML 到底是什麼？</h2>

<p>HTML 是一種<em>標記語言（markup language）</em>，而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁──單純簡易或是極其複雜的頁面都沒問題。HTML 包含了一系列的<strong>元素（{{Glossary("element", "elements")}}）</strong>，而元素包含了<strong>標籤（{{Glossary("tag", "tags")}}）</strong>與<strong>內容（content）</strong>，我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。舉例來說，請看看以下這個句子：</p>

<pre>My cat is very grumpy</pre>

<p>如果我們想讓這個句子自成一個段落，那麼可以在它前後分別加上段落標籤 ({{htmlelement("p")}})，它就變成一個段落元素了：</p>

<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>

<h3 id="HTML_元素的組成">HTML 元素的組成</h3>

<p>讓我們來仔細的觀察一下，內容、標籤和元素的關係：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>我們可以看到基本的架構：</p>

<ol>
 <li><strong>起始標籤 （The opening tag）：</strong>先打角括弧，也就是大於、小於的符號「&lt; &gt;」，裡面再放入元素名稱，如上面的例子「&lt;p&gt;」。起始標籤代表這個元素從這裡開始。</li>
 <li><strong>結束標籤 （The closing tag）：</strong> 與起始標籤一樣，只是在元素名稱前面多了個<em>前置斜線</em>「/」。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。在寫HTML時，很容易忘了最後的結束標籤，提醒大家要多注意唷！</li>
 <li><strong>內容（The content）：</strong> 這個元素的內容，以上面的例子來說，內容就是這句文字。</li>
 <li><strong>元素（The element）：</strong> 由起始標籤、結束標籤、內容所組成。</li>
</ol>

<p>元素還可以有「屬性（Attribute）」，請大家看看下面的例子：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>屬性能提供更多的資訊（當然，這個資訊是幫助我們更有效及方便編輯，不會呈現在網頁上），屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。</p>

<p>屬性的組成包含：</p>

<ol>
 <li>在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格）</li>
 <li>屬性名稱後面接著等於符號「=」</li>
 <li>屬性包在起始標籤裡面，如範例所示</li>
</ol>

<h3 id="巢狀元素">巢狀元素</h3>

<p>元素裡面可以在放進元素，我們稱之為「<strong>巢狀元素（nesting element）</strong>」。例如這個句子：「我的貓有夠無敵臭臉」，若你想強調「有夠無敵」，我們就可以把「有夠無敵」這四個字自成一個顯示為粗體的元素 {{htmlelement("strong")}} :</p>

<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>

<p>要注意的是，每個元素都有自己的起始和結束標籤，一層一層的包覆。所以最外層是&lt;p&gt;  ，接著&lt;strong&gt; ；先結束strong元素，所以先寫&lt;/strong&gt;，最外面才是 &lt;/p&gt;。</p>

<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>如果元素的起始和結束標籤錯置（如上方），那麼瀏覽器只能自行判斷你想呈現的樣子，可能會完全不如預期！所以在做巢狀元素時要多注意唷！</p>

<h3 id="空元素">空元素</h3>

<p>有些元素沒有內容，我們稱為「<strong>空元素（empty elements）</strong>」。 以這個圖片元素 {{htmlelement("img")}} 為例：</p>

<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>

<p>它有兩個屬性，但是沒有結束標籤，也沒有裡面的內容。因為圖片元素是直接把圖檔嵌在 HTML 網頁上。</p>

<h3 id="HTML_文件的架構">HTML 文件的架構</h3>

<p>讓我們來看看一個完整的HTML頁面它所包含的要素（以下範例的程式碼出自這篇文章：<a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>）：</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My test page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>我們可以看到：</p>

<ul>
 <li><code>&lt;!DOCTYPE html&gt;</code> — 文件類型（doctype）。 在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code> — <code>&lt;html&gt;</code> 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code> —  <code>&lt;head&gt;</code> 元素，裡面放的是你想涵括的重要資訊，但<strong>不會顯示於網頁瀏覽者眼前的</strong>。例如，顯示於搜尋結果的關鍵字、頁面說明<em>、</em>CSS、字元實體集...等。</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code> —  <code>&lt;body&gt;</code> 元素，包含了<strong>所有會顯示於網頁瀏覽者眼前的內容。</strong> 無論是文字、圖片、影面、互動遊戲...等。</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code> — 這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code> — 呈現於網頁瀏覽者眼前的網頁標題。</li>
</ul>

<h2 id="圖片">圖片</h2>

<p>再讓我們複習一下圖片元素：</p>

<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>

<p>如同我們前面提到，圖片元素是直接把圖檔嵌在HTML網頁上，它是透過圖片來源（<code>src</code> ，source）這個屬性，提供了連到圖片檔案的路徑。</p>

<p>我們也可以加上<code>alt</code> (alternative) 這個屬性。在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。這種狀況會發生通常是因為:</p>

<ol>
 <li>許多視能障礙的網頁瀏覽者，會使用「Screen Readers」這樣的工具，利用說明文字（alt text）來了解網頁要呈現的圖片內容。</li>
 <li>就是有些東西出錯了。例如，你誤植了圖片來源的路徑，你可能就會看到類似以下的文字：</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>

<p>說明文字應該要好好呈現這個圖片的內容，上面這個例子就很差。好的例子像是：「Firefox  Logo：有一隻狐狸繞著地球」</p>

<div class="note">
<p><strong>注意</strong>：你可以在 <a href="/zh-TW/docs/Web/Accessibility">MDN's Accessibility landing page</a> 查看無障礙頁面的資訊。</p>
</div>

<h2 id="標記文字">標記文字</h2>

<p>這個段落將為大家介紹如何標記文字（讓這些文字如何呈現）。</p>

<h3 id="文件標題_heading"><strong>文件標題</strong> (heading)</h3>

<p>讓你呈現這些內容的主題，就像一本書有書名、章節名稱和副標題，一份HTML文件也有類似的概念。HTML最多可以有六層的heading， {{htmlelement("h1")}}–{{htmlelement("h6")}} ，雖然通常我們只使用3至4層：</p>

<pre class="brush: html">&lt;h1&gt;My main title&lt;/h1&gt;
&lt;h2&gt;My top level heading&lt;/h2&gt;
&lt;h3&gt;My subheading&lt;/h3&gt;
&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>

<p>請試試在 {{htmlelement("img")}} 上方，加上合適的heading。</p>

<h3 id="段落_paragraph"><strong>段落 (paragraph)</strong></h3>

<p>如上面介紹過的，{{htmlelement("p")}} elements 包含文字段落，在呈現一般文字時，這是我們最常用到的。</p>

<pre class="brush: html">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>

<p><strong>請試試在這裡 <a href="/zh-TW/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a><em> </em>的圖片（&lt;img&gt; element）下方，加上幾段文字。</strong></p>

<h3 id="清單_list"><strong>清單 (list)</strong></h3>

<p>清單至少會包含兩個元素，以下是最常見的清單類，無順序性與有順序性的：</p>

<ol>
 <li><strong>無順序性清單（Unordered lists）</strong> 代表這些項目的順序改變，不影響任何是，例如購物清單。項目會包含在  {{htmlelement("ul")}} 裡面。</li>
 <li><strong>有順序性清單（Ordered lists）</strong>代表這些項目的順序是有意義的，例如食譜裡的製作步驟。項目會包含在 {{htmlelement("ol")}} 裡面。</li>
</ol>

<p>每個項目則分別放在{{htmlelement("li")}} (list item) element裡面。</p>

<p>例如，我們想把以下這段文字變成清單：</p>

<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>

<p>寫法如下：</p>

<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;technologists&lt;/li&gt;
  &lt;li&gt;thinkers&lt;/li&gt;
  &lt;li&gt;builders&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;working together ... &lt;/p&gt;</pre>

<p><strong>請試試在練習網頁，加上一個清單。</strong></p>

<h2 id="連結_link">連結 (link)</h2>

<p>連結對於網頁來說是非常重要的。要加上連結，我們需要用到這個元素 — {{htmlelement("a")}} —  <em>a</em> 代表了「anchor」。要讓文字變成連結的步驟如下：</p>

<ol>
 <li>選擇一些文字，例如「Mozilla Manifesto」。</li>
 <li>把他們包在這個&lt;a&gt; 元素裡：
  <pre class="brush: html">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
 </li>
 <li>在&lt;a&gt; element 中加上href attribute這個屬性：
  <pre class="brush: html">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
 </li>
 <li>屬性質就是你要連結網址：
  <pre class="brush: html">&lt;a href="https://www.mozilla.org/zh-TW/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
 </li>
</ol>

<p>網址的開頭使用<code>https://</code> 或 <code>http://</code> （網路文字傳送標準的不同）可能會給你不一樣的結果。因此，在寫連結時，請自己先點擊過，確認無誤。</p>

<p><strong>請試試在練習網頁加上一個超連結。</strong></p>

<div class="note">
<p><code>href</code> 這個屬性名稱比較不直觀，不太好記，但它代表的是：<em><strong>h</strong>ypertext <strong>ref</strong>erence</em>的縮寫。</p>
</div>

<h2 id="sect1"></h2>

<h2 id="結論">結論</h2>

<p>看完了以上的介紹並依照各個步驟實做，你應該能自己寫出這樣的網頁（如下， <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br>
 <br>
 <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>

<p>如果哪裡卡關了，你可以隨時造訪Github上的 <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> ，看看裡面的code和你寫的哪裡不同。</p>

<p>這篇文章觸及的是非常基本的HTML介紹，若你有興趣想進一步了解，歡迎參考 <a href="/zh-TW/Learn/HTML">HTML Learning page</a>。</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>



<h2 id="In_this_module">In this module</h2>

<ul>
 <li id="Installing_basic_software"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
 <li id="What_will_your_website_look_like"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
 <li id="Dealing_with_files"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
 <li id="HTML_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
 <li id="CSS_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
 <li id="JavaScript_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
 <li id="Publishing_your_website"><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
 <li id="How_the_web_works"><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
</ul>