数据采集与预处理技术-P4T1-教案

授课教案20—20学年第学期_______学院________专业课程名称数据采集与预处理技术任课教师授课形式理论教学☑课内实践□理论+实践□习题复习□考核评价□其他活动□课时安排2学时（90分钟）序号10授课日期月日月日月日月日授课班级2026级相关专业教学班授课地点多媒体教室教学内容：项目四任务一网页文件格式介绍课程思政设计：1.技术伦理与合规意识——网页是别人的服务器上的内容，采集之前先看站点声明的允许范围。课堂讲清技术能力不等于采集许可，先看规则再动手是职业底线。2.求实态度——同样的页面，浏览器里看到的与源码里拿到的可能不一样。课堂讲清看到不等于拿到，判断数据来源要用工具核实而不是想当然。3.耐心细致——字段丢失、格式错乱往往不是程序写错，而是没看清页面由哪几种格式构成。课堂讲清愿意先花时间看清结构，是后面少走弯路的前提。4.规范意识——HTML有标签层级，CSS有选择器命名，JS有变量与函数写法。课堂讲清前端的这些规范既是给别人看的，也是数据采集时定位目标的凭据。教学目标：知识目标：能说出静态网页与动态网页的区别及其判断依据的原理；能说出HTML、CSS、JavaScript三种格式各自的职责与文件扩展名；能说出HTML文档的基本结构与六类常用标签；能说出CSS三种选择器的写法与用途；能说出JavaScript通过文档对象模型操作页面元素的基本机制；能说出PHP、JSP、ASP.NET三种动态网页技术的共同特点；能说出查看网页源代码与使用开发者工具两种判断方法的操作与各自能看到什么。能力目标：能在浏览器里打开网页源代码与开发者工具，判断页面使用的是哪种文档标准；能在Elements面板中定位目标数据所在的HTML元素并读出其层级与属性；能看懂一段使用解析库提取标题、价格、库存的代码，并说出每一步对应页面上的哪一处。素质目标：养成采集之前先看页面构成与站点声明的习惯；养成看到页面与拿到数据不一致时先核实来源的习惯；养成用工具查证而不是凭经验推断的习惯。教学重难点及解决方法：教学重点：HTML、CSS、JavaScript三者的分工与协作关系；HTML文档结构与六类常用标签；三种CSS选择器的写法；开发者工具两个面板各自的用途。教学难点：静态网页与动态网页在数据采集视角下的区别——为什么浏览器看到的与请求拿到的可能不同；CSS选择器与后续数据解析中定位元素的关系。学生容易把页面显示出来的内容直接当成源码里存在的内容，也容易忽视选择器思路在解析中的迁移。解决方法：针对难点：用同一个页面的两幅截图并排投屏——一幅是浏览器渲染后的样子，一幅是查看源代码得到的文本，学生当场比对并找出只出现在其中一幅里的内容，差别由学生自己看出来；选择器的迁移在讲三种选择器时就点明后续解析定位用的正是同一套思路，并在环节七的演示中回扣。针对重点问题：采用边讲边练，每讲完一类标签即在课程在线教学平台推送1～2道判断练习当堂消化；六类标签与三种选择器各做成一张对照表投屏，学生照表认读；讲开发者工具时两个面板各演示一遍，学生跟着在自己电脑上打开；课后按随堂检测结果推送分层强化练习。教学环境及平台：多媒体教室，配备投影与扩音设备；课程在线教学平台。软件与工具：Chrome浏览器（用于查看源代码与开发者工具）；演示用Python运行环境（requests、BeautifulSoup），仅用于教师投屏演示，本次课学生不上机。数据与素材：教材示例电商商品页面（含标题、商城价、库存三类目标字段）。教学资源：①教材《数据采集与预处理技术》第89–94页正文与示例代码；②本课程课件（含HTML六类标签对照表、三种选择器对照表、渲染页面与源代码对比图、开发者工具两个面板截图）；③课程在线教学平台（预习测验、随堂练习、课后答疑）与课程AI智能体。学习效果评价方式：过程性评价40%＋终结性评价60%的综合评价方式，本次课成绩计入平时成绩，对应其中三项：①课堂参与（主要部分）：完成渲染页面与源代码的比对记录，并在Elements面板中定位三类目标字段，按定位准确性、层级描述准确性、术语使用准确性三项评分；②随堂测验：下课前5题（静态与动态网页的区别、三种格式的职责、六类标签的辨识、三种选择器的写法、两个面板各自的用途），平台自动批改，当场讲评错误率最高的一题；③课后作业：提交页面构成说明，写清目标字段各在哪种格式中承载。课前预习：平台3道诊断题（网页由哪些格式构成、怎么查看源代码），统计错误率用于调整讲授重点。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。教学内容及过程时间分配方法及手段思政元素【教师活动】1.给出情境：某电商平台的技术团队在采集竞品商品数据时遇到了困难。2.讲他们发现的复杂之处：商品详情页的结构非常复杂——基础商品信息以HTML格式呈现，动态价格数据由JavaScript加载渲染，部分促销规则则采用XML格式描述。3.讲他们遇到的两个具体问题：字段丢失、格式错乱，而且频繁出现。4.提问：问题出在采集程序写错了，还是出在别的地方？让学生先表态再追问理由。5.讲清结论：由于团队对各类文件格式缺乏了解，才在解析时频繁出错。6.点明本任务：进行网页数据采集之前，首先要了解网页由哪些文件格式构成、每种格式有什么特点，才能选择适配的解析方法。7.讲本任务的性质：这是一节认识课，本节课在多媒体教室进行，以识读结构为主，上机实操从下一任务开始。【学生活动】听情境并记录商品详情页上并存的三种格式；对问题出在哪里发表看法并说明理由；说出自己浏览网页时是否注意过页面背后的构成。【设计意图】对应知识目标1。用同一个页面上三种格式并存的真实困境引入，学生看到识读格式不是理论铺垫而是排错的第一步；先让学生猜问题出在哪，后面讲判断方法时正好回应；把本节课的授课形式在开头就讲明，学生的课堂预期在第一时间被明确，不产生落差。环节一情境导入：字段丢失的那一夜（8分钟）情境导入任务驱动法（投屏＋讲述）耐心细致：先看清结构再动手采集【教师活动】1.讲分类标准：根据网页内容是否需要服务器动态处理，网页可分为静态网页和动态网页两大类。2.讲静态网页：内容是预先编写好的，客户端浏览器可直接打开网站内容。3.讲动态网页：内容需要服务器端运算处理后实时生成。4.给出教材的比喻：静态网页就像饮水机里的常温水，打开开关即可直接取用；动态网页则如同加热后的热水，需要完成加热处理后方可取用。5.讲清这个比喻要传达的关键：前者拿过来就能用，后者要经过一道处理才能用。6.讲静态网页通常包含的三种基本格式：HTML、CSS、JavaScript，三者分工明确、相互配合。7.提问：如果采集程序只是把页面地址请求一遍就拿到的内容，与浏览器里看到的完全一样，那这个页面更像哪一类？让学生回答。8.讲清答案指向静态网页，并预告下面三种格式依次讲。9.点明三者的定位：网页文件格式是构建网络内容的基础要素。【学生活动】记录静态与动态网页的区别；用自己的话说出常温水与热水这个比喻的含义；回答请求内容与浏览器所见一致时页面更像哪一类。【设计意图】对应知识目标1，落实重点静态与动态之分。比喻先给出再由学生自己复述含义，抽象的服务器端处理变成可感知的取用动作；用一个判断题检查分类标准是否真正建立，答对了才说明两类网页的边界被理解；把三种格式的定位讲在开头，后面三个环节各讲一种时有总纲可依。环节二静态与动态网页的两大类（12分钟）讲授＋板书比喻讲解讲练结合求实态度：看到的不等于拿到的【教师活动】1.讲定义与地位：HTML即超文本标记语言，是构成网页的基础，使用标记标签来描述网页的结构和内容。2.讲文件扩展名与解析方式：扩展名为.html或.htm，由浏览器直接解析显示。3.投屏一份基本的HTML文档，逐行讲清结构：文档类型声明为HTML5；html标签是整个网页的根元素，并带有语言属性；head部分包含字符编码、标题、外部资源引用；body部分包含网页的实际内容。4.讲head里的两类引用：用link标签引入样式文件，用script标签引入脚本文件。5.讲body里的四类元素：一级标题、段落文本、超链接与图片，逐一指出超链接靠什么属性指向目标、图片靠什么属性指明文件位置。6.讲六类常用标签并投屏成对照表：结构标签包括根元素、头部、主体、页首、页脚，用于定义整体结构；文本标签包括六级标题、段落、换行，用于组织文本内容；链接与媒体标签包括超链接与图片；列表标签包括无序列表、有序列表、列表项；表格标签包括表格、行、单元格；表单标签包括表单、输入框、按钮，用于收集用户输入。7.逐类举出一个页面上的真实位置，学生把标签与看到过的页面元素对上。8.提问：商品详情页上的价格数字，最可能落在哪一类标签里？让学生先猜，讲清它可能只是某类标签里的一段文本，这正是后面解析要处理的情况。【学生活动】记录HTML文档的基本结构与六类标签；说出超链接与图片各靠哪个属性指明目标；把六类标签与浏览过的页面元素对应起来；对价格数字落在哪类标签发表看法。【设计意图】对应知识目标3，落实重点HTML结构。先讲整份文档的骨架再讲标签分类，学生看到的树形结构而不是一堆零散记号；六类标签并列成表并各配页面上的真实位置，抽象符号落得到处可见；用价格落在哪一类这个问题埋下悬念，环节七的演示正好回应，形成前后呼应。环节三HTML网页的骨架（18分钟）讲授＋板书对照表讲练结合规范意识：标签有层级结构要清楚【教师活动】1.讲定义与作用：CSS即层叠样式表，用于描述HTML元素的显示样式，使网页更加美观。2.讲扩展名与引入方式：扩展名为.css，通常通过link标签引入HTML文件中。3.讲核心价值：把内容与样式分离，让同样的HTML内容可以呈现出不同的视觉效果。4.讲组成：由选择器和声明块组成，声明块包含一个或多个属性值对。5.投屏三段样式代码，逐段讲清写法：一段作用在一级标题上，设置颜色与字号；一段作用在类名为container的元素上，设置宽度与外边距；一段作用在标识为header的元素上，设置背景色。6.讲三种选择器并投屏成对照表：元素选择器通过标签名称选择；类选择器通过class属性选择，前面加一个点；ID选择器通过id属性选择，前面加一个井号。7.讲清这三者的差别不仅是写法，更是定位精度——标签选中的是一批，标识选中的通常是一个。8.点明迁移：这些选择器的概念对于后续的数据解析任务非常重要，因为提取网页数据时也需要用类似的方式定位目标元素。9.提问：要取出页面上唯一一个商品标题，用哪一种选择器更稳？让学生回答并说明理由。【学生活动】记录CSS的组成与三种选择器的写法；说出三种选择器各自选中的范围；回答取唯一标题该用哪一种及理由；说出内容与样式分离的好处。【设计意图】对应知识目标4，突破难点选择器的迁移。三种选择器按定位精度这条线讲，学生理解的是选择粒度而不是三个符号；迁移这一点在讲选择器时就点明，并用一个追问当场检验，为环节四任务三的解析埋下伏笔；内容与样式分离的价值单独讲，学生知道样式表不只是让页面好看。环节四CSS样式与选择器（12分钟）讲授＋板书对照表讲练结合方法迁移：定位的思路解析时还要用【教师活动】1.讲定义与地位：JavaScript是一种编程语言，用于实现网页的交互功能和动态效果。2.讲扩展名与引入方式：扩展名为.js，通过script标签引入HTML文件中。3.讲它与前两者的差别：与HTML和CSS不同，JavaScript可以响应用户操作、修改页面内容、与服务器通信。4.投屏一段脚本，逐段讲清四类写法：用let与const声明变量；用function定义函数；按标识取到页面元素后改写其内容与颜色；为元素添加事件监听，在点击时弹出提示。5.讲文档对象模型：JavaScript可以通过它操作HTML元素，这是实现网页动态效果的核心机制。6.讲它对采集的影响：现代网页中很多数据是通过JavaScript动态加载的，这给数据采集带来了挑战，需要使用专门的工具来处理。7.讲三者的协作关系并板书：HTML负责网页的结构和内容，相当于房屋的框架；CSS负责网页的样式和美化，相当于房屋的装修；JavaScript负责网页的交互和动态效果，相当于房屋的智能化系统。8.讲清实际网页中三者通常结合使用，共同构建出功能丰富、美观实用的网页。9.提问：一栋房子框架、装修、智能系统都齐了，采集数据要找的是哪一部分？引导学生说出数据主要在框架里，但有些内容要等智能系统启动后才出现。【学生活动】记录脚本的四类写法；说出JavaScript与前两者的差别；说出文档对象模型的作用；回答采集数据要找哪一部分及理由。【设计意图】对应知识目标5，落实重点三者协作。四类写法按声明变量、定义函数、操作元素、响应事件的顺序讲，学生看到脚本能做什么而不是只记住它是一种语言；三者协作用房屋的框架、装修、智能系统作比，职责边界一眼可辨；最后这个追问把三者协作直接落到采集视角上，呼应环节一里的动态价格困境。环节五JavaScript与三者的协作（12分钟）讲授＋板书比喻讲解讲练结合技术边界：动态数据要专用工具【教师活动】1.讲动态网页的工作方式：根据用户请求和服务器状态动态生成内容，通常涉及服务器端编程语言和数据库交互。2.讲第一种技术PHP：一种开源的服务器端脚本语言，特别适合网页开发，扩展名为.php，可以嵌入HTML中执行；语法简单易学，是初学者接触动态网页开发的常用选择。3.投屏一段PHP页面，讲清代码被起始与结束标签包围，服务器执行这部分代码后，将结果与HTML合并，生成最终的网页内容发送给浏览器。4.单独强调：用户在浏览器中看到的只是处理后的HTML，看不到PHP源代码。5.讲第二种技术JSP：基于Java平台，适合大型企业级应用，具有良好的跨平台性和安全性。6.讲第三种技术ASP.NET：微软推出的技术，基于.NET框架，支持多种编程语言，提供丰富的控件和工具。7.讲清三者的共同特点：代码在服务器端执行，服务器根据数据库内容或用户请求动态生成HTML页面。8.讲清对采集的意义：无论网站使用哪种动态网页技术，最终发送到浏览器的都是HTML内容，因此掌握HTML结构的解析方法是数据采集的基础。9.讲第一种判断方法查看网页源代码：在浏览器中右击网页，在快捷菜单中单击查看网页源代码；如果在源码开头看到文档类型声明，说明网页使用HTML5标准；通过查看源码还可以了解网页引用了哪些样式与脚本文件，以及页面结构是如何组织的。10.现场演示打开一个页面的源代码，学生跟着在自己的电脑上打开。11.讲第二种判断方法开发者工具：按F12键或右击后单击检查即可打开；在其中元素面板可以查看网页的文档结构，了解各个元素的层级关系和属性值，定位目标数据所在的HTML元素；在网络面板可以监控网页加载过程中的所有网络请求，发现通过脚本异步加载的数据接口，找到数据的真实来源。12.现场演示两个面板，讲清熟练使用开发者工具能够大大提高数据采集的效率。【学生活动】记录三种动态网页技术的共同特点；说出为什么浏览器里看不到PHP源代码；跟着打开源代码并确认文档类型声明；跟着打开两个面板并说出各自能看到什么。【设计意图】对应知识目标6、7，突破难点采集视角下的静态与动态。三种技术只讲共同特点与各自定位，学生知道不必逐个深究；浏览器里看不到源代码这一条单独强调，学生明白采集拿到的是处理结果；两个判断方法都现场演示并让学生同步打开，工具用法在练中掌握而不是靠口述。环节六动态网页技术与判断方法（15分钟）讲授＋板书直观演示法（投屏＋同步操作）合规意识：先看清声明再决定范围【教师活动】1.说明本环节为教师投屏演示、学生同步记录，本次课不上机实操，上机从下一任务开始。2.给出案例：假设某电商商品页面使用HTML结构数据，需要提取其中的标题、价格与库存。3.投屏演示第一段：用请求库带上请求头发起请求，用解析库把返回的文本解析成可查询的对象，讲清请求头里标识客户端类型这一字段的作用。4.投屏演示第二段提取标题：查找一级标题元素，取到元素后取其内部文本并去掉首尾空白，取不到时给出未找到的提示。5.讲清这一步与环节三的六类标签直接对应。6.投屏演示第三段提取价格：先给出未找到的默认值，遍历页面上的文本节点找到含商城价字样的那一个，然后向上逐层找它的容器，最多找三层，取到容器文本后用正则匹配数字与货币符号。7.讲清为什么价格要这样绕：它不像标题那样有独立的标签，只是某段文本里的几个字符。8.投屏演示第四段提取库存：用正则找到含库存字样的文本节点，取其父元素文本后正则匹配数字。9.讲清整体思路：先获取完整的网页内容，然后根据数据所在的位置和格式，选择合适的解析方法；结构清晰的字段直接提取，嵌在文本里的字段先定位关键词所在标签再用正则匹配。10.点明本任务的意义：正确识别目标数据的存储形式是数据采集的第一步。11.引导学生用三句话小结：①网页分静态与动态，最终发给浏览器的都是HTML；②结构字段直接提取，文本里的字段先定位关键词再匹配；③看清构成是采集的第一步。12.板书知识框架：HTML→CSS→JavaScript→动态技术→判断方法→解析演示，学生拍照记录。13.课程在线教学平台推送当堂检测5题（静态与动态网页的区别、三种格式的职责、六类标签的辨识、三种选择器的写法、两个面板各自的用途），限时5分钟，系统自动批改，当场讲评错误率最高的一题。1