《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第1课 HTML5基础_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第1课 HTML5基础_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第1课 HTML5基础_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第1课 HTML5基础_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第1课 HTML5基础_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第课HTML5第课HTML5基础的基基本本PAGE1011HTML51HTML5基础第课PAGE11《HTML5+CSS3项目开发案例教程》

教案课时分配表章序课程内容课时备注1HTML5基础42应用和美化文本43应用和美化图像及多媒体44应用和美化列表45应用和美化超链接46应用和美化表格47应用和美化表单48CSS3布局基础49CSS3布局410变形、过渡与动画411网页设计综合实例2合计42

课题HTML5基础课时2课时（90min）教学目标知识技能目标：（1）了解HTML5的发展历程（2）掌握HTML5的文档结构、基本语法和主结构元素思政育人目标：（1）帮助学生养成善于探索、善于实践的良好习惯（2）培养学生的辩证思维和创新思维能力教学重难点教学重点：HTML5的文档结构与基本语法教学难点：使用记事本和DreamweaverCC2020创建HTML5文档教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（20min）第2节课：问题导入（4min）

知识讲解（27min）

课堂练习（10min）

课堂小结（2min）作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】概述介绍HTML5语言互联网中的大多数网页都是用HTML描述的，这使HTML成为最流行的网页制作语言，并持续发展至今。HTML在20世纪90年代发展迅速，从HTML2.0版本发展到3.2版本、4.0版本，再到4.01版本。就在HTML4.01版本发布的当年，W3C对HTML未来的发展做了分析，他们认为HTML的形式与内容无法分离，且标记单一，前途堪忧。于是W3C转向语言更加规范的XML，但是从1991年HTML出现到1999年的8年时间里，互联网上已经有成千上万由HTML编写的网页，直接转向XML是不现实的，所以W3C只能放慢脚步，开始HTML到XML的过渡，因此出现了XHTML。【教师】提出问题试问：同学们之前使用过HTML语言吗？知道网站前段开发技术有哪些？了解过HTML语言跟其他语言的不同之处吗？【学生】聆听、思考、回答【教师】列举HTML5语言的优势HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：（1）简易性。HTML版本升级采用超集方式，从而更加灵活方便。（2）可扩展性。HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。（3）平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。【学生】聆听、记录介绍HTML5语言的发展历程，通过问答的方式，激发学生的求知欲，列举HTML语言的特点，引起学生对HTML5语言学习的兴趣知识讲解

（24min）【教师】介绍网站前端开发技术常用的网站开发技术主要有PHP、JSP、ASP.NET、HTML、CSS、JavaScript等。其中，前3个属于网站后端开发技术，不在本书所讲的范围内，此处不做介绍。本书主要介绍的是网站前端开发技术中最基础的HTML和CSS，下面简单介绍这两者和JavaScript的相关知识。1．HTMLHTML全称hypertextmarkuplanguage，即超文本标记语言。使用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统。浏览器能够识别并解析这些文档。2．CSSCSS全称cascadingstylesheets，即层叠样式表。它是一种能够定义网页样式的语言，可以直接写在HTML文档中或是单独存放为样式表文件。当CSS样式表单独存放时，多个页面可以使用同一个样式表文件，这样不仅可以轻松地统一多个页面的风格，同时还减轻了HTML文档的负担。3．JavaScriptJavaScript是一种解释性脚本语言，简称JS。它可以收集页面上的数据，并记录用户对页面的操作等，从而使原本静态的页面具有交互性。在网页制作中，HTML属于网页的结构层部分，用于确定网页的结构和内容；CSS属于网页的表现层部分，用于设置网页的样式，主要包括各元素的外观、大小和位置等。两者既相互独立又相互联系，熟练掌握它们就能制作出各种静态的网页。JavaScript在网页制作中主要起锦上添花的作用，使用它可以为网页添加更复杂的动画和交互效果惯。【学生】聆听、思考、记录【教师】介绍HTML5的发展历程HTML在20世纪90年代发展迅速，从HTML2.0版本发展到3.2版本、4.0版本，再到4.01版本。就在HTML4.01版本发布的当年，W3C对HTML未来的发展做了分析，他们认为HTML的形式与内容无法分离，且标记单一，前途堪忧。于是W3C转向语言更加规范的XML，但是从1991年HTML出现到1999年的8年时间里，互联网上已经有成千上万由HTML编写的网页，直接转向XML是不现实的，所以W3C只能放慢脚步，开始HTML到XML的过渡，因此出现了XHTML。1．转向XHTML万维网联盟（worldwidewebconsortium，W3C）在2000年推出了XHTML1.0，它以XML的语法重新整理了HTML4.0，使其具有XML那样严谨的语法规则。而后在2002年推出了XHTML2.0，但由于其没有反映出网站开发人员在网页上的交互操作，也未能将网页上已有的内容向后兼容等，最终XHTML2.0宣告失败。2．HTML5的成功就在XHTML2.0失败的同时，HTML5的演化取得了成功。因为HTML5在开发时就综合考虑了当前与未来需要进行的开发任务，所以它向后兼容，且包含了HTML4.0的全部特性，并进行了少量的修改与完善。2014年，W3C正式宣布，HTML5制作完成并公开发布。目前HTML5已经得到主流浏览器的良好支持能。【教师】提出问题，让学生思考分析HTML5语言成功的原因【学生】聆听、思考、讨论通过讲解知识点，让学生了解HTML5语言，同时促进学生的创造力交流讨论

