第43课html5入门讲义

1、.ZSR 入门（时间 SOT）1课前（25 min）2课程回顾（2 min）3本章目标（1 min）4内容概要（1 min）5新课内容（60 min）5.1html5（15 min）5.1.1html5 时间表5.1.2html5 新特性5.1.3html5 与 html4 区别5.1.4各个浏览器支持情况5.2详细介绍 html5（30 min）5.1.1新增的语义化5.1.2其他新特性5.3详细介绍 CSS3（15 min）5.3.1CSS3 时间表5.3.2CSS3 概述5.3.3CSS3 技术概述6课程总结（4 min）7作业布置（1 min）8常见问题备注Html5 入门（无 PPT

2、） 建议时间：25 min课前本章目标（PPT 第 2 页）建议时间： 1 min阐述本节课需要掌握的学习目标（详见PPT）内容概要（PPT 第 3 页）建议时间： 2 min新课内容HTML5（PPT 第 4 页）建议时间： 10 min1）阐述html5。2）HTML5 时间表 - 阐述HTML5 的各个历史发展阶段（PPT 第 5 页）3）HTML5 新特性 - 简单阐述HTML5 里添加的新的特新。 （PPT 第 6 页）那么 HTML5 比之前一个版本的 html 新增添了一些，更加强调了的语义化。对多功能有了 增加，audio 等等。同时表单的功能也比之前更加丰富。那么 Js 里提

3、供了许多 API，包括本地、获取拖拽内容信息、地理位置信。这些都更加强了页面的表现力。同时搭配CSS3 的使用，那么CSS3 更在页面排版、视觉效果上，动画效果有更强的表现能力，使得页面显的更加绚丽多彩。4）HTML5 与HTML4 的区别 - 阐述两个版本之间的区别，及HTML5 的特点（PPT 第 7 页）举例说明：苹果：2010 年 6 月 7 日，苹果在开发者大会的会后发布了 Safari 5，这款浏览器支持 10 个以上的HTML5新技术，包括全屏 、HTML5 、HTML5 地理定位、HTML5 切片元素、HTML5 拖动属性、HTML5的AJAX 历史和WebSocket 字幕。

4、Opera：2010 年 5 月 5 日，Opera 公司首席技术官在访华之际，号称“CSS 之父”的他认为，HTML5与 CSS3 将是全球互联网发展的未来趋势，目前包括 Opera 在内的诸多浏览器厂商，纷纷在研发 HTML5 的相关产品，web 的未来属于HTML5. Mozilla：2010 年 7 月，Mozilla 发布了 Firefox 4 浏览器的第一个版本。在该版本中 Firefox 浏览器中进行了大幅度改进，包括新的HTML5 语法分析器，以及支持 HTML5 形式的控制等。HTML5 是HTML 新的标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5 技术

5、。HTML5 有两大特点:首先，强化了Web 网页的表现性能。其次，追加了本地数据库等Web 应用的功能。广义上HTML5，实际上指的是包括HTML、CSS 和JavaScript 在内的一套技术组合。5）阐述现在的浏览器对HTML5 的支持情况（PPT 第 8 页）chrome、火狐、safari 这四个浏览器还是对HTML5 的一些属性、及特性支持力度比较大的。IE10 现在也已经开始加大对HTML5 的支持了，IE8 之前支持力度不是很大，IE9 的情况也不是很好。详细介绍 HTML5（PPT 第 915 页）建议时间： 5 min1）新增语义化，简单阐述。（PPT 第 915 页）2)

6、 阐述HTML5 里新增的其他特性。（ppt 第 1622 页）10 min1、先通过两种对比图，来给大家介绍一下，新增的结构便签与之前在写页面结构时不同。2、按顺序讲解新增的结构化，包括新增的其他类型的，和新增的表单类型。包括 HTML5 还废除了之前一些已经不常用的。接着可以详细讲解一下两个新增的特殊的结构便签。article 和section。HTML 5 有两大特点:首先，强化了Web 网页的表现性能。除了可描绘二维图形外，还准备了用于和音频的。其次，追加了本地数据库等Web 应用的功能1、语法的改变DOCTYPE是HTML 文件中必不可少的，它位于文件第一行。在 HTML5 中，他的

7、方法如下：不刻意使用版本，一份文档将会使用于所有版本的 HTML。 2、指定字符编码在HTML5 中，可以使用对元素直接追加 charset 属性的方式来指定字符编码，如：3、HTML5 确保了与之前HTML 版本的兼容性而设计的。例如，符合“没有的结束标记”的HTML代码随处可见，HTML5 中并没有把这种情况作为错误来处理，而是允许存在这种情况，但明确地规定了这种情况应该如何处理。新课内容)99 （66: 第 d 页）建议时间： SOT ）看效果，说明一下看到了那些效果（66: 第 页） SOT比如：能看到发亮的字体，带阴影、带圆角的边框，能倾斜的图片，图片的倒影效果。还有一个树或雪花的图

8、案挡在了效果图的旁边（蒙版效果） 、音频和视频说明其书写格式，包括支持的音频和视频的格式。对比之前 .:32 版本的好处。 、*XGM *XUV拖拽 拖放也是主要和之前的 .:32 版本做一下对比，然后说明其主要用途。 、)GTGY)GTGY 的意思就是画布，通过这个标签可以在页面中实现图形的绘制。图形的绘制需要用 PY 来写。另外 )GTGY 标签里还有两个属性，OJZN 和 NKOMNZ。可以定义画布的宽和高。 、=KH-2 *=KH-2 是一种 * 绘图标准，这种绘图技术标准允许把PGGYIXOVZ 和 5VKT-2 +9 结合在一起，通过增加 5VKT-2 +9 的一个PGGYIXOV

