第3單元第12課萬維網(wǎng)服務(wù)大揭秘（教學(xué)設(shè)計）人教版（2024）初中信息科技七年級全一冊

第3單元便捷的互聯(lián)網(wǎng)服務(wù)——第12課萬維網(wǎng)服務(wù)大揭秘（教學(xué)設(shè)計）—20242025學(xué)年人教版2024信息科技七年級全一冊一、教學(xué)目標(biāo)（一）知識與技能目標(biāo)學(xué)生能夠清晰闡述萬維網(wǎng)（）的基本概念，準(zhǔn)確說明其在互聯(lián)網(wǎng)體系中的地位和作用，理解萬維網(wǎng)是互聯(lián)網(wǎng)提供的一種核心服務(wù)，通過超文本鏈接將全球范圍內(nèi)的信息資源整合在一起，方便用戶瀏覽和獲取。熟練掌握萬維網(wǎng)的工作原理，包括URL（統(tǒng)一資源定位符）的結(jié)構(gòu)與作用、（超文本傳輸協(xié)議）的基本流程、網(wǎng)頁的構(gòu)成（HTML、CSS、JavaScript等）以及瀏覽器與服務(wù)器之間的交互過程，能夠描述用戶在瀏覽器中輸入網(wǎng)址后，數(shù)據(jù)如何在網(wǎng)絡(luò)中傳輸，最終呈現(xiàn)出網(wǎng)頁內(nèi)容。學(xué)會通過分析網(wǎng)頁源代碼、使用網(wǎng)絡(luò)抓包工具等方式，深入理解萬維網(wǎng)服務(wù)的技術(shù)細(xì)節(jié)，能夠識別網(wǎng)頁中的不同元素（文本、圖像、鏈接等）對應(yīng)的代碼，了解請求和響應(yīng)的基本格式，提升對萬維網(wǎng)技術(shù)的實踐分析能力。（二）過程與方法目標(biāo)通過創(chuàng)設(shè)真實的網(wǎng)頁瀏覽情境，引導(dǎo)學(xué)生觀察、思考和實踐，培養(yǎng)學(xué)生從日常網(wǎng)絡(luò)行為中挖掘萬維網(wǎng)技術(shù)原理的能力。組織小組合作探究活動，讓學(xué)生在交流與協(xié)作中深入探討萬維網(wǎng)服務(wù)的優(yōu)勢、面臨的挑戰(zhàn)及應(yīng)對策略，提升團(tuán)隊協(xié)作和批判性思維能力。鼓勵學(xué)生自主探索萬維網(wǎng)相關(guān)技術(shù)的發(fā)展趨勢，如HTML5的新特性、/3的改進(jìn)等，鍛煉學(xué)生自主學(xué)習(xí)和信息收集整理能力。（三）情感態(tài)度與價值觀目標(biāo)激發(fā)學(xué)生對互聯(lián)網(wǎng)底層技術(shù)的探索興趣，培養(yǎng)學(xué)生勇于探索、敢于質(zhì)疑的科學(xué)精神，提升學(xué)生在信息時代的技術(shù)素養(yǎng)。引導(dǎo)學(xué)生認(rèn)識到萬維網(wǎng)服務(wù)對推動信息傳播、促進(jìn)文化交流、改變生活方式的重要意義，增強(qiáng)學(xué)生合理利用萬維網(wǎng)資源、遵守網(wǎng)絡(luò)規(guī)則的責(zé)任感。二、教學(xué)重難點（一）教學(xué)重點萬維網(wǎng)概念與地位：通過展示互聯(lián)網(wǎng)服務(wù)架構(gòu)圖，突出萬維網(wǎng)在眾多互聯(lián)網(wǎng)服務(wù)中的核心位置，講解萬維網(wǎng)是基于超文本技術(shù)，將分布在全球各地服務(wù)器上的文本、圖像、音頻、視頻等信息資源，以網(wǎng)頁形式呈現(xiàn)給用戶的服務(wù)體系。以日常生活中瀏覽新聞網(wǎng)站、購物網(wǎng)站、學(xué)習(xí)平臺等為例，說明萬維網(wǎng)如何讓用戶便捷獲取各類信息，強(qiáng)調(diào)其在信息傳播和資源共享方面的重要作用。組織學(xué)生討論在日常網(wǎng)絡(luò)活動中，哪些場景離不開萬維網(wǎng)服務(wù)，加深對概念和地位的理解。萬維網(wǎng)工作原理：詳細(xì)講解URL結(jié)構(gòu)，以“\t"s://doubao/chat/_blank"s://example/index.html?param1=value1”為例，說明協(xié)議（s）、域名（\t"s://doubao/chat/_blank"example）、路徑（/index.html）、參數(shù)（param1=value1）各部分含義及作用，讓學(xué)生明白URL如何唯一標(biāo)識網(wǎng)絡(luò)資源。借助網(wǎng)絡(luò)請求流程示意圖，介紹基本流程，當(dāng)用戶在瀏覽器輸入URL后，瀏覽器向服務(wù)器發(fā)送請求，服務(wù)器接收請求后處理并返回響應(yīng)，響應(yīng)中包含網(wǎng)頁內(nèi)容。以常見網(wǎng)頁為例，分析網(wǎng)頁由HTML構(gòu)建結(jié)構(gòu)、CSS設(shè)置樣式、JavaScript實現(xiàn)交互功能，講解HTML標(biāo)簽（如<h1>

