HTML Tutorial

HTML 教程

Table of content

HTML 是一種標準的標記語言，代表 超文字標記語言。它是一種廣泛用於建立網頁的語言。HTML 由蒂姆·伯納斯-李於 1991 年末發明，但其第一個版本“HTML 1.0”於 1993 年釋出，“HTML 2.0”是第一個標準的 HTML 規範，於 1995 年釋出。

本 HTML 教程涵蓋了從基本的 HTML 基礎概念和標籤到高階技術，例如表單、模態框、多媒體和 HTML5 的所有內容。本教程旨在幫助初學者和經驗豐富的設計師成為構建動態和響應式網站的專家。

什麼是 HTML？

HTML（超文字標記語言）是一種標準的標記語言，用於設計網頁的結構。HTML 是 超文字和 標記語言的組合。超文字定義了網頁之間的內部連結，而 標記語言定義了文字和媒體的佈局和呈現。

基本 HTML 結構

HTML 文件的基本結構包含一些必須使用的強制性標籤，用於建立網頁。建立任何型別的 HTML 文件都必須遵循此結構。

以下是 HTML 文件的基本結構：

<!DOCTYPE html>
<html>
<head>
   <title>Page title</title>
</head>
<body>
   <h1>Webpage's Heading</h1>
   <p>Content (Your first paragraph).</p>
</body>
</html>

HTML 基本結構的元素

以下是定義基本 HTML 結構的基本標籤：

1. <!DOCTYPE html>

此元素將文件型別定義為 HTML。在編寫任何 HTML 文件之前，都必須編寫此元素。

2. <html>...</html>

<html> 標籤是所有 HTML 元素的父標籤。與建立 HTML 文件相關的所有內容都必須寫在 <html> 標籤內。CSS、JavaScript 和 jQuery 也必須在此標籤內編寫。

3. <head>...</head>

<head> 標籤是所有那些不在網頁上直接顯示但頁面功能所需的元素的容器標籤。它包含元標籤（用於 SEO 目的）、標題標籤、指令碼標籤等。

4. <title>...</title>

<title> 標籤用於定義您可以在瀏覽器選項卡、書籤列表和搜尋引擎結果中看到的網頁標題。此標籤對於 SEO 目的也很重要，可以幫助搜尋引擎瞭解網頁的內容。

5. <body>...<body>

<body> 標籤是所有那些表示網頁主要內容並在瀏覽器中顯示的元素的容器標籤。

6. <h1>...</h1>

<h1> 標籤是標題標籤之一。它是最重要的標題標籤，用於定義網頁的主要標題或標題。寫在 <h1> 和 </h1> 之間的任何文字都是內容的頂級標題。

7. <p>...</p>

<p> 標籤定義了一個段落，寫在 <p> 和 </p> 之間的任何內容都將在網頁上顯示為一個段落。使用多個 <p> 標籤在不同的段落中顯示文字。

在 HTML 中編寫 Hello World

透過使用上述基本的 HTML 結構，我們可以編寫一個 HTML 文件，在網頁上顯示“Hello World”。

以下是用於在網頁上的段落中顯示 Hello World 的 HTML 程式碼：

<!DOCTYPE html>
<html>
<head>
   <title>Hello World Example by TutorialsPoint</title>
</head>
<body>
   <h1>Hello, World!</h1>
</body>
</html>
</pre>

上面的示例將在瀏覽器中頂級標題 (h1) 內顯示“Hello, World！”。

HTML 中的註釋

就像其他程式語言一樣，您可以在 HTML 文件中將任何文字保留為註釋。要在 HTML 中建立註釋，請使用 <!-- 和 -->。

寫在 <!-- 和 --> 之間的任何文字都被視為註釋，並且不會顯示在網站上。

示例

以下是 HTML 註釋的示例：

<!--<h1>Hello World Example</h1>-->

線上 HTML 編輯器

我們提供了一個 HTML 線上編輯器，它使您能夠直接在 Web 瀏覽器中編輯和執行 HTML 程式碼。透過點選“編輯並執行”按鈕，您可以檢視其輸出並編輯程式碼。

<!DOCTYPE html>
<html>
<head>
    <title>Online HTML Editor</title>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <p>Hello World</p>
</body>
</html>

建立 HTML 文件

HTML 文件是一個包含 HTML 程式碼的檔案，副檔名為“.htm”或“.html”。要建立 HTML 文件，您需要一個文字編輯器。並且，要顯示它，您需要一個 Web 瀏覽器。

建立 HTML 文件的步驟如下：

  • 開啟一個文字編輯器。
  • 編寫 HTML 程式碼。
  • 將檔案儲存為“.htm”或“.html”副檔名。