（15min）【教师】给学生分组，设置交流讨论的话题（1）HTML之前版本的弊端在哪里（2）HTML5取得成功的原因是什么【学生】讨论、交流、小组代表发言【教师】安排小组讨论未来HTML语言的发展趋势是怎样的【学生】讨论、交流、小组代表发言【教师】总结发言还值得一提的是，HTML5非常适合未来。如今，人们不仅在家用PC上，而且还在笔记本电脑，智能手机，平板电脑和其他移动设备以及许多不同平台上访问万维网。HTML5是唯一可以在多个平台上平稳运行而无需执行额外工作的解决方案。这种变化将帮助开发人员将更多的精力放在功能上，而不是为不同的平台创建类似的产品。因此，想象一下未来不需要多个版本的情况。HTML5使您无论使用什么设备都可以访问您的应用程序。这也可能意味着Kindle和其他电子书阅读器的死亡。由于HTML5可以轻松正确地正确呈现杂志，报纸和书籍，因此可以更轻松地在许多设备（包括智能手机）上阅读电子书。HTML5还可以为更好的浏览器内游戏铺平道路，其中包括允许用户在网页上绘图的应用程序。WebGL平台还可以使3-D成为现实通过交流讨论，让学生了解HTML语言的发展进程，提高学生交流表达能力第二节课问题导入

（4min）【教师】提出问题，让学生思考HTML语言具有如此多的特点和优势，如何正确的使用HTML的语言？它的基本语法是什么？主结构元素如何创建【学生】聆听老师的问题、讨论、回答问题通过问答的方式，引导学生思考，激发学生的学习兴趣知识讲解

