HTML5+CSS3网页设计实战 教案 4.5~6 文本类标签、a 标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.5文本类标签，4.6a标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 掌握br换行标签的使用。（2） 掌握Span、i无语义标签的应用及使用场景。（3） 掌握strong、em强调类标签的区别。（4） 巩固并深化a标签的用法。能力目标：（1） 具备给文本段落合理使用与之对应的Span、i、strong、em标签的能力。（2） 具备设置a标签及相关伪类状态属性的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。br、Span、i、strong、em、a标签Span、i无语义标签的应用及使用场景，strong、em标签的区别。通过语义的解释来理解各标签的用法。a标签的用法。通过a标签的四个伪类来介绍链接的样式应用，结合上网经历来理解链接种类。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习P标签对应的样式中，面对中文段落、英文段落，经常使用的属性值有哪些？简述h类标签的应用场景。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在以上文章段落中，我们经常会见到字体加粗的外观，有时还能见到斜体，或者段落中包含了外部链接的情况。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.5.3br标签 <br/>标签是为数不多的单独标签，没有结束标签，它可插入一个简单的换行符。请使用<br/>标签来输入空行，而不是分割段落。 <br>和<br/>具有相同作用，但前者是老的HTML规范，新的规范要求一切都应像XML那样有结束符，如果没有也要硬加一个反斜杠。4.5.4span标签和i标签span标签是内联元素，不像块级元素那样有换行的效果。<i>标签也是内联元素，它定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。两者经常出现在p标签内部，从语义角度来说，这两者都不包含什么含义，只是为了产生样式上的变化。4.5.6em、strong标签<em>标签用于定义强调文本，标签内的内容通常以斜体显示。屏幕阅读器将以强调方式读出<em>标签中的单词，使用语音重音。 <strong>标签用于定义具有很强重要性的文本。其中的内容通常以粗体显示。如果只是要显示无重要性的粗体文本，请使用<b>标签！em和strong的主要区别之处。4.6a标签<a>标签定义超链接，a元素最重要的属性是href属性，它指定链接的目标，如果暂时没有明确目标，可以采用空链接。超链接的类型取决于href属性设置的类型，包括以下几种：相对链接：格式只包括"路径/文件名"，它只能链接网站内部的页面或资源。例如href="image/logo.jpg"是链接image文件夹内的logo.jpg文件。绝对链接：是严格书写URL格式的链接，一般是指向站点外部的资源。例如，网页中有一个超链接是要跳转至百度首页，则链接地址应按照URL格式写成href=""。一般网站中"友情链接"部分的超链接均为绝对链接。（3）文件链接：也可以直接指向文件。当该文件的格式不能被浏览器识别，则会打开下载窗口提供该文件的下载。例如某链接地址为href="/abc.mp3"，则点击该地址可以实现下载abc.mp3的功能。（4）空链接：不具备跳转功能，但却显示为超链接的样式。空链接的功能，一是在设计制作阶段，可以帮助设计师提前实现页面效果；二是可以在空链接上添加脚本，通过脚本实现页面互动。空链接的地址用"#"表示。例如：<ahref=”#”>百度</a>。（5）电子邮件链接：链接地址为邮件地址，即邮箱号。当点击该链接时，会自动打开电子邮件的创建向导。例如：<ahref=”mailto:88101010@”>……</a>（6）锚点链接：用于跳转到当前页面或其他页面的指定位置。如果目标位置是页面内的一个特定id，你可以使用#后跟该id名称来创建锚链接。例如：如果你有一个id为section2的元素，你可以这样创建一个锚链接。<ahref="#section2">跳转到第二部分</a>如果你想链接到另一个页面的锚点，你需要在href中提供完整的URL加上锚点引用。例如：<ahref="/page.html#section2">跳转到另一页的第二部分</a> a标签通常会跟以下几种伪类选择器一起使用。a:link{……}/*未访问的链接*/a:visited{……}/*已访问过的链接*/a:hover{……}/*当光标悬停在链接上*/a:active{……}/*光标点击链接，不松开左键的期间*/通常在实际案例中，我们只需要设置a{……}样式和a:hover{……}样式即可。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例11】打开之前的“文本类标签-h标签.html”练习，增加一个文字类导航条。（1）编写HTML代码。（2）编写对应的CSS代码。（3）继续优化一下导航条款式。（4）最后设置超链接的交互样式，只需要设置a默认样式和a:hover样式，a样式必须在a:hover之前声明。（5）去除掉导航条各容器的边框，a容器的width属性设置为200px。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展4.5.5sub、sup标签<sub>标签可定义下标文本。<sup>可定义上标文本。两者经常出现在公式、数学表达式或化学复合物的场合。但如果表达过于复杂，宁愿采用图片的方式。任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Html结构Li与a标签的包裹关系正确。30Css样式A标签的hover响应区域完全覆盖li元素。30页面效果元素整齐，交互效果符合预期。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过