《web前端技术》(赵敏)003-0教案 第2课 HTML5

PAGE1PAGE1PAGE2PAGE2

课题第2课HTML5基础课时2课时（90min）教学目标知识技能目标：（1）掌握HTML5的基本语法（2）熟悉HTML5的文档结构（3）熟悉HTML5的结构标签素质目标：（1）掌握HTML5的基础知识，培养代码规范意识（2）实战演练加持，提升实践动手能力教学重难点教学重点：HTML5的基本语法教学难点：HTML5的结构标签教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（28min）→课堂讨论（10min）第2节课：→传授新知（20min）→实战演练（15min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家从网络找到HTML5的网页文件和HTML文件进行对比，查看其区别，说说HTML5的优点【学生】完成课前任务通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：网页上为什么有<html>…</html>、<br/>不同样式的标签，他们的区别在哪里？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）2.1HTML5的基本语法2.1.1初识标签【教师】讲解标签的概念在HTML5文档中，标签是由一对尖括号（“<”和“>”）括起来的关键词。大部分标签都是成对出现的，称为双标签；也有少数标签是单独出现的，称为单标签。（1）双标签的基本语法格式为：……（详见教材）【提示】✈【教师】提出问题在HTML5文档中，标签区分大小写么？✈【学生】讨论、回答✈【教师】打开HBuilderX的一个工程文件，将一个标签小写改为大写，例如“<P>标签的大小写</p>”，运行程序，演示结果并讲解在HTML5文档中，标签不区分大小写。例如，“<P>标签的大小写</p>”在HTML5中是合法的。但是，一般不建议这样写，而是统一小写。✈【学生】聆听、记录、理解（2）单标签也称空标签，基本语法格式为：……（详见教材）【学生】聆听、记录、理解【课堂拓展】✈【教师】提出问题在HTML5文档中，“/”是否可以省略？✈【学生】讨论、回答✈【教师】打开HBuilderX的一个工程文件，删除一个单标签中的“/”，演示结果兼讲解单标签中的“/”可以省略。但是从长远来看，应该养成正确关闭单标签的习惯，因此建议使用单标签时加上“/”。✈【学生】聆听、记录、理解✈【教师】讲解拓展知识在HTML5文档中，还有一个人们常常提到的概念——元素，它是指从开始标签到结束标签的所有内容。通常情况下，“标签”和“元素”所指的内容是一样的。例如，<p>标签和p元素都是指内容“<p>段落</p>”。因此，一般不对这两个概念做具体区分。✈【学生】聆听、记录、理解2.1.2标签的属性【教师】讲解标签的属性，并在网页源代码中查找相应的代码，进行演示在HTML5中，可以根据需要为标签设置属性。例如，为段落标签设置字体颜色、字体大小等。设置双标签属性的语法格式为……（详见教材）设置单标签属性的语法格式为……（详见教材）【学生】聆听、记录、理解【课堂拓展】在HTML5中，标签的属性值可以用双引号或单引号括起来，当属性值不包含特殊字符的时候，引号也可以省略。例如，以下3行代码在HTML5中都是合法的，且代码含义相同。2.1.3标签的分类【教师】讲解块级标签和行内标签，说明两者区别根据是否独占一行，可以将HTML标签分为块级标签和行内标签。块级标签：其内容在浏览器中显示时独占一行，标签的宽度和高度属性可以设置。块级标签在页面中按照从上到下的顺序排列。行内标签：也称内联标签，其内容在浏览器中显示时不能独自占据一行，标签的宽度和高度属性不可以设置，而是由内容决定，只有在内容超过页面的宽度时，才会换行。行内标签在页面中按照从左到右的顺序排列。【学生】聆听、记录、理解【教师】学生分成两队，一队在网页源代码上找块级标签，一队找到行内标签，最后进行总结，并说明找到的标签的具体含义请大家按照座位分成两队，在这段网页代码中，一队找块级标签，一队找行内标签，并说说这些标签的含义。总结：常见的块级标签有<p>、<div>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<form>等。常见的行内标签有<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>等。【学生】讨论、回答、聆听、记录、理解【课堂拓展】✈【教师】提问学生并进行讲解提问：在刚才大家找标签的过程中，有没有发现块级标签和行内标签格式上有没有不同？讲解：行内标签不可以包含块级标签，它只能位于块级标签之内。块级标签既可以包含其他块级标签，也可以包含行内标签。✈【学生】讨论、回答、聆听、记录、理解2.1.4注释【教师】找到一段网页代码中的注释，提问学生并讲解注释的概念提问：大家看下，这一部分有中文的在代码里是什么作用呢？在页面里会出现么？那大家能不能总结下HTML5代码里的注释的格式是怎么书写的？讲解：HTML5文档中，使用注释解释代码的含义。注释内容不会显示在页面上，但是会保存在页面的源代码文件中。注释由“<!--”开始，由“-->”结束，基本语法格式为：……（详见教材）【学生】思考、聆听、记录、理解通过教师的讲解与课堂互动，使学生了解HTML5的基本语法课堂讨论（10min）【教师】安排每个队伍查看网页源代码，找出网页源代码中的标签，请把它们按照单标签和双标签、块级标签和行内标签进行分类【学生】讨论、思考、理解、回答通过课堂讨论，巩固学生对单标签和双标签、块级标签和行内标签概念的理解第二节课效果导入（5min）【教师】使用HBuilderX编辑器新建HTML5文档，展示其中自带源代码使用HBuilderX编辑器新建的HTML5文档会自带一些源代码，如下：……（详见教材）这些源代码构成了HTML5文档的基本结构，主要包括<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签，下面进行具体介绍。【学生】聆听、理解通过效果导入新课，直观的展现HTML5文档的结构，便于学生理解传授新知

