在開始學習網頁開發之前,我們必須先了解 HTML 文件的基本架構。本文將帶你認識一個標準的 HTML 網頁文件應該具備哪些重要元素,以及它們分別有什麼作用。
HTML 文件需要特定的結構才能正常運作,就像蓋房子需要扎實的地基一樣,讓我們來看看一個最基本的 HTML 文件結構:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網頁</title>
</head>
<body>
網頁內容
</body>
</html>
首先,<!DOCTYPE html>
告訴瀏覽器這是一個 HTML 文件,這行程式碼必須放在文件最開頭。
<html>
是整個文件的根元素,我們在這裡加入lang="zh-TW"
屬性,設定網頁的語言是台灣繁體中文。
<head>
包含了網頁的相關資訊,像是編碼方式、網頁標題等。其中<meta charset="UTF-8">
設定字元編碼為UTF-8
,確保中文字能正常顯示。viewport
則是為了讓網頁能在手機上正常顯示。
<body>
則是放置實際顯示的網頁內容,例如標題、段落、圖片等元素。就像是一張白紙,你可以在上面放置各種內容。
寫網頁時,建議養成良好的縮排習慣,讓程式碼層次分明,這樣程式碼會更容易閱讀和維護。另外,適當的註解也能幫助你日後檢視程式碼時更快理解。