HTML5+CSS3网页设计实战 教案 4.1 块元素、‌内联元素、‌内联块级元素的特征

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.1块元素、‌内联元素、‌内联块级元素的特征，4.2常见CSS属性表该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 块元素、内联元素、内联块级元素的特征（2） 常见CSS属性表能力目标：（1） 具备识别常见标签所属类型的能力。（2） 能根据场景需要转化为对应的元素类型。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）在编程过程中，引导学生学会质疑、分析和评价问题，培养其批判性思维能力。块元素、‌内联元素、‌内联块级元素的特征块元素、‌内联元素、‌内联块级元素的特征。通过设置容器的不同类型，让学生体会不同类型元素所具备的特性。记忆并理解常见的CSS属性。鼓励学生上机尝试不同属性，自行发掘css属性作用，教师辅以解释。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习上一章节的知识点包括哪些？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入Css样式种类繁多，在课程学习中，只要求我们掌握常见的HTML标签与CSS样式的搭配，碰到一些陌生的属性，可以回忆第1章百度搜索引擎用法去寻求答案。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1. 块元素block：常见的块状元素有<div>、‌<p>、‌<ul>、‌<table>、‌<form>等。知识点：块元素特征记忆关键词：横行天下关键词解析：块元素占用一横行，即便设置了宽度，也依然不允许后面的元素排上来，霸道至极，可谓武将。☆思政讲解：横行天下，也可以说源自自身的实力，亦是一种勇气和自信。倘若自身实力不足，就变成了傲慢、自负。一时横行，并不意味长期成为一方霸主，站在顶峰也要有望向更高山峰的决心。楚霸王项羽的自负与傲慢，忽视了他人的建议和意见。与刘邦的比较，后者能团结将士，集众智众力，虚心纳谏。两者性格上的较量，决定了垓下之战的结果。2. 内联元素（行内元素）inline： 常见的行内元素有<a>、<span>、<br>、<i>、<em>、<strong>、<label>等。知识点：内联元素特征记忆关键词：无孔不入关键词解析：实力弱小，在块级元素强者之间求生存发展，竭尽所能靠近“上层社会”，前排哪里有空位挤哪里，可谓文将。3. 内联块级元素（行内块元素）inline-block： 常见的内联块级元素有<img>、<input/>、<button></button>、<td></td>等。知识点：内联块级元素特征记忆关键词：文武兼备关键词解析：具备有内联元素不会霸占整行的特征，同时又可以像块级元素一样设置正常的内外边距。☆思政解说1：论文武双全，古有李白仗剑吟诗作对，今有毛主席兵法如神，诗词豪迈。☆思政解说2：内联元素如同冬天相互取暖的刺猬，与对方相处时，会保持合理，令人舒服的距离感，而不会被刺伤。4.2常见CSS属性表一定要认得常用的英文单词，最起码得要求也必须要记住每个单词前几个字母，敲代码时根据Hbuilder的代码提示功能找到眼熟的即可。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】内联、块级、内联-块级相关转化块级元素转内联。（2）内联元素转块级元素（3）转内联-块级元素上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目创建站点结构正确10块级元素转内联Html及css代码正确20内联元素转块级Html及css代码正确20内联元素转内联-块级Html容器包含关系正确20Css样式正确，整体效果接近原型。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）块元素、内联元素、内联块级元素的特征及相互转化的操作。（2）CSS属性表中常见属性及属性值。（3）能识别常见标签所属类型（4）在编程过程中，学会质疑、分析和评价问题，培养批判性