HTML - 簡介

你好啊，有志於成為網頁開發者的朋友！我很興奮能成為你進入HTML世界的引路人。作為一個教了超過十年計算機科學的人，我可以告訴你，HTML是網頁的基礎，學習它就像獲得了一種超能力。那麼，我們來一起深入探索吧！

HTML - Introduction

HTML是什麼？

HTML代表超文本標記語言（HyperText Markup Language）。我知道這聽起來有點嚇人，但把它當作網頁的骨骼吧。就像我們的骨骼給我們的身體提供結構一樣，HTML為網頁提供結構。

讓我們分解一下：

超文本：這指的是包含指向其他文本鏈接的文本。
標記：這意味著我們在純文本中添加特殊的“標籤”，以賦予它意義和結構。
語言：這是一種與計算機溝通的方式，告訴它們如何顯示我們的內容。

以下是一個簡單的HTML示例：

<h1>歡迎來到我第一個網頁！</h1>
<p>這是一段文本。</p>

在這個例子中，<h1>和<p>是HTML標籤，它們告訴瀏覽器如何顯示文本。

為什麼要使用HTML？

你可能會想，“我為什麼要麻煩學習HTML？”讓我告訴你一個小故事。當我剛開始的時候，我以為我可以只用一些花哨的網頁構建器來做所有的事情。但後來我遇到了一個客戶，他想要一些這些工具做不到的特定東西。那時我意識到了HTML的力量。

以下是一些為什麼HTML非常重要的原因：

它是網頁的通用語言：你訪問過的每一個網站都使用了HTML。
它給你控制權：你可以創造出你想要的任何東西，而不僅僅是工具允許的。
它是進一步網頁開發的基礎：如果你以後想學習CSS和JavaScript，你需要先學習HTML。
它相對容易學習：相信我，如果我能學會，你絕對也可以！

HTML的版本

HTML隨著時間的推移而發展，就像一瓶美酒隨著時間變得越來越好。以下是一些主要版本的快速概覽：

版本	年份	主要特點
HTML 1.0	1991	非常基礎，只有18個元素
HTML 2.0	1995	引入表單和表格
HTML 3.2	1997	支持更多的標籤和屬性
HTML 4.01	1999	改進對CSS和腚本的支持
XHTML	2000	更严格的、基於XML的HTML版本
HTML5	2014	當前標準，有新的語義元素和API

現在，我們主要使用HTML5，它非常強大且靈活。

HTML文檔結構

每個HTML文檔都遵循特定的結構。把它當作你網頁的藍圖。以下是其結構：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
<p>這裡是所有可見內容的地方。</p>
</body>
</html>

讓我們分解這個結構：

<!DOCTYPE html>：這告訴瀏覽器我們使用的是HTML5。
<html>：HTML頁面的根元素。
<head>：包含關於文檔的元信息。
<body>：包含可見的頁面內容。

網頁瀏覽器在HTML中的角色

網頁瀏覽器就像是HTML的翻譯。它們讀取HTML代碼並將其渲染成我們看到的視覺網頁。不同的瀏覽器可能會以略微不同的方式渲染同一個HTML，這就是為什麼要在多個瀏覽器上測試你的網站。

這裡有一個有趣的事實：第一個網頁瀏覽器叫做WorldWideWeb（後來改名叫Nexus），由萬維網的發明者Tim Berners-Lee創造！

HTML標籤、屬性和元素

HTML由三個關鍵組成部分：

標籤：這是HTML的建築塊。它們總是被包含在尖括號中，如<p>代表段落。
屬性：這些提供了關於元素的額外信息。它們總是在開始標籤中指定。
元素：一個元素是從開始標籤到結束標籤的一切。

讓我們看一個例子：

<a href="https://www.example.com" title="訪問Example">點擊這裡</a>

在這個例子中：

<a>是標籤（代表超鏈接）
href和title是屬性
整行是一個元素

以下是一些常見的HTML標籤：

標籤	描述
`<h1>`到`<h6>`	標題
`<p>`	段落
`<a>`	超鏈接
`<img>`	圖像
`<ul>`和`<ol>`	非排序列表和排序列表
`<table>`	表格
`<div>`	區域或部分

學習HTML的重要性

學習HTML就像在數字時代學會閱讀和寫作。它是理解網絡如何運作以及如何為之創造的第一步。有了HTML，你可以：

從零開始創建自己的網站
理解並修改現有的網站
更有效地與設計師和開發者溝通
在網頁開發領域開啟職業機會

我記得教過一個學生，她認為自己不夠“技術”來學習編程。她從HTML開始，幾周內就建立了自己的第一個網站。她脸上的自豪感和成就感的樣子是無價的。這就是HTML的力量——它既易於接觸，又強大。

總結來說，HTML是網絡的脊樑，學習它是進入網頁開發世界的令人興奮的第一步。起初它可能看起來令人生畏，但請相信我，只要多加練習和耐心，你很快就能創造出令人驚艷的網頁。記住，每個專家都曾經是個初學者。那麼，你準備好開始你的HTML之旅了嗎？我們來編程吧！

Credits: Image by storyset