html5中级教程.ppt

拖放 dragstart – dragenter – dragover – drop – dragend 将元素的draggable属性设置为 true 拖动对象的ondragstart和event.dataTransfer.setData() 用于在拖动过程中传递数据 支持两种类型，字符串和文件 拖动目标对象的ondragover 放置ondrop 拖放 script type=text/javascript function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData(Text,ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData(Text); ev.target.appendChild(document.getElementById(data)); } div id=div1 ondrop=drop(event) ondragover=allowDrop(event)/div img id=drag1 src=img_logo.gif draggable=true ondragstart=drag(event) width=336 height=69 / 微数据 微数据是对 Web 页面上已经存在的数据提供附加的语义，是对 HTML 的一种补充 itemscope 标记该元素是微数据元素，其子元素是微数据格式的一部分 itemtype 定义微数据格式的词汇表 itemid 数据项的唯一标识，可选 itemprop 自定义的数据元素，键值格式 itemref 允许微数据元素关联另一个在同一页面的元素 微数据 针对 window 对象触发的事件（应用到 body 标签） * 由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中） * 由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 audio、embed、img、object 以及 video）: * 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 * 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 * /#microdata * * * 应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。 网站的缓存数据量不得超过 5 MB。不过，如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制。 * 应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。 * 应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。 * 应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。 * /#applicationcache * /#history * /#history session history * HTML5中级教程 林鹏 2016年1月 目录 表单 新属性 新input类型 新元素 通用属性 其他属性 标准事件 Window事件 表单事件 键盘事件 鼠标事件 媒介事件 拖放 微数据 应用缓存 历史管理 表单 全局属性 全局属性可用于任何 HTML 元素 id 元素的唯一 ID tabindex 表示元素的 tab 键控制次序 contenteditable 是否允许用户编辑内容 contextmenu 元素的上下文菜单，上下文菜单在用户点击元素时显示 draggable 是否允许用户拖动元素 hidden 表示该元素是无关的，被隐藏的元素不会显示 data-* 自定义的属性，用于存储页面或应用程序的私有定制数据 特别属性 ping a标签中异步发送一个POST请求到Ping指定的地址 async script标签中规定脚本将被异步执行。 表单 元素新类型 email 电子邮件 number 数字 url 网络地址 color RGB色彩选择窗 range 数字范围 search 查询框 Date Pickers date 日期 datetime 日期时间