《网站前端技术》（梁玲）621-7 教案 第3课 HTML与HTML5（二）_第1页
《网站前端技术》（梁玲）621-7 教案 第3课 HTML与HTML5（二）_第2页
《网站前端技术》（梁玲）621-7 教案 第3课 HTML与HTML5（二）_第3页
《网站前端技术》（梁玲）621-7 教案 第3课 HTML与HTML5（二）_第4页
《网站前端技术》（梁玲）621-7 教案 第3课 HTML与HTML5（二）_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第3课HTML与HTML5（二）课时2课时（90min）教学目标知识技能目标：掌握HTML的无语义标签、文字相关标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML无语义标签、HTML文字相关标签教学难点：HTML文字相关标签教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（32min）→头脑风暴（8·min）第2节课：→传授新知（25min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解HTML无语义标签、HTML文字相关标签的相关概念。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出以下问题什么是无语义标签？HTML文字相关标签应该包含哪些方面？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（32min）2.4HTML无语义标签【教师】讲解HTML无语义标签的基本语法✈【多媒体】组织学生扫码播放“HTML无语义标签”视频（详见教材），让学生对这部分内容有一个大致地了解HTML中的绝大多数标签都有确定的语义，以标识该标签的内容在网页中要如何显示，如<p>标签显示为段落，<h1>～<h6>标签显示为标题，<img>显示为图像等。此外，HTML中还有两个重要的无语义标签<span>和<div>。【学生】聆听、记录、理解2.4.1<span>标签【教师】讲解<span>标签的使用格式与示例<span>标签没有确定的语义，通常用于修饰文本，以区别于周围其他文本，而且通常需要配合CSS来使用。它是行标签，其语法格式如下：<spanstyle="文本样式">修饰文本</span>【示例2-4-1】编辑HTML文档<body>标签的内容，代码如下：<body> <p><span>是<spanstyle="font-style:italic;">行标签</span>，没有确定的语义；通常用于<spanstyle="font-size:22px;font-style:italic;">修饰文本</span>，以区别于周围其他文本。</p></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“<span>标签效果”图片（详见教材），并讲解效果：<span>标签内的内容“行标签”和“修饰文本”样式不同于其他文本。【提示】“<”和“>”用于表示特殊字符，在后面的章节中会详细讲解。style="font-style:italic;"和style="font-size:22px;font-style:italic;"用于设置<span>标签间文本的样式。【学生】聆听、记录、理解2.4.2<div>标签【教师】讲解<div>标签的基本语法与示例<div>标签没有确定的语义，通常用于划分区域，从而对页面进行布局。该标签可以看作是一个能够将其他HTML元素嵌套在内的容器。它是块标签，其语法格式如下：<div>待划分区域的内容</div>【示例2-4-2】编辑HTML文档<body>标签的内容，代码如下：<body> <div> <h2>下面是两个段落</h2> <p><div>是块标签，没有确定的语义，通常用于划分区域，从而对页面进行布局。该标签可以看作是一个能够将其他HTML元素嵌套在内的容器。</p> <p>本页面中有一个二级标题和两个段落，都包含在一对<div>标签内。</p> </div></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“<div>标签效果”图片（详见教材），并讲解【提示】<h2>标签是二级标题标签，在后面的章节中会详细讲解。【学生】聆听、记录、理解2.5HTML文字相关标签【教师】讲解HTML文字相关标签的基本语法✈【多媒体】组织学生扫码播放“HTML文字相关标签”视频（详见教材），让学生对这部分内容有一个大致地了解2.5.1标题标签<h1>～<h6>【教师】讲解标题标签的基本语法与示例【课堂互动】✈【教师】提问HTML中标题标签应有什么属性设置？✈【学生】聆听、思考、回答<h1>～<h6>标签用于提升内容的层级，从而构建文档的结构，并且标题文本以加粗格式显示。标题的对齐方式由align属性设置，其值有left（文字左对齐）、center（文字居中对齐）、right（文字右对齐）。若标题标签未使用属性设置内容的对齐方式，则对齐方式默认为左对齐。<h1>～<h6>标签是块标签，其语法格式如下：<h1align="对齐方式">文本内容</h1>【示例2-5-1】编辑HTML文档<body>标签的内容，代码如下：<body><h1align="center">一级标题</h1><h2align="center">二级标题</h2><h3align="left">三级标题</h3><h4align="right">四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><h7>有七级标题吗？</h7></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“各级标题标签与对齐方式属性设置效果”图片（详见教材），并讲解效果：h1、h2、h3、h4、h5、h6分别表示一级到六级标题，各自独占一行，并加粗显示，而且标题内容的字体格式逐渐减小，对齐方式按照属性设置或默认设置显示。此外，h7内容的字体大小明显比h6内容的字体大，也没有加粗，由此可证实HTML规则中没有七级标题标签。【学生】聆听、记录、理解2.5.2段落标签<p>【教师】讲解段落标签的基本语法与示例<p>标签用于定义段落，段前段后会产生比段内行距较多的空白，也就是说段间距大于行间距。段落文本的对齐方式同样由align属性设置，其值不再赘述。若段落标签未使用属性设置内容的对齐方式，则对齐方式默认为左对齐。<p>标签是块标签，其语法格式如下：<palign="对齐方式">段落文字</p>【示例2-5-2】编辑HTML文档<body>标签的内容，代码如下：<body><palign="center">美文欣赏</p><p>人站得高些，不但能有幸早些领略到期望的曙光，还能有幸发现生命的立体的诗篇。每一个人的人生，都是这诗篇中的一个词、一个句子或者一个标点。你可能没有成为一个美丽的词，一个引人注目的句子，一个惊叹号，但你依然是这生命的立体诗篇中的一个音节、一个停顿、一个必不可少的组成部分。这足以使你放弃前嫌，萌发为人类孕育新的歌声的兴致，为世界带来更多的诗意。</p><palign="right">——《站在历史枝头微笑》</p></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“段落标签与对齐方式属性设置效果”图片（详见教材），并讲解效果：段前段后有多于段内行距的空白，第一个段落居中对齐，第二个段落左对齐，第三个段落右对齐。【提示】在HTML5中，许多元素的align属性被废弃，因此建议使用CSS进行属性设置，CSS的相关知识在后面章节中会详细介绍。【学生】聆听、记录、理解2.5.3换行标签<br/>【教师】讲解换行标签的基本语法与示例<br/>标签用于强制换行。如果需要多次换行，则可以连续使用多个换行标签。该标签的语法格式如下：<p>一段文字<br/>一段文字</p>【示例2-5-3】在【示例2-5-2】的基础上，编辑HTML文档<body>标签的内容，即在第二个段落中添加标签<br/>，代码如下：<p>人站得高些，不但能有幸早些领略到期望的曙光，还能有幸发现生命的立体的诗篇。每一个人的人生，都是这诗篇中的一个词、一个句子或者一个标点。<br/>你可能没有成为一个美丽的词，一个引人注目的句子，一个惊叹号，但你依然是这生命的立体诗篇中的一个音节、一个停顿、一个必不可少的组成部分。这足以使你放弃前嫌，萌发为人类孕育新的歌声的兴致，为世界带来更多的诗意。</p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示图片“使用换行标签效果”（详见教材），并讲解效果：换行标签<br/>后面的内容另起一行，但没有像段落一样加大行距，因此换行标签<br/>前后的内容仍然是一个段落。【学生】聆听、记录、理解2.5.4水平线标签<hr/>【教师】讲解水平线标签的基本语法与示例<hr/>标签用于在页面中设置一条水平线，以有效分隔前后内容。该标签的语法格式如下：<p>一段文字<hr/>一段文字</p>【示例2-5-4】在【示例2-5-2】的基础上，编辑HTML文档<body>标签的内容，即在第二个段落中添加标签<hr/>，代码如下：<p>人站得高些，不但能有幸早些领略到期望的曙光，还能有幸发现生命的立体的诗篇。每一个人的人生，都是这诗篇中的一个词、一个句子或者一个标点。<hr/>你可能没有成为一个美丽的词，一个引人注目的句子，一个惊叹号，但你依然是这生命的立体诗篇中的一个音节、一个停顿、一个必不可少的组成部分。这足以使你放弃前嫌，萌发为人类孕育新的歌声的兴致，为世界带来更多的诗意。</p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“插入水平线效果”图片（详见教材），并讲解效果：段落内容被水平线分隔开。【学生】聆听、记录、理解通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML无语义标签和部分HTML文字相关标签的语法及使用，为后边的学习打好基础头脑风暴（8min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的HTML标签编辑一些标题和段落。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题思考HTML文字标签还应该包括哪些内容？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）2.5.5文字样式标签<font>【教师】讲解文字样式标签的基本语法与示例【课堂互动】✈【教师】提问HTML中文字样式标签可选的属性设置有哪些？✈【学生】聆听、思考、回答<font>标签用于规定文本的大小、颜色和字体，可选的属性有size、color、face。该标签是行标签，其语法格式如下：<fontsize="数字"color="颜色名"face="字体族">文字内容</font>【示例2-5-5】在【示例2-5-2】的基础上，编辑HTML文档<body>标签的内容，即将第二个和第三个段落标签修改为文字样式标签，并设置标签属性，代码如下：<body> <palign="center">美文欣赏</p> <fontsize="3"color="#666"face="隶书">人站得高些，不但能有幸早些领略到期望的曙光，还能有幸发现生命的立体的诗篇。每一个人的人生，都是这诗篇中的一个词、一个句子或者一个标点。你可能没有成为一个美丽的词，一个引人注目的句子，一个惊叹号，但你依然是这生命的立体诗篇中的一个音节、一个停顿、一个必不可少的组成部分。这足以使你放弃前嫌，萌发为人类孕育新的歌声的兴致，为世界带来更多的诗意。</font> <fontsize="4"color="#B91720"face="宋体">——《站在历史枝头微笑》</font></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“字体标签及其属性设置效果”图片（详见教材），并讲解效果：原本各自成段的第二、三段呈现在同一段落中，且原第二段内容字号变为“3号”、颜色为“黑灰色”、字体为“隶书”，原第三段内容字号变为“4号”、颜色为“酒红色”、字体为“宋体。【提示】在HTML4.01中，<font>标签不被赞成使用；在HTML5中，<font>标签被废弃。【学生】聆听、记录、理解2.5.6倾斜文字标签<i>和<em>【教师】讲解倾斜文字标签的基本语法与示例<i>标签用于定义斜体字，<em>标签用于定义着重文字，它们都可以将文字修饰为斜体。它们都是行标签，其语法格式如下：<p><i>斜体文字</i>正常文字<em>斜体文字</em></p>【示例2-5-6】在【示例2-5-2】的基础上，编辑HTML文档<body>标签的内容，即在第一个段落中添加倾斜文字标签<i>和<em>。代码如下：<palign="center"><i>美文</i>欣<em>赏</em></p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“斜体修饰标签使用效果”图片（详见教材），并讲解效果：文字“美文”和“赏”都变成了斜体。【提示】根据HTML5规范，在没有其他更合适的标签使用时，才把<i>标签作为最后的选项，通常建议使用<em>标签。【学生】聆听、记录、理解2.5.7加粗文字标签<b>和<strong>【教师】讲解倾斜文字标签的基本语法与示例<b>标签定义粗体文本，<strong>标签定义加重语气，它们都可以用于定义粗体文本。它们都是行标签，其语法格式如下：<p><b>粗体文字</b>正常文字<strong>粗体文字</strong></p>【示例2-5-7】在【示例2-5-2】的基础上，编辑HTML文档<body>标签的内容，即在第一个段落中添加加粗文字标签<b>和<strong>。代码如下：<palign="center"><b>美文</b>欣<strong>赏</strong></p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示图片“粗体文字效果”（详见教材），并讲解效果：文字“美文”和“赏”都变成了粗体。【提示】根据HTML5规范，在没有其他更合适的标签使用时，才把<b>标签作为最后的选项，通常建议使用<strong>标签。【学生】聆听、记录、理解2.5.8文字下划线标签<u>【教师】讲解文字下划线标签的基本语法与示例<u>标签用于定义带有下划线的文字。它是行标签，其语法格式如下：<p><u>带有下划线的文字</u>正常文字</p>【示例2-5-8】在【示例2-5-7】的基础上，编辑HTML文档<body>标签的内容，即将第一个段落中的加粗文字标签<b>修改为文字下划线标签<u>。代码如下：<palign="center"><u>美文</u>欣<strong>赏</strong></p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示图片“下划线标签修饰文字效果”（详见教材），并讲解效果：文字“美文”加下划线修饰，“赏”字依然是粗体。【提示】在HTML4.01中，<u>标签不被赞成使用。HTML5不支持<u>标签。【学生】聆听、记录、理解2.5.9预留字符的使用【教师】讲解预留字符的使用与示例【课堂互动】✈【教师】提问HTML中预留字符有什么作用？✈【学生】聆听、思考、回答在HTML文档中，可以直接使用键盘输入多个空格键，但是在浏览器显示的网页上最多只显示一个空格。要想在网页中显示多个空格，可以使用HTML中的预留字符 。在HTML文档中输入该预留字符，在网页中便可显示出空格，而且使用多个 可以在网页中显示连续的空格（英文空格）。【示例2-5-9】在【示例2-5-5】的基础上，编辑HTML文档<body>标签的内容，即在第一个段落中添加4个预留字符 。代码如下：<palign="center">美文    欣赏</p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论