最後，透過鍵入帶有完整路徑的檔名或右鍵單擊並使用瀏覽器開啟來在瀏覽器中開啟檔案。

為什麼要學習 HTML？

最初，HTML 的開發目的是定義文件的結構，例如標題、段落、列表等，以方便研究人員之間共享科學資訊。現在，HTML 被廣泛用於藉助 HTML 語言中提供的不同標籤來格式化網頁。

對於學生和工作專業人士來說，HTML 是成為優秀軟體工程師的必備技能，尤其是在從事 Web 開發領域時。

學習 HTML 的優勢

以下是學習 HTML 的一些主要優勢：

  • 建立網站 - 如果你精通 HTML，你可以建立一個網站或自定義現有的網站模板。
  • 成為網頁設計師 - 如果你想開始職業生涯，成為一名專業的網頁設計師，HTML 和 CSS 設計是必備技能。
  • 理解網路 - 如果你想最佳化你的網站，提高其速度和效能，瞭解 HTML 可以獲得最佳效果。
  • 學習其他語言 - 一旦你理解了 HTML 的基礎知識，那麼其他相關的技術，如 JavaScript、PHP 或 Angular 就更容易理解了。

HTML 的應用

如前所述，HTML 是 Web 上使用最廣泛的語言之一。以下是 HTML 的一些應用：

  • 網站開發 - HTML 用於建立在 Web 上呈現的網頁（網站）。幾乎每個網頁都包含 html 標籤，以便在瀏覽器中呈現其詳細資訊。
  • 網際網路導航 - HTML 提供用於從一個頁面導航到另一個頁面的標籤，並在網際網路導航中得到廣泛使用。
  • 響應式 UI - 如今，HTML 頁面在所有平臺（移動裝置、平板電腦、桌上型電腦或筆記型電腦）上都能良好執行，這得益於響應式設計策略。
  • 離線支援 - HTML 頁面一旦載入，就可以在機器上離線使用，無需網際網路。
  • 遊戲開發 - HTML5 原生支援豐富的體驗，現在也適用於遊戲開發領域。
  • 移動應用程式開發 - HTML 結合 CSS3 和 JavaScript 可用於開發跨平臺移動應用程式。
  • 多媒體和影片流 - HTML5 支援影片和音訊等多媒體元素，可以直接在 Web 瀏覽器中無縫播放媒體。

受眾：誰可以學習 HTML？

本HTML 教程專為有志於成為網頁設計師和開發人員的人員設計，這些人需要深入瞭解 HTML，同時也要了解其簡單概述和實際示例。本教程將為您提供開始學習 HTML 的充分素材，您可以由此將自己的技能提升到更高的水平。

學習 HTML 的先決條件

在繼續學習本HTML 教程之前，您應該具備 Windows 或 Linux 作業系統的基本工作知識；此外，您必須熟悉以下內容：−

  • 使用任何文字編輯器，如記事本、Notepad++或Edit Plus等。
  • 如何在計算機上建立目錄和檔案。
  • 如何在不同的目錄之間導航。
  • 如何在檔案中鍵入內容並將其儲存到計算機上。
  • 瞭解 JPEG、PNG 等不同格式的影像。

HTML 職業

HTML 是網頁開發的基礎。良好的 HTML 知識可以幫助您在以下領域發展職業：−

  • 前端開發人員
  • 網頁設計師
  • 全棧開發人員
  • 郵件開發人員
  • 網頁設計審閱員

HTML 實踐和準備

完成 HTML 教程後，您可以透過以下方式準備面試並練習 HTML：−

HTML 完整參考

以下是元素、屬性、顏色名稱、顏色程式碼等的完整 HTML 參考。

HTML 文章

瀏覽我們 2000 多篇 HTML 文章，查詢解決您網頁設計和開發相關問題的方案。訪問：HTML 文章

關於 HTML 的常見問題

1. HTML 的全稱是什麼？

HTML 的全稱是超文字標記語言。它是開發網頁的標準標記語言。

2. 為什麼網頁中使用 HTML？

出於以下原因，網頁中使用 HTML：−

  • 它用於為網頁提供基本結構。
  • HTML 標籤幫助搜尋引擎理解網頁內容。
  • HTML 表單支援使用者互動，幷包含號召性用語按鈕、文字欄位、複選框等等。
  • 使用 HTML，我們可以將各種型別的媒體（如影像、音訊、影片等）嵌入到網頁中。
  • 它還用於建立超連結，這些超連結可以指向其他網頁、同一頁面的不同部分或網路上的其他資源。

3. 如何儲存 HTML 檔案？

