DAY3 介紹HTML開頭

2026 iThome 鐵人賽

DAY 3

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 3 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-17 10:05:43

63 瀏覽

分享至

<!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>
    <p>早上好啊朋友。</p>
</body>
</html>

上面的 HTML 是網頁開發中最核心的HTML5標準網頁基礎骨架（簡單來說就是網頁的起手式），任何我們在網路上看到的複雜網站，不管是Google、Facebook還是其他平台，它們最底層的結構都是由上面這幾行程式碼擴充而來，這段程式碼的作用是建立一個結構完整、可以自由設計，且不會產生亂碼的標準網頁環境，接下來我將把它分成三個部份來介紹。

1. 頂層宣告與語系設定（根節點）

<!DOCTYPE html>：這是文件類型宣告，他必須放在網頁的最頂端，他主要是用來告訴瀏覽器：「這是一份使用HTML5最新標準編寫的文件」，這能強迫瀏覽器進入「標準模式」來渲染畫面，避免因為相容性問題導致排版錯亂。
<html lang="en">：<html>是整個網頁的根元素（Root Element），包覆了網頁內的所有內容，lang="en" 屬性則告訴了搜尋引擎與瀏覽器，這個網頁的主要語言是英文，這會對搜尋引擎最佳化（SEO）以及螢幕閱讀器（語音輔助工具等）非常重要，如果網頁主要服務台灣使用者，通常會建議改為 lang="zh-Hant"（繁體中文）。

2. 標頭區（Head）

<head> 與 </head> ：在這之間的區塊是網頁的中樞神經的設定區，這裡面的內容並不會直接顯示在瀏覽器的頁面上，而是提供給瀏覽器與系統讀取的關鍵數據
<meta charset="UTF-8">：指定網頁編碼為UTF-8，這是全世界通用的字元編碼，他支援中、英、日、韓等各國文字與表情符號，能徹底杜絕早期網頁非常容易出現的「中文亂碼」問題。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：這是開發響應式網頁（RWD, Responsive Web Design）的非常重要的鐵律，它指定網頁的寬度要等於裝置的螢幕寬度，且初始縮放比例為 1.0，沒有這行設定，網頁在手機上觀看時就會縮得非常小，強制使用者必須用手指捏合放大才能閱讀。
<title>Document</title>：網頁的標題標籤，它決定了瀏覽器分頁標籤上顯示的文字，同時也是搜尋引擎搜尋結果（SERP）中顯示的藍色大標題。

3. 主體（Body）

<body>與</body>：在這之間是網頁中最大的舞台，所有想讓使用者在螢幕上看到的文字、圖片、影片、按鈕與表格，都要寫在這裡面。
<p>早上好啊朋友。</p>：<p> 代表 Paragraph（段落標籤），是 HTML 中最常用來存放純文字段落的容器。當瀏覽器讀到這個標籤時，會自動在文字的上方與下方留出適當的垂直間距，讓排版看起來舒適、易讀。