<h6>設(shè)置標(biāo)題、<p>定義段落、<img>插入圖像）、CSS屬性（如color設(shè)置文本顏色、width設(shè)置元素寬度）、JavaScript基本語法（如變量定義、函數(shù)調(diào)用）在網(wǎng)頁中的應(yīng)用。通過動畫演示瀏覽器與服務(wù)器之間的交互過程，從請求發(fā)送、網(wǎng)絡(luò)傳輸?shù)巾憫?yīng)接收、網(wǎng)頁渲染，讓學(xué)生直觀理解萬維網(wǎng)工作原理。網(wǎng)頁分析與技術(shù)實踐：在瀏覽器中打開一個簡單網(wǎng)頁，通過“查看網(wǎng)頁源代碼”功能，展示HTML代碼，引導(dǎo)學(xué)生識別網(wǎng)頁中的文本、圖像、鏈接等元素對應(yīng)的代碼部分，如<p>這是一段文本</p>對應(yīng)網(wǎng)頁中的文本段落，<imgsrc="image.jpg"alt="圖片">對應(yīng)插入的圖像。介紹網(wǎng)絡(luò)抓包工具（如Wireshark）的基本使用方法，在學(xué)生電腦上安裝并打開該工具，設(shè)置捕獲過濾器，讓學(xué)生在瀏覽器中訪問網(wǎng)頁，捕獲請求和響應(yīng)數(shù)據(jù)包。分析捕獲的數(shù)據(jù)包，講解請求頭（如GET請求方法、UserAgent標(biāo)識瀏覽器類型）、響應(yīng)頭（如ContentType指定響應(yīng)內(nèi)容類型）、響應(yīng)體（網(wǎng)頁的HTML代碼）等部分，讓學(xué)生深入了解瀏覽器與服務(wù)器之間的數(shù)據(jù)傳輸細(xì)節(jié)。組織學(xué)生進(jìn)行網(wǎng)頁分析和抓包實踐，提升學(xué)生對萬維網(wǎng)技術(shù)的實踐操作能力。（二）教學(xué)難點理解協(xié)議的復(fù)雜機(jī)制與狀態(tài)碼：協(xié)議有多種請求方法（GET、POST、PUT、DELETE等），不同方法適用于不同場景，如GET常用于獲取資源，POST常用于提交數(shù)據(jù)。同時，狀態(tài)碼（如200表示成功、404表示未找到資源、500表示服務(wù)器內(nèi)部錯誤）用于反饋請求處理結(jié)果，理解這些復(fù)雜機(jī)制和狀態(tài)碼含義對學(xué)生有一定難度。通過實際案例分析，如在電商平臺下單時，瀏覽器向服務(wù)器發(fā)送POST請求提交訂單信息，服務(wù)器返回不同狀態(tài)碼表示訂單處理情況。組織學(xué)生分組討論不同請求方法和狀態(tài)碼在常見網(wǎng)絡(luò)應(yīng)用中的使用場景和意義，通過模擬請求和分析狀態(tài)碼反饋，幫助學(xué)生理解協(xié)議的復(fù)雜機(jī)制。掌握網(wǎng)頁設(shè)計中HTML、CSS、JavaScript的協(xié)同工作：在網(wǎng)頁設(shè)計中，HTML、CSS、JavaScript需要協(xié)同工作才能實現(xiàn)豐富的網(wǎng)頁功能和良好的用戶體驗。例如，HTML構(gòu)建網(wǎng)頁基本結(jié)構(gòu)，CSS負(fù)責(zé)美化頁面樣式，JavaScript實現(xiàn)交互效果（如點擊按鈕觸發(fā)事件、動態(tài)更新頁面內(nèi)容）。但對于初學(xué)者，理解三者如何相互配合，以及在不同場景下如何合理運用是難點。通過實際網(wǎng)頁項目演示，從創(chuàng)建簡單HTML頁面開始，逐步添加CSS樣式和JavaScript腳本，展示三者協(xié)同工作過程。如創(chuàng)建一個包含圖片展示和點擊放大功能的網(wǎng)頁，用HTML搭建圖片展示結(jié)構(gòu)，CSS設(shè)置圖片樣式，JavaScript編寫點擊放大的交互邏輯。組織學(xué)生進(jìn)行簡單網(wǎng)頁項目實踐，在實踐中體會三者協(xié)同工作的要點，提升學(xué)生網(wǎng)頁設(shè)計和開發(fā)的綜合能力。三、教學(xué)方法情境教學(xué)法：運用圖片、視頻、模擬網(wǎng)頁瀏覽場景等創(chuàng)設(shè)多樣化教學(xué)情境。如播放人們在不同場景下使用萬維網(wǎng)服務(wù)的視頻，展示在圖書館通過網(wǎng)頁查閱學(xué)術(shù)資料、在旅游途中用瀏覽景點介紹網(wǎng)頁等畫面，讓學(xué)生在情境中感受萬維網(wǎng)服務(wù)的廣泛應(yīng)用，激發(fā)學(xué)生學(xué)習(xí)興趣和探究欲望。小組合作法：組織學(xué)生分組討論萬維網(wǎng)服務(wù)在特定領(lǐng)域（如教育、醫(yī)療、金融）的應(yīng)用及面臨挑戰(zhàn)。小組成員分工協(xié)作，收集資料、分析問題、提出觀點，共同完成討論報告或展示作品，培養(yǎng)團(tuán)隊協(xié)作和溝通能力。實踐操作法：安排實踐操作任務(wù)，讓學(xué)生在瀏覽器中分析網(wǎng)頁源代碼、使用網(wǎng)絡(luò)抓包工具捕獲數(shù)據(jù)包、進(jìn)行簡單網(wǎng)頁設(shè)計等。通過實踐操作，加深學(xué)生對萬維網(wǎng)技術(shù)原理和應(yīng)用的理解，提升學(xué)生實踐操作和問題解決能力。案例分析法：選取大量典型的萬維網(wǎng)應(yīng)用案例，從成功案例展示萬維網(wǎng)服務(wù)如何滿足用戶需求、推動行業(yè)發(fā)展，如淘寶電商平臺通過萬維網(wǎng)實現(xiàn)全球商品交易；到問題案例揭示萬維網(wǎng)服務(wù)存在的問題和應(yīng)對策略，如某網(wǎng)站因協(xié)議漏洞導(dǎo)致用戶信息泄露。引導(dǎo)學(xué)生從案例中總結(jié)經(jīng)驗教訓(xùn)，加深對萬維網(wǎng)服務(wù)的理解，提高學(xué)生運用知識解決實際問題的能力。四、教學(xué)過程（一）課程導(dǎo)入情境創(chuàng)設(shè)：播放一段反映現(xiàn)代生活的視頻，視頻中人們通過瀏覽器瀏覽新聞網(wǎng)站了解時事、在購物網(wǎng)站挑選商品、在在線學(xué)習(xí)平臺觀看課程。視頻結(jié)束后，展示一些不同類型網(wǎng)頁的截圖，如政府官網(wǎng)、社交平臺首頁、科技資訊網(wǎng)頁等。提問引導(dǎo)：“同學(xué)們，在剛剛的視頻和圖片中，我們看到萬維網(wǎng)服務(wù)已經(jīng)滲透到生活的方方面面。從獲取信息到娛樂休閑，從學(xué)習(xí)知識到購物消費，萬維網(wǎng)讓我們與世界緊密相連。那萬維網(wǎng)究竟是什么？它是如何工作的？今天，就讓我們一起揭開萬維網(wǎng)服務(wù)的神秘面紗?！保ǘ┤f維網(wǎng)概念與地位講解概念講解：通過PPT展示互聯(lián)網(wǎng)發(fā)展歷程中的關(guān)鍵節(jié)點，引出萬維網(wǎng)的誕生背景，講解萬維網(wǎng)由蒂姆?伯納斯李發(fā)明，是一種基于超文本和協(xié)議的分布式信息系統(tǒng)。以日常生活中瀏覽網(wǎng)頁的經(jīng)歷為例，說明用戶在瀏覽器中輸入網(wǎng)址，就能訪問到存儲在世界各地服務(wù)器上的網(wǎng)頁內(nèi)容，這些網(wǎng)頁通過超文本鏈接相互關(guān)聯(lián)，形成一個龐大的信息網(wǎng)絡(luò)。展示萬維網(wǎng)信息資源分布和鏈接關(guān)系示意圖，讓學(xué)生直觀理解萬維網(wǎng)的結(jié)構(gòu)。地位分析：組織學(xué)生分組討論萬維網(wǎng)在互聯(lián)網(wǎng)服務(wù)體系中的地位，思考在互聯(lián)網(wǎng)提供的眾多服務(wù)（如電子郵件、文件傳輸、遠(yuǎn)程登錄等）中，萬維網(wǎng)為何如此重要。各小組討論后，選派代表發(fā)言，分享小組觀點，如萬維網(wǎng)以直觀、易用的網(wǎng)頁形式呈現(xiàn)信息，降低了用戶獲取信息的門檻；它整合了多種類型的信息資源，滿足用戶多樣化需求。教師總結(jié)點評，強(qiáng)調(diào)萬維網(wǎng)作為互聯(lián)網(wǎng)核心服務(wù)，極大地推動了信息傳播和互聯(lián)網(wǎng)普及，改變了人們的生活和工作方式。（三）萬維網(wǎng)工作原理講解URL講解：在瀏覽器地址欄輸入一個完整的URL，如“\t"s://doubao/chat/_blank"s://baidu/s?wd=萬維網(wǎng)”，詳細(xì)講解URL各部分含義。協(xié)議部分“s”表示采用安全的超文本傳輸協(xié)議，保障數(shù)據(jù)傳輸安全；域名“\t"s://doubao/chat/_blank"baidu”是百度服務(wù)器的域名，用于在網(wǎng)絡(luò)中定位服務(wù)器；路徑“/s”表示訪問百度的搜索頁面；參數(shù)“wd=萬維網(wǎng)”表示搜索關(guān)鍵詞為“萬維網(wǎng)”。通過多個不同類型URL示例，如“\t"s://doubao/chat/_blank"://example/article/123.html”“\t"s://doubao/chat/_blank"ftp://ftp.example/file.zip”，讓學(xué)生理解URL如何唯一標(biāo)識網(wǎng)絡(luò)資源，以及不同協(xié)議和路徑的作用。流程講解：借助PPT展示請求響應(yīng)流程示意圖，從用戶在瀏覽器輸入URL并回車開始，講解瀏覽器首先根據(jù)URL解析出服務(wù)器域名，通過DNS（域名系統(tǒng)）查詢獲取服務(wù)器IP地址。然后，瀏覽器與服務(wù)器建立TCP連接（以協(xié)議基于TCP傳輸為例），向服務(wù)器發(fā)送請求，請求中包含請求方法（如GET）、請求頭（如UserAgent、Accept等）、請求路徑等信息。服務(wù)器接收請求后，根據(jù)請求內(nèi)容查找對應(yīng)的資源，如網(wǎng)頁文件，對資源進(jìn)行處理（如動態(tài)網(wǎng)頁可能需要執(zhí)行服務(wù)器端腳本），然后將處理結(jié)果封裝成響應(yīng)返回給瀏覽器。響應(yīng)包含狀態(tài)碼（如200表示成功）、響應(yīng)頭（如ContentType、ContentLength等）、響應(yīng)體（網(wǎng)頁內(nèi)容）。通過動畫演示整個過程，讓學(xué)生清晰了解基本工作流程。網(wǎng)頁構(gòu)成講解：在瀏覽器中打開一個簡單網(wǎng)頁，通過“查看網(wǎng)頁源代碼”功能，展示HTML代碼。講解HTML是構(gòu)建網(wǎng)頁結(jié)構(gòu)的基礎(chǔ)語言，如<html>標(biāo)簽定義網(wǎng)頁文檔，<head>標(biāo)簽包含網(wǎng)頁元信息（如<title>設(shè)置網(wǎng)頁標(biāo)題），<body>標(biāo)簽存放網(wǎng)頁可見內(nèi)容。以<h1>這是一個標(biāo)題</h1>為例，說明<h1>標(biāo)簽用于設(shè)置一級標(biāo)題；<p>這是一段正文內(nèi)容</p>中<p>標(biāo)簽定義段落。接著，介紹CSS用于美化網(wǎng)頁樣式，通過<style>標(biāo)簽或外部CSS文件定義樣式規(guī)則，如p{color:blue;fontsize:16px;}表示將所有段落文本顏色設(shè)為藍(lán)色，字體大小設(shè)為16像素。最后，講解JavaScript為網(wǎng)頁添加交互功能，如<script>functionshowMessage(){alert('Hello,World!');}</script>定義一個函數(shù)，當(dāng)觸發(fā)相關(guān)事件（如按鈕點擊）時，彈出提示框。通過實際網(wǎng)頁代碼分析，讓學(xué)生了解HTML、CSS、JavaScript在網(wǎng)頁中的作用和相互關(guān)系。（四）網(wǎng)頁分析與技術(shù)實踐操作網(wǎng)頁源代碼分析實踐：讓學(xué)生在瀏覽器中打開自己感興趣的網(wǎng)頁，通過“查看網(wǎng)頁源代碼”功能，分析網(wǎng)頁結(jié)構(gòu)。教師引導(dǎo)學(xué)生識別網(wǎng)頁中的標(biāo)題、段落、圖片、鏈接等元素對應(yīng)的HTML代碼部分，如找到<img>標(biāo)簽查看圖片路徑和屬性，通過<a>標(biāo)簽分析鏈接目標(biāo)。組織學(xué)生分組交流，分享自己分析的網(wǎng)頁中有趣的代碼結(jié)構(gòu)和發(fā)現(xiàn)，教師在教室里巡回指導(dǎo)，解答學(xué)生在分析過程中遇到的問題，如代碼語法理解困難、元素定位不準(zhǔn)確等。網(wǎng)絡(luò)抓包實踐：在學(xué)生電腦上安裝網(wǎng)絡(luò)抓包工具Wireshark，打開軟件后，設(shè)置捕獲過濾器為“”，只捕獲相關(guān)數(shù)據(jù)包。讓學(xué)生在瀏覽器中訪問網(wǎng)頁，Wireshark開始捕獲數(shù)據(jù)包。捕獲完成后，教師講解如何在Wireshark界面中分析數(shù)據(jù)包，如查看請求包中的請求方法、請求頭信息，響應(yīng)包中的狀態(tài)碼、響應(yīng)頭和響應(yīng)體內(nèi)容。以一個請求和響應(yīng)數(shù)據(jù)包為例，詳細(xì)解讀每個字段含義，如GET請求方法表示獲取資源，ContentType:text/html表示響應(yīng)內(nèi)容為HTML格式。組織學(xué)生自己分析捕獲的數(shù)據(jù)包，嘗試?yán)斫鉃g覽器與服務(wù)器之間的數(shù)據(jù)交互細(xì)節(jié)，提升學(xué)生對協(xié)議的實踐認(rèn)知。簡單網(wǎng)頁設(shè)計實踐（可選）：如果課堂時間充裕，安排學(xué)生進(jìn)行簡單網(wǎng)頁設(shè)計實踐。使用文本編輯器（如Notepad++），讓學(xué)生創(chuàng)建一個HTML文件，編寫基本的網(wǎng)頁結(jié)構(gòu)代碼，如添加標(biāo)題、段落、圖片等元素。然后，嘗試使用CSS為網(wǎng)頁添加簡單樣式，如設(shè)置文本顏色、背景顏色、元素布局。最后，鼓勵學(xué)生添加一些簡單的JavaScript交互功能，如點擊按鈕切換圖片。教師在學(xué)生實踐過程中提供指導(dǎo)，幫助學(xué)生解決代碼編寫錯誤、樣式顯示異常等問題，通過實踐操作加深學(xué)生對網(wǎng)頁構(gòu)成技術(shù)的掌握。（五）協(xié)議與網(wǎng)頁技術(shù)深入探討協(xié)議深入講解：提出問題：“協(xié)議有多種請求方法，它們有什么區(qū)別？狀態(tài)碼又代表什么含義？”引導(dǎo)學(xué)生思考協(xié)議的復(fù)雜機(jī)制。通過實際案例分析，如在搜索引擎中輸入關(guān)鍵詞搜索，瀏覽器發(fā)送的是GET請求，請求參數(shù)在URL中顯示；在注冊賬號時，填寫表單信息提交，瀏覽器發(fā)送的是POST請求，數(shù)據(jù)在請求體中傳輸，不易被他人獲取。組織學(xué)生分組討論不同請求方法在常見網(wǎng)絡(luò)應(yīng)用中的使用場景，如PUT方法常用于更新資源、DELETE方法用于刪除資源。對于狀態(tài)碼，以404狀態(tài)碼為例，講解當(dāng)服務(wù)器找不到請求的資源時返回該狀態(tài)碼，瀏覽器會顯示“頁面未找到”錯誤頁面。通過分析不同狀態(tài)碼對應(yīng)的網(wǎng)頁提示信息，讓學(xué)生理解狀態(tài)碼對請求處理結(jié)果的反饋作用，加深對協(xié)議的理解。網(wǎng)頁技術(shù)協(xié)同工作討論：展示一些功能豐富、交互性強(qiáng)的網(wǎng)頁案例，如電商平臺商品詳情頁、在線游戲界面，引導(dǎo)學(xué)生思考這些網(wǎng)頁中HTML、CSS、JavaScript是如何協(xié)同工作實現(xiàn)復(fù)雜功能的。組織學(xué)生分組討論，每個小組分析一個網(wǎng)頁案例，從結(jié)構(gòu)搭建、樣式設(shè)計、交互實現(xiàn)等方面探討三種技術(shù)的應(yīng)用。例如，在電商平臺商品詳情頁，HTML構(gòu)建商品信息展示結(jié)構(gòu)，CSS美化頁面布局和樣式，使商品圖片、描述文字更美觀，JavaScript實現(xiàn)商品圖片輪播、添加購物車等交互功能。各小