要儲存 HTML 檔案，請按照以下簡單步驟操作：−

  • 在您的系統上開啟一個文字編輯器（如記事本、Sublime Text、Atom 等）。
  • 編寫您的 HTML 程式碼。
  • 單擊文字編輯器中的“檔案”選單。
  • 單擊“另存為”。
  • 在對話方塊中，選擇要儲存檔案的路徑。
  • 為您的檔案鍵入名稱，後跟 .html 副檔名，以便瀏覽器將其解釋為 HTML 檔案。例如，index.html。
  • 單擊“儲存”。

4. 誰在什麼時候發明了 html？

HTML 由歐洲核子研究組織（CERN）的物理學家蒂姆·伯納斯-李於 1991 年末發明。但是，第一個 HTML 標準規範於 1995 年釋出。

5. HTML 的主要功能是什麼？

HTML 具有以下幾個關鍵功能：−

  • 簡單性 − HTML 易於學習和使用。它具有清晰簡單的語法，即使是初學者也更容易理解。
  • 靈活性 − HTML 允許開發人員建立各種各樣的 Web 文件，從簡單的靜態網頁到複雜的 Web 應用程式。
  • 平臺獨立性 − HTML 是一種標準，所有現代 Web 瀏覽器都支援它。這意味著 HTML 文件可以在任何作業系統的任何 Web 瀏覽器中顯示。
  • 連結 − HTML 的關鍵功能之一是能夠建立指向其他網頁的連結。
  • 嵌入媒體 − 它還允許將各種型別的媒體（如影像、音訊、影片等）嵌入到網頁中。
  • 互動性 − HTML 提供用於建立互動式表單的元素，允許使用者輸入資料。這對於使用者註冊、提交搜尋查詢等任務至關重要。
  • 語義化 − HTML5 引入了語義元素，這些元素將內容的含義傳達給瀏覽器和開發人員。例如，<header>、<footer>、<article> 和 <section>。
  • 整合 − HTML 與 Web 開發中常用的其他語言（如 CSS（層疊樣式表）和 JavaScript）配合良好。CSS 用於網頁的樣式和佈局，而 JavaScript 用於互動性。

6. HTML 的最新版本是什麼？

HTML 的最新版本是 HTML 5，它於 2008 年起草，並於 2014 年由全球資訊網聯盟 (W3C) 接受。

7. HTML 是一種程式語言嗎？

不，HTML 不是一種程式語言。它是一種標記語言，用於構建 Web 上的內容。它代表超文字標記語言。

8. 什麼是 HTML Web 儲存？

HTML Web 儲存（DOM 儲存）是 HTML5 的一項功能，它允許 Web 應用程式在使用者的瀏覽器本地儲存資料。它以鍵值對的形式儲存資料。

Web 儲存有兩種型別：−

  • localStorage − 此物件儲存的資料沒有過期日期。關閉瀏覽器後，資料不會被刪除，並且在下一次會話中仍然可用。
  • sessionStorage − 此物件儲存一個會話的資料。關閉瀏覽器選項卡時，資料會丟失。

9. 如何在瀏覽器中執行 HTML 檔案？

要在瀏覽器中執行 HTML 檔案，首先，將 HTML 檔案儲存為 .html 副檔名。例如，index.html。然後，找到您的檔案並雙擊以在預設瀏覽器中開啟它。

10. 什麼是 HTML 元件？

HTML 元件，也稱為 HTML 元素，是 HTML 頁面的構建塊。它們表示網頁的各個部分，並由 HTML 標籤定義。以下是一些主要元件：−

  • DOCTYPE 宣告 − HTML 文件以 <!DOCTYPE html> 宣告開頭，後跟 <html> 標籤。
  • 標題 − HTML 提供六級標題，從 <h1> 到 <h6>，其中 <h1> 是最高（或最重要）級別，<h6> 是最低級別。
  • 段落 − <p> 標籤定義一個段落。
  • 連結 − <a> 標籤定義超連結，用於從一個頁面連結到另一個頁面。
  • 影像 − <img> 標籤用於在 HTML 頁面中嵌入影像。
  • 列表 − HTML 支援有序列表、無序列表和定義列表。
  • 表格 − <table> 標籤在 HTML 中定義一個表格。
  • 表單 − <form> 標籤用於建立 HTML 表單以供使用者輸入。
  • 分割槽和部分 − <div> 標籤是一個容器單元，它封裝其他頁面元素並將 HTML 文件劃分為各個部分。HTML5 引入了語義元素，如 <section>、<article>、<header>、<footer>、<nav> 等，它們具有類似的功能，但提供了額外的語義資訊。
  • 媒體元素 − HTML5 引入了媒體元素，如 <video> 和 <audio>，它們可用於在 HTML 文件中嵌入影片和音訊檔案。
列印頁面
上一頁
下一頁
廣告