第一章HTML5简介(1823KB).ppt

HTML5表单标签 HTML5新表单元素 datalist (选项列表) keygen (验证用户，但浏览器支持差) output (用于不同类型输出) HTML5表单标签 HTML5新表单元素的浏览器支持情况 HTML5表单属性 HTML5表单属性 HTML5表单属性 HTML5表单属性的浏览器支持情况 HTML5 离线本地存储 本地存储可在客户端(浏览器)存放数据。 localStorage 没有时间限制的数据。 sessionStorage 针对一个session(会话)的数据。 当浏览器关闭，数据会被删除。 通过使用JavaScript访问数据 HTML5 地理定位（LBS） HTML5 Web应用在用户同意的情况下可以使用地理位置接口 一般基于宽带网络的定位，不够精确。 装有GPS设备，精确度更高。 HTML5 应用缓存 什么是缓存？ 将经常需要访问的数据，放在内存中或者本地磁盘里 应用缓存优势 离线浏览 在没有网络的情况使用应用 效率 已缓存的资源加载速度更快 减少服务器负载 浏览器只下载更新的资源 总结 HTML5是下一代HTML标准 HTML5对多媒体支持 大多数浏览器开始支持HTML5 * * 第一章 HTML5介绍 目标 了解什么是HTML5 HTML5所支持的功能 为什么使用HTML5 HTML5如何诞生？ HTML5是W3C与WHATWG合作的结果。 WHATWG(网页超文本应用技术工作小组): 以推动网络HTML5标准为目的而成立的组织，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。 HTML5简介 HTML5是下一代HTML标准 强化了Web的表现性 支持网页多媒体 提供Canvas画布 三维、图形及特效 支持语义化标签 新的表单标签 增加离线本地存储 等等… HTML5仍处于完善中… 大部分现代浏览器都支持HTML5 支持HTML5的浏览器 目前支持HTML5的浏览器 Safari Chrome Firefox Opera Internet Explorer 9(支持某些HTML5特性) HTML5页面结构 !DOCTYPE HTML html body video width=320 height=240“ controls=controls source src=movie.ogg type=video/ogg source src=movie.mp4 type=video/mp4 你的浏览器不支持video标签。 /video /body /html 强大的Web的表现特性 视频 (video) 音频 (audio) 画布 (canvas) SVG 拖放（Drag 和 Drop） HTML5播放视频 HTML5视频播放器 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 HTML5播放视频 video标签 视频格式的浏览器支持情况 强大的Web的表现特性 HTML5播放音乐 大多数音频都是通过Flash插件来播放的。 HTML5提供的audio标签能够播放音频文件或音频流。 HTML5播放音频 audio标签 音频格式的浏览器支持情况 HTML5 Canvas (画布) HTML5的Canvas可以使用JavaScript脚本在网页上绘制图形。 允许我们绘制直线，椭圆，矩形、字符、图像等 像素级绘制图形 支持渲染内容以png、jpg格式保存 HTML5 SVG(可伸缩矢量图形) SVG是使用xml文件格式定义的2D图形规范 特点是放大和缩小尺寸图形质量不会有损失。 不适合游戏应用 SVG优势 可通过文本编辑器编辑 可读取图像文本信息 高质量打印 图像无损放大 浏览器支持 IE9+、Firefox、Opera、Chrome、Safari HTML5 元素拖放 拖放是一种常见的功能，即把一个内容拖动到另一个位置。 需要使用JavaScript控制。 HTML5中任何元素都能够被拖放 HTML5 语义化标签 什么是语义化标签？ HTML标签语义化，即HTML标签的含义。 可以让开发者直观的读懂标签。 对有哪些信誉好的足球投注网站引擎友好 HTML5表单标签 表单输入类型 HTML5中新增加的表单输入类型 表单元素 HTML5新增加的表单元素 表单属性 HTML5新增加的表单属性 HTML5表单标签 HTML5拥有多个新的表单输入类型，提供了更加友好的交互体验。 Email url Number Range Search Color