Web前端技术项目式教程电子教案 第2章 使用HTML5搭建中国传统文化网站首页结构 任务二教案-2

PAGE4PAGE第2章使用HTML5搭建中国传统文化网站首页结构课程名称网页设计项目名称HTML5标签任务名称HTML5标签课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用HTML文档的声明标签、头部标签、主体标签等构建网页基本结构。2.掌握使用文本标签、图像、列表、表格等搭建静态网页。3.掌握使用超链接完成页面跳转。4.掌握使用<iframe>标签嵌入子窗口页面。知识目标：1.熟悉HTML常用标签及其属性。2.了解网站目录结构的创建方法。素质目标：1.培养学生对中华优秀传统文化的深刻理解和认同2.培养学生良好的编程习惯和严谨的工作态度。教学内容1.任务描述2.任务展示与实现（1）编写HTML5的表格标签（2）编写HTML5的<div>和<span>标签（3）编写HTML5的各种语义化分段元素（5）学生动手操作3.教师讲解本任务涉及的知识点4.任务小结教学重点1.HTML5标签的含义2.HTML5标签的准确使用教学难点1.HTML5标签的准确使用教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计1．制作一个包含所学标签的HTML页面教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从HTML5表格标签、<div>和<span>标签、HTML5的各种语义化分段元素等知识点进行初步的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。一、HTML5的表格标签HTML5的表格标签主要有<table><caption><tr><td><th><thead><tbody><tfoot>等。<table>标签：用于定义表格，是表格最外层的标签。<caption>标签：展示一个表格的标题。<tr>标签：代表表格中的行。<td>标签：代表表格中的单元格。<th>标签：代表表格中的表头单元格。<thead>标签：代表表格中的表头。<tbody>标签：代表表格中的一块具体数据（表格主体）。<tfoot>标签：代表表格中的表尾。二、传统的布局标签<div>和<span>（1）<div>标签在Web2.0时代，<div>标签是最常用的布局容器。<div>标签没有语义，相当于一个区块容器，可以容纳各种网页元素。区块容器有两大特点：=1\*GB3①区块元素必须独占一行，不允许本行的后面再有其他内容；=2\*GB3②区块容器默认情况下的宽度与它的父级标签的宽度相同。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制，在div标签中加上class或id属性可以应用额外的样式。（2）<span>标签<span>标签用来组合文档中的行内元素。行内元素的特点刚好跟区块容器的特点相反：=1\*GB3①行内元素不需要独占一行，本行后面还允许有其他的内容；=2\*GB3②行内元素的宽度在默认情况下与它内部内容的宽度相同。HTML5的各种语义化分段元素（1）<header>标签<header>标签代表“网页”或“section”的页眉，可以是“网页”或任意“section”的头部部分，其通常包含一些引导和导航信息，用法如下。（2）<footer>标签<footer>标签代表“网页”或“section”的页脚，可以是“网页”或“section”的底部部分，通常含有该节的一些基本信息，如作者、相关文档链接、版权资料，用法如下。（3）<hgroup>标签<hgroup>标签代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，如文章的主标题和副标题的组合，用法如下。（4）<nav>标签<nav>标签代表页面的导航链接区域，用于定义页面的主要导航部分，用法如下。（5）<aside>标签<aside>标签用在article内表示主要内容的附属信息，用在article之外可作为侧边栏，用法如下。（6）<section>标签<section>标签代表文档中的“节”或“段”，“段”可以指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。<section>通常还带有标题。<section>标签的用法如下。（7）<article>标签<article>标签最容易与<section>和<div>容易混淆，<article>代表一个在文档、页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用，譬如论坛的帖子、博客的文章、一篇用户的评论。除了它的内容，<article>会有一个标题（通常会在header里）和一个<footer>页脚，用法如下。（1）<header>标签<header><hgroup><h1>网站标题</h1><h1>网站副标题</h1></hgroup></header><footer>标签<footer>COPYRIGHT@小北</footer><hgroup>标签<hgroup><h1>这是一篇介绍HTML5语义化标签和更简洁的结构</h1><h2>HTML5</h2></hgroup><nav>标签<nav><ul><li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul></nav><aside>标签<article><p>内容</p><aside><h1>作者简介</h1><p>小北，前端一枚</p></aside></article><section>标签<section><h1>section是啥？</h1><article><h2>关于section</h1><p>section的介绍</p><section><h3>关于其他</h3><p>关于其他section的介绍</p></section></article></section><article>标签<article><header><h1>一篇文章</h1><p><timepubdatedatetime="2012-10-03">2012/10/03</time></p></header><p>文章内容..</p><footer><p><small>版权：html5jscss网所属，作者：小北</small></p></footer></article>通过