第2章 HTML构建基本网页-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第2章 HTML构建基本网页 计划学时 4学时 内容分析 本章介绍了构建网页的基本标签，<hn>标题标签、<br>换行标签、<hr>水平线标签、<p>段落标签、<img>图片标签、<a>超链接和<div>块元素的使用方法 教学目标 与 教学要求 【知识目标】 1. 了解HTML常用的基本标签 2. 了解<div>块元素的特点 3. 认识超链接的4种常用伪类 【技能目标】 1. 掌握<hn>标题标签、<hr>标签、<br>标签的应用 2. 掌握<a>标签的多种跳转功能 3. 熟练使用<p>标签和<img>标签 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握<p>段落标签、<img>图片标签、<a>超链接和<div>块元素的使用 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （认识<h1>至<h6>标签、<p>标签、<br>标签） 一、提出需求，导入学习任务 （1）思考如何构建一个基本网页。 · 标签是构建HTML网页的重要元素，而了解并正确使用标签是十分重要的。 · HTML网页常用的标签有段落标签、超链接标签、图片标签、块元素等。段落标签用于显示网页中的文本内容，超链接标签可以实现网页之间的跳转，图片标签可在网页中嵌入图片，块元素能对网页内容进行分类分组处理，用于网页的布局。 （2）明确学习方向。 · 认识并掌握<h1>至<h6>标签、<p>标签、<br>标签 二、知识讲解 （一）标题标签 1.定义 标题是由<h1>至<h6>标签定义，<h1>定义最大的标题，依次递减，<h6>定义最小的标题，浏览器会自动在标题的前后添加空行。 标题标签的语法格式如下所示。 <h1>标题文字</h1> 2.作用 标题能够体现文档结构，搜索引擎通过标题能为网页的结构和内容编制索引，用户可通过标题来快速浏览网页。 3.演示说明 使用<h1>至<h6>标签定义标题。 （二）段落标签 1.定义 段落是通过<p>标签来定义的，用于在网页中将文本内容有条理地显示出来。段落标签语法格式如下所示。 <p>段落文字</p> 2.演示说明 使用<p>标签定义一个段落。 （三）换行标签 1.定义 <br>换行标签可在文本中生成一个换行（回车）符号，它是一个空元素，也是一个单标签，不能在里面写内容。在写诗句文本和地址时，换行是十分适用的。换行的语法格式如下所示。 <p>内容<br>内容</p> 2.演示说明 使用<br>标签设置段落中的文本换行。 （四）案例讲解 讲解秋天的故事案例。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第二学时 （认识<img>标签） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 了解图片的绝对路径和相对路径 · 掌握<img>标签的属性用法 二、知识讲解 （一）图片标签 1.定义 在HTML中图片是由<img>标签定义的，图片标签属于单标签，没有闭合标签，并且是一个空元素，只包含属性，不包含文本内容。图片标签表示向网页中嵌入一张图片，创建的是引用图像的占位空间。 图片标签的语法格式如下所示。 <img src=”图片文件地址” alt=”提示文本”> 2.标签属性 （1）src属性 src属性在<img>标签中是必须存在的，引用要嵌入的图片的路径，这个路径可以是相对路径，也可以是绝对路径。相对路径是被引入的文件相对于当前页面的路径；绝对路径是文件在网络或本地的绝对路径。 · 相对路径 · 绝对路径 （2）alt属性 alt为文本提示属性，用户可为图像定义一串预备的可替换的文本，它的值是对图片的文字进行描述，用于图片无法显示或不能被用户看到的情况。若图片正常显示，则看不到任何效果；若图片无法显示或不能被用户看到，则显示出提示文本。 （3）title属性 title属性是鼠标移到图片上的提示文字。设置title属性后，若鼠标移入到图片上，则会显示出title里的提示信息。 （4）width属性和height属性 width属性为宽度属性，height属性为高度属性，可分别用于设置图片的宽度和高度，属性值常用单位为像素（px）。 3.演示说明 使用<img>标签在网页中嵌入一张图片。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第三学时 （<hr>标签、<div>块元素） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （