html5简介

DOM Events
• 如果HTML5视频/音频标签是支持然后以下事件类型必 须支持:
• • • • •
•
Canplay //当浏览器可以播放音频或视频 时 Canplaythrough //当浏览器可在不因缓冲而停顿的情 况下进行播放时 Durationchange //当音频或视频的时长已更改时 ended //当目前播放列表已结束时 loadeddata //当浏览器已加载视频或音频的当前 帧 loadedmetadata //当浏览器已加载音频或视频的元数 据时
• • •
Node.getElementById //查找文档中的一个特定的元素 Node.appendChild //将节点插入到最后 Node.removeChild //删除节点
DOM Methods
• • • 下面的DOM方法必须支持: Node.insertBefore Node.parentNode //将节点插入到目标节点的前面 // 返回父节点
2011/12/12 Paul Caporn 升级到1.5版本 ， 增加支持广 播触发的应用程序 ， BBC应用程序的使用增加了信息的 注解 ，为VIDEO 回放提供可以用的对象标签，HTTP可适 应性流媒体移除引用,BBC不会准备媒体流符合这种格式
HTML 的介绍
• HTMLBaidu Nhomakorabea是什么？
– HTML（HyperText Mark-up Language）即超文本标记语 言或超文本链接标示语言，是目前网络上应用最为广 泛的语言，也是构成网页文档的主要语言。 HTML文件是由HTML命令组成的描述性文本，HTML命 令可以说明文字、图形、动画、声音、表格、链接等。 HTML文件的结构包括头部（Head）、主体（Body）两 大部分，其中头部描述浏览器所需的信 息，而主体则 包含所要说明的具体内容。
// 描述处理基于CSS样式的接口； //描述遍历和操作文档树的接口；
DOM Methods
• 下面的DOM方法必须支持:
•
• •
Document.documentElement //用来访问HTML文档
Document.createElement //创建指定元素方法 Document.getElementsByTagName //寻找给出的 标签名所有元素
设备可能支持按键:
Play Pause Play/Pause Toggle button Stop Fast Forward Rewind Alpha-Numeric Keys Space Backspace Back Subtitles Information
CSS 简介
• CSS是Cascading Style Sheet 的缩写。译 作「层叠样式表单」。 是用于（增强）控制网页样式并允许将样 式信息与网页内容分离的一种标记性语言 CSS 2.1应该被HTML5完全支持
DOM Methods
• • • • • • • • 下面的DOM方法必须支持: Window.clearInterval //取消由 setInterval() 设置的 timeout。 Window.setTimeout //在指定的毫秒数后调用函数或计 算表达式。 Window.clearTimeout //取消由 setTimeout() 方法设置的 timeout Window.location HTMLAnchorElement.focus HTMLInputElement.focus HTMLSelectElement.focus EventTarget.addEventListener
DOM Events
• • • • • • • • • • • pause play progress Ratechange Seeked seeking stalled suspend timeupdate volumechange waiting. //当视频或音频已暂停时 //当音频或视频已开始或不再暂停时 //当浏览器正在下载音频或视频时 //当音频或视频的播放速度已更改时 //当用户已移动或跳跃到音频或视频中的新位置时 //返回用户是否在音频或视频中进行查找 //当浏览器尝试获取媒体数据，但数据不可用时 //当浏览器刻意不获取媒体数据时 //当目前的播放位置已更改时 //当音量已更改时 //当视频由于需要缓冲下一帧而停止
Html 历史
• 2011/6/27 Paul Caporn 升级到 1.2版本，支持RTMP和 内置媒体控制。 • 2011/8/18 Paul Caporn 升级到1.3版本，添加额外的可 用的音频配置文件 • 2011/8/31 Paul Caporn 升级到1.4版本， 支持XMLHttpRequest对象 ，支持DOM方法 重新添加onkeypress支持
CSS 属性
•
• • • • • •
下面的CSS属性必须支持 ：
background (attachment, color, image, position, repeat attributes) background-color (hex/RBG, transparent) background-image (uri) background-position (left, center, right, top, bottom) background-repeat (repeat, repeat-x, repeat-y, norepeat) border (style, width attributes)
DOM properties
• • • • • • • • • • • 下面的DOM属性必须支持： HTMLDocument.cookie //文档的cookie HTMLDocument.body //文档的主体部分 HTMLElement.className //元素的对象名 HTMLElement.id //元素的ID HTMLElement.innerHTML //元素内部的HTML HTMLElement.style // 元素的样式 Window.location //窗口的位置 Window.name //窗口的名称 Window.navigator //窗口的导航 下面的DOM属性应该得到支持 ：HTMLElement.scrollTop 和HTMLElement.scrollLeft
HTML 支持的标签
• HTML应该支持的： • SECTION // <section> 标签定义文档中的 节（section、区段）。比如章节、页眉、 页脚或文档中的其他部分。
• CANVAS • VIDEO • AUDIO
//用于绘图的标签
HTML5 –语义标签
HTML5 –表单标签
HTML 支持的标签
•
• • • •
Node.childNodes
//返回子标签节点集合
Element.setAttribute //设置属性 EventTarget.removeEventListener //移除事件监听 Window.addEventListener //添加事件监听 Window.setInterval //按照指定的周期（以毫秒计 ）来调用函数或计算表达式。
CSS 属性续1
•
• • • • • • •
下面的CSS属性必须支持 ：
border-bottom, border-left, border-right, border-top (style, width) bottom clear (left, right, both, none) color (see section 2.6 of [25] for specific details of necessary supported attributes) display (block, inline, inline-block, list-item, none) float (left, right, none) font (family, style, weight attributes)
CSS 属性续2
•
• • • • • • •
下面的CSS属性必须支持 ：
font-family font-size (sizes in px, em and %) font-weight (normal, bold, bolder, lighter) height left line-height list-style (image, position, type attributes – see list-styletype as mentioned in [25] for details of necessary supported type attributes) margin margin-bottom, margin-left, margin-right, margin-top overflow (hidden, scroll, visible)
DOM介绍
• • • • • • • DOM有1级、2级、3级共3个级别 ,HTML5 是支持的DOM Level 2 DOM Level 2必须提供以下支持： Core //定义了创建和操作HTML文档节点的一些属性
方法
View Events CSS HTML
//视图：一个文档的各种视图 接口
// 事件：描述事件接口；
Event handlers (事件处理器)
• • • • • 作用：事件发生时要进行的操作 该设备必须支持以下设置的方法识别按键作用： HTMLDocument.onkeyup //松开键时触发 HTMLDocument.onkeydown //按下键就触发 HTMLDocument.onkeypress (optional) //按下键放开后 促发
•
•
CSS
• • • • • • 下面的CSS选择器必须支持: Type selector //类别选择器，根据类名来 选择 ID selector //id选择器，根据元素ID来选 择元素。 Class selector //类选择器 Descendant selector //后代选择器 Child selector //子选择器
•
如果KeyPress不被支持，当用户保持键压 低，keydown event 必须重复。
Key Codes
• 应用程序的用户界面需要支持五点导航作 为最低要求,这意味着设备必须支持按键: Up Down Left Right OK
• • • • •
Key Codes
•
• • • • • • • • • • • •
• Html5 ~=html + css +javascript
HTML 支持的标签
HTML必须支持的： A BODY BR DIV H1-H6 HEAD HTML IMG INPUT LI LINK OL OPTION P SCRIPT • SELECT SPAN TEXTAREA. • TITLE UL • • • • •
<
HTML 5> spec
主要内容
• • • • •
• •
Html 历史 Html 介绍 Html 支持的元素 PIN (Guidance) Performance 性能
Network performance 网络性能 Media 媒体
Html 历史
• 2011/2/23 James Parkin 创造html 0.1版 本的初稿 • 2011/4/27 James Parkin 更新html 到 0.11版本，将html更新为一体化。 • Paul Caporn 将html 升级到1.0 版本，更新 为非bbc iPlayer特性。 • 2011/6/23 Roux Joubert 升级到1.1版本， 从研发、业务开发和产品管理，合并成果 。
• HTML可能支持以下表单相关的元素 ： DATALIST //标签定义选项列表
HTML必须支持JavaScript 1.5
DOM介绍
• • DOM= Document Object Model，文档对象 模型 DOM是一个定义了脚本如何与html结构化 页面进行交互的规范，定义了一组接口和 对象。因此只要符合这个规范，实现了这 些接口就可以访问。可以用javascript也可 以用vbscript访问。它允许程序和脚本对 文档内容、文档结构、文档样式进行动态 地访问和更新。