（20min）2.2HTML5的文档结构【教师】讲解<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签的概念2.2.1<!DOCTYPE><!DOCTYPE>声明是指文档声明，位于文档首行，用于向浏览器说明当前文档使用的标准规范。“<!DOCTYPEhtml>”表示当前文档使用HTML5标准。【课堂拓展】如果省略<!DOCTYPE>声明，大多数浏览器也能够正确显示文档内容，但是编写网页代码时不应依赖于浏览器的处理，要保持良好的编写习惯，正确声明文档所使用的标准规范。2.2.2<html>标签<html>标签又称根标签，位于<!DOCTYPE>声明之后，用于告知浏览器其自身是一个HTML5文档。<html>标签标志着HTML5文档的开始，</html>标签标志着HTML5文档的结束，它们之间的内容分为文档头部和文档主体，分别使用<head>标签和<body>标签标记。2.2.3<head>标签<head>标签标记的内容是文档头部，跟在<html>标签之后，用于封装其他位于文档头部的标签，这些标签中存储着网页的各种基本信息，可以使浏览器快速解析页面，其中的内容一般不会显示在页面中。文档头部一般包括以下几个元素。（1）网页标题。……（详见教材）【课堂拓展】每一个页面都需要含有<title>…</title>标签，且该标签的内容不具有任何格式。网页标题是搜索引擎识别网页内容的标识，它可以影响网页在搜索引擎中的排名，一个表（2）网页元信息。……（详见教材）（3）网页视口。……（详见教材）2.2.4<body>标签<body>标签标记的内容是文档主体，用于设置网页的内容。页面中的所有文本、图像、音频或视频等内容都必须写在<body>标签内。<body>标签中的信息才是最终展示给用户的内容。【课堂拓展】html、head和body这3种元素在一个HTML5文档中只能出现一次，且<head>和<body>标签必须在<html>标签之内，<body>标签位于<head>标签之后，与<head>标签并列。【学生】聆听、记录、理解2.3HTML5的结构标签【教师】讲解每个结构标签的具体含义除了前面介绍的主体结构标签<html>、<head>和<body>外，HTML5还提供了多个其他结构标签（又称语义化标签），以便于用户创建更加友好的页面主体框架，下面详细介绍每个结构标签。页眉标签<header>……（详见教材）导航标签<nav>……（详见教材）主要区域标签<main>……（详见教材）文章块标签<article>……（详见教材）区块标签<section>……（详见教材）附栏标签<aside>……（详见教材）页脚标签<footer>……（详见教材）除了上述结构标签外，HTML5中还有两个无语义容器，分别是<div>标签和<span>标签。<div>标签是块级的无语义容器，<span>标签是行内的无语义容器，灵活使用它们可以制作出更具结构化的页面样式。【学生】聆听、记录、理解通过讲解新知识，结合课堂拓展，使学生掌握HTML5的文档结构和结构标签实战演练（15min）【教师】要求学生制作“金企鹅教育”网站主页项目，遇到不会的问题可以扫描微课二维码观看视频”制作“金企鹅教育”网站主页“（详见教材），可与同学讨论，或询问老师上一章中已经带领大家使用HBuilderX创建了“金企鹅教育”项目，本节带领大家在该项目文件目录下创建“金企鹅教育”网站的主页HTML5文档，并使用HTML5结构标签标记该网站主页的主体框架。步骤1打开HBuilderX，右击主界面左侧栏中的“JinqieProject”文件夹，弹出快捷菜单，选择“新建(N)”→“7.html文件”，……（详见教材）步骤2弹出“新建html文件”对话框，输入html文件名称“index”；根据需要选择模板，如“default”；单击“创建(N)”按钮，……（详见教材）步骤3“金企鹅教育”网站主页创建成功，文档内容显示在编辑窗口中，……（详见教材）步骤4规划“金企鹅教育”网站主页的主体框架，包括页眉、导航栏、页面主要区域、页脚。其中，页面主要区域中还包括轮播图、企业宣传、教育资讯、精品图书模块。利用HTML5结构标签构建该网页的主体框架和模块，即在<body>标签内添加标签<header>、<nav>、<main>、<footer>和<section>，……（详见教材）制作“金企鹅教育”网站主页项目，观看微课、讨论通过实操练习创建“金企鹅教育”网站主页项目，使学生巩固所学知识，锻炼动手操作能力课堂小结

（3min）【教师】简要总结本节课的要点本节课主要介绍了HTML5的基础知识，通过本章的学习，学生应重点掌握以下内容（1）标签是由一对尖括号（“<”和“>”）括起来的关键词。大部分标签都是成对出现的，称为双标签；也有少数标签是单独出现的，称为单标签。（2）HTML5文档的基本结构由<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签构成。（3）HTML5提供了多个结构标签，包括页眉标签<header>、导航标签<nav>、主要区域标签<main>、文章块标签<article>、区块标签<section>、附栏标签<aside>、页脚标签<footer>。【学生】总结回顾知识点总结知识点，巩固学生对HTML5的认识作业布置

（2min）【教师】布置