HTML5,HTML5简介,HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务的需求，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX，并且提供更多能有效增强网络应用的标准集,关于HTML5,HTML5的正式版要到2014年才会出炉，但是现在已经有许多知名网站开始在使用这项新的技术规格;包括了Google、Facebook、Youtube、Wikipedia和Twitter。,关于HTML5,1. HTML5就是Web的未来 目前全球的前十大网站，已有8个正在使用HTML5 2. HTML5让设计过程变简单，减少浏览器对于外挂程式，如Adobe Flash、Microsoft Silverlight的需求 HTML5技术能确保各种功能，如影片或3D图形的运作，而且能在各式不同的装置及浏览器上使用,关于HTML5,3. HTML5使开发时程更快速,HTML5添加了许多新的语法特征 这些元素能够让开发人员更容易的在网页中添加和处理多媒体和图片内容，简化了开发人员编写网页的长度及复杂度 4. HTML5扩展速度快 根据Binvisions2010年9月的研究，全球百大网站中，已有34个网站开始使用HTML5。另外，根据Strategy Analytics的研究，能兼容HTML5的手机将在2013年达到10亿台。,关于HTML5,5. HTML5创造出惊艳的Web体验HTML5技术让开发及设计能够更有效率、更丰富，更能轻松地打造出令人惊艳的网站,HTML5示例,HTML5示例,http:/www.ro.me/film,HTML5演示,Google Apple Mozilla https:/developer.mozilla.org/en-US/demos/tag/tech:html5/,HTML5-API,即时二维绘图 Canvas API：有关动态产出与渲染图形、图表、图像和动画的API 定时媒体播放 HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、整合的、脚本式的处理音频与视频的API，而无需安装任何插件 离线存储数据库（离线网络应用程序）,HTML5-API,Geolocation API 使用者可共享地理位置，并在Web应用的协助下享用位置感知服务（location-aware services） 文件API 处理文件上传和操纵文件 文件写入 从网络应用程序向文件里写内容 ,各浏览器的支持,HTML5 Test网站，是用以测试对浏览器对热门新功能的支援。测试的满分是 500 分，而当中的额外分数表示浏览器对一些没有列入W3G的标准亦有支持 截止2012年6月27日，五大浏览器最新版本所取得的分数分别是,HTML5学习资源,HTML5中文网 HTML5中国 http:/www.html5cn.org/ HTML5搜 GBin1专题之HTML5教程 ,第一章 HTML5中常用的交互元素,标签,该标签主要用于显示文档或某个细节信息的作用，常与、元素配合使用 ,标签,显示内容 我被显示出来了 ,标签,标签包含 details 元素的标题，details 元素用于描述有关文档或文档片段的详细信息 HTML 5 欢迎使用 summary 标签 ,标签,定义菜单列表。当希望列出表单控件时使用该标签，该标签常与列表元素结合使用，常用的属性如下：,标签, Chrome浏览器 360浏览器 火狐浏览器 ,标签,用于定义各种类型的命令按钮，属性如下： 注：目前只有 IE支持 标签,标签, Click Me! ,标签, function command_click() document.getElementById(show).innerHTML= 点击了打开command; - 打开 ,标签,用来表示页面中的某个任务完成的进度。例如下载文件时，可以通过该元素动态展示在页面中，展示方式可以使用整数或百分比,标签,开始下载 编写一个JS程序，实现如下效果：,标签, var intVal = 0; var intTimer; var objpro = document.getElementById(objpro); var title = document.getElementById(mytitle); function interval_handler() intVal+; objpro.value = intVal; if(intVal = objpro.max) clearInterval(intTimer); title.innerHTML = 下载完成; else title.innerHTML = 正在下载+intVal+%; function btn_click() intTimer = setInterval(interval_handler,100); , 标签,表示在一定数量范围中的值，如投票中，候选人各占比例情况及考试分数等, 标签,120人参与投票，明细如下： 张三: 30% 李四: 70% ,第二章 HTML5中的重要元素,节点元素-section标签,用于标记文档中的区段或段落，例如文章中的章节、页眉、页脚的设置,节点元素- section标签, 王威 性别:男 邮箱: /* draggable 是否可以拖动*/,节点元素- 标签,该元素将具有导航性质的连接归纳在一块区域中，是页面元素更有语义性 首页 图书 论坛 ,节点元素- 标签,用于对页面的标题进行分组，从而形成一个组群。该元素常与结合使用， 说明各个组群的功能 标题组 标题1 标题2 ,节点元素- 标签,定义文档作者或拥有者的联系信息，常用于元素外部;如果位于元素内部，则它表示该文章作者或拥有者的联系信息。 通常的做法是将 address 元素添加到网页的头部或底部 Written by Email me ,分组元素-ul标签,定义无序列表。使用与HTML4类似，但HTML5中不再支持compact 和 type 属性 数码 图书 程序设计 经典文学 百货 ,分组元素-ol标签,定义有序列表 Coffee Tea Coffee Tea ,分组元素-ol标签,定义一个定义列表。 标签用于结合（定义列表中的项目）和（描述列表中的项目） Coffee Black hot drink Milk White cold drink ,文本层次元素-mark标签,定义带有记号的文本。请在需要突出显示文本时使用 标签 Do not forget to buy milk today. ,文本层次元素-短语元素标签,以下元素都是短语元素。并不反对使用它们，但是通过使用样式表(CSS)，可能取得更丰富的效果,文本层次元素-短语元素标签,Emphasized text Strong text Definition term Computer code text SampleComputerCode Keyboard text Variable Citation,嵌入内容-img标签,定义 HTML 页面中的图像 function click() alert(图片被点击); - ,嵌入内容-iframe标签,在页面中创建包含另一文档的框架 sandbox:可以避免引入页面私自访问父页面、执行脚本、嵌入表单或控制表单 allow-forms：允许脚本嵌入自己的表单或操作表单 allow-same-origin：允许将嵌入内容是为同一个数据源 allow-scripts：允许执行脚本 allow-top-navigation：允许最外层浏览器的导航功能,公共属性,第三章 HTML5中的表单,表单,表单是web浏览器与web服务器进行通信的最常用的手段，通过表单，浏览器不仅能从web服务器中获得信息，而且还能像web服务器反馈、提交信息。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素，该元素中的值是用于与web服务器进行交互使用的,表单标签,表单元素举例,文本域: 姓: 名: - 单选按钮: 男 女 ,表单的动作属性（Action）和确认按钮,当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理 姓名: ,HTML5新增的input类型,HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证 email-输入邮件地址的文本框 url-输入URL地址的文本框 number-输入数字的文本框,可以设置范围 range-通过滑动条改变一定范围内的数字 date-选择日期(年、月、日、星期)的文本框 search-输入搜索关键字操作的文本框,email类型, 请输入邮件地址: ,URL类型, 请输入URL地址: ,number类型, 请输入数字: ,range类型, 请设置你喜欢的颜色: 我是背景色 rgb(0,0,0) ,range类型, var r,g,b; setColor(); function setColor() r = document.getElementById(r).value; g = document.getElementById(g).value; b = document.getElementById(b).value; strColor = rgb(+r+,+g+,+b+); document.getElementById(color).innerHTML=strColor; document.getElementById(colorPrev).style.backgroundColor=strColor; ,date日期类型, 日期与时间类型输入框: 月份与星期输入框: 日期时间型输入框: ,search搜索类型,用于关键字查询，该类型的输入框与text类型的输入框在功能上没有太大差别，但在页面展示时，却有差别 请输入关键字: ,search搜索类型, function ShowKeyWord() var str=document.getElementById(txtKeyWord).value; str = 您输入的关键字是:+str; document.getElementById(show).innerHTML = str; return false; ,input元素新增的公用属性,input元素新增的公用属性-autofocus属性,该属性是一个布尔值，主要功能是页面加载完成后，光标是否自动锁定该input元素 UserName: Password: ,input元素新增的公用属性-pattern属性,元素的验证属性，使用该属性中的正则表达式，可以验证文本输入框中的内容 UserName: 以字母开头,包含字符、数字或下划线，长度在57之间 ,input元素新增的公用属性-placeholder属性,提供一种提示（hint），描述输入域所期待的值。提示（hint）会在输入域为空时显示出现，会在输入域获得输入值时消失 UserName: ,inpu