Web 前端开发技术 教案 项目三 HTML5 基础.docx

Web前端开发技术

教案设计

项目课题

HTML5基础

授课时间

授课对象

大学生

学习目标

1.认识HTML5的特性和优势。

2.熟悉HTML5的文档结构。

3.掌握HTML5新增的结构元素及页面元素的使用。

学习重点

熟悉HTML5的文档结构。

学习难点

掌握HTML5新增的结构元素及页面元素的使用。

教学方法

讲授法、课堂演示法

教学用具

多媒体课件

教学流程

教学环节

教学内容

教学过程

任务一HTML5概述

一、HTML5的八个特性

HTML5具有八个特性,分别对应八种logo,如图3-1所示,左边第一个为HTML5的新ogo,它的右边为HTML5八个特性的logo。

1.语义特性(Semantic)

HTML5赋予了网页更好的意义和结构。更加丰富的标记集将随着对RDFa(RDFattribute)、微数据与微格式等方面的支持,构建对程序和用户都更有价值的数据驱动的Web。

2.离线与存储特性(OfflineStorage)

基于HTML5开发的网页拥有更短的启动时间和更快的联网速度,这些全都得益于HTML5应用程序缓存(ApplicationCache)、本地存储功能、IndexedDB和FileAPI说明文档等的支持。

3.设备访问特性(DeviceAccess)

自Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口,使外部应用可以直接与浏览器内部的数据相连。例如,视频影音可直接连接麦克风及摄像头。

4.多媒体特性(Multimedia)

支持网页端的Audio、Video等多媒体功能,与网站自带的摄像头、影音功能等相得益彰。

5.三维、图形与特效特性(3D、GraphicsEffects)基于SVG(ScalableVectorGraphics,可缩放的矢量图形)、Canvas、WebGL及CSS3的3D功能,用户会惊叹浏览器所呈现的惊艳视觉效果。

6.性能与集成特性(PerformanceIntegration)

HTML5会通过WebWorkers和XMLHttpRequest2等技术,帮助Web应用和网站在多样化的环境中更快速地工作。

7.连接特性(Connectivity)

更高的连接工作效率,使基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得以实现。HTML5拥有更有效的服务器推送技术,Server-SentEvent和WebSockets就是其中的两个特性,这两个特性能够实现将服务器数据“推送”到客户端的功能。

8.CSS3特性

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更好的效果。此外,相较于之前的Web

排版,Web的开放字体格式(WebOpenFontFormat,WOFF)提供了更高的灵活性和可控制性。

二、HTML5的优势

1.摆脱对平台的依赖

用户打开浏览器,直接就可以访问自己的应用,不需要经过各种审核。

2.实时更新

通常平台的审核都需要7个工作日左右,如果发布之后再出现问题则很难补救,而Web系统不存在这种问题。

3.离线使用

用户可以离线使用,更新下载量较少时,可以全部更新,也可以选择替换部分文件。

4.代码更安全

Web应用有一个很重要的问题就是代码的安全性问题,但HTML5可以将Web代码全部加密,本地应用解密后再运行,在很大程度上提高了代码的安全性。

5.跨平台

HTML5的跨平台兼容特性,使大部分核心代码不需要重写,这是因为JavaScript的代码可以在许多地方使用,包括移动应用、移动网站、PC网站、各种浏览器插件,甚至可以用WebKit封装作为跨平台的应用程序。

6.可以充分利用Native

HTML5可以通过浏览器充分利用Native的好处。例如,可以使用GPS、照相机、本地相册、读取本地通信录,也可以使用推送功能,最重要的是,某些Web无法实现的功能可以利用Native来实现。

任务二HTML5文档结构

一、HTML5页面结构

HTML5中采用页眉、页脚、导航、文章内容等结构元素来进行页面布局,十分方便。

HTML5页面结构元素语法如下。

!DOCTYPEhtml

html

head

metacharset=“utf-8”

titleHTML5文档结构/title

/head

body

header

nav……/nav

/header

article

section……/sec