WEB新技术：HTML5介绍.pptx

,简化的声明,HTML5, Title of the document The content of the document ,HTML4有三种声明：Strict、Transitional 以及 Frameset, ,更加语义化的结构,新增的主体结构元素 article - 独立的内容 section -文档中的节。是段落 nav - 导航链接的部分 aside - 其所处内容之外的内容。可用作侧栏 time 表面日期或时间 pubdate属性 -指示 元素中的日期/时间是文档的发布日期 新增的非主体结构元素 header - 文档的页眉（介绍信息） hgroup -对网页或区段（section）的标题进行组合 footer -文档的页脚 address - 文档作者或拥有者的联系信息,更加语义化的结构,HTML4,HTML5,更加语义化的结构, 网页的标题 页头 文章一级标题 文章二级标题 文章内容 ,Form 2.0,新表单,表单元素,datalist - 规定输入域的选项列表 keygen - 提供一种验证用户的可靠方法 output - 用于不同类型的输出，比如计算或脚本输出,新的 form 属性,autocomplete 自动完成 novalidate 无需验证,新input type,email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color tel,新的 input 属性,autocomplete 自动完成 autofocus 自动获得焦点 form 加入到某form中 form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) 重写表单属性 height 和 width list 关联datalist来限定输入值 min, max 和 step 用在中 multiple - 规定输入域中可选择多个值 pattern (regexp) - 用于验证 input 域的模式（pattern） placeholder - 提示（hint），描述输入域所期待的值 required - 规定必须在提交之前填写输入域（不能为空）,文件API,FileList: Blob File FileReader URI scheme,html5的拖拽API,被拖拽元素上的事件：dragstart、 dragend 目标元素上的事件：dragenter、 dragover、 dragleave、 drop 元素属性 draggable=“true” event.dataTransfer对象,画图,画图形 画图片 设置风格和颜色 变形 组合 动画 WebGL,和,多媒体元素,属性,src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度,属性,src：音乐的URL preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条,本地存储,DOM Storage sessionStorage localStorage Web SQL Database,离线应用程序,Server 端设置 AddType text/cache-manifest appcache cache manifest文件 更新缓存 自动更新 手动更新: window.applicationCache.update(),WebSocket,new WebSocket(ws:/domain/path); send(msg) onmessage, onerror, onopen, onclose Server：jetty7/8, jWebsocket,web workers后台线程,可以做什么： 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信 可以在worker中通过importScripts(url)加载另外的脚本文件 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval() 可以使用XMLHttpRequest来发送请求 可以访问navigator的部分属性 有那些局限性： 不能跨域加载JS worker内代码不能访问DOM 各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行 不是每个浏览器都支持这个新特性 目前效率很低,地理位置信息,navigator.geolocation latitude: 纬度 longitude: 精度 accuracy: 精确度，单位米 altitude: 高度，单位米 altitudeAccuracy: 高度的精确地，单位米 heading运动的