1. 學習
  2. 入門模組
  3. 你的第一個網站
  4. 建立內容

HTML：建立內容

HTML (HyperText Markup Language，超文字標記語言) 是用於構建網頁及其內容的骨架程式碼。本文將為您提供對 HTML 及其功能的初步理解，並向您展示如何為您第一個網站建立基本內容。

預備知識 對你的計算機作業系統、用於構建網站的基本軟體和檔案系統有基本瞭解。
學習成果
  • HTML 的用途和功能。
  • HTML 語法的基本組成部分——開始標籤和結束標籤、元素、屬性、head、body。
  • 常用的 HTML 元素，包括段落、標題、影像、列表和連結。

那麼，什麼是 HTML？

HTML 是一種標記語言，由一系列元素組成，用於包裹（或封裝）文字內容以定義其結構並使其以特定方式呈現。

讓我們看一個例子——以下內容在網頁上顯示時將全部顯示在同一行，因為它沒有任何結構

Instructions for life:
Eat
Sleep
Repeat

如果我們將這些內容用以下 HTML 元素包裹起來，我們可以將那一行變成一個段落（<p>）和三個專案符號（<li>）

html
<p>Instructions for life:</p>

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Repeat</li>
</ul>

此 HTML 將在 Web 瀏覽器中呈現如下

除了組織文字，HTML 還有許多其他用途——將文字或影像連結到其他網頁、嵌入影像或影片、建立資料表等等。

建立你的第一個 HTML 文件

讓我們看看單個元素是如何組合形成一個 HTML 頁面的。在本節中，您將建立一個基本的 HTML 檔案，並瞭解其組成部分。

  1. 在您的 web-projects 資料夾中，建立另一個名為 first-website 的新資料夾。
  2. 在 first-website 中，建立一個名為 index.html 的新檔案，並按所示精確地將以下程式碼插入到檔案中
html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>

在這裡，我們有以下內容

  • <!doctype html>：doctype 是一個必需的序言。在遠古時代，當 HTML 初生時（大約 1991/92 年），doctype 旨在作為一組規則的連結，HTML 頁面必須遵循這些規則才能被視為良好的 HTML，這可能意味著自動錯誤檢查和其他有用的功能。然而，如今，它們作用不大，基本上只是為了確保您的文件行為正確。目前您只需瞭解這些。
  • <html></html>：<html> 元素包裹了整個頁面的所有內容，有時被稱為根元素。它還包括 lang 屬性，用於設定文件的主要語言。
  • <head></head>：<head> 元素充當一個容器，用於存放所有您希望包含在 HTML 頁面中但不是向頁面訪問者顯示的內容。這包括您希望在搜尋結果中顯示的關鍵詞和頁面描述、用於樣式化內容的CSS、字元集宣告等等。
  • <meta charset="utf-8">：此元素將您的文件應使用的字元集設定為 UTF-8，其中包含絕大多數書面語言中的大部分字元。本質上，它現在可以處理您可能放在上面的任何文字內容。沒有理由不設定它，並且它有助於避免以後的一些問題。
  • <meta name="viewport" content="width=device-width">：此視口元素確保頁面以瀏覽器視口寬度渲染，防止移動瀏覽器渲染頁面寬度超出視口，然後將其縮小。
  • <title></title>：<title> 元素設定頁面的標題，這是頁面載入時出現在瀏覽器標籤頁中的標題。當您將其新增為書籤/收藏夾時，它也用於描述頁面。
  • <body></body>：<body> 元素包含所有您希望在使用者訪問您的頁面時顯示給他們的內容，無論是文字、影像、影片、遊戲、可播放的音軌還是其他任何內容。目前它只包含一個 <img> 元素，但我們稍後會新增更多內容。

注意：大多數 HTML 元素由一個開始標籤（例如 <body>）、其元素內容以及一個結束標籤（例如 </body>）組成。一些 HTML 元素還有屬性，其中包含有關元素的額外設定或資訊——例如，在我們的程式碼示例中檢視 charset、name 和 src。

嵌入影像

讓我們將注意力轉向 <img> 元素

html
<img src="" alt="My test image" />

這將在其出現的位置將影像嵌入到我們的頁面中。它透過 src (source) 屬性來實現，該屬性包含我們想要嵌入的影像檔案的路徑。

我們還包括了 alt (替代) 屬性。在 alt 屬性中，您為無法看到影像的使用者指定描述性文字，可能由於以下原因

  1. 他們有視力障礙。有嚴重視力障礙的使用者經常使用螢幕閱讀器等工具向他們朗讀 alt 文字。

  2. 出了問題，導致影像無法顯示。如果 src 屬性不包含有效的影像路徑，則會顯示 alt 文字。

    The words: my test image

您編寫的 alt 文字應為讀者提供足夠的資訊，讓他們對影像所傳達的內容有一個很好的瞭解。在此示例中，我們當前的文字“我的測試影像”不好，因為它沒有傳達有關影像的描述性資訊。對於我們的 Firefox 徽標來說，一個更好的替代方案是“Firefox 徽標：一隻火焰狐狸圍繞著地球。”

注意：諸如 <img> 之類的元素沒有內容或結束標籤，因此被稱為空（或空元素）元素。它們有時會在單個標籤的末尾寫入一個尾部斜槓（<img />），但這是可選的。