（27min）【教师】讲解HTML5的文档结构”HTML5使用元素描述页面结构，元素一般由一个或两个标签（用尖括号括起来的代码）组成，由两个标签组成的元素包括一个起始标签和一个结束标签（结束标签中带有一个斜杠）。最基本的HTML5文档结构如下：<!DOCTYPEhtml><html><head> <metacharset="utf-8"/> <title>HTML5实例</title></head><body> <h1><i>HTML</i>5的文档结构</h1> <p>最基本的文档结构</p></body></html>1．DOCTYPE声明DOCTYPE声明位于文档首行，标签为<!DOCTYPEhtml>，它不属于文档的结构部分。DOCTYPE声明用于向浏览器说明当前文档使用的标准规范，“<!DOCTYPEhtml>”即表示当前文档使用HTML5标准。2．html元素html元素是HTML5页面的根元素，用于告知浏览器自身是一个HTML5文档，<html>标签标志着HTML5文档的开始，</html>标签标志着HTML5文档的结束，它们之间的内容即为文档的头部结构和主体内容。3．head元素head元素用于标记HTML5文档的头部结构，也称为头部标记，它跟在<html>标签之后，用于封装其他位于文档头部的标签，这些标签中存储着网页的各种基本信息，可以使浏览器快速解析页面，其中的内容一般不会显示在页面中。【教师】运行参考代码通过浏览器可以查看该文档的页面效果（如无特殊说明，本书默认使用谷歌浏览器展示页面效果），具体效果如图1-1所示。图1-1“HTML5实例”页面效果【学生】聆听、观察运行结果、思考、理解【教师】讲解HTML5的基本语法与主结构元素HTML5是使用标签来描述网页的，HTML5文档中实质上只包含HTML标签和文本。浏览器的一个重要作用就是读取HTML5文档，并解释其中的一个个标签，然后将其以“网页”的形式显示。1．HTML5标签的分类1.1.3节中提到的<html>、<head>与<body>等都是HTML5标签，也称为HTML5标记。“标签”和“元素”这两个概念通常不做区分，但是一般来说，一个元素包括其对应的标签及其中的内容。HTML5的标签主要分为以下几类。（1）双标签是指由开始标签和结束标签组成的标签，基本语法格式为：<标签名>内容</标签名>例如，<title>…</title>就是一个双标签（2）单标签也称为空标签，基本语法格式为：<标签名/>例如，<hr/>就是一个单标签，用于标记一条水平线。单标签中的“/”可以省略。（3）注释标签是HTML5中一种特殊的标签。使用注释标签括起来的内容不会显示在页面上，但是会保存在页面的源代码中。它的基本语法格式为：<!--注释内容-->在各功能模块的开头和结尾处添加注释可方便合作开发的人员修改和理解代码2．HTML5标签的属性在HTML5中，可以根据需要为标签设置属性，比如在段落标签中设置该段落的文本颜色或字号大小等。设置标签属性的语法格式为：<标签名属性1=“属性值1”属性2=“属性值2”>内容</标签名>一个标签可以有多个属性，标签名和属性名之间要用空格隔开，属性之间不分先后顺序。标签的属性省略时将使用它们的默认值。3．块级元素与行内元素body元素中的元素分为块级元素和行内元素。（1）块级元素在屏幕上显示时类似于首尾各有一个换行符。例如，图1-1中显示的两行文本内容，标记它们的h1与p元素都是块级元素，它们在新的行中显示内容，这些元素之后的内容同样也会另起一行。（2）行内元素是可以出现在同一行中的元素。例如，图1-1中显示的第一行文本内容，其中标记斜体的i元素就是一个行内元素HTML5主结构元素HTML5中包含上百个标签。例如，1.1.3节代码中的<h1>是文本类的标题标签，<p>是文本类的段落标签，这些标签主要放置在body元素内，具体应用将在后面的项目中分别讲解。在设计页面时如果任意堆叠各种标签，会导致页面的整体结构变得散乱，不便于后期添加样式。所以，为了方便设计页面结构，在对页面排版时需要将它们放在下列表示结构的元素中。（1）页眉。表示页眉的元素是header，它用于标记整个页面的标题栏或一个内容块的标题区域。一个页面可以包含多个header元素，它可以包含网站Logo、主导航或搜索框等。（2）导航。表示导航的元素是nav，它用来标记页面导航的链接组。一个页面可以包含多个nav元素，导航性质的链接都可以放置在nav元素中，比如主菜单链接、侧边栏导航或页内导航等。页脚的导航可以不放在该元素中。（3）主要区域。表示主要区域的元素是main，它用于标记一个页面的主要内容。一个页面中只能包含一个main元素。main元素不能被放在header、nav、article、aside或footer元素中，在<main>标签中设置role属性的值为main可以帮助阅读器定位页面的主要区域。（4）文章块。表示文章块的元素是article，它用来标记页面中的一个独立内容，比如报纸文章、博客条目或用户评论等。一个页面可以包含多个article元素，在article元素中也可以包含一个或多个article元素。（5）区块。表示区块的元素是section，它用来标记文档中的节，对内容进行分区，比如文档中的章节、页眉、页脚等，可以将其嵌套在article元素中。section元素标记的是页面中的特定区域，可对其中的内容进行操作，如存储到数据库里或输出到Word文档中。（6）附栏。表示附栏的元素是aside，它用来标记一个和其余页面内容几乎无关的部分，将它单独拆分出来后不会影响整体内容。例如，它可以包含与当前页面或主要内容相关的引用、侧边广告等。【学生】聆听、思考、记录通过讲解知识点，让学生了解HTML5语言的基

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论