HTML 網頁文件結構 | 梧所不學

更新於 發佈於 閱讀時間約 2 分鐘

在開始學習網頁開發之前,我們必須先了解 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>則是放置實際顯示的網頁內容,例如標題、段落、圖片等元素。就像是一張白紙,你可以在上面放置各種內容。

結語

寫網頁時,建議養成良好的縮排習慣,讓程式碼層次分明,這樣程式碼會更容易閱讀和維護。另外,適當的註解也能幫助你日後檢視程式碼時更快理解。

avatar-img
63會員
9內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。