現在，讓我們來顯示您的影像。

  1. 在 first-website 資料夾中，建立一個名為 images 的新資料夾，並將您在上一示例中選擇的影像放入此資料夾中。
  2. 在 <img> 標籤的 src 屬性值中，輸入您的圖片路徑。它位於一個名為 images 的資料夾中，該資料夾與您的 index.html 檔案位於同一目錄中，因此路徑將是 images/ 加上您的圖片名稱。例如，如果您的圖片名為 firefox-icon.png，您的 src 屬性將如下所示：src="images/firefox-icon.png"。
  3. 將 alt 屬性值——My test image——替換為更詳細描述影像的文字。
  4. 在網路瀏覽器中開啟您的 index.html 檔案。您應該會看到您的影像顯示出來。如果沒有，請將您的 <img> 元素與我們的程式碼進行對照檢查；確保它沒有遺漏任何語法，例如引號。確保影像檔名正確。

如果影像非常大，因此無法完全顯示在螢幕上，請不要擔心。我們將在下一篇文章中解決此問題。

注意：在我們的無障礙多媒體教程和alt 屬性決策樹中瞭解更多關於在各種情況下使用影像的 alt 屬性。

標記文字

本節將介紹一些用於標記文字的基本 HTML 元素。

注意：Scrimba 的語義 HTML 基礎MDN 學習合作伙伴是一門互動課程，提供了 HTML 的有用描述，特別強調了其語義方面的重要性。

標題

標題元素允許您指定內容的某些部分是標題或副標題。就像一本書有主標題、章節標題和副標題一樣，HTML 文件也可以有。HTML 包含 6 個標題級別，<h1>–<h6>，儘管您通常最多隻使用 3 到 4 個

html
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

注意：HTML 中 <!-- 和 --> 之間的任何內容都是 HTML 註釋。瀏覽器在渲染程式碼時會忽略註釋。換句話說，它們在頁面上不可見——只在程式碼中可見。HTML 註釋是您新增有關程式碼或邏輯的筆記的一種方式，這可能對其他從事相同程式碼的人有用，或者如果您在 6 個月後回來檢視，並且不記得您做了什麼。

將您的頁面標題新增到 HTML 頁面中，放在您的 <img> 元素上方，並用 <h1> ... </h1> 標籤包裹。儲存檔案並在瀏覽器中檢視效果。

段落

段落 <p> 元素用於包含文字段落；在標記常規文字內容時，您會頻繁使用它們

html
<p>This is a single paragraph</p>

將上一篇文章中的示例文字新增到一個或幾個段落中，直接放在您的 <img> 元素下方。儲存它並在瀏覽器中檢視您的頁面。

列表

許多網路內容都是列表，HTML 為此提供了特殊元素。標記列表總是至少包含 2 個元素。最常見的列表型別是有序列表和無序列表

  1. 無序列表用於專案順序不重要的列表，例如購物清單。這些列表用 <ul> 元素包裹。
  2. 有序列表用於專案順序重要的列表，例如食譜中的烹飪說明列表。這些列表用 <ol> 元素包裹。

列表中的每個專案都放在一個 <li> (列表項) 元素中。

例如，如果我們想將以下段落片段的一部分轉換為列表

html
<p>
  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…
</p>

我們可以將標記修改為

html
<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together…</p>

嘗試向您的示例頁面新增有序或無序列表，並在瀏覽器中檢視結果。

連結非常重要——它們是構成網路的要素！要新增連結，我們需要使用 <a> 元素，“a”是“anchor”的縮寫。要將段落中的文字轉換為連結，請遵循以下步驟

  1. 選擇一些文字。我們選擇了“Mozilla Manifesto”這段文字。

  2. 將文字用 <a> 元素包裹起來，如下所示

    html
    <a>Mozilla Manifesto</a>

  3. 給 <a> 元素一個 href 屬性，如下所示

    html
    <a href="">Mozilla Manifesto</a>

  4. 用您希望連結指向的網址填寫此屬性的值

    html
    <a href="https://www.mozilla.org/en-US/about/manifesto/">
  Mozilla Manifesto
</a>

如果您省略了網址開頭的 https:// 或 http:// 部分，即所謂的協議，您可能會得到意想不到的結果。建立連結後，點選它以確保它將您傳送到您想要去的地方。

注意： href 最初可能看起來是一個相當晦澀的屬性名。它代表 hypertext reference（超文字引用）。

現在，如果還沒有，請向您的頁面新增一個連結。

總結

如果您遵循了本文中的所有說明，您最終將得到一個如下所示的頁面（您也可以在此處檢視）

A web page screenshot showing a Firefox logo, a heading saying Mozilla is cool, and two paragraphs of filler text

如果您遇到困難，您可以隨時將您的工作與我們 GitHub 上的完成示例程式碼進行比較。

在這裡，我們只是初步接觸了 HTML。您將在本課程後面的 使用 HTML 組織內容 核心模組中學習更多知識。

另見

學習 HTML 和 CSS, Scrimba MDN 學習合作伙伴

Scrimba 的 學習 HTML 和 CSS 課程透過構建和部署五個出色的專案，以及由知識淵博的老師講授的有趣互動課程和挑戰，教你 HTML 和 CSS。

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.