版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
XXX学校
课程名称Web前端开发授课时间第1周
第1章初识HTML5
授课章节
第2章HTML基础
1.了解web的由来以及其与Internet之间的关系。
2.了解web的相关概念，包括WWW、Website,URL、Web
Standard、WebBrowserWebServer。
知识目标
3.了解HTML的历史。
4.精通HTML的结构。
教学目的
5.了解全局属性。
1.会下载安装开发工具，
技能目标2.会使用浏览器浏览HTML文件，
3.会编写简单的网页
教学重点Web相关概念,HTML的结构。
教学难点HTML的结构
教学方法案例讲解法，演示法
教具计算机，多媒体
教学过程设计
（含时间分配）
第一、二课时
（讲解web的由来以及其与Intemet之间的关系，讲解Web相关概念）
1本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
什么是web?了解Web的诞生
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
•Internet,中文正式译名为因特网，又叫作国际互联网，是由所有使用公用语
言互相通信的计算机连接而组成的全球网络。一旦连接到它的任意一个节点，
就意味着计算机或者其他设备已经连入Internet.目前，Internet的用户已
经遍及全球，截止到2018年，已经有超过40亿人在使用Internet,并且它的
用户数还在以等比级数上升。
•Internet的前身是美国国防部高级研究计划局(AdvancedResearchProjects
Agency,ARPA)主持研制的ARPANET网络，当时建立这个网络是为了将美国的
几台军事和研究用的计算机主机连接起来。ARPANET网络于1969年正式启用，
但当时仅连接了4台计算机，供科学家们进行计算机联网实验使用。
令知识点讲解
＞讲解“Intemet常用的服务”
⑴、E-mail：电子邮件,具有速度快、成本低、方便灵活等优点，是目前Internet
的重要服务项目之。
(2)、FTP：文件传输，用户通过该协议可以进行文件传输或者文件访问。由于安
全问题，其使用场景也越来越少。
(3)、BBS：电子公告，最早是用来公布股市价格等类信息的，现在的BBS已经发
展成功能齐全的社区，可以实现信息公告、线上交谈、分类讨论、经验交流、文件共
享等。
(4)、www：WorldWideWeb,中文名为万维网，也被称为Web,是Internet中
发展最迅速的部分。
(5)、Web是Internet的一个应用。它的诞生也是极其富有戏剧性的。
＞讲解“web的相关概念”
(1)、www,worldwideweb的缩写，也可写为w3、web,中文名为万维网。www
是Internet的最核心部分。它是Internet上那些支持www服务和HTTP协议的服务器
集合。
(2)、Website中文名为网站，是指在Internet上根据一定的规则，使用HTML
等工具制作的用于展示特定内容相关网页的集合。人们可以通过网站发布自己想要公
开的资讯，或者利用网站提供相关的网络服务。
(3)、URL,UniformResourceLocator的缩写，中文名为统一资源定位符，俗
称网址，它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是
互联网上标准资源的地址。在WWW上浏览或者查询信息，必须在网页浏览器上输入查
询目标的地址。
URL的一般格式如下：
协议:〃主机地址(IP地址)+目录路径+参数。
(4)、web应用开发需要遵循的标准就是WebStandard(web标准),这里web
标准是一系列标准的集合。网页主要由三部分组成：结构标准(XML、HTML和XHTML),
表现标准(CSS),行为标准是(DOM、JavaScript)。
(5)、web浏览器，简称浏览器，是一个显示网页服务器或者档案系统内的HTML
文件，并让用户与这些文件互动的软件。第一个网页浏览器就是TimBerners-Lee编
写的WorldWideWeb,后改名为Nexus。主流浏览器如下图所示：
图1主流浏览器
(6)、Web服务器的主要功能是提供网上信息浏览服务。Web服务器可以解析HTTP
协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，这样客户端就
可以从服务器上获取网页(HTML),包括CSS、JavaScript,音频、视频等资源。
(7)、学生自主提问，教师对疑难问题进行解答。
＞讲解"web开发”
目前，Web开发主要分为前端和后端两部分。前端指的是直接与用户接触的网页，
网页上通常由HTML、CSS、JavaScript等内容；后端指的是程序、数据库和服务器层
面的开发。
阶段小结
＞小结
本章简单介绍了Internet的历史和Web的诞生，重点介绍了Web的相关概念,
包括www、Website、URL、web标准、web的浏览器、Web服务器。同时、明确
了web前端开发需要掌握的内容，包括HTML、CSS、JavaScripto
>答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
第三课时
（讲解HTML基础）
1复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、目前，对HTML5新特性支持最好的浏览器是（）。
A、IE6浏览器；B、Firefox3.6浏览器
C、OperalO.1浏览器；D、chrome4.0浏览器
答案：D
谷歌浏览器对HTML5及CSS3的兼容性支持较好，而且调试网页非常方便，所以在HTML5
网页制作过程中谷歌浏览器是最常用的浏览器。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入
本课时新内容的学习。
1本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求
一样。HTML5标记语言也不例外，同样需要遵从一定的规范。请大家讨论下：使用
Dreamweaver新建HTML5默认文档时，HTML5文档的基本格式包括哪些标记？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
•<!DOCTYPE>标记
VDOCTYPE〉标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或
XHTML标准规范。
•标记
标记位于。doctype>标记之后，也称为根标记，用于告知浏览器其自身是一个
HTML文档。
•<head>标记
〈head〉标记用于定义HTML文档的头部信息，也称为头部标记。
•<body>标记
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。
令知识点讲解
>讲解“标记语言”
(1)标记语言，是一种将文本(Text)以及与文本相关的其他信息结合起来，
展现出关于文档结构和数据处理细节的电脑文字编码。
(2)标记语言的种类有很多，常见的有XML、HTML、XHTML等。
>讲解“从HTML到XHTML”
HTML,超文本标记语言(HyperTextMarkupLanguage,HTML),是为“网页创
建和其他可在网页浏览器中看到的信息”设计的一种标记语言。人们可以使用
HTML建立自己的Web站点。HTML文档在浏览器上运行，并由浏览器解析。
•HTML(第1版)：1993年6月作为互联网工程工作小组(IETF)工作草案发布，
这个版本没有标准版本，主要是因为当时有很多版本的HTML,没有形成一个统
一的标准，所以没有正式的HTMLl.Oo
•HTML2.0：1995年11月作为RFC1866发布。
•HTML3.2：1997年1月14日，W3c推荐标准，这是第一个被广泛使用的标准。
由于该版本年代较早，很多东西都已经过时，在2018年3月15日被取消作为
标准。官方文档地址为
https:〃www.w3.org/TR/2018/SPSD-html32-20180315/。
•HTML4.0：1997年12月18日，W3C推荐标准。
•HTML4.01:1999年12月24日，W3c推荐标准，这也是另一个被广泛使用的
标准。官方文档地址为https：//www.w3.org/TR/1999/REC-html401T9991224/
•XHTML1.0：2000年1月26日，W3c推荐标准。官方文档地址为
https:〃www.w3.org/TR/2000/REC-xhtmll-20000126/。
,XHTML,可扩展超文本标记语言(extensibleHyperTextMarkupLanguage,
XHTML),是一种更纯洁、更严格、更规范的HTML代码。
>讲解“HTML5文档基本格式”
(1)、教师通过Dreamweaver工具新建默认文档，并指出默认文档中会自带一些源代
码。
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
〈5口0>无标题文档<八五16>
</head>
<body>
</body>
</html>
(2)、教师分析自带的源代码，讲解HTML5文档的基本格式及构成标记。
(3)、教师让学生自行尝试，理解<!D0CTYPE>文档类型声明、<html>根标记、<head>
头部标记、<body>主体标记的语义及用法。
(4)、学生练习，教师巡视，对疑难问题进行解答。
>讲解“HTML语法”
(1)、教师展示PPT对“HTML语法”进行简单介绍。
(2)、教师展示PPT,对“HTML语法”规则进行分析，并与之前的各种版本进行对比
分析。
(3)、教师针对HTML语法中的“标签不区分大小写、允许属性值不使用引号、允许
部分属性值的属性省略”通过代码演示，并举例说明。
(4)、学生自主提问，教师对疑难问题进行解答。
>讲解“HTML标记”
(1)、教师展示PPT对“单标记与双标记”、“注释标记”的概念进行讲解，并指出
“单标记与双标记”的不同。
(2)、教师举例说明常见的单标记、双标记以及注释标记。
(3)、教师通过代码对“单标记与双标记”、“注释标记”的使用方法进行演示。
(4)、学生练习，教师巡视，对疑难问题进行解答。
＞讲解“标记的属性”
(1)、教师和学生互动：在网页制作时，如果大家想要控制标记的样式，比如：希望
标题文本的字体为“微软雅黑”且居中显示，或者段落文本中的某些名词颜色突出显
示等问题。此时仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用
“HTML标记的属性”进行控制。
(2)、教师展示PPT对“标记的属性”进行讲解，并使用代码进行实时演示。
(3)、学生练习，教师巡视，对疑难问题进行解答。
＞讲解“HTML文档头部相关标记”
(1)、教师展示PPT对“HTML文档头部相关标记”进行讲解。
(2)、教师分别对〈title＞标记、＜meta/＞标记、＜link＞标记及〈style〉标记的基本语
法格式进行讲解，并进行代码演示。
(3)、学生练习，教师巡视，对疑难问题进行解答。
令阶段小结
＞小结
重点：HTML语法、HTML标记、标记的属性。
＞答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
＞通过''补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相
关知识点进行巩固。
令布置作业
＞完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
＞预习2.2节【全局属性】。
第四、五课时
(讲解全局属性、HTML主体元素、无语义元素、标题元素和段落元素)
，复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、简要描述“HTML5语法”，并举例说明“HTML5语法”相对于以前的语法格式有哪
些新变化?
答案：
•标签不区分大小写
HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。
例如：
＜p＞这里的p标签大小写不一致＜/P＞
在上面的代码中，虽然p标记的开始标记与结束标记大小写并不匹配，但是在HTML5
语法中是完全合法的。
•允许属性值不使用引号
在HTML5语法中，属性值不放在引号中也是正确的。例如：
＜inputchecked=atype=checkbox/＞
＜inputreadon1y=readon1ytype=text/＞
以上代码都是完全符合HTML5规范的，等价于：
＜inputchecked="a"type="checkbox"/＞
＜inputreadon1y="readon1y"type="text"/＞
•允许部分属性值的属性省略
在HTML5中，部分标志性属性的属性值可以省略。例如：
＜inputchecked="checked"type="checkbox"/＞
＜inputreadonly="readonly"type="text"/＞
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入
本课时新内容的学习。
1本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
我们知道，一篇结构清晰的文章通常都有标题和段落，那么如何使用HTML5语言创建
网页中的标题和段落呢？
教师对上述问题进行解释：
•为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML5提供了
6个等级的标题，即＜hl＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞和＜h6＞,从〈hl＞到＜h6＞重
要性递减。其基本语法格式如下：
＜hnalign="对齐方式"＞标题文本＜/hn〉
该语法中n的取值为1到6,align属性为可选属性，用于指定标题的对齐方式。
•同样地，网页也可以分为若干个段落，而段落的标记就是＜p＞。默认情况下，
文本在段落中会根据浏览器窗口的大小自动换行。〈p＞是HTML文档中最常见的
标记，其基本语法格式如下：
＜palign="对齐方式"＞段落文本＜/p＞
该语法中align属性为＜p＞标记的可选属性，和标题标记＜hl＞~〈h6＞一样，同样可以使
用align属性设置段落文本的对齐方式。
令知识点讲解
＞讲解”标题和段落标记”
（1）、教师展示PPT对“标题标记"、“段落标记”的概念及基本语法格式进行
讲解。
（2）、教师对“标题标记”、“段落标记”的显示效果通过代码进行演示。
（3）、教师分别对“标题标记”及“段落标记”的align属性进行讲解并通过代码进
行演示。
（4）、学生练习，教师巡视，对疑难问题进行解答。
第六课时
（制作简单的文字页面）
综合运用所学标签，制作一个简单的页面，并提交，进行作品互评。
心得
作业
备注
XXX学校
课程名称Web前端开发授课时间第2周
授课章节第2章HTML基础
了解HTML的注释方法；
知识目标掌握HTML的格式化元素；
教学目的
掌握HTML的图片元素和超链接元素
技能目标1.会制作包含图片和超链接的HTML5百科页面
HTML5语法、HTML5标记及其属性、文本控制标记、图像标记、超链接标
教学重点
记
教学难点HTML5标记及属性、图像标记、超链接标记
教学方法案例讲解法，演示法
教具计算机，多媒体
教学过程设计
（含时间分配）
第一课时
（讲解注释元素、格式化元素）
＞讲解“注释元素”
（1）＜!---〉用于HTML中插入注释，它的开始标签为结束标签为一〉，开始
标签和结束标签不一定在一行，也就是说，可以写多行注释。浏览器不会显示注释。
＞讲解“文本格式化元素”
（1）、教师和学生互动：使用“HTML标记的属性”可以设置文本的对齐方式、颜色等，
那么，如果想要为文字设置粗体、斜体或下划线效果需要怎么办呢？下面，我们来学
习”文本格式化标记”。
（2）、教师展示PPT对“文本格式化标记”进行讲解，并使用代码进行实时演示。
（3）、学生练习，教师巡视，对疑难问题进行解答。
＞讲解“特殊字符标记”
（1）、教师和学生互动：浏览网页时常常会看到一些包含特殊字符的文本，如数学公
式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？下面，我们来
学习特殊字符标记。
（2）、教师展示PPT对“常用特殊字符标记”进行讲解，分析“字符标记”的构成，
并使用代码进行实时演示。
（3）、学生练习，教师巡视，对疑难问题进行解答。
令阶段小结
＞小结
重点：段落标记、文本格式化标记。
＞答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
令巩固练习
＞巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生掌握段落标
记、文本格式化标记、特殊字符标记的使用。
＞通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相
关知识点进行巩固。
令布置作业
＞完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
＞预习1.4节【图像标记】。
第二、三课时
（讲解常用图像格式、图像标记＜img/＞、绝对路径和相对路径）
说明：
将1.4小节作为两个课时进行讲解。
1复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、在上节课中，我们学习了文本格式化标记。那么，在文本格式化标记中，如何将文
字设置为粗体呢？
答案：
将文字以粗体方式显示的标记是：＜b＞标记或〈strong》标记。其中，使用＜b＞标记定义
文本粗体，〈strong〉标记定义强调文本。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入
本课时新内容的学习。
1本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在网站中，我们可以看到绚丽多彩的图片。那么，目前网页上常用的图像格式有哪些
呢，请结合它们的优缺点进行说明？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
目前网页上常用的图像格式主要有GIF、JPG和PNG三种，具体区别如下：
•GIF格式
GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式。另外，GIF支
持透明(全透明或全不透明)，因此很适合在互联网上使用。但GIF只能处理256种
颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。
•PNG格式
PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF,PNG最大的优势是体
积更小，支持alpha透明(全透明，半透明，全不透明)，并且颜色过渡更平滑，但
PNG不支持动画。
•JPG格式
JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但
是JPG是一种有损压缩的图像格式，网页制作过程中类似于照片的图像比如横幅广告
(banner)、商品图片、较大的插图等都可以保存为JPG格式。
简而言之，在网页中小图片或网页基本元素如图标、按钮等考虑GIF或PNG-8,半透明
图像考虑PNG-24,类似照片的图像则考虑JPGo
令知识点讲解
＞讲解“常用图像格式”
(1)、教师带领学生查看网页中的图像，总结网页中常用的图像格式。
（2）、教师展示PPT对GIF、JPG和PNG三种常用的图像格式进行讲解，比较三种格
式的异同，并指出其优缺点。
（3）、学生提问，教师对疑难问题进行解答。
＞讲解“图像标记＜img/＞”
（1）、教师和学生互动：在网页中随处可见各种各样的图像，比如：广告图、推广图、
轮播图等。大家在网页中都见过哪些图片呢？然后，教师使用PPT展示网页中各式各
样的图片效果。
（2）、教师展示PPT对''图像标记”及其属性进行讲解，并使用代码进行实时演示。
（3）、学生练习，教师巡视，对疑难问题进行解答。
＞讲解“绝对路径和相对路径”
（1）、教师通过文件夹的层级关系对“路径”进行讲解，并指出网页中的路径通常分
为“相对路径与绝对路径”两种。
（2）教师展示PPT对“绝对路径”进行讲解，并举例说明。
（3）、教师展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的
不同位置进行演示。
（4）、学生提问，教师对疑难问题进行解答。
说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师
巡视，对疑难问题进行解答。
令阶段小结
＞小结
重点：图像标记。
＞答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
令巩固练习
＞巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌
握图像标记Cimg/＞的使用，并能够区分图像的相对路径与绝对路径的不同。
＞通过''补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相
关知识点进行巩固。
＜布置作业
＞完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
＞预习【超链接标记】。
预习【阶段案例一制作HTML5百科页面】。
第四课时
（讲解创建超链接、锚点链接）
，复习上节课内容
对新课进行讲解前，先让学生分组讨论以下问题：
1、在上节课中，我们学习了图像标记＜img/＞及其〈img/＞标记的属性。那么，请简要
说明：图像的alt属性的用法？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
在浏览网页时，我们可以发现由于一些原因图像可能无法正常显示，比如图片加载错
误，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像
无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。
工本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
当我们打开一个网站时，例如传智播客官网"http:〃www.itcast.cn/”,通过点击页
面中的导航或者带有链接地址的文字就可以跳转到不同的页面，那么如何实现网站中
的页面跳转呢？
教师对上述问题进行解释：
超链接虽然在网页中占有不可替代的地位，在HTML5中创建超链接非常简单，只需用
＜a＞＜/a＞标记环绕需要被链接的对象即可，其基本语法格式如下：
＜ahref="跳转目标"target="目标窗口的弹出方式"》文本或图像＜/a＞
在上面的语法中，＜a＞标记是一个行内标记，用于定义超链接，href和target为其常
用属性，具体解释如下：
•href：用于指定链接目标的url地址，当为＜a＞标记应用href属性时，它就具
有了超链接的功能。
•target：用于指定链接页面的打开方式，其取值有_self和」3加成两种，其中
self为默认值，意为在原窗口中打开，blank为在新窗口中打开。
令知识点讲解
＞讲解“创建超链接”
(1)、教师和学生互动：教师打开百度新闻网址http:〃news,baidu.com/,点击
页面中的导航文字，就可以跳转到相应的页面，这就是通过给文字创建超链接来实现
的。教师组织学生讨论：如何通过超链接实现页面中的跳转呢？
Bai好新闻百度一下
A■页0内国际军事财is蟆乐体。互联网科技游戏女人汽车，产
热点要闻
•今年清明节，请帮这100位烈士寻亲
■年轻夫妻的绝笔信为谁而写英雄母亲邓玉芬
・一纸繁花I千年古法造纸做活花茂乡村振兴
・全国公安系统清明主题云诗会4日全网播出
•绿水•山这样”变现"
•为子孙后代呵护美好家园
•正片来了！《暗流涌动冲国新儡反恐挑战》播出
•访杨豕岭革命旧址:讲好党史故事让红色基因代代科专
•深圳大学：为双区健设培养高质■的创新创业人才
•党建弓I领揖州金沙接短惟进乡村16兴
•花茂忖：土陶技艺传承人母先才用1M守•乡秋
(2)、教师针对超链接的作用以及基本语法格式进行讲解，并进行演示说明。
(3)、教师展示PPT对“创建超链接”进行讲解，并使用代码进行实时演示。
(4)、学生练习，教师巡视，对疑难问题进行解答。
＞讲解“锚点链接”
(1)、教师和学生互动：如果网页内容较多，页面过长，浏览网页时就需要不断
地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。那么如何提高信息的
检索速度呢？HTML5语言提供了一种特殊的链接一一锚点链接，用户能够快速定位到目
标内容。
(2)、教师针对“锚点链接”的作用及创建方法进行讲解，并进行演示说明。
(3)、教师对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。
(4)、学生练习，教师巡视，对疑难问题进行解答。
台阶段小结
＞小结
重点：创建超链接、锚点链接。
＞答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
令巩固练习
＞巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌
握创建超链接、锚点链接的方法，并能够通过创建超链接、锚点链接来实现页面间的
跳转。
＞通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相
关知识点进行巩固。
第五课时
（讲解制作图文混排的超链接页面）
＞案例实现
教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面、制作页面链
接等步骤完成页面的制作，并指出其中需要注意的事项。
说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师
巡视，对疑难问题进行解答。
＞通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例
对相关知识点进行巩固。
令布置作业
＞完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
＞复习本课时的所有知识点和案例，加强巩固。
第六课时
（上机测试）
教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点
的掌握情况。测试完成后将作品通过平台提交给老师。
上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出
错的操作步骤。
（作品点评）
教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，
并给与解答，同时将自己的作品上传到学习通的讨论区。
心得
作业
备注
XXX学校
课程名称Web前端开发授课时间第3周
授课章节第2章HTML基础
1.掌握结构元素的使用，可以使页面分区更明确。
2.理解分组元素的使用，能够建立简单的标题组。
3.掌握表格元素。
知识目标
教学目的4.掌握HTML表单元素
5.理解HTML框架元素。
6.了解HTML的预留字符串
技能目标熟练使用常用标签编写网页
教学重点列表元素、表格元素
教学难点分组元素、表格元素
教学方法案例讲解法，演示法
教具计算机，多媒体
教学过程设计
（含时间分配）
第一课时
（讲解U1元素、01元素、dl元素、列表的嵌套应用）
，复习上节课内容
对上节课的内容进行复习提问
工本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论关于列表的问题，并请小组代表对以上问题发表见解。
教师对上述问题进行解释：
•无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为
并列关系，没有顺序级别之分。如下图：
•今年清明节，请帮这100位烈士寻亲
■年轻夫妻的绝笔信为谁而写英雄母亲邓玉芬
-一纸繁花I千年古法造纸做活花茂乡村振兴
■全国公安系统清明主题云诗会4日全网播出
•绿水青山这样"变现"
•为子孙后代呵护美好家园
■正片来了！《暗流涌动-中国新疆反恐挑战》播出
•访杨家岭革命旧址：讲好党史故事让红色基因代代相传
•深圳大学：为双区建设培养高质量的创新创业人才
•党建弓I领贵州金沙接续推进乡村振兴
•花茂村：土陶技艺传承人母先才用土陶守“乡愁”
•传好脱贫攻坚接力棒开启乡村振兴新征程
•重磅！掌舵长春两年，王凯回到了家乡河南
•孙大光被任命为南宁市副市长、代理市长
•有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如下图。
百度热榜0换一换
1云南新增4例本土确诊病例489万
2新疆反恐纪录片:有厅官接触暴恐头目471万
3直播:台铁列车脱轨事故救援现场455万
4教育部力浮生每日睡眠应达10小时439万
5我国每68名孩子中约有1名患自闭症424万
6离开北上广去农村即409万
7台铁脱轨列车上多为清明扫皇民众394万
8王凯任河南副省长、代理省长381万
9罗永浩称6亿债务年底还完367万
10瑞丽急需流调人员和缅语翻译354万
•无序列表使用标记定义，为具体的歹I」表项。有序列表使用标记
定义，为具体的列表项。
令知识点讲解
>讲解“3元素”
(1)、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说
明。
(2)、教师展示PPT,对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码
演示。
(3)、教师指出定义“无序列表”时需要注意的问题，并给与解答。
(4)、学生练习，教师巡视，对疑难问题进行解答。
>讲解“。1元素”
(1)、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT,对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码
演示。
（3）、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系。
（4）、教师指出定义“有序列表”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
>讲解“dl元素”
（1）、教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT,对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码
演示。
（3）、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系。
（4）、教师指出定义“定义列表”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
令阶段小结
>小结
重点：3元素、ol元素、dl元素、列表的嵌套应用。
>答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释.
令巩固练习
>巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解无序列表、有序
列表、定义列表的不同，并能熟练地应用ul元素、ol元素、dl元素搭建列表结构以及列表的
嵌套应用。
>通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点
进行巩固。
>使用列表元素制作招聘页面
第二课时
（讲解表格元素）
，复习上节课内容
复习上节课内容，请小组代表对以上问题发表见解。
答案：
•定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表
项前没有任何项目符号。
定义列表使用<dl></dl>、<dt></dt>和<dd></dd>进行定义，其中，<dt></dt>标记用于指定术语
名词，<dd></dd>标记用于对名词进行解释和描述。一对<dt></dl>可以对应多对<dd></dd>,即
可以对一个名词进行多项解释。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新
内容的学习。
X本课时内容学习
>讲解“表格基本结构”
表格由一行或多行单元格组成，应用表格可以让数据展现更有条理。例如，要展现一组企业员
工通讯录，通讯录包括员工名称、电话、电子邮件、职务四项，就可以使用多行四栏的表格来展现
企业员工通讯录。HTML表格元素使用table标签，表格元素的所有内容都放置在table的起始标签
和结束标签内，表格的行元素使用tr标签，一对tr标签（标签的起始标签和结束标签称为一对标
签）表示表格的一行。表格的单元格放置在tr标签内，单元格又分为表头（表格的开头部分）和表
格单元格（表格的主体部分），表头使用th标签，表格单元格使用td标签。基本表格结构如下。
<table>
<tr>
<th></th>
</tr>
<tr>
表格单元格
〈竹〉表格单元格n</td>
</tr>
<tr>
表格单元格
<匕二>表格单元格n〈/t二）
</tr>
</table>
假如有下面的企业员工通讯录（张三，电话，邮件，研发工程师）、（王二，电话，邮件，研
发经理）、（李四，电话，邮件、研发工程师），企业员工通讯录可以使用HTML表格元素来展现。
<html>
<head>
企业员工通讯录
</head>
<body>
<卜”企业员工通讯录</hl>
<hr>
<tr>
<th>姓名</tn〉
<”>龟话</th>
电字邮件</th>
<th>职务</tR>
</tr>
<tr>
<td>张三</td>
<td>lt;/td>
<td></t=>
<td>研发工程加
</tr>
<tr>
<td>王二</td>
<td>16589012689</td>
<t-i></td>
<">研发经速</：w>
</tr>
<tr>
<td>李四〃td>
<td>1723Qei9065</td>
<td>lisi^l63.co«n</td>
<td>研发工程师</td>
</tr>
</tabl«>
</boyd>
从浏览器显示效果可以看出，表格为四行四列，第一行为表头，使用tr标签，tr标签内的单元
格使用th标签，标签间的内容为黑体字体起到强调的作用；第二、三、四行为表格主体，也使用
tr标签，tr标签内的单元格使用td标签，标签间的内容为普通字体。
但显示的表格有个缺点，栏与栏之间，行与行之间没有表格线，整个表格结构不是很清晰。可
以在table标签内添加属性boder来设置表格线，border的值为表格线的宽度，单位为百分数或像
素。在前面HTML文档的table标签添加border属性，属性的值为1像素，并预览效果。
<tableborder="l">
A讲解“表格栏间距离（cellspacing）
表格栏间距离是指表格栏与栏之间的距离，table标签的cellspacing属性用于设置表格栏之间
的距离,cellspacing属性的值可以是百分数或像素。在前面HTML文档的table标签添加cellspacing
属性，属性的值为20像素，并预览效果。
＞讲解“如何设置表格宽度”
前面的table标签没有设置表格宽度，表格宽度就是表格中每一列宽度的总和，列的宽度由单
元格的内容和cellpadding属性来确定。可以在table标签中添加width属性来设置表格的宽度，单
位为百分数或像素。在前面HTML文档的table标签添加width属性，属性的值为1000像素。，
并预览效果。
＞讲解“表格单元格内容对齐属性”
表格单元格内容对齐属性分为水平对齐和垂直对齐两种方式。水平对齐又分为左对齐、居中对
齐、右对齐和两端对齐；垂直对齐又分为上对齐、中对齐、底对齐。表格单元格内容对齐属性可以
应用于tr标签、th标签和td标签。
水平对齐属性为align,常用值为left（左对齐）、center（居中对齐）、right（右对齐）,justify
（两端对齐）.
垂直对齐属性为valign,常用值为top（上对齐）、middle（中对齐）、bottom（底对齐）。
上图中的表格改变宽度后，单元格内容没有在水平方向上居中对齐，在tr标签添加align属性，值
为center。
在企业员工通讯录中的tr标签添加align属性后，在浏览器显示。
＞讲解“表格的行合并与栏合并”
前面介绍的表格都是由简单的行和列组成的，如果要展现一些复杂的表格就难以胜任了。例如
下面的表格：
销售统计表
商品名称用途价格金祕（元）
商品A3*1545
办公
商品B1*3030
合计75
网页要展现上述表格就需要用到表格的行合并属性与栏合并属性。行合并属性用于一个单元格
跨越多行，通常使用在td和th标签中，属性为rowspan；栏合并属性用于一个单元格跨越多栏，
通常使用在td和th标签中,属性为colspan。
＞讲解“＜tbody＞、＜thead＞、＜tfoot＞M元素
第三课时
(讲解表单元素)
1复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、下列选项中，属于input控件的有哪些？()
A、单行文本输入框
B、单选按钮
C、复选框
D、提交按钮
答案：ABCD
答案解析：input控件包括单行文本输入框、单选按钮、复选框、提交按钮、重置按钮
等。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入
本课时新内容的学习。
1本课时内容学习
令分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
浏览网页时，经常会看到包含多个选项的下拉菜单，例如选择所在的城市、出生年月、
兴趣爱好等。那么，如何使用表单元素创建下拉菜单效果呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
在表单中，使用select控件可以定义下拉菜单效果。其中，〈selectX/select〉标记
用于在表单中添加一个下拉菜单，<(^1:1.011〉</(^1:1,011>标记嵌套在<5010(^></select>
标记中，用于定义下拉菜单中的具体选项，每对<selectX/select>中至少应包含一对
<optionX/option>o
令知识点讲解
>讲解"textarea元素”
(1)、教师通过PPT对“textarea元素”定义的多行文本输入框效果进行展示。
(2)、教师对textarea元素的基本语法格式进行讲解，并进行代码演示。
(3)、教师对textarea元素的常用属性进行讲解，并进行代码演示。
(4)、教师指出应用“textarea元素”时需要注意的问题，并给予解答。
(5)、学生练习，教师巡视，对疑难问题进行解答。
＞讲解“select元素”
(1)、教师通过PPT对“select元素”定义的下拉菜单效果进行展示。
"在校区:所在校区:
「请选择-二］
-请选择-
提交I
(2)、教师对使用select元素定义下拉菜单的基本语法格式进行讲解，并进行代码
演示。
(3)、教师对select元素的常用属性进行讲解，并进行代码演示。
(4)、教师指出应用“select元素”时需要注意的问题，并给予解答。
(5),教师对如何使用Dreamweaver工具生成表单控件进行讲解，并通过Dreamweaver
工具进行演示。
＞讲解“input标签属性”
第四课时
(讲解框架元素、预留字符)
•框架结构标签(＜frameset＞)
A框架结构标签(＜frameset＞)定义如何将窗口分割为框架
A每个frameset定义了一系列行或列
Arows/columns的值规定了每行或每列占据屏幕的面积
•框架标签(Frame)单标签，其属性见下图。
注意：不能将＜body＞＜/body＞标签与＜framesetx/frameset＞标签同时使用！不过，假如你添
加包含一段文本的＜noframes＞标签，就必须将这段文字嵌套于＜bodyx/body＞标签内。
Frame对象的属性
属性
描述j
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- GB/T 44890-2024行政许可工作规范
- YC/T 620-2024烟草零售客户满意度调查规范
- 2025版净化车间工程绿色施工管理合同3篇
- 2024年度大数据与云计算战略联盟协议书范本3篇
- 2024年车贷还款计划表3篇
- 2025版建筑工地临时工劳动合同模板3篇
- 建筑工程财务结算承诺书
- 交通工具报废更新管理办法
- 电商配送司机招聘合同样本
- 门店市场调研数据创业
- 2024年人教版小学三年级科学(上册)期末试卷及答案
- 大学期末考试《电路理论》试卷及答案解析
- 2024年天津市中考英语试题卷（含答案）
- 2024-2034年中国皮带输送机托辊行业发展趋势及投资前景预测报告
- FZ∕T 73037-2019 针织运动袜行业标准
- 经典导读与欣赏-知到答案、智慧树答案
- （图文并茂）绿化工程施工组织设计
- 《居里夫人的故事》阅读测试题及答案
- MOOC 生物医学传感器与测量-山东大学 中国大学慕课答案
- 上海市民办华育中学2022-2023学年六年级上学期期末科学试卷
- 食品安全与卫生智慧树知到期末考试答案2024年
评论
0/150
提交评论