HTML 學生教材

HTML 是網頁的骨幹，在本單元中，我們將瞭解如何為網頁建構穩固且有意義的結構。

注意事項

  • 學生瞭解 HTML 檔案結構。
  • 學生知道如何使用常見標記建構網頁。

什麼是 HTML？

HTML 是 HyperText Markup Language 的縮寫，這段程式碼可用於：

  • 建立儲存在全球資訊網上，並顯示在瀏覽器中的文件。
  • 為網頁提供基本結構，也就是網頁的骨架。
  • 確保瀏覽器能正確載入文字和圖片。

我們何時會使用 HTML？

您在全球資訊網上看到的每個網頁，都是以 HTML 程式碼編寫而成。按鈕、圖片、表單、文字區段等都是以 HTML 建立的元素。

如果將網頁視為人體，HTML 就是骨骼結構。我們可以使用 CSS 為身體新增皮膚和衣物，但前提是必須先建立骨架結構。

HTML 實例

HTML 的核心是元素。元素是使用標記建立。

大多數元素都有開頭標記和結尾標記：

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

您想在網頁上顯示的內容 (文字，甚至是其他 HTML 元素) 可以放在這些標記之間，就像將三明治的層層食材疊在一起一樣。

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

部分 HTML 內容是使用不需要額外結束標記的自閉標記建立：

<img />
<link />

由於這個元素的工作是在文件中保留位置，因此只要這個標記就夠了。與大多數其他 HTML 元素不同，您無法在這些自行關閉的元素中巢狀內嵌其他元素或資訊。

HTML 元素的組成部分

HTML 範例

這段程式碼會顯示在瀏覽器中，如下圖所示。

這段程式碼...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... 存取這個網頁

HTML 參考資料

取景

背景資訊和用途

HTML 是指超文本標記語言，可為文字賦予結構意義。電腦和程式設計師可藉此輕鬆判斷一段文字的用途。

HTML 就像網頁的骨架，提供結構和內容，而 JavaScript 和 CSS 則提供互動性和樣式。

學習目標

學生可以

  • 建立 HTML 檔案，並在編輯器和瀏覽器中開啟
  • 設定結構正確的 HTML 檔案
  • 列出並使用一些常見標記，在網站中加入結構和內容

開始使用

章節架構和用途

  • HTML 是寫在副檔名為 .html 的檔案中。
  • 您可以為 HTML 檔案指定任何名稱，但除非開發人員有理由設定其他伺服器，否則 index.html 是最常使用的到達網頁名稱。
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

迷你挑戰

  1. 建立 3 個額外的 HTML 檔案，並隨意命名。
  2. 在文字編輯器和瀏覽器中開啟其中一個檔案。

HTML 網頁結構

章節架構和用途

HTML 文件的開頭結構應一律相同：

  • DOCTYPE 標記很特別，不會關閉。此外，只有這個標記可以包含非英數字元 (字母/數字) 值。
  • <head> 包含有關您網站的資訊，但不是會顯示在網頁上的實際內容。
  • <body> 包含網頁上實際顯示的所有內容。
  • 用來建立網頁結構的標記應放在 <body> 標記之間。
  • 在開頭和結尾 標記之間，我們插入 元素的文字或「內容」。最終結果如下所示：<example-tag>Content Goes in here</example-tag>。標記也可以放在其他標記內。
  • 請注意，在另一個 標記內放置 標記時，應縮排新 標記，表示該標記是父項 標記的子項。

詞彙

  • 元素 - 使用 HTML 程式碼建立的項目 (例如圖片、段落和標題)。
  • 標記：程式碼片段，指出特定元素的開始和結束位置。
  • 子項：包含在其他元素「內部」的元素。
  • 父項 - 包含其他元素的元素。

HTML 範例

注意： 以下僅為參考範例，您不必立即瞭解所有內容，但可以看看格式良好的 HTML 可能會是什麼樣子。

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

迷你挑戰

  1. 開啟您建立的其中一個檔案，並加入基本 HTML 標記結構。
  2. 設定 HTML 內文，顯示家譜 (或他人的家譜)。使用 section 標籤保留家庭群組。使用 p 標記來保留家庭成員。家庭關係複雜，以下僅為範例：
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

通用標記

章節架構和用途

一般來說，我們不會建立自己的元素類型。而是預先定義一組元素，並與功能建立關聯。

請參閱 HTML 參考資料，瞭解程式碼區塊範例的細目

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

迷你挑戰

  1. 請根據自己的興趣修改上述所有內容。
  2. 在您於本課程開始時建立的其中一個空白 HTML 檔案中，假設您要準備一篇新聞報導，其中包含標題、標題和副標題 (想不出內容嗎？請寫下你旅行時的一天。回想你曾進行的短途旅行、造訪的地點和吃過的食物。
  3. 使用相關標記並新增一些內容，讓新聞報導顯示在網站上。
  4. 確認內容是否顯示在瀏覽器中！
  5. 進階練習：製作表單，讓使用者填寫並傳送文章的相關意見。雖然這個表單還無法運作 (我們尚未將其連結至 JavaScript)，但以 HTML 建立這個表單，可讓我們瞭解如何建立可運作表單的第一步。

背景資訊

HTML 是全球資訊網內容的語言。

您將使用「指令列」前往並開啟 HTML 檔案。HTML 檔案會使用 CSS 樣式和以 JavaScript 指令碼編寫的行為進行擴增，而這些指令碼是由各種函式組成。HTML 檔案也會是 Google App Engine 使用的範本，並從資料庫填入內容。

HTML 實例

開始使用 HTML

HTML 是寫在副檔名為 .html 的檔案中。

查看粉絲專頁

如要在 Mac 上預覽 HTML 檔案，請在指令列中前往 HTML 網頁所在的資料夾，然後輸入「open filename」，並將「filename」替換為 HTML 檔案的名稱。

一般語法

<tag>
  Content
</tag>

元素為巢狀結構

HTML 元素可以放在其他元素內：

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

HTML 網頁結構

每個網頁的基本結構都相同。這是訂閱按鈕的圖示：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> 包含網站的相關資訊，但不會顯示在網頁上 (可視為網頁的「大腦」)。
  • <body> 包含網頁上實際顯示的所有內容。

常見元素

在 <body> 和 </body> 標記內使用這些常見元素，即可在網頁中加入內容。

段落

如要建立段落，請使用 p 開始和結束標記：

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

註解

使用註解讓程式碼更容易閱讀，且不會影響最終算繪的 HTML。

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

標題

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

一般 <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

清單

清單項目清單 <li> 會以無序清單標記 <ul> 或有序清單標記 <ol> 包裝。

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

圖片

<img> 標記需要使用 src 屬性指定圖片的地址，而選用的 alt 屬性則用於輔助功能，包括螢幕閱讀器。

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

如果是超連結，<a> 標記必須使用 href 屬性指定超連結目的地的地址。

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

水平規則

<!-- This self-closing tag creates a line across your web page. -->
<hr>

休息時間

<!-- This self-closing tag creates a line break between elements. -->
<br>

表單

<form> 用於收集使用者資訊。<form> 必須將收集到的資料傳送至某處進行處理或處理，才能正常運作。因此，<form> 通常需要額外屬性：

  • action - 表單提交後，表單資料的目的地
  • method - 指出是否應使用 GET 或 POST 類型的要求處理資料。
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

輸入

<input> 是 <form> 用來收集資訊的元素。

<input> 元素通常也有 name 屬性，資料庫會使用這個屬性來識別提交的資料所屬的欄位。

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

<input> 元素用途廣泛，只要指定 type 屬性，就能將其算繪為文字欄位、日曆樣式的日期挑選器、單選按鈕、下拉式選單等。如要查看更完整的清單，請參閱部分外部說明文件。

提示和秘訣

  • 檢查網頁的程式碼，看看其他開發人員使用哪些標記在網頁中加入內容，瞭解可用的 HTML 標記。
  • 如果找不到要新增的項目，請參閱開發人員說明文件。以下是所有可能 HTML 元素的清單：https://www.w3schools.com/Tags/、https://developer.mozilla.org/en-US/docs/Web/HTML/Element、http://html-css-js.com/html/tags/
  • 撰寫 HTML 時，如果元素需要開頭和結尾標記，最好先開啟和關閉標記，再於標記之間新增內容。這樣就不會留下懸置代碼。
  • 如要以最佳方式查看程式碼中 HTML 元素的巢狀結構，請縮排其他元素內的元素。這有助於您快速辨識 HTML 內容的結構。
  • 多加註解！這些註解有助於您自行排解程式碼問題，並在請他人審查程式碼時提供協助。
  • 網路上有許多資源，例如 html5boilerplate.com，可協助您快速開始編寫 HTML。

最佳做法摘要

  • 網頁的相關資訊會放在 HTML 文件的 <head> 中，例如標題、中繼資料、樣式連結等。
  • 網頁上的資訊會放在 HTML 文件的 <body> 中。
  • 開發人員可使用許多元素建構 HTML 文件的內容，包括：<p>、<h1>-<h6>、<div>、<li>、<img>、<a>、<hr>、<br>、<!-- --> 等。
  • 部分元素需要開頭和結尾標記：<p></p>。
  • 其他元素會自動關閉，因此只需要開始標記：<img>。
  • 標記可以包含屬性 (src、alt、id 等)，提供元素行為的相關資訊：<img src="filename.png" alt="description">。
  • 註解 (<!-- -->) 可為開發人員提供實用附註，協助瞭解網頁各區段的功能。
  • 使用瀏覽器的內建開發人員工具檢查網頁的 HTML 程式碼，瞭解網頁的建構方式。

第 1 題

下列哪個元素是子項元素？(為本練習忽略 body/html 元素)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 和 p

第 2 題

在 HTML 文件中，__ 位於 <head> 元素中，__ 則位於 <body> 元素中。

  1. 結構、中繼資料
  2. 中繼資料、結構
  3. 標題、較小的內容
  4. 網站標頭、網站主要內容

第 3 題

下列哪些不是縮排巢狀元素的適當理由？

  1. 縮排可讓您更輕鬆地查看其他元素中包含的元素
  2. 縮排可讓使用者更輕鬆地閱讀網頁結構
  3. 縮排可讓機器人/搜尋引擎更輕鬆讀取網頁結構
  4. 縮排可讓您輕鬆識別同層級元素

第 4 題

下列何者是 HTML 元素的屬性？

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. 側欄
  4. 側欄會顯示在這裡！

第 5 題

下列 HTML 元素有多少屬性？

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

問題 6

在下列 HTML 片段中，哪個元素是父項元素？

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

問題 7

下列 HTML 程式碼片段中有多少元素是父項元素的子項？

(請勿計算包裝 <body> 或 <html> 元素)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

問題 8

雖然部分瀏覽器會正確顯示下列 HTML 程式碼片段，但這段程式碼有什麼問題？

<img src=puppies.png width=400 />
  1. 沒有結尾標記
  2. 屬性值應以引號括住
  3. 提供 width 屬性時，也必須提供 height 屬性
  4. 缺少必要屬性

第 1 題

下列哪個元素是子項元素？(為本練習忽略 body/html 元素)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

a 元素是子項元素，因為它包含在另一個元素中。

第 2 題

在 HTML 文件中，__ 位於 <head> 元素中，__ 則位於 <body> 元素中。

中繼資料會放在 <head> 元素中，結構則會放在 <body> 元素中。網頁本身不會顯示 <head> 元素中的任何內容。

第 3 題

下列哪些不是縮排巢狀元素的適當理由？

縮排不會讓機器人/搜尋引擎更容易讀取網頁結構。機器人讀取網站時，即使 HTML 程式碼全部在一行，也能讀取。

第 4 題

下列何者是 HTML 元素的屬性？

<div class="sidebar">Sidebar goes here!</div>

class 是屬性，屬性會位於 HTML 元素內，通常 (但不一定) 會有值。

第 5 題

下列 HTML 元素有多少屬性？

<input type="text" placeholder="username" name="username" />

上述 input 元素有 3 個屬性：type、placeholder 和 name。

問題 6

在下列 HTML 片段中，哪個元素是父項元素？

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> 是父項元素，因為其中包含其他元素。

問題 7

下列 HTML 程式碼片段中有多少元素是父項元素的子項？

(請勿計算包裝 <body> 或 <html> 元素)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

程式碼片段中有 4 個子元素，基本上就是任何有上層父項的元素，因此 <div> 元素除外，包括 <h1>、<p>、<i> 和 <a>。

問題 8

雖然部分瀏覽器會正確顯示下列 HTML 程式碼片段，但這段程式碼有什麼問題？

<img src=puppies.png width=400 />

屬性值應加上引號。<img /> 是自行關閉的標記，沒有必要屬性。有 width 但沒有 height，反之亦然，都是可以接受的。