# 玻璃花園專案第一部分：HTML入門 ```mermaid journey title Your HTML Learning Journey section Foundation Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Content Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantics Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.mo.png) > 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供 HTML，即超文本標記語言，是您曾經瀏覽過的每個網站的基礎。可以將HTML想像成網頁的骨架——它定義了內容的位置、組織方式以及每個部分的意義。雖然CSS稍後會用顏色和佈局來“裝飾”您的HTML，JavaScript則會通過互動性使其“活起來”，但HTML提供了使其他一切成為可能的基本結構。 在本課程中，您將為虛擬玻璃花園界面創建HTML結構。這個動手項目將教您基本的HTML概念，同時構建一些視覺上吸引人的內容。您將學習如何使用語義元素組織內容、處理圖片以及為互動式網頁應用程序創建基礎。 在本課程結束時，您將擁有一個工作中的HTML頁面，顯示有序列的植物圖片，為下一課的樣式設置做好準備。不要擔心它一開始看起來很簡單——這正是HTML在CSS添加視覺效果之前應該做的事情。 ```mermaid mindmap root((HTML Fundamentals)) Structure DOCTYPE Declaration HTML Element Head Section Body Content Elements Tags & Attributes Self-closing Tags Nested Elements Block vs Inline Content Text Elements Images Containers (div) Lists Semantics Meaningful Tags Accessibility Screen Readers SEO Benefits Best Practices Proper Nesting Valid Markup Descriptive Alt Text Organized Structure ``` ## 課前測驗 [課前測驗](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **觀看並學習**：查看這段有用的視頻概述 > > [![HTML基礎視頻](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## 設置您的專案 在我們深入HTML代碼之前，讓我們為您的玻璃花園專案設置一個合適的工作空間。從一開始就創建一個有組織的文件結構是一個重要的習慣，這將在您的網頁開發過程中對您大有幫助。 ### 任務：創建您的專案結構 您將為您的玻璃花園專案創建一個專用文件夾，並添加您的第一個HTML文件。以下是您可以使用的兩種方法： **選項1：使用Visual Studio Code** 1. 打開Visual Studio Code 2. 點擊“File”→“Open Folder”或使用`Ctrl+K, Ctrl+O`（Windows/Linux）或`Cmd+K, Cmd+O`（Mac） 3. 創建一個名為`terrarium`的新文件夾並選擇它 4. 在Explorer面板中，點擊“New File”圖標 5. 將文件命名為`index.html` ![VS Code Explorer顯示新文件創建](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.mo.png) **選項2：使用終端命令** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **這些命令的作用：** - **創建**一個名為`terrarium`的新目錄作為您的專案文件夾 - **進入**terrarium目錄 - **創建**一個空的`index.html`文件 - **打開**該文件以便在Visual Studio Code中進行編輯 > 💡 **專業提示**：文件名`index.html`在網頁開發中非常特殊。當有人訪問網站時，瀏覽器會自動尋找`index.html`作為默認顯示的頁面。這意味著像`https://mysite.com/projects/`這樣的URL會自動提供`projects`文件夾中的`index.html`文件，而無需在URL中指定文件名。 ## 理解HTML文檔結構 每個HTML文檔都遵循特定的結構，瀏覽器需要這種結構來正確理解和顯示內容。可以將這種結構想像成一封正式的信件——它有特定順序的必需元素，幫助接收者（在這裡是瀏覽器）正確處理內容。 ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Heading"] G --> I["<div> Containers"] G --> J["<img> Images"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` 讓我們從添加每個HTML文檔所需的基本框架開始。 ### DOCTYPE聲明和根元素 任何HTML文件的前兩行都是文檔對瀏覽器的“介紹”： ```html <!DOCTYPE html> <html></html> ``` **理解這段代碼的作用：** - **聲明**文檔類型為HTML5，使用`<!DOCTYPE html>` - **創建**包含所有頁面內容的根`<html>`元素 - **建立**現代網頁標準以確保瀏覽器正確渲染 - **保證**在不同瀏覽器和設備上的一致顯示效果 > 💡 **VS Code提示**：在VS Code中將鼠標懸停在任何HTML標籤上，可以查看來自MDN Web Docs的有用信息，包括使用示例和瀏覽器兼容性細節。 > 📚 **了解更多**：DOCTYPE聲明可以防止瀏覽器進入“怪異模式”，該模式曾用於支持非常舊的網站。現代網頁開發使用簡單的`<!DOCTYPE html>`聲明來確保[符合標準的渲染](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。 ### 🔄 **教學檢查** **暫停並反思**：在繼續之前，請確保您理解： - ✅ 為什麼每個HTML文檔都需要DOCTYPE聲明 - ✅ `<html>`根元素包含什麼 - ✅ 此結構如何幫助瀏覽器正確渲染頁面 **快速自測**：您能用自己的話解釋“符合標準的渲染”是什麼意思嗎？ ## 添加基本文檔元數據 HTML文檔的`<head>`部分包含瀏覽器和搜索引擎需要的重要信息，但訪問者不會直接在頁面上看到這些信息。可以將其視為幫助您的網頁正常運行並在不同設備和平台上正確顯示的“幕後信息”。 這些元數據告訴瀏覽器如何顯示您的頁面、使用什麼字符編碼以及如何處理不同的屏幕尺寸——這些都是創建專業、可訪問網頁的必要條件。 ### 任務：添加文檔頭部 在您的開頭和結尾`<html>`標籤之間插入以下`<head>`部分： ```html <head> <title>Welcome to my Virtual Terrarium ``` **分解每個元素的作用：** - **設置**顯示在瀏覽器標籤和搜索結果中的頁面標題 - **指定**UTF-8字符編碼以便全球範圍內正確顯示文本 - **確保**與現代版本的Internet Explorer兼容 - **配置**響應式設計，通過設置視口匹配設備寬度 - **控制**初始縮放級別以自然大小顯示內容 > 🤔 **思考一下**：如果您將視口meta標籤設置為這樣：``會發生什麼？這將強制頁面始終保持600像素寬，破壞響應式設計！了解更多關於[正確的視口配置](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)。 ## 建立文檔主體 ``元素包含網頁的所有可見內容——用戶將看到和交互的所有內容。雖然``部分向瀏覽器提供指令，但``部分包含實際內容：文本、圖片、按鈕以及創建用戶界面的其他元素。 讓我們添加主體結構並了解HTML標籤如何協同工作以創建有意義的內容。 ### 理解HTML標籤結構 HTML使用成對的標籤來定義元素。大多數標籤都有像`

