Web前端技术项目式教程(HTML5CSS3FlexBootstrap)教案-HTML5标签

1、第2章使用HTML5搭建旅游公司网站首页结构课程名称Web前端开发项目名称HTML5标签任务名称HTML5标签课时2项目性质演示性验证性设计性综合性授课班级授课日期授课地点教学目标能力目标：1. 具备熟练使用HTML标签的能力2. 具备使用HTML标签搭建网页基本结构的能力 知识目标：1. 掌握HTML5的表格标签的使用2. 掌握div和VSPan标签的使用3. 掌握HTML5的各种语义化分段元素的使用 素质目标：1. 培养学生自主学习能力2. 培养学生团结协作、互帮互助的能力教学内容1. 任务描述2. 任务展示与实现（1）编写HTML5的表格标签（2）编写 HTML5的 div 和 VSPa

2、n标签（3）编写HTML5的各种语义化分段元素（5）学生动手操作3. 教师讲解本任务涉及的知识点4. 任务小结教学重点1. HTML5标签的含义2. HTML5标签的准确使用教学难点1. HTML5标签的准确使用教学准备1. 装有SUbIime或者HbUilder 的电脑2. 教学课件PPT3. 教材：Web前端技术项目式教程作业设计1.制作一个包含所学标签的 HTMLM面教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好课前“ 5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打 开课件、打开软件、打开 U盘中的素材位置、打开授课计划、

3、教案等），吸引学生注意力。课程说明【课前说明】分别从HTML5表格标签、vdiv和VSPan标签、HTML5的各种语义化分段兀素等知识点进行初步 的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。课程内容描述一、HTML5的表格标签HTML5 的表格标签主要有 VtabIecaptionvtrvtdthvtheadvtbodyvtfoot 等。Vtable标签：用于定义表格，是表格最外层的标签。VCaPtiO n标签：展示一个表格的标题。vtr标签：代表表格中的行。vtd标签：代表表格中的单元格。vth标签：代表表格中的表头单元格。Vthe

4、ad标签：代表表格中的表头。Vtbody标签：代表表格中的一块具体数据（表格主体）。vtfoot标签：代表表格中的表尾。二、传统的布局标签vdiv和VSPan（1） vdiv 标签在Web2.0时代，vdiv标签是最常用的布局容器。vdiv标签没有语义，相当于一个区块容器，可以容纳各种网页兀素。区块容器有两大特点：区块兀素必须独占一行，不允许本行的后面再有 其他内容；区块容器默认情况下的宽度与它的父级标签的宽度相同。因此，可以把vdiv与vdiv中的内容视为一个独立的对象，用于CSS的控制，在div标签中加上class或id属性可以应用额外的样式。（2）span标签spa n标签用来组合文档中

5、的行内元素。行内元素的特点刚好跟区块容器的特点相反： 行内元素不需要独占一行，本行后面还允许有其他的内容； 行内元素的宽度在默认情况下与它内部内容的宽度相同。三、HTML5的各种语义化分段元素（1）Vheader标签Vheader标签代表"网页”或"SeCtiOn”的页眉，可以是“网页”或任意"SeCtiOn ”的头部部分， 其通常包含一些引导和导航信息，用法如下。（2）Vfooter 标签Vfooter标签代表"网页”或"SeCtiO n”的页脚，可以是"网页”或"SeCtiO n”的底部部分，通常含有该节的一些基本信息，

6、如作者、相关文档链接、版权资料，用法如下。（3）Vhgroup 标签Vhgroup标签代表"网页”或"SeCtiOn”的标题，当元素有多个层级时，该元素可以将 hl到h6 元素放在其内，如文章的主标题和副标题的组合，用法如下。（4）Vnav 标签nav标签代表页面的导航链接区域，用于定义页面的主要导航部分，用法如下。（5）VaSide 标签VaSide标签用在article内表示主要内容的附属信息，用在article之外可作为侧边栏，用法如下。（6）VSeCtiOn 标签VSeCtiOn标签代表文档中的“节”或“段”，“段”可以指一篇文章里按照主题的分段；“节”可以是指一个

7、页面里的分组。VSeCtio n通常还带有标题。VSeCtio n标签的用法如下。（7）VartiCle 标签VartiCle标签最容易与 VSeCtion和Vdiv容易混淆，VartiCle代表一个在文档、页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用，譬如论坛的帖子、博客的文章、一篇用户 的评论。除了它的内容，VartiCle会有一个标题（通常会在header里）和一个Vfooter页脚，用法如下。8课堂实训(1) Vheader>标签Vheader>VhgrOUp><h1>网站标题<h1><h1>网站副标题<h

8、1><hgroup><header>(2) <footer> 标签<footer>CoPYRlGHT 小北<footer>(3) Vhgroup>标签Vhgroup><h1>这是一篇介绍HTML 5语义化标签和更简洁的结构Vh2>HTML 5Vh2>Vhgroup>(4) Vnav>标签Vn av>Vul>Vli>HTML 5Vli><li>CSS3<li>vi>JavaScriptvli>Vul>v/n av>

9、;(5) VaSide>标签VartiCle>Vp> 内容 vp>VaSide>Vh1>作者简介<h1>Vp>小北，前端一枚 vp>Vh1><aside><article>(6) <section>标签<secti on><h1>section 是啥？ <h1><article><h2> 关于 SeCtiOn<h1><p>section 的介绍 <p><secti on><h3&g

10、t;关于其他<h3><p>关于其他SeCtiOn的介绍<p><sect ion><article><sect ion><header><h1> 一篇文章 <h1><p><time PUbdate datetime="2012-10-03">20121003<time><p><header><p>文章内容<p><footer><p><small> 版权：html5jscss 网所属，作者：小北 <small><p><footer><ar