HTML概述和介紹

HTML 是一種廣泛使用的標準標記語言，用於建立網頁。

HTML 簡介

HTML 代表超文字標記語言 (HyperText Markup Language)。它使用各種元素（通常稱為標籤）來組織網頁上的內容。這些 HTML 元素定義了網頁的不同部分，例如標題、段落、指向其他網頁的連結、列表、影像、表格等。這些元素告訴瀏覽器要顯示的內容和格式。

HTML = 超文字 + 標記語言。其中：

超文字 (HyperText) 指的是網頁（HTML 文件）相互連結的方式。因此，網頁上的連結稱為“超文字”。
標記語言 (Markup Language)，這意味著您使用 HTML 來用標籤簡單地“標記”文字文件，這些標籤告訴 Web 瀏覽器如何組織文件以進行顯示。

什麼是 HTML 元素？

HTML 元素是建立網頁的基本構建塊，它由起始標籤、內容和結束標籤組成。在 HTML 元素中，內容位於起始標籤和結束標籤之間。

HTML 元素的基本語法如下：

<tag_name>content</tag_name>

以下示例演示了一個 HTML 元素：

<h1>It is top-level heading</h1>

這裡：

<h1> 是起始標籤。
"這是一個一級標題" 是內容，它位於起始標籤和結束標籤之間。
</h1> 是結束標籤。

HTML 頁面結構

HTML 頁面結構（或 HTML 基本結構）由建立可在瀏覽器中顯示的 HTML 文件所需的必要元素組成。

下圖顯示了 HTML 文件的頁面結構：

HTML 頁面結構包含 <!DOCTYPE html>、<html>、<head>、<title>、<body> 和其他將在主頁上顯示的標籤。

其中：

<!DOCTYPE html> − 它將文件型別定義為 HTML。
<html> − 它是 HTML 文件的根元素。所有元素都放置在這個元素內。
<head> − head 標籤可能包含對頁面功能有用的指令碼和樣式。元標籤也放置在這個標籤內。
<title> − 它定義網頁的標題。
<body> − 它定義網頁的主體，所有用於在瀏覽器中顯示內容的元素都放置在 body 標籤內。
<h1> 和 <p> − h1 標籤定義頁面標題，p 標籤定義段落。

基本的 HTML 標籤

以下是 HTML 基本標籤：

<h1> 到 <h6> − 這些是標題標籤，用於編寫網頁的標題。其中，<h1> 是一級標題，<h6> 是六級標題（最低級別）標題。
<p> − <p> 標籤將文字顯示為網頁上的段落。
<br> 或 <br /> − <br> 標籤代表“換行”，它在網頁上插入換行符。
<div> − <div> 標籤代表“區段”，它定義網頁上的區段或部分。您可以放置任意數量的元素以將它們組合在一個區段中。
<ul> 和 <ol> − <ul> 和 <ol> 標籤在網頁上插入列表項，<ol> 標籤定義有序列表，而 <ul> 標籤定義無序列表。
<img> − <img> 標籤用於在網頁中插入影像。
<a> − <a> 標籤代表“錨點”，它用於在網頁中放置連結。
<pre> − <pre> 標籤用於保留格式。

您可以在此處找到更多標籤。訪問：HTML 標籤參考。

HTML 第一個示例

HTML 第一個示例顯示了 HTML 頁面結構以及必要的標籤。在下面的示例中，我們正在建立一個 HTML 文件。此示例包含所有必要的標籤和其他基本標籤。單擊“編輯並執行”以顯示此示例在網頁上的外觀。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML First Example</title>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <p>A learning portal for students and professionals.</p>
   <h2>About TutorialsPoint</h2>
   <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
   <h2>Our Web Tutorials</h2>
   <ul>
      <li><a href="https://tutorialspoint.tw/html/index.htm">HTML</a></li> 
      <li><a href="https://tutorialspoint.tw/css/index.htm">CSS</a></li>
      <li><a href="https://tutorialspoint.tw/javascript/index.htm">JavaScript</a></li>
   </ul>
</body>
</html>

Web 瀏覽器的作用

Web 瀏覽器的作用是從給定路徑（從伺服器或本地裝置）讀取 HTML 文件並在網頁上顯示它。所有 Web 瀏覽器（例如 Google Chrome、Safari、Firefox 等）都相容讀取 HTML 文件。您可以使用任何 Web 瀏覽器以 Web 格式顯示您的 HTML 文件。

<!DOCTYPE> 宣告

<!DOCTYPE> 宣告標籤用於使 Web 瀏覽器理解文件中使用的 HTML 版本。當前的 HTML 版本是 5，它使用以下宣告：

<!DOCTYPE html>

根據使用的 HTML 版本，可以在 HTML 文件中使用許多其他宣告型別。在討論 <!DOCTYPE...> 標籤以及其他 HTML 標籤時，我們將看到更多詳細資訊。

HTML 歷史與演變

HTML 最初由 **Tim Berners-Lee** 於 1991 年末開發。它被設計為一種用於在全球資訊網上建立和格式化文件的標準語言。網際網路上的所有網頁都是用 HTML 建立的。

下圖顯示了 HTML 在多年來的演變：

閱讀更多：HTML 歷史與演變。

HTML 標籤與元素與屬性

HTML 標籤 是可以用於特定目的的關鍵字，用於顯示和格式化網頁上的內容。

HTML 元素 是使用標籤和內容製作的基本構建塊。HTML 元素由起始標籤、內容和結束標籤組成。

並且，HTML 屬性 提供有關 HTML 元素的其他資訊；為了定義或更改它們的行為。屬性與起始標籤一起使用。

HTML 標籤大小寫敏感性

HTML 標籤不區分大小寫。它們可以用大寫或小寫編寫。但是，全球資訊網聯盟 (W3C) 建議從 HTML 4 開始使用小寫標籤。

HTML 的重要性

HTML 是全球資訊網的基本構建塊。您在網上訪問的任何頁面都包含 HTML 標籤。HTML 重要的原因如下：

HTML 定義網頁結構並幫助設計網站。
在 CSS 和 JavaScript 的幫助下，HTML 有助於建立漂亮且互動式網站。
HTML 透過基於目標關鍵詞最佳化標籤來幫助搜尋引擎最佳化。
HTML 幫助在網際網路上的任何位置瀏覽不同的頁面和網站。
HTML 支援使用者輸入和表單；您可以輕鬆地從世界任何地方獲取資訊（可能需要後臺資料庫支援）。
HTML 遵循 W3C 的開放標準。因此，HTML 支援任何型別的裝置上的所有瀏覽器。您無需為不同的瀏覽器或裝置更改 HTML。

要學習 HTML，您需要學習各種標籤並瞭解它們在格式化文字文件時的行為。學習 HTML 很簡單，使用者只需要學習不同標籤的用法，以便格式化文字或影像以建立美觀的網頁。

列印頁面