`這樣的開頭標籤和像`

`這樣的結尾標籤，中間包含內容：`

Hello, world!

`。這創建了一個包含文本“Hello, world!”的段落元素。 ### 任務：添加主體元素 更新您的HTML文件以包含``元素： ```html Welcome to my Virtual Terrarium ``` **這個完整結構提供了以下內容：** - **建立**基本的HTML5文檔框架 - **包含**正確的元數據以便瀏覽器正確渲染 - **創建**一個空的主體以容納可見內容 - **遵循**現代網頁開發的最佳實踐 現在您已準備好添加玻璃花園的可見元素。我們將使用`
`元素作為容器來組織不同的內容部分，並使用``元素顯示植物圖片。 ### 使用圖片和佈局容器 圖片在HTML中很特別，因為它們使用“自閉合”標籤。與`

`等包裹內容的元素不同，``標籤本身包含所有必要的信息，通過`src`屬性指定圖片文件路徑，通過`alt`屬性提供可訪問性。 在將圖片添加到HTML之前，您需要通過創建一個images文件夾並添加植物圖片來正確組織您的專案文件。 **首先，設置您的圖片：** 1. 在您的玻璃花園專案文件夾中創建一個名為`images`的文件夾 2. 從[解決方案文件夾](../../../../3-terrarium/solution/images)下載植物圖片（共14張植物圖片） 3. 將所有植物圖片複製到您的新`images`文件夾中 ### 任務：創建植物展示佈局 現在在您的``標籤之間添加有序的植物圖片佈局： ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **逐步解析此代碼的作用：** - **創建**一個主頁面容器，`id="page"`，用於容納所有內容 - **建立**兩個列容器：`left-container`和`right-container` - **組織**左列7個植物，右列7個植物 - **包裹**每個植物圖片在`plant-holder`的div中以便單獨定位 - **應用**一致的類名以便下一課進行CSS樣式設置 - **分配**唯一的ID給每個植物圖片以便後續JavaScript交互 - **包含**指向images文件夾的正確文件路徑 > 🤔 **思考一下**：注意所有圖片目前都有相同的alt文字“plant”。這對於可訪問性來說並不理想。使用屏幕閱讀器的用戶會聽到“plant”重複14次，無法知道每張圖片顯示的是哪種植物。您能想到更好、更具描述性的alt文字嗎？ > 📝 **HTML元素類型**：`
`元素是“塊級”元素，佔據整個寬度，而``元素是“內聯”元素，只佔據必要的寬度。如果您將所有這些`
`標籤更改為``標籤，您認為會發生什麼？ ### 🔄 **教學檢查** **結構理解**：花點時間回顧您的HTML結構： - ✅ 您能識別佈局中的主要容器嗎？ - ✅ 您理解為什麼每張圖片都有唯一的ID嗎？ - ✅ 您如何描述`plant-holder` div的用途？ **視覺檢查**：在瀏覽器中打開您的HTML文件。您應該看到： - 一個基本的植物圖片列表 - 圖片分為兩列 - 簡單的未設置樣式的佈局 **記住**：這種簡單的外觀正是CSS設置樣式之前HTML應該呈現的樣子！ 添加這些標記後，植物將顯示在屏幕上，儘管它們看起來還不夠精美——這就是下一課中CSS的作用！目前，您已經擁有一個堅實的HTML基礎，可以正確地組織您的內容並遵循可訪問性最佳實踐。 ## 使用語義HTML提升可訪問性 語義HTML意味著根據元素的意義和用途選擇HTML元素，而不僅僅是根據它們的外觀。使用語義標記時，您是在向瀏覽器、搜索引擎和屏幕閱讀器等輔助技術傳達內容的結構和意義。 ```mermaid flowchart TD A[Need to add content?] --> B{What type?} B -->|Main heading| C["

"] B -->|Subheading| D["

,

, etc."] B -->|Paragraph| E["

"] B -->|List| F["

    ,
      "] B -->|Navigation| G["