[Day02] 嗨，HTML：網頁的基本組成

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-09-16 15:58:19

47 瀏覽

分享至

首先遇到的是HTML。

HTML是HyperText Markup Language的縮寫。
根據MDN的說明，HTML是網頁的基礎，其定義了網頁的結構與意義。HyperText指的是網頁之間的連結，Markup則是指以標籤標記文字、圖片等內容。[1]

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.
"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser.

先來份空白網頁

使用Visual Studio Code建立HTML檔案時，先輸入驚嘆號再按下tab鍵，接著神奇的事發生了！ Visual Studio Code會自動填入下列程式碼。若以瀏覽器開啟這個檔案，會是一個空白的網頁。
需要注意的是，HTML檔案需要以.html或.htm作為副檔名[2]。因此在建立html檔案時需要使用其中一種作為副檔名，Visual Studio Code才會知道是在建立HTML檔案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

這個空白網頁由<!DOCTYPE html>、<html>、<head>、<body>等標籤組成，可以將他們理解為網頁的基本組成。

什麼跟什麼

<!DOCTYPE html>用於聲明文件類型，告知瀏覽器這是以HTML5寫成的檔案[3]。如果忽略這個聲明或改用其他的文件類型，可能會讓瀏覽器以其他的異常模式渲染網頁。[4]

<html>元素是HTML文件的根元素，除了<!DOCTYPE>之外的其他元素都需要包在它裡面。一個HTML檔案裡只能有一個<html>元素。
<html>標籤裡面有個lang屬性，其值設為en，表示網頁的主要語言是英語。通常會建議設定lang屬性，以避免瀏覽器基於無障礙功能唸出網頁內容等情境時出錯。[5]

<head>元素裡會放入有關網頁的metadata（簡單來說是描述資料的資料，台灣譯作後設資料或詮釋資料[6]），像是網頁的標題、Icon、作者等。
<head>放入的內容預設是不會顯示在網頁上的。一個HTML檔案裡只能有一個<head>元素。[7]。

在這份空白網頁中，可以看到<head>裡又有<title>，裡面填入Document。<title>用於標記網頁的標題，因此這個網頁在瀏覽器的分頁列上便顯示為Document。
至於其他以<meta>標籤包住的資料是什麼，這邊先賣個關子，之後幾天再說明～

<body>元素裡會放入要呈現於網頁中的內容。同樣的，一個HTML檔案裡只能有一個<body>元素。[8]。
在這份空白網頁中，因為<body>裡沒有任何內容，也沒有針對<body>設定樣式，所以開啟後網頁裡空無一物，就是個空白網頁。（這好像是廢話XD）