Web-Dev-For-Beginners Terrarium 項目第 1 課用 HTML 搭建虛擬植物溫室的結構骨架【免費下載鏈接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer項目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners導讀本文是 Web-Dev-For-Beginners 開源教程中 Terrarium虛擬植物溫室項目的第 1 課核心目標是用純 HTML 為項目搭建完整的文檔結構與布局骨架——從 DOCTYPE 聲明、head元數(shù)據(jù)到雙列植物展示區(qū)與玻璃罐容器結構。讀者完成本課后將擁有一份語義正確、可訪問、可直接進入 CSS 美化階段的基礎頁面并為后續(xù)課程中的拖拽交互DOM 操作預留好全部鉤子元素 ID。本課對應的原始文檔位于 translations/de/3-terrarium/1-intro-to-html/README.md英文原版見 3-terrarium/1-intro-to-html/README.md倉庫內還提供了完整可運行的參考答案3-terrarium/solution讀者可對照學習。HTML 與 Terrarium 項目HTMLHyperText Markup Language是你訪問過的每一個網(wǎng)站的地基?？梢园?HTML 想象成網(wǎng)頁的骨架——它決定內容放在哪里、如何組織、每一部分代表什么。CSS 稍后負責給 HTML 穿衣打扮顏色與布局JavaScript 則賦予它交互性而 HTML 提供了讓這一切成為可能的本質結構。在本課中你將為一個虛擬溫室界面搭建 HTML 結構。這個動手項目讓你在學習基礎 HTML 概念的同時構建出視覺上吸引人的東西學會用語義化元素組織內容、處理圖片、并為交互式 Web 應用打下基礎。課程結束時你會得到一張能按兩列展示 14 張植物圖片的可運行 HTML 頁面隨時可以進入下一課的 CSS 美化階段。一開始它看起來很簡單——這正是 CSS 加入視覺修飾之前 HTML 應該有的樣子。搭建你的項目工作區(qū)在接觸 HTML 代碼之前先為 Terrarium 項目準備一個規(guī)范的目錄結構。從一開始就養(yǎng)成良好文件組織習慣會在整個 Web 開發(fā)旅程中持續(xù)受益。任務創(chuàng)建項目結構創(chuàng)建一個專用的terrarium項目文件夾并加入你的第一個 HTML 文件。以下兩種方式任選其一方式一使用 Visual Studio Code打開 Visual Studio Code點擊文件→打開文件夾或使用快捷鍵CtrlK, CtrlOWindows/Linux/CmdK, CmdOMac新建一個名為terrarium的文件夾并選中它在資源管理器面板中點擊新建文件圖標將文件命名為index.html。方式二使用終端命令mkdir terrarium cd terrarium touch index.html code index.html這些命令各自的作用創(chuàng)建名為terrarium的項目目錄進入terrarium目錄創(chuàng)建空文件index.html用Visual Studio Code 打開該文件進行編輯。專業(yè)提示index.html這個名字在 Web 開發(fā)中有特殊意義。當有人訪問一個網(wǎng)站時瀏覽器會自動尋找index.html作為默認頁面。這意味著形如https://mysite.com/projects/的 URL 會自動顯示projects文件夾中的index.html文件無需在 URL 中顯式寫出文件名。VS Code 技巧在 VS Code 中把鼠標懸停在任意 HTML 標簽上會看到來自 MDN Web Docs 的幫助信息包括用法示例與瀏覽器兼容性說明。理解 HTML 文檔結構每個 HTML 文檔都遵循瀏覽器正確解析與渲染所需的特定結構?？梢园堰@種結構類比為一封正式信件——它按特定順序包含必需元素幫助接收方這里是瀏覽器正確處理內容。文檔的骨架關系如下!DOCTYPE html→html→head內含title、meta charset、meta viewport→body內含h1標題、div容器、img圖片。先來添加每個 HTML 文檔都需要的核心基礎。DOCTYPE 聲明與根元素HTML 文件的前兩行是文檔向瀏覽器的自我介紹!DOCTYPE html html/html這段代碼的作用聲明文檔類型為 HTML5!DOCTYPE html創(chuàng)建根元素html它包裹頁面全部內容確立現(xiàn)代 Web 標準保證瀏覽器正確渲染保證在不同瀏覽器與設備上呈現(xiàn)一致。深入理解DOCTYPE 聲明能防止瀏覽器進入怪異模式quirks mode——該模式原本是為了兼容非常古老的網(wǎng)站?，F(xiàn)代 Web 開發(fā)使用簡潔的!DOCTYPE html聲明來確保標準兼容的渲染standards-compliant rendering。 教學檢查點繼續(xù)之前請確認自己理解? 為什么每個 HTML 文檔都需要 DOCTYPE 聲明?html根元素包含什么? 這種結構如何幫助瀏覽器正確渲染頁面?？焖僮詼y你能用自己的話解釋標準兼容渲染是什么意思嗎添加必需的文檔元數(shù)據(jù)head區(qū)域包含瀏覽器與搜索引擎需要、但訪客在頁面上看不到的關鍵信息?？梢园阉醋髂缓笮畔椭愕木W(wǎng)頁在各種設備與平臺上正常工作。這些元數(shù)據(jù)告訴瀏覽器如何展示頁面、使用什么字符編碼、如何處理不同屏幕尺寸——這些都是打造專業(yè)、可訪問網(wǎng)頁的關鍵。任務添加文檔頭部在html的開始與結束標簽之間插入這段headhead titleWelcome to my Virtual Terrarium/title meta charsetutf-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1 / /head每個元素的作用設置頁面標題顯示在瀏覽器標簽頁與搜索結果中指定UTF-8 字符編碼保證全球范圍內的文字正確顯示確保與現(xiàn)代版本 Internet Explorer 的兼容性配置響應式設計——將視口寬度設置為匹配設備寬度控制初始縮放級別讓內容以自然大小顯示。想一想如果設置這樣的視口 meta 標簽meta nameviewport contentwidth600會發(fā)生什么頁面會被強制固定為 600 像素寬從而破壞響應式設計請務必使用widthdevice-width, initial-scale1的標準配置。源碼印證倉庫中的完整參考答案 3-terrarium/solution/index.html 使用了完全相同的四行head元數(shù)據(jù)并在此基礎上增加了樣式表與腳本的引入方式link relstylesheet與script defer說明這是項目認可的規(guī)范寫法。構建文檔主體body元素包含網(wǎng)頁的全部可見內容——用戶看到并與之交互的一切。head區(qū)域給瀏覽器下指令body區(qū)域則承載真實內容文字、圖片、按鈕等構成用戶界面的元素。理解 HTML 標簽結構HTML 使用成對標簽定義元素。多數(shù)標簽有開始標簽如p和結束標簽如/p中間是內容pHallo Welt!/p就創(chuàng)建了一個包含Hello, world!文字的段落元素。任務添加 body 元素更新 HTML 文件使其包含body!DOCTYPE html html head titleWelcome to my Virtual Terrarium/title meta charsetutf-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1 / /head body/body /html這組完整結構提供的能力建立基本 HTML5 文檔框架包含瀏覽器正確渲染所需的關鍵元數(shù)據(jù)創(chuàng)建一個空的 body為可見內容做好準備遵循現(xiàn)代 Web 開發(fā)最佳實踐?，F(xiàn)在可以添加溫室的可見元素了。我們將使用div元素作為容器來組織不同內容區(qū)塊并用img元素展示植物圖片。使用圖片與布局容器圖片在 HTML 中很特殊因為它們使用自閉合標簽。與p/p這類包裹內容的元素不同img標簽通過src圖片文件路徑和alt無障礙文本等屬性把所需信息全部放在標簽自身內部。在向 HTML 添加圖片之前需要先組織好項目文件創(chuàng)建images文件夾并放入植物素材。首先準備好圖片在terrarium項目文件夾內創(chuàng)建images文件夾從倉庫的解決方案圖片目錄獲取 14 張植物圖片plant1.pngplant14.png均為 400×400 像素將所有植物圖片復制進你的images文件夾。任務創(chuàng)建植物展示布局現(xiàn)在把按兩列組織的植物圖片插入body/body標簽之間div idpage div idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div div classplant-holder img classplant altplant idplant2 src./images/plant2.png / /div div classplant-holder img classplant altplant idplant3 src./images/plant3.png / /div div classplant-holder img classplant altplant idplant4 src./images/plant4.png / /div div classplant-holder img classplant altplant idplant5 src./images/plant5.png / /div div classplant-holder img classplant altplant idplant6 src./images/plant6.png / /div div classplant-holder img classplant altplant idplant7 src./images/plant7.png / /div /div div idright-container classcontainer div classplant-holder img classplant altplant idplant8 src./images/plant8.png / /div div classplant-holder img classplant altplant idplant9 src./images/plant9.png / /div div classplant-holder img classplant altplant idplant10 src./images/plant10.png / /div div classplant-holder img classplant altplant idplant11 src./images/plant11.png / /div div classplant-holder img classplant altplant idplant12 src./images/plant12.png / /div div classplant-holder img classplant altplant idplant13 src./images/plant13.png / /div div classplant-holder img classplant altplant idplant14 src./images/plant14.png / /div /div /div這段代碼逐步做了什么創(chuàng)建主頁面容器idpage承載所有內容建立兩個列容器left-container與right-container組織左列 7 株植物、右列 7 株植物將每張植物圖片包裹進plant-holderdiv便于單獨定位應用一致的類名供下一課 CSS 樣式使用為每張植物圖片分配唯一 ID供后續(xù) JavaScript 交互使用正確引用images文件夾中的文件路徑。源碼印證ID 即交互鉤子這些idplant1idplant14并非隨意命名。查看 3-terrarium/solution/script.js可以發(fā)現(xiàn)后續(xù)課程中的拖拽邏輯正是通過document.getElementById(plant1)等調用逐個獲取這 14 個元素并綁定dragElement的。也就是說本課為每張圖片分配唯一 ID是第 3 課 DOM 與閉包交互的提前鋪墊。思考一下目前所有圖片的 alt 文本都是相同的 plant。這對無障礙并不理想——屏幕閱讀器用戶會聽到 14 遍 plant卻不知道每張圖片是哪株植物。你能為每張圖片想出更好的、更具描述性的 alt 文本嗎HTML 元素類型div是塊級元素占據(jù)整行寬度span是行內元素只占所需寬度。想想看如果把這些div全部換成span布局會發(fā)生什么變化 教學檢查點結構理解花一點時間回顧你的 HTML 結構? 你能說出布局結構中的主要容器嗎? 你理解為什么每張圖片需要唯一 ID 嗎? 你會如何描述plant-holderdiv 的作用視覺檢查在瀏覽器中打開 HTML 文件你應該看到一列基本的植物圖片圖片按兩列組織簡單、未加樣式的布局。記住這種樸素外觀正是 CSS 介入之前 HTML 應有的樣子有了這段標記植物會顯示在屏幕上但還不夠精致——那是下一課 CSS 的任務?，F(xiàn)在你已經有了一個組織得當、遵循無障礙最佳實踐的堅實 HTML 基礎。使用語義化 HTML 提升可訪問性語義化 HTML 意味著根據(jù)元素的意義與用途來選擇元素而不僅僅是外觀。使用語義化標記就是在向瀏覽器、搜索引擎和屏幕閱讀器等輔助技術傳達內容的結構與含義。選標簽的決策流程可以概括為要添加內容先問是什么類型——主標題用h1、副標題用h2/h3、段落用p、列表用ul/ol、導航用nav、文章用article、區(qū)塊用section、只有沒有合適語義標簽時才使用通用容器div。正確的語義標簽會帶來屏幕閱讀器把h1播報為主標題、建立正確的標題層級、提供正確的文本間距、啟用列表導航快捷鍵、標識導航地標、標記獨立內容、歸組相關內容。這種方法讓你的網(wǎng)站對殘障用戶更友好也幫助搜索引擎更好地理解內容。這是現(xiàn)代 Web 開發(fā)的基本原則能為所有人創(chuàng)造更好的體驗。添加語義化頁面標題在body開始標簽之后直接插入一行為溫室頁面加上合適的標題h1My Terrarium/h1為什么語義化標記如此重要幫助屏幕閱讀器在頁面中導航并理解結構改善搜索引擎優(yōu)化SEO——清晰的內容層級提升對視覺障礙或認知差異用戶的可訪問性創(chuàng)造所有設備與平臺上更好的用戶體驗遵循Web 標準與專業(yè)開發(fā)的最佳實踐。語義化 vs. 非語義化選擇對照表用途? 語義化選擇? 非語義化選擇主標題h1Title/h1div classbig-textTitle/div導航navulli/li/ul/navdiv classmenudiv/div/div按鈕buttonClick me/buttonspan onclick...Click me/span文章內容articlep/p/articlediv classcontentdiv/div/div源碼印證完整答案 3-terrarium/solution/index.html 展示了語義化標記的更完整形態(tài)——header包裹h1標題、navulli構建導航菜單、main承載主要內容、section劃分植物選擇區(qū)與溫室區(qū)、footer呈現(xiàn)版權信息。這正是本課所講語義化思想的規(guī)?；瘧靡灿∽C了文檔中語義化選擇的對比表。創(chuàng)建溫室容器現(xiàn)在為溫室本身添加 HTML 結構——那個最終會放入植物的玻璃罐。這一節(jié)演示一個重要概念HTML 提供結構但沒有 CSS 樣式時這些元素還不可見。溫室標記使用描述性的類名這讓下一課的 CSS 樣式既直觀又易于維護。任務添加溫室結構在最后一個/div標簽之前即頁面容器閉合標簽之前插入這段標記div idterrarium div classjar-top/div div classjar-walls div classjar-glossy-long/div div classjar-glossy-short/div /div div classdirt/div div classjar-bottom/div /div這段溫室結構的含義創(chuàng)建主溫室容器使用唯一 ID 供樣式定位為每個視覺組件定義獨立元素罐頂、罐壁、土壤、罐底包含用于玻璃反光效果的嵌套元素glossy 高光元素使用清晰描述用途的類名jar-top、jar-walls、dirt、jar-bottom、jar-glossy-long/short為后續(xù)創(chuàng)建玻璃溫室外觀的 CSS 樣式做好準備。注意到什么了嗎即使添加了這段標記頁面上也看不到任何新東西這完美詮釋了HTML 提供結構CSS 提供外觀。這些div元素真實存在但還沒有任何視覺樣式——那要等下一課源碼印證結構如何被喚醒在 3-terrarium/solution/style.css 中這五個類名被逐一賦予樣式.jar-walls用background: #d1e1df、border-radius: 1rem、opacity: 0.5等屬性構成半透明玻璃罐壁.jar-top與.jar-bottom收攏罐口罐底.dirt用深棕色#3a241d表示土壤.jar-glossy-long與.jar-glossy-short用淺色#ddfbff圓角長條模擬玻璃高光。也就是說本課的結構骨架與類名設計正是下一課樣式實現(xiàn)的接口契約。 教學檢查HTML 結構掌握繼續(xù)之前確保你能? 解釋 HTML 結構與視覺外觀之間的區(qū)別? 識別語義化與非語義化 HTML 元素? 描述正確標記如何惠及可訪問性? 識別完整的文檔樹結構。測試理解嘗試在禁用 JavaScript、移除 CSS 的瀏覽器中打開 HTML 文件。這樣你看到的就是自己創(chuàng)建的純語義化結構實戰(zhàn)挑戰(zhàn)GitHub Copilot Agent 挑戰(zhàn)使用 Agent 模式完成以下挑戰(zhàn)為溫室項目創(chuàng)建一個可追加的植物養(yǎng)護指南Plant Care Guide語義化 HTML 區(qū)塊。要求創(chuàng)建一個語義化 HTML 區(qū)塊包含主標題 Plant Care Guide以及 Watering澆水、Light Requirements光照需求、Soil Care土壤養(yǎng)護三個子區(qū)塊每個子區(qū)塊各含一段養(yǎng)護信息段落。使用section、h2、h3、p等正確的語義化標簽組織內容。探索 HTML 歷史挑戰(zhàn)了解 Web 的演變自 Tim Berners-Lee 于 1990 年在 CERN 發(fā)明首個 Web 瀏覽器以來HTML 經歷了巨大演變。一些老標簽如marquee如今已廢棄因為它們與現(xiàn)代可訪問性標準和響應式設計原則不兼容。動手做這個實驗用marquee標簽臨時包裹h1標題marqueeh1My Terrarium/h1/marquee在瀏覽器中打開頁面觀察滾動效果思考這個標簽為何被廢棄提示從用戶體驗與可訪問性角度移除marquee標簽回到語義化標記。反思問題滾動的標題會如何影響視覺障礙或對動態(tài)效果敏感的用戶哪些現(xiàn)代 CSS 技術能更可訪問地實現(xiàn)類似視覺效果為什么使用當前 Web 標準而非廢棄元素很重要回顧與自學HTML 作為 Web 的地基已超過 30 年從簡單的文檔標記語言演變?yōu)闃嫿ń换玫某墒炱脚_。理解這段演變有助于你欣賞現(xiàn)代 Web 標準并做出更好的開發(fā)決策。推薦學習路徑HTML 歷史與演變研究從 HTML 1.0 到 HTML5 的時間線探索某些標簽為何被廢棄可訪問性、移動友好性、可維護性了解新興的 HTML 特性與提案。深入語義化 HTML研究完整的 HTML5 語義元素清單練習判斷何時使用article、section、aside與main學習用于增強可訪問性的 ARIA 屬性?，F(xiàn)代 Web 開發(fā)理解 HTML 如何與 CSS 和 JavaScript 協(xié)同工作學習 Web 性能與 SEO 最佳實踐。反思問題你發(fā)現(xiàn)了哪些廢棄的 HTML 標簽它們?yōu)楹伪灰瞥磥戆姹菊谔岚改男┬?HTML 特性語義化 HTML 如何同時貢獻于可訪問性與 SEO? 接下來 5 分鐘可以做什么打開 DevToolsF12檢查你最喜歡網(wǎng)站的 HTML 結構用基礎標簽h1、p、img創(chuàng)建簡單 HTML 文件用 W3C HTML 驗證器在線校驗你的 HTML嘗試用!-- 注釋 --在 HTML 中加入注釋。 本節(jié)課可以完成的目標完成課后測驗并回顧語義化 HTML 概念用正確的 HTML 結構構建一個關于你自己的簡單網(wǎng)頁嘗試不同級別的標題與文本格式化標簽添加圖片和鏈接練習多媒體集成研究你還沒試過的 HTML5 特性。 一周 HTML 之旅用語義化標記完成 Terrarium 項目作業(yè)用 ARIA 標簽與角色創(chuàng)建可訪問網(wǎng)頁練習用各種輸入類型創(chuàng)建表單探索 localStorage 或 geolocation 等 HTML5 API研究響應式 HTML 模式與移動優(yōu)先設計按最佳實踐審查其他開發(fā)者的 HTML 代碼。 一個月 Web 基礎構建一個展示你 HTML 能力的作品集網(wǎng)站學習用 Handlebars 等框架做 HTML 模板化通過改進 HTML 文檔為開源社區(qū)做貢獻掌握自定義元素等高級 HTML 概念將 HTML 與 CSS 框架、JavaScript 庫集成指導他人學習 HTML 基礎。學習進度時間線階段時間投入核心內容基礎5 分鐘DOCTYPE 聲明、HTML 根元素、head 與 body 的理解元數(shù)據(jù)10 分鐘字符編碼、viewport 配置、瀏覽器兼容性內容創(chuàng)建15 分鐘正確文件路徑、alt 文本的重要性、自閉合標簽布局組織20 分鐘div 結構、類與 ID 命名、嵌套元素層級語義化掌握30 分鐘標題層級、屏幕閱讀器導航、可訪問性最佳實踐進階概念1 小時現(xiàn)代語義元素、ARIA 屬性、性能考量專業(yè)技能1 周文件結構模式、可維護標記、團隊協(xié)作專家級別1 個月漸進增強、跨瀏覽器兼容、HTML 規(guī)范更新本課工具包總結完成本課后你已擁有文檔結構帶正確 DOCTYPE 的完整 HTML5 基礎語義化標記提升可訪問性與 SEO 的有意義標簽圖片集成正確的文件組織與 alt 文本實踐布局容器策略性使用帶描述性類名的 div可訪問性意識理解屏幕閱讀器導航現(xiàn)代標準當前 HTML5 實踐與廢棄標簽知識項目基礎為 CSS 樣式與 JavaScript 交互打下的堅實基礎。下一步你的 HTML 結構已準備好接受 CSS 美化。你建立的語義化基礎會讓下一課容易得多——可以參考 3-terrarium/2-intro-to-css/README.md 繼續(xù)學習對照 3-terrarium/solution/style.css 查看玻璃罐最終效果隨后在 3-terrarium/3-intro-to-DOM-and-closures/README.md 中你會看到本課預留的plant1plant14ID 如何被 3-terrarium/solution/script.js 中的閉包式拖拽函數(shù)逐一點亮讓植物真正可拖入玻璃罐。課后作業(yè)完成作業(yè) 3-terrarium/1-intro-to-html/assignment.md練習你的 HTML 技能構建一個博客Blog模擬頁。該作業(yè)要求你經歷視覺線框設計 → HTML 元素規(guī)劃 → 語義化實現(xiàn) → 反思四個階段代碼中至少使用 10 種不同的語義化元素如header、nav、main、article、section、aside、footer、time等并附有從 1 到 4 分的詳細評估量表是檢驗本課所學語義化 HTML 的最佳實戰(zhàn)。若想直接看到完整成品可打開 3-terrarium/solution/index.html 并配合 3-terrarium/solution/style.css 與 3-terrarium/solution/script.js 對照閱讀該項目的部署方式Azure Static Web Apps應用根目錄設為/solution記錄在 3-terrarium/README.md?！久赓M下載鏈接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer項目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Web-Dev-For-Beginners Terrarium 項目第 1 課：用 HTML 搭建虛擬植物溫室的結構骨架
Web-Dev-For-Beginners Terrarium 項目第 1 課用 HTML 搭建虛擬植物溫室的結構骨架【免費下載鏈接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer項目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners導讀本文是 Web-Dev-For-Beginners 開源教程中 Terrarium虛擬植物溫室項目的第 1 課核心目標是用純 HTML 為項目搭建完整的文檔結構與布局骨架——從 DOCTYPE 聲明、head元數(shù)據(jù)到雙列植物展示區(qū)與玻璃罐容器結構。讀者完成本課后將擁有一份語義正確、可訪問、可直接進入 CSS 美化階段的基礎頁面并為后續(xù)課程中的拖拽交互DOM 操作預留好全部鉤子元素 ID。本課對應的原始文檔位于 translations/de/3-terrarium/1-intro-to-html/README.md英文原版見 3-terrarium/1-intro-to-html/README.md倉庫內還提供了完整可運行的參考答案3-terrarium/solution讀者可對照學習。HTML 與 Terrarium 項目HTMLHyperText Markup Language是你訪問過的每一個網(wǎng)站的地基?？梢园?HTML 想象成網(wǎng)頁的骨架——它決定內容放在哪里、如何組織、每一部分代表什么。CSS 稍后負責給 HTML 穿衣打扮顏色與布局JavaScript 則賦予它交互性而 HTML 提供了讓這一切成為可能的本質結構。在本課中你將為一個虛擬溫室界面搭建 HTML 結構。這個動手項目讓你在學習基礎 HTML 概念的同時構建出視覺上吸引人的東西學會用語義化元素組織內容、處理圖片、并為交互式 Web 應用打下基礎。課程結束時你會得到一張能按兩列展示 14 張植物圖片的可運行 HTML 頁面隨時可以進入下一課的 CSS 美化階段。一開始它看起來很簡單——這正是 CSS 加入視覺修飾之前 HTML 應該有的樣子。搭建你的項目工作區(qū)在接觸 HTML 代碼之前先為 Terrarium 項目準備一個規(guī)范的目錄結構。從一開始就養(yǎng)成良好文件組織習慣會在整個 Web 開發(fā)旅程中持續(xù)受益。任務創(chuàng)建項目結構創(chuàng)建一個專用的terrarium項目文件夾并加入你的第一個 HTML 文件。以下兩種方式任選其一方式一使用 Visual Studio Code打開 Visual Studio Code點擊文件→打開文件夾或使用快捷鍵CtrlK, CtrlOWindows/Linux/CmdK, CmdOMac新建一個名為terrarium的文件夾并選中它在資源管理器面板中點擊新建文件圖標將文件命名為index.html。方式二使用終端命令mkdir terrarium cd terrarium touch index.html code index.html這些命令各自的作用創(chuàng)建名為terrarium的項目目錄進入terrarium目錄創(chuàng)建空文件index.html用Visual Studio Code 打開該文件進行編輯。專業(yè)提示index.html這個名字在 Web 開發(fā)中有特殊意義。當有人訪問一個網(wǎng)站時瀏覽器會自動尋找index.html作為默認頁面。這意味著形如https://mysite.com/projects/的 URL 會自動顯示projects文件夾中的index.html文件無需在 URL 中顯式寫出文件名。VS Code 技巧在 VS Code 中把鼠標懸停在任意 HTML 標簽上會看到來自 MDN Web Docs 的幫助信息包括用法示例與瀏覽器兼容性說明。理解 HTML 文檔結構每個 HTML 文檔都遵循瀏覽器正確解析與渲染所需的特定結構?？梢园堰@種結構類比為一封正式信件——它按特定順序包含必需元素幫助接收方這里是瀏覽器正確處理內容。文檔的骨架關系如下!DOCTYPE html→html→head內含title、meta charset、meta viewport→body內含h1標題、div容器、img圖片。先來添加每個 HTML 文檔都需要的核心基礎。DOCTYPE 聲明與根元素HTML 文件的前兩行是文檔向瀏覽器的自我介紹!DOCTYPE html html/html這段代碼的作用聲明文檔類型為 HTML5!DOCTYPE html創(chuàng)建根元素html它包裹頁面全部內容確立現(xiàn)代 Web 標準保證瀏覽器正確渲染保證在不同瀏覽器與設備上呈現(xiàn)一致。深入理解DOCTYPE 聲明能防止瀏覽器進入怪異模式quirks mode——該模式原本是為了兼容非常古老的網(wǎng)站?，F(xiàn)代 Web 開發(fā)使用簡潔的!DOCTYPE html聲明來確保標準兼容的渲染standards-compliant rendering。 教學檢查點繼續(xù)之前請確認自己理解? 為什么每個 HTML 文檔都需要 DOCTYPE 聲明?html根元素包含什么? 這種結構如何幫助瀏覽器正確渲染頁面?？焖僮詼y你能用自己的話解釋標準兼容渲染是什么意思嗎添加必需的文檔元數(shù)據(jù)head區(qū)域包含瀏覽器與搜索引擎需要、但訪客在頁面上看不到的關鍵信息?？梢园阉醋髂缓笮畔椭愕木W(wǎng)頁在各種設備與平臺上正常工作。這些元數(shù)據(jù)告訴瀏覽器如何展示頁面、使用什么字符編碼、如何處理不同屏幕尺寸——這些都是打造專業(yè)、可訪問網(wǎng)頁的關鍵。任務添加文檔頭部在html的開始與結束標簽之間插入這段headhead titleWelcome to my Virtual Terrarium/title meta charsetutf-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1 / /head每個元素的作用設置頁面標題顯示在瀏覽器標簽頁與搜索結果中指定UTF-8 字符編碼保證全球范圍內的文字正確顯示確保與現(xiàn)代版本 Internet Explorer 的兼容性配置響應式設計——將視口寬度設置為匹配設備寬度控制初始縮放級別讓內容以自然大小顯示。想一想如果設置這樣的視口 meta 標簽meta nameviewport contentwidth600會發(fā)生什么頁面會被強制固定為 600 像素寬從而破壞響應式設計請務必使用widthdevice-width, initial-scale1的標準配置。源碼印證倉庫中的完整參考答案 3-terrarium/solution/index.html 使用了完全相同的四行head元數(shù)據(jù)并在此基礎上增加了樣式表與腳本的引入方式link relstylesheet與script defer說明這是項目認可的規(guī)范寫法。構建文檔主體body元素包含網(wǎng)頁的全部可見內容——用戶看到并與之交互的一切。head區(qū)域給瀏覽器下指令body區(qū)域則承載真實內容文字、圖片、按鈕等構成用戶界面的元素。理解 HTML 標簽結構HTML 使用成對標簽定義元素。多數(shù)標簽有開始標簽如p和結束標簽如/p中間是內容pHallo Welt!/p就創(chuàng)建了一個包含Hello, world!文字的段落元素。任務添加 body 元素更新 HTML 文件使其包含body!DOCTYPE html html head titleWelcome to my Virtual Terrarium/title meta charsetutf-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1 / /head body/body /html這組完整結構提供的能力建立基本 HTML5 文檔框架包含瀏覽器正確渲染所需的關鍵元數(shù)據(jù)創(chuàng)建一個空的 body為可見內容做好準備遵循現(xiàn)代 Web 開發(fā)最佳實踐?，F(xiàn)在可以添加溫室的可見元素了。我們將使用div元素作為容器來組織不同內容區(qū)塊并用img元素展示植物圖片。使用圖片與布局容器圖片在 HTML 中很特殊因為它們使用自閉合標簽。與p/p這類包裹內容的元素不同img標簽通過src圖片文件路徑和alt無障礙文本等屬性把所需信息全部放在標簽自身內部。在向 HTML 添加圖片之前需要先組織好項目文件創(chuàng)建images文件夾并放入植物素材。首先準備好圖片在terrarium項目文件夾內創(chuàng)建images文件夾從倉庫的解決方案圖片目錄獲取 14 張植物圖片plant1.pngplant14.png均為 400×400 像素將所有植物圖片復制進你的images文件夾。任務創(chuàng)建植物展示布局現(xiàn)在把按兩列組織的植物圖片插入body/body標簽之間div idpage div idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div div classplant-holder img classplant altplant idplant2 src./images/plant2.png / /div div classplant-holder img classplant altplant idplant3 src./images/plant3.png / /div div classplant-holder img classplant altplant idplant4 src./images/plant4.png / /div div classplant-holder img classplant altplant idplant5 src./images/plant5.png / /div div classplant-holder img classplant altplant idplant6 src./images/plant6.png / /div div classplant-holder img classplant altplant idplant7 src./images/plant7.png / /div /div div idright-container classcontainer div classplant-holder img classplant altplant idplant8 src./images/plant8.png / /div div classplant-holder img classplant altplant idplant9 src./images/plant9.png / /div div classplant-holder img classplant altplant idplant10 src./images/plant10.png / /div div classplant-holder img classplant altplant idplant11 src./images/plant11.png / /div div classplant-holder img classplant altplant idplant12 src./images/plant12.png / /div div classplant-holder img classplant altplant idplant13 src./images/plant13.png / /div div classplant-holder img classplant altplant idplant14 src./images/plant14.png / /div /div /div這段代碼逐步做了什么創(chuàng)建主頁面容器idpage承載所有內容建立兩個列容器left-container與right-container組織左列 7 株植物、右列 7 株植物將每張植物圖片包裹進plant-holderdiv便于單獨定位應用一致的類名供下一課 CSS 樣式使用為每張植物圖片分配唯一 ID供后續(xù) JavaScript 交互使用正確引用images文件夾中的文件路徑。源碼印證ID 即交互鉤子這些idplant1idplant14并非隨意命名。查看 3-terrarium/solution/script.js可以發(fā)現(xiàn)后續(xù)課程中的拖拽邏輯正是通過document.getElementById(plant1)等調用逐個獲取這 14 個元素并綁定dragElement的。也就是說本課為每張圖片分配唯一 ID是第 3 課 DOM 與閉包交互的提前鋪墊。思考一下目前所有圖片的 alt 文本都是相同的 plant。這對無障礙并不理想——屏幕閱讀器用戶會聽到 14 遍 plant卻不知道每張圖片是哪株植物。你能為每張圖片想出更好的、更具描述性的 alt 文本嗎HTML 元素類型div是塊級元素占據(jù)整行寬度span是行內元素只占所需寬度。想想看如果把這些div全部換成span布局會發(fā)生什么變化 教學檢查點結構理解花一點時間回顧你的 HTML 結構? 你能說出布局結構中的主要容器嗎? 你理解為什么每張圖片需要唯一 ID 嗎? 你會如何描述plant-holderdiv 的作用視覺檢查在瀏覽器中打開 HTML 文件你應該看到一列基本的植物圖片圖片按兩列組織簡單、未加樣式的布局。記住這種樸素外觀正是 CSS 介入之前 HTML 應有的樣子有了這段標記植物會顯示在屏幕上但還不夠精致——那是下一課 CSS 的任務?，F(xiàn)在你已經有了一個組織得當、遵循無障礙最佳實踐的堅實 HTML 基礎。使用語義化 HTML 提升可訪問性語義化 HTML 意味著根據(jù)元素的意義與用途來選擇元素而不僅僅是外觀。使用語義化標記就是在向瀏覽器、搜索引擎和屏幕閱讀器等輔助技術傳達內容的結構與含義。選標簽的決策流程可以概括為要添加內容先問是什么類型——主標題用h1、副標題用h2/h3、段落用p、列表用ul/ol、導航用nav、文章用article、區(qū)塊用section、只有沒有合適語義標簽時才使用通用容器div。正確的語義標簽會帶來屏幕閱讀器把h1播報為主標題、建立正確的標題層級、提供正確的文本間距、啟用列表導航快捷鍵、標識導航地標、標記獨立內容、歸組相關內容。這種方法讓你的網(wǎng)站對殘障用戶更友好也幫助搜索引擎更好地理解內容。這是現(xiàn)代 Web 開發(fā)的基本原則能為所有人創(chuàng)造更好的體驗。添加語義化頁面標題在body開始標簽之后直接插入一行為溫室頁面加上合適的標題h1My Terrarium/h1為什么語義化標記如此重要幫助屏幕閱讀器在頁面中導航并理解結構改善搜索引擎優(yōu)化SEO——清晰的內容層級提升對視覺障礙或認知差異用戶的可訪問性創(chuàng)造所有設備與平臺上更好的用戶體驗遵循Web 標準與專業(yè)開發(fā)的最佳實踐。語義化 vs. 非語義化選擇對照表用途? 語義化選擇? 非語義化選擇主標題h1Title/h1div classbig-textTitle/div導航navulli/li/ul/navdiv classmenudiv/div/div按鈕buttonClick me/buttonspan onclick...Click me/span文章內容articlep/p/articlediv classcontentdiv/div/div源碼印證完整答案 3-terrarium/solution/index.html 展示了語義化標記的更完整形態(tài)——header包裹h1標題、navulli構建導航菜單、main承載主要內容、section劃分植物選擇區(qū)與溫室區(qū)、footer呈現(xiàn)版權信息。這正是本課所講語義化思想的規(guī)?；瘧靡灿∽C了文檔中語義化選擇的對比表。創(chuàng)建溫室容器現(xiàn)在為溫室本身添加 HTML 結構——那個最終會放入植物的玻璃罐。這一節(jié)演示一個重要概念HTML 提供結構但沒有 CSS 樣式時這些元素還不可見。溫室標記使用描述性的類名這讓下一課的 CSS 樣式既直觀又易于維護。任務添加溫室結構在最后一個/div標簽之前即頁面容器閉合標簽之前插入這段標記div idterrarium div classjar-top/div div classjar-walls div classjar-glossy-long/div div classjar-glossy-short/div /div div classdirt/div div classjar-bottom/div /div這段溫室結構的含義創(chuàng)建主溫室容器使用唯一 ID 供樣式定位為每個視覺組件定義獨立元素罐頂、罐壁、土壤、罐底包含用于玻璃反光效果的嵌套元素glossy 高光元素使用清晰描述用途的類名jar-top、jar-walls、dirt、jar-bottom、jar-glossy-long/short為后續(xù)創(chuàng)建玻璃溫室外觀的 CSS 樣式做好準備。注意到什么了嗎即使添加了這段標記頁面上也看不到任何新東西這完美詮釋了HTML 提供結構CSS 提供外觀。這些div元素真實存在但還沒有任何視覺樣式——那要等下一課源碼印證結構如何被喚醒在 3-terrarium/solution/style.css 中這五個類名被逐一賦予樣式.jar-walls用background: #d1e1df、border-radius: 1rem、opacity: 0.5等屬性構成半透明玻璃罐壁.jar-top與.jar-bottom收攏罐口罐底.dirt用深棕色#3a241d表示土壤.jar-glossy-long與.jar-glossy-short用淺色#ddfbff圓角長條模擬玻璃高光。也就是說本課的結構骨架與類名設計正是下一課樣式實現(xiàn)的接口契約。 教學檢查HTML 結構掌握繼續(xù)之前確保你能? 解釋 HTML 結構與視覺外觀之間的區(qū)別? 識別語義化與非語義化 HTML 元素? 描述正確標記如何惠及可訪問性? 識別完整的文檔樹結構。測試理解嘗試在禁用 JavaScript、移除 CSS 的瀏覽器中打開 HTML 文件。這樣你看到的就是自己創(chuàng)建的純語義化結構實戰(zhàn)挑戰(zhàn)GitHub Copilot Agent 挑戰(zhàn)使用 Agent 模式完成以下挑戰(zhàn)為溫室項目創(chuàng)建一個可追加的植物養(yǎng)護指南Plant Care Guide語義化 HTML 區(qū)塊。要求創(chuàng)建一個語義化 HTML 區(qū)塊包含主標題 Plant Care Guide以及 Watering澆水、Light Requirements光照需求、Soil Care土壤養(yǎng)護三個子區(qū)塊每個子區(qū)塊各含一段養(yǎng)護信息段落。使用section、h2、h3、p等正確的語義化標簽組織內容。探索 HTML 歷史挑戰(zhàn)了解 Web 的演變自 Tim Berners-Lee 于 1990 年在 CERN 發(fā)明首個 Web 瀏覽器以來HTML 經歷了巨大演變。一些老標簽如marquee如今已廢棄因為它們與現(xiàn)代可訪問性標準和響應式設計原則不兼容。動手做這個實驗用marquee標簽臨時包裹h1標題marqueeh1My Terrarium/h1/marquee在瀏覽器中打開頁面觀察滾動效果思考這個標簽為何被廢棄提示從用戶體驗與可訪問性角度移除marquee標簽回到語義化標記。反思問題滾動的標題會如何影響視覺障礙或對動態(tài)效果敏感的用戶哪些現(xiàn)代 CSS 技術能更可訪問地實現(xiàn)類似視覺效果為什么使用當前 Web 標準而非廢棄元素很重要回顧與自學HTML 作為 Web 的地基已超過 30 年從簡單的文檔標記語言演變?yōu)闃嫿ń换玫某墒炱脚_。理解這段演變有助于你欣賞現(xiàn)代 Web 標準并做出更好的開發(fā)決策。推薦學習路徑HTML 歷史與演變研究從 HTML 1.0 到 HTML5 的時間線探索某些標簽為何被廢棄可訪問性、移動友好性、可維護性了解新興的 HTML 特性與提案。深入語義化 HTML研究完整的 HTML5 語義元素清單練習判斷何時使用article、section、aside與main學習用于增強可訪問性的 ARIA 屬性?，F(xiàn)代 Web 開發(fā)理解 HTML 如何與 CSS 和 JavaScript 協(xié)同工作學習 Web 性能與 SEO 最佳實踐。反思問題你發(fā)現(xiàn)了哪些廢棄的 HTML 標簽它們?yōu)楹伪灰瞥磥戆姹菊谔岚改男┬?HTML 特性語義化 HTML 如何同時貢獻于可訪問性與 SEO? 接下來 5 分鐘可以做什么打開 DevToolsF12檢查你最喜歡網(wǎng)站的 HTML 結構用基礎標簽h1、p、img創(chuàng)建簡單 HTML 文件用 W3C HTML 驗證器在線校驗你的 HTML嘗試用!-- 注釋 --在 HTML 中加入注釋。 本節(jié)課可以完成的目標完成課后測驗并回顧語義化 HTML 概念用正確的 HTML 結構構建一個關于你自己的簡單網(wǎng)頁嘗試不同級別的標題與文本格式化標簽添加圖片和鏈接練習多媒體集成研究你還沒試過的 HTML5 特性。 一周 HTML 之旅用語義化標記完成 Terrarium 項目作業(yè)用 ARIA 標簽與角色創(chuàng)建可訪問網(wǎng)頁練習用各種輸入類型創(chuàng)建表單探索 localStorage 或 geolocation 等 HTML5 API研究響應式 HTML 模式與移動優(yōu)先設計按最佳實踐審查其他開發(fā)者的 HTML 代碼。 一個月 Web 基礎構建一個展示你 HTML 能力的作品集網(wǎng)站學習用 Handlebars 等框架做 HTML 模板化通過改進 HTML 文檔為開源社區(qū)做貢獻掌握自定義元素等高級 HTML 概念將 HTML 與 CSS 框架、JavaScript 庫集成指導他人學習 HTML 基礎。學習進度時間線階段時間投入核心內容基礎5 分鐘DOCTYPE 聲明、HTML 根元素、head 與 body 的理解元數(shù)據(jù)10 分鐘字符編碼、viewport 配置、瀏覽器兼容性內容創(chuàng)建15 分鐘正確文件路徑、alt 文本的重要性、自閉合標簽布局組織20 分鐘div 結構、類與 ID 命名、嵌套元素層級語義化掌握30 分鐘標題層級、屏幕閱讀器導航、可訪問性最佳實踐進階概念1 小時現(xiàn)代語義元素、ARIA 屬性、性能考量專業(yè)技能1 周文件結構模式、可維護標記、團隊協(xié)作專家級別1 個月漸進增強、跨瀏覽器兼容、HTML 規(guī)范更新本課工具包總結完成本課后你已擁有文檔結構帶正確 DOCTYPE 的完整 HTML5 基礎語義化標記提升可訪問性與 SEO 的有意義標簽圖片集成正確的文件組織與 alt 文本實踐布局容器策略性使用帶描述性類名的 div可訪問性意識理解屏幕閱讀器導航現(xiàn)代標準當前 HTML5 實踐與廢棄標簽知識項目基礎為 CSS 樣式與 JavaScript 交互打下的堅實基礎。下一步你的 HTML 結構已準備好接受 CSS 美化。你建立的語義化基礎會讓下一課容易得多——可以參考 3-terrarium/2-intro-to-css/README.md 繼續(xù)學習對照 3-terrarium/solution/style.css 查看玻璃罐最終效果隨后在 3-terrarium/3-intro-to-DOM-and-closures/README.md 中你會看到本課預留的plant1plant14ID 如何被 3-terrarium/solution/script.js 中的閉包式拖拽函數(shù)逐一點亮讓植物真正可拖入玻璃罐。課后作業(yè)完成作業(yè) 3-terrarium/1-intro-to-html/assignment.md練習你的 HTML 技能構建一個博客Blog模擬頁。該作業(yè)要求你經歷視覺線框設計 → HTML 元素規(guī)劃 → 語義化實現(xiàn) → 反思四個階段代碼中至少使用 10 種不同的語義化元素如header、nav、main、article、section、aside、footer、time等并附有從 1 到 4 分的詳細評估量表是檢驗本課所學語義化 HTML 的最佳實戰(zhàn)。若想直接看到完整成品可打開 3-terrarium/solution/index.html 并配合 3-terrarium/solution/style.css 與 3-terrarium/solution/script.js 對照閱讀該項目的部署方式Azure Static Web Apps應用根目錄設為/solution記錄在 3-terrarium/README.md?！久赓M下載鏈接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer項目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考