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