HTML5+CSS3网页设计实战 教案 4.5 文本类标签-p、h类标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.5文本类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 掌握P标签的用法和使用场景。（2） 掌握p标签的常见样式设置。（3） 掌握h类标签的使用场景。能力目标：具备对p标签容器设置合理、美观的样式的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。p标签、h类标签设置文本段落的首行缩进、行高、字体大小、字体样式、颜色。通过引导学生联想word操作来引入相关知识点。记忆常见属性的英文单词、区分h类标签的使用场景。采用演示及总结来强调h类标签。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习article元素是一段独立的内容，通常包含头部（header元素）、底部（footer元素）。section元素的作用，是对页面上的内容分块处理，例如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入<p>标签是HTML中的一个块级元素，全称paragraph，即“段落”，主要用于定义一段文本或内容。以下是一些具体的使用场景。 文章段落内容：在网页文章中，每个段落可以使用一个<p>标签来包裹，这样有助于页面的可读性和维护性。例如，在一篇新闻文章中有3段文字，就可以把这3个段落分别放到3个<p>标签中。 列表简介信息：在无序列表或有序列表的旁边，可以使用<p>标签添加一些简短的文字介绍或说明。 简短文字介绍：对于网页上的简短文字介绍，如产品描述、功能说明等，也可以使用<p>标签。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.5.1p标签<p>标签定义段落。文字行高的原因，p元素会自动在文字上下创建一些空白，浏览器会自动添加这些空间。也可以在样式表中规定行高（line-height）来缩小空白。4.5.2h1~h6标签h类标签一共有h1、h2、h3、h4、h5、h6六个，h1是最大的标题，h6是最小的标题,标签重要性依次下降，权重也依次下降。h标签对于搜索引擎优化（SEO）很重要，因为它有助于搜索引擎理解页面的内容结构。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例8】打开“第4章-常用标签-p标签-素材.html”，设置文本段落的首行缩进、行高、字体大小、字体样式、颜色等，提高浏览友好度。【案例9】打开之前手绘的手机app布局效果图，如图4-45所示，将h标签合理应用在企业首页各栏目。（1）在内容区域中，分为若干版面，每个版面都有特定的主题。那些主题就适合采用h类标签书写用以强调。（2）编写对应的CSS代码。（3）在浏览器中运行，预览效果。【案例10】h标签嵌套span标签（1）装饰性的元素，我们通常可以采用<span>无语义的标签去定义样式。（2）编写对应的CSS代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10练习1Html及css代码正确，效果一致30练习2Html及css代码正确，效果一致30练习3Html及css代码正确，效果一致30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）P标签的用法和使用场景。（