HTML5+CSS3网页设计实战 教案 2.3 书写HTML代码的习惯

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。22.3书写HTML代码的习惯该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 代码缩进的意义。（2） 添加注释语句。（3） 标签语义化的意义。能力目标：（1） 培养快速、准确输入代码的能力。（2） 具备根据语义场景对标签进行选择的能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。（2） 强化代码规范意识：教育学生遵守编程规范，编写清晰、可读的代码，提高代码质量和可维护性。书写HTML代码的相关要求代码缩进，html及css注释语句的添加。通过上机敲打代码，抽查部分作业，故意打乱缩进让学生查找配对标签，强调代码缩进的重要。认识标签的语义。通过标签的语义对比，强化对语义的认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习1.作业点评环节。2.常见的图像格式包括哪些？各有什么特点？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在HTML和CSS代码的编写中，推荐代码使用小写，这是CSS的官方推荐做法，也符合大多数编码规范和命名约定。在少则几百行、多则上千行的代码下，要规范书写代码。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授2.3.1保持正确的缩进何为缩进，类似我们写作文时，每段前面总是空两个格子一样。在Hbuilder软件中，按一次<tab>键代表往后缩进一个单位，按<Shift>+<tab>键或者是<Backspace>回退键可以往前回退一个单位。千万别拼命按空格键来产生缩进，费时且缩进不均匀。知识点：缩进式书写代码记忆关键词：长幼有序关键词解析：元素（容器）从代码分辨包含关系，如同看家族族谱。父元素有若干子元素，父元素如首领站在队伍前面，所有子元素是平级关系，站在首领后方，依次类推形成层次递进的关系。☆思政解说1：弘扬中国传统道德价值观的核心理念。强调家庭与社会中的辈分与秩序，倡导尊重长辈、爱护幼辈，有助于构建和谐的人际关系和社会氛围，是社会主义核心价值观的重要体现。☆思政解说2：清晰的代码缩进，可以为团队开发、维护工作难度大大降低。“我为人人，人人为我”。我们也不希望见到交到手头的代码一团乱麻的情况。2.3.2充分的注释编程中使用注释的主要作用是增强代码的可读性、便于维护和调试、以及帮助团队成员理解代码逻辑。HTML的注释语句在浏览器中并不会运行，格式为<!--注释内容-->CSS对应的注释语句格式为//注释文字或者/*注释文字*/知识点：编程时注释的重要性记忆关键词：事必躬亲关键词解析：代码注释，必须由代码编写者亲自标注，带个好头！一个称职的码农，应该在代码适当位置标注上清晰、有效的提示信息，便于日后维护及团队协作需要。成百上千行的代码并不是设计者当天就能完成，与其几天后忘却重新审视代码意思，不如先做好注释，更不能指望别人理解你代码时帮你写注释。☆思政解说1：事必躬亲这个成语告诉我们，在接触一门新知识、新技能、新工作的时候，必须要亲自完整地去体验每个环节，事必躬亲强调“有调查才有发言权。”☆思政解说2：编程时注释，告知代码的意思、目的，以便于其他开发人员或自己更好地理解代码，读懂你要实现的目标。2.3.3标签尽可能语义化HTML语义化是指使用合适的标签来展示内容的结构和意义，而不是仅仅为了样式表现。☆思政解说1：强调编程中要培养认真专注态度，切勿图一时方便，给对象乱起名字。☆思政解说2：养成严谨认真的态度，选择标签如起名字，讲究一个“意境”。☆思政解说3：正确合理的标签如同流行语所说的正面“人设”，鼓励学生树立正面“人设”，这既是对他们个人品德的塑造，也是对社会风气的引领。通过塑造良好的“人设”，个体能够更加注重自我修养，提升道德水平，进而在日常生活和工作中展现出积极向上的精神风貌。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】打开资源包“第2章-代码修正练习”文件夹下的“修改缩进1”、“修改缩进2”、“修改缩进3”这三个文件夹，如图2-13所示，修改文件夹中的若干个书写不标准的HTML代码。1. 在软件中“打开目录”，打开对应html文件。2. 通过代码折叠功能，检查标签是否完整。3.对于缩进不准确的代码，调整其缩减，体现容器嵌套关系。4. 给大容器添加上合理的注释语句。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。通过对以往学生作业中的不良书写习惯的纠错，培养规范编写代码的意识。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构标签是否完整20容器嵌套关系代码缩减合理、准确。30CSS代码的编写能以正确缩进形式输入正确代码。30注释语句正确到位的注释。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：