项目2HTML5简介（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 20 年级 授课学期： 20 学年第一学期 教师姓名： 老师 20 年 月 日 课题名称 项目二 HTML5简介 计划课时 课时 内容分析 用户对网页的直观感受，决定了整个网页达到的效果。网页信息阅读的舒适感、颜色配色要在第一时间直接地传递给用户，因此网页设计的设计细节有三方面： 用户的阅读效率、视觉舒适度和网页的品质感。熟练掌握网页设计技巧，培养动手操作能力，才能设计出优秀的网页。 教学目标 · 了解HTML5的优势。 · 掌握标签的使用。 · 掌握文本控制标签和图像标签的使用方法。 重点及措施 教学重点：正确使用头部相关标签；正确使用标题标签；正确使用图像标签 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：标签，文本控制标签，图像标签 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 任务2.1 HTML5的优势 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： HTML5相较于以前的版本有什么优势？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： HTML5是HTML的传递和延续。从HTML4.0、XHTML再到HTML5，从某种意义上讲，这是HTML的更新与规范过程。HTML5并没有给用户带来多大的冲击，其他版本的大部分标签在HTML5版本中依然适用。相比于其他版本的HTML，HTML5的优势主要体现在兼容、合理、易用和新增标签。 · 知识点讲解 · 讲解HTML5的优势 （1）教师展示PPT，对静态网页进行具体讲解。 1. 兼容 HTML5并不是对之前HTML语言的颠覆性革新，它的核心理念是保持与过去技术完美衔接，因此HTML5有很好的兼容性。例如，实例1的代码中缺少结束标签</p>，在HTML5中并没有把这种情况作为错误来处理，而是在允许这种写法的同时，定义了一些可以省略结束标签</p>的标签。 2. 合理 HTML5中新增的很多标签、属性都是根据实际开发中已经存在的各类网页标签进行提炼和归纳，通过这样的方式让HTML5的标签结构更加合理。例如，W3C（World Wide Web Consortium ,万维网联盟）分析了上百万的页面，发现很多网页制作人员使用<div id="header">来定义网页的头部区域，于是在HTML5中添加了一个<header>标签。 3. 易用 HTML5作为当下流行的标签语言，严格遵循“简单至上”的原则，主要体现在简化的字符集声明、简化的DOCTYPE、简单而强大的API和以浏览器原生能力替代复杂的JavaScript代码。为了易于使用，HTML5的规范比以前更加细致、精确。 4. 新增标签 HTML5新增了许多特性，比如新的语义标签、新的表单控件、强大的图像支持等。新增内容丰富了HTML5实现的功能，比如在游戏开发中可以实现更多的互动。 实例1 缺少</p>标签 （2）学生自主提问，教师对疑难问题进行解答。 任务2.2 HTML5的结构 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： XHTML文档和HTML5的结构有什么不同？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 在其他版本的HTML中，各浏览器对HTML的支持不统一，这就造成同一个页面在不同浏览器中可能显示不同的样式。HTML5通过详细分析各个浏览器所具有的功能，制定了一个通用的标准，并要求浏览器支持这个标准。 · 知识点讲解 · 讲解实例2 新建XHTML文档和实例3 新建HTML5文档格式 （1）教师展示PPT，对实例2 新建XHTML文档和实例3 新建HTML5文档格式进行具体讲解。 · 实例2 新建XHTML文档 · 实例3 新建HTML5文档 通过对比可以看出，HTML5的结构相较于XHTML的结构简洁明了。 除上述的文档结构标签外，HTML5还简化了<meta>标签，让定义字符编码的格式变得更加简单。　 （2）学生自主提问，教师对疑难问题进行解答。 任务2.3标签概述 2.3.1标签的分类 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是标签？ 是商场衣服上那个标签吗？是超市货架上的标签吗？HTML中的标签是怎样的？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 在HTML5页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的<html><head><body>都是HTML标签。HTML标签是放在“< >”符号中表示某个功能的编码命令，也称为HTML元素。 · 知识点讲解 · 讲解标签的分类 （1）教师展示PPT，对标签的分类进行具体讲解。 根据标签的组成特点，通常将HTML标签分为两大类，分别是双标签和单标签。 1. 双标签 　　双标签也被称为体标签，是指由开始和结束两个标签符号组成的标签。双标签的基本语法格式如下： <标签名>内容<标签名> 2. 单标签 　　单标签也被称为空标签，是指用一个标签符号即可完整地描述某个功能的标签，其基本语法格式如下： <标签名/> 3. 注释标签 在HTML5中还有一种特殊的标签——注释标签，该标签就是一种特殊功能的单标签。如果需要在HTML5文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。注释标签的语法格式如下： <!--注释语句--> 需要注意的是，注释内容不会显示在浏览器窗口中，但是作为HTML5文档内容的一部分，注释标签可以被用户上传到计算机上，用户查看源代码时也可以看到注释标签。 提示 查看网页源文件的方式 打开网页后，右击网页空白处，弹出快捷菜单，选择“查看源文件”命令，搜狗浏览器如下： 谷歌浏览器如下 Edge浏览器如下 火狐浏览器如下 （2）学生自主提问，教师对疑难问题进行解答。 2.3.2标签的关系 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 标签之前都有什么关系？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 标签的关系主要有嵌套关系和并列关系两种。 · 知识点讲解 · 讲解标签的关系 （1）教师展示PPT，对标签的关系进行具体讲解。 1. 嵌套关系 　　嵌套关系也称为包含关系，可以简单地理解为一个双标签里面包含其他的标签。例如，在HTML5的结构代码中，<html>标签和<head>标签（或<body>标签）就是嵌套关系。 需要注意的是，在标签的嵌套过程中，必须先结束最靠近内容的标签，再按照由内到外的顺序依次关闭标签。 在嵌套关系的标签中，通常把最外层的标签称为父级标签，里面的标签称为子级标签。只有双标签才能作为父级标签。 2. 并列关系 并列关系也称为兄弟关系，是指两个标签处于同一级别，并且没有包含关系，例如，在HTML5的结构代码中，<head>标签和<body>标签就是并列关系。在HTML标签中，无论是单标签还是双标签，都可以拥有并列关系。 （2）学生自主提问，教师对疑难问题进行解答。 2.3.3标签属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 如何让HTML标签提供更多的信息？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： HTML5制作网页时，如果想让HTML标签提供更多的信息。例如，希望标题文本的字体为“微软雅黑”并且居中显示，段落文本中的某些名词显示为其他颜色加以突出，用户仅仅依靠HTML标签的默认显示样式是不够的，这时可以通过为HTML标签设置属性的方式来增加更多的样式。。 · 知识点讲解 · 讲解标签属性 （1）教师展示PPT，对标签属性进行具体讲解。 HTML标签设置属性的基本语法格式如下： <标签名 属性1=“属性值1” 属性2=“属性值2” …>内容</标签名> 在上面的语法中，标签可以拥有多个属性，属性必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 其中<p></p>标签用于定义段落文本，align为属性名，center为属性值，表示文本居中对齐，对于<p>标签还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。需要注意的是，大多数属性都有默认值。 （2）学生自主提问，教师对疑难问题进行解答。 2.3.4头部相关标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 头部相关标签有什么用？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 网页制作时，经常需要设置页面的基本信息，如页面的标题、作者、与其他文档的关系等。为此HTML5提供了一系列的标签，这些标签通常都写在<head>标签中，被称为头部相关标签。 · 知识点讲解 · 讲解头部相关标签 （1）教师展示PPT，对头部相关标签进行具体讲解。 1. 设置页面标题标签<title> <title>标签用于定义HTML5页面的标题，即给网页取一个名字，该标签必须位于<head>标签之中。一个HTML5文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中，如“苏轼全集”。 2. 定义页面元信息标签<meta/> <meta/>标签用于定义页面的元信息（元信息不会显示在页面中），可重复出现在<head>头部标签中。在HTML5中，<meta/>标签是一个单标签，本身不包含任何内容，仅仅表示网页的相关信息。通过<meta/>标签的两组属性，可以定义页面的相关参数。例如，为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。<meta/>标签的基本语法格式如下： <meta name="名称" content="值" /> <meta http-equiv="名称" content="值"/> 　在<meta/>标签中使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值。 　在<meta/>标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html"/>，通知浏览器发送的文件类型是HTML。具体应用如下。 ①设置网页关键字，name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用逗号分隔，如“苏轼,苏东坡,苏轼全集,苏东坡全集,苏轼词,宋词,水调歌头,东坡居士”。 ②设置网页描述，name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容，如“苏轼（1037年1月8日—1101年8月24日）,字子瞻,又字和仲,号东坡居士，世称苏东坡,汉族,眉州眉山（今属四川省眉山市）人,祖籍河北栾城,北宋文学家,书法家,画家。” ③设置网页作者，name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息，如“苏轼”。 ④设置字符集，http-equiv属性的值为Content-Type，content属性的值为text/html和charset=gbk，两个属性值中间用分号隔开，用于说明当前文档类型为HTML，字符集为gbk（中文编码）。常用的国际化字符集编码格式是utf-8，常用的国内中文字符集编码格式是gbk和gb2312。当用户使用的字符集编码与当前浏览器不匹配时，网页内容就会出现乱码。 ⑤设置页面自动刷新与跳转，http-equiv属性的值为refresh，content属性的值为数值和url，用分号隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。 （2）学生自主提问，教师对疑难问题进行解答。 任务2.4文本控制标签 2.4.1页面格式化标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 怎么对网页内容进行排版？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 一篇结构清晰的文章通常会通过标题、段落、分隔线等进行结构排列，HTML5网页也不例外，为了使网页中的文字有条理地显示出来，HTML5提供了相应的页面格式化标签，如标题标签、段落标签、水平线标签和换行标签。 · 知识点讲解 · 讲解标题标签 （1）教师展示PPT，对标题标签进行具体讲解。 标题标签的基本语法格式如下： <hn align="对齐方式">标题文本</hn> 为了使网页更具有语义化（语义化是指赋予普通网页文本特殊的含义），我们经常会在页面中用到标题标签，HTML5提供了6个等级的标题，即<hl>、<h2>、<h3>、<h4>、<h5>和<h6>。 默认情况下标题文字是加粗左对齐显示的，并且从<h1>到<h6>标题字号依次递减。如果想让标题文字右对齐或居中对齐，就需要使用align属性设置对齐方式。 align属性的使用 注意： 　　1）一个页面中只能使用一个<h1>标签，常常被用在网站的logo部分。 　　2）由于<h>标签拥有特殊的语义，要选择恰当的标签来构建文档结构。 　　3）HTML5中不建议使用<h>标签的align对齐属性，一般使用CSS样式设置。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解段落标签 （1）教师展示PPT，对段落标签进行具体讲解。 在网页中要把文字有条理地显示出来，离不开段落标签。在网页中使用<p>标签来定义段落。<p>标签是HTML5文档中常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。<p>标签的基本语法格式如下： <p align="对齐方式">段落文本</p> 　　在上面的语法中，align属性为<p>标签的可选属性，和标题标签<h>一样，同样可以使用align属性设置段落文本的对齐方式。通过实例9来演示段落标签<p>的用法。 　第8行、第9行代码分别为<h2>标签和<p>标签添加align的“center”属性值，设置居中对齐。第10行代码中的<p>标签为段落标签的默认对齐方式。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解水平线标签 （1）教师展示PPT，对水平线标签进行具体讲解。 在网页中我们常常会看到一些水平线将段落与段落之间隔开，使文档结构清晰，层次分明。水平线可以通过<hr/>标签来定义，基本语法格式如下： <hr 属性="属性值"/> 　　<hr/>是单标签，在网页中输入一个<hr/>，即添加了一条默认样式的水平线。此外通过为<hr/>标签设置属性和属性值，可以更改水平线样式。 第9行代码将<hr/>标签设置了不同的颜色、对齐方式、粗细和宽度值。第14行代码修改了<hr/>标签的颜色。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解换行标签 （1）教师展示PPT，对换行标签进行具体讲解。 在Word软件中，按Enter键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签<br/>。 第8行代码在文本里面显示是在同一行，但是使用了<br/>标签，而第9行、第10行代码在文本中是换行显示的，采用了按Enter键的方式换行。 （2）学生自主提问，教师对疑难问题进行解答。 2.4.2文本样式标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 如何对文本进行排版？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 文本样式标签可以设置一些文字效果（如字体、加粗、颜色），让网页中的文字样式变得更加丰富。 · 知识点讲解 · 讲解文本样式标签 （1）教师展示PPT，对文本样式标签进行具体讲解。 文本样式标签可以设置一些文字效果（如字体、加粗、颜色），让网页中的文字样式变得更加丰富，其基本语法格式如下： <font 属性="属性值">文本内容</font> 第1个段落中的文本设置为默认段落样式，第2~4个段落文本分别使用<font>标签设置了不同的文本样式。其效果如图2-19所示。 （2）学生自主提问，教师对疑难问题进行解答。 2.4.3文本格式化标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是文本格式标签？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 在网页中，有时需要为文字设置粗体、斜体或下画线等一些特殊显示的文本效果，为此HTML5提供了专门的文本格式化标签，使文字以特殊的方式显示。。 · 知识点讲解 · 讲解动态网页 （1）教师展示PPT，对文本格式化标签进行具体讲解。 第8行代码设置段落文本正常显示，第9~13行代码分别给段落文本应用不同的文本格式化标签，使文字产生特殊的显示效果。 （2）学生自主提问，教师对疑难问题进行解答。 2.4.4文本语义标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是文本语义标签？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 文本语义标签主要用于向浏览器和开发者描述标签的意义，它是供机器识别的标签，浏览者只能看到显示样式的差异。有些文本语义标签可以突出文本内容的层次关系，方便搜索引擎查找，提高浏览器的解析速度。在HTML5中，文本语义标签有很多。 · 知识点讲解 · 讲解<time>标签 （1）教师展示PPT，对<time>标签进行具体讲解。 <time>标签用于定义时间或日期，可以代表24小时中的某一时间。<time>标签不会在浏览器中呈现任何特殊效果，但是该元素能够以机器可读的方式对日期和时间进行编码，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。<time>标签有以下两个属性。 　　datetime属性，用于定义相应的时间或日期。取值为具体时间（如9:00）或具体日期（如2020-09-01），不定义该属性时，由文本的内容给定日期或时间。 pubdate属性，用于定义<time>标签中的文档（或article元素）发布日期。取值一般为“pubdate”。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解 <mark>标签 （1）教师展示PPT，对 <mark>标签进行具体讲解。 <mark>标签的主要功能是在文本中高亮显示某些字符，该标签的用法与<em>标签和<strong>标签有相似之处，但是使用<mark>标签在突出显示样式时更随意灵活。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解<cite>标签 （1）教师展示PPT，对<cite>标签进行具体讲解。 <cite>标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。 （2）学生自主提问，教师对疑难问题进行解答。 2.4.5特殊字符标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 特殊字符标签有什么用？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 在浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。在网页上显示这些包含特殊字符的文本时，需要特殊字符标签。 · 知识点讲解 · 讲解常用的特殊字符标签 （1）教师展示PPT，对常用的特殊字符标签进行具体讲解。 （2）学生自主提问，教师对疑难问题进行解答。 任务2.5图像标签 2.5.1常见的图像格式 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 常见的图像格式有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： GIF格式、PNG格式、JPG格式。 · 知识点讲解 · 讲解常见的图像格式 （1）教师展示PPT，对常见的图像格式进行具体讲解。 1. GIF格式 　　GIF格式突出的特点是支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量没有损失。再加上GIF支持透明，因此很适合在浏览器上使用，但GIF只能处理256种颜色，因此在网页制作中GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。 　　　2. PNG格式 　　PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。它的优势是体积小，支持透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG不支持动画。其中PNG-8和GIF类似，只能支持256种颜色。 　　　3. JPG格式 　　JPG所能显示的颜色比GIF和PNG-8丰富，可以用于保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像，比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。 （2）学生自主提问，教师对疑难问题进行解答。 2.5.2图像标签及常用属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 网页中如何插入图像？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 在网页中显示图像就需要使用图像标签。 · 知识点讲解 · 讲解图像标签及常用属性 （1）教师展示PPT，对图像标签及常用属性进行具体讲解。 在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img/>和与它相关的属性。图像标签的基本语法格式如下： <img src="图像url"/> 　　在上面的语法中，src属性指定图像文件的路径和文件名，是<img/>标签的必需属性。 　　要想在网页中灵活地使用图像，除src属性外，HTML还为<img/>标签提供了常用属性。 1. alt属性 有时页面中的图像可能无法正常显示，如图片加载错误，浏览器版本过低等。因此，为页面上的图像添加替换文本是个很好的方式，在图像无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。 2. width和height属性 通常情况下，如果不为<img/>标签设置宽度和高度属性，图片会按照它的原始尺寸显示。通过width和height属性可以自定义图片的宽度和高度。通常我们只设置其中的一个属性，另一个属性则会依据前一个属性将原图等比例缩放显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。 3. border属性 网页默认情况下图像是没有边框的，通过border属性可以为图像添加边框，设置边框的宽度。通过实例18来演示使用border、width和height属性同时对图像进行修饰。 4. vspace和hspace属性 在网页中，由于排版需要，有时候还需要调整图像的边距。HTML5中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。 5. align属性 图文混排是网页中很常见的排版方式，默认情况下图像的底部会与文本的第一行文字对齐。 注意： （1）网页制作中并不建议图像标签<img/>直接使用border、vspace、hspace及align属性，而是用CSS样式替代。 （2）网页制作中装饰性的图像不直接插入<img/>标签，一般通过CSS设置背景图像来实现。 （2）学生自主提问，教师对疑难问题进行解答。 2.5.3相对路径和绝对路径 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 计算机中文件的位置怎么表示？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 文件在计算机中的位置是通过路径来表示的，网页中的路径通常分为绝对路径和相对路径两种。 · 知识点讲解 · 讲解相对路径和绝对路径 （1）教师展示PPT，对相对路径和绝对路径进行具体讲解。 1. 绝对路径 绝对路径就是网页上的文件或目录在硬盘上的真正路径，如实例20所示的图片路径即为绝对路径。 　　实例20 绝对路径 C:＼Users＼Administrator＼Desktop＼网页设计与制作＼项目二案例＼实例19 使用align属性 2. 相对路径 　　相对路径就是相对于当前文件的路径。相对路径没有盘符，通常是以网页文件为起点，通过层级关系描述目标图像的位置。相对路径的设置分为以下3种。 　　（1）图像文件和网页文件位于同一个文件夹中，只需输入图像文件的名称即可，如 <img src="logo.gif"/>。 　　（2）图像文件位于HTML文件的下一级文件夹，上下级文件之间用“/”隔开，如<img src="img/img01/logo.gif"/>。 　　（3）图像文件位于HTML文件的上一级文件夹中，在文件名之前加入“../”，如果在上两级文件夹中，则需要使用“../ ../”，依此类推，如<img src="../logo.gif "/>。 　　网页中并不推荐使用绝对路径，因为网页制作完成之后需要将所有的文件上传到服务器，此时图像文件可能在服务器的C盘，也有可能在D盘、E盘中；可能在A文件夹中，也有可能在B文件夹中，这样就会造成图片路径错误，网页无法正常显示。 （2）学生自主提问，教师对疑难问题进行解答。 项目小结 本项目主要介绍了HTML5的优势和标签的概念，具体内容如下。 　HTML5的优势： 介绍了HTML5的三个优势和新增标签。 　HTML5的结构： 介绍了XHTML文档和HTML5文档的不同。 　标签概述： 介绍了标签的分类、标签的关系、标签属性和头部相关标签。 　文本控制标签： 介绍了页面格式化标签、文本样式标签、文本格式化标签和文本语义标签。 　图像标签： 介绍了常见的图像格式、图像标签及常用属性、相对路径和绝对路径。 　通过本项目的学习，了解HTML5文档的优势和结构，掌握标签概念，熟练使用相关的标签为网页添加文本样式和图片效果。 项目实训 实训3 · 实训名称 HTML5文档结构 · 实训目标 正确编写HTML5文档基本代码 · 实训实施 请编写HTML5文档基本代码，在浏览器中显示“这是HTML5文档”，网页标题设为“首页”。 实训4 · 实训名称 使用标题标签1 · 实训目标 使用标题标签设置六级标题 · 实训实施 使用标题标签，在浏览器中显示6种不同字号的标题。 实训5 · 实训名称 使用标题标签2 · 实训目标 使用标题标签的属性 · 实训实施 使用标题标签，显示4种不同字号的标题，标题内容分别设置为默认对齐、左对齐、居中对齐和右对齐。 实训6 · 实训名称 使用文本样式标签 · 实训目标 使用<font>标签 · 实训实施 编写HTML5代码，输出《静夜思》，要求第一句文本是默认样式的文本，第二句文本是2号蓝色文本，第三句文本是5号红色文本，第四句文本是7号绿色文本，且字体是宋体。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.HTML5的优势能够举例说明 2.HTML5全新的结构能够正确解释文档标签的含义 3.标签的分类能够正确使用单标签和双标签 4.标签的关系能够正确使用嵌套关系和并列关系 5.标题标签能够合理使用不同大小的标题标签 6.文本样式标签能够使用<font>标签 7.<time>标签能够使用<time>标签 8.<img/>标签能够使用<img/>标签 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$