9、Z 绑定，=KH-2 可以为 .:32 )GTGY 提供硬件 * 加速渲染，这样 =KH 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 * 场景和模型了，还能创建复杂的导航和数据视觉化。显然，=KH-2 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 * 结构的网站页面，甚至可以用来设计 * 网页游戏等等。 、=KH 9ZUXGMK 本地存储本地存储 同样是 NZSR 的规范，同样是存储，.:32 本地存储和离线存储不是一回事，感觉有必要提及，因为在互联网铺天盖地宣传 NZSR 的特性的时候，经常出现这样那样的字眼，对于还没有接触的或初学者来说，很容易混淆这两个概念。离线

10、存储（5LLROTK 9ZUXGMK）正如之前我的那篇介绍中你看到的样子，实际上它实现的是文件离线存储，而本地存储（2UIGR 9ZUXGMK）跟会话存储一样同属于 KH 的数据存储。还有一种存储方式是KH 972 *GZGHGYK，它是一个可以用 972 操作的客户端数据库。这些存储方式都是用户客户端实现的，因此有人会把他们称为“本地存储”，实际上我觉得叫“客户端存储”更适合，这样不至于跟=KH9ZUXGMK 中的 2UIGR 9ZUXGMK 概念冲突和混淆。 、=KH =UXQKXY 多线程处理=KH =UXQKXY 是在 .:32 中新增的，用来在=KH 应用程序中实现后台处理的一项技术

11、。在使用 .:32 与PGGYIXOVZ 创建出来的 =KH 程序中，因为所有的处理都是在单线程内执行的，所以如果花费的时间比较长的话，程序界面会处于长时间没有响应的状态。最恶劣的是，当时间长到一定程度的话，浏览器还会跳出一个提示脚本运行时间过长的提示框，使用户不得不中断正在执行的处理。为了解决这个问题，.:32 新增了一个 =KH =UXQKXY 6/。使用这个 6/，用户可以很容易地创建在后台运行的线程（这个在 .:32 中被称为 UXQKXY），如果将可能耗费较长时间的处理交给后台去执行的话，对用户在前台页面中执行的操作就完全没有影响了。 、 地理定位基于位置的应用最近吸引了很多眼球。当

12、前每个人都想知道“你”在哪里，这样他们可以利用你的数据做一些内容服务，比如你在哪里。基于位置的应用 服务有不同形式。其中一部分是单纯的检测你的位置信息更新。另外一些应用可以返回一些你指定的数据，比如根据你位置显示酒店或是天气数据。也有一些有趣的提示，当你进入或离开某个特定的区域会发送。总之，位置信息就是一个应用如何知道用户的位置的最关键能力。探测用户的位置当前有不同的机制可以做到。在典型的 KH 应用里，用户的网络环境 /6 地址会被破译，然后服务器端来确定用户的位置。而在移动设备上，一个常见的 -69 接收器能够提供更详细的位置。.:32 通过 -KURUIGZOUT 6/ 来支持检测用户位

13、置。根据你的需求它提供了单次的位置接收以及持续的位置接收。它通过浏览器里的 TGOMGZUX MKURUIGZOUT 来实现支持。在智能手机上基于 KHQOZ 的浏览器上.:32 -KURUIGZOUT 已经支持的不错了。2）叙述CSS 的历史发展历程（PPT 第 24 页）2min3）概述CSS3 的技术情况，CSS3 的选择器：（PPT 第 2527 页）5min 用，下拉框可以使用，甚至按钮也可以使用，这样其实非常。 么元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，还可以实现各种复杂的指定， 4）简单介绍 css3 样式（PPT 第 2830 页）1min5）css3

14、里的布局（PPT 第 31 页）1min看到 Css3 里可以对页面进行盒布局，分栏布局，自适应弹性布局等属性。那么这些新的布局方式， 能使也刚好的实现可扩展性。6）Css3 里动画（ppt 第 32 页） 1min看到Css3 里可以设置变化、过渡、及动画效果的属性。课程总结（PPT 第 15 页）建议时间： 10 min扩展阅读（PPT 第 16 页）建议时间： 3 min看到Css3 里可以对圆角、阴影、自定义字体、边框背景、渐变、背景渐变等进行设置。CSS3 中主要有这 4 大类，属性选择器、结构性伪类选择器、UI 元素状态伪类选择器、通用兄弟元素选择器。同样也能大量减少样式表的代码书

15、写量，最终书写出来的样式表也会变得简洁明了。所以，在 css3 中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什概述 css3 见 ppt选择器是 css3 中的一个重要的内容，使用它可以大幅度提高开发书写或修改样式表时的工作效率。 在样式表中，一般会书写大量的代码，在大型中，样式表中的代码可能会达到上千行。麻烦的是，如果要修改样式，只能在这一大篇的css 文件中，去找到 class 属性，然后再去修改。使用元素的 class 属性有两个缺点：第一，class 属性本身没有语义，它纯粹为 css 样式服务，属于多余的属性。第二：使用 class 属性的话，并没有把样式与元素绑定起来，针对同一个 class 属性，文本框可以使看到这是css 发展里是的时间过程图，最早在 1996 年出现 css1.0 版本，在这版中，已经包