html5笔记

html视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

ie9只提供了对MPEG4的video标签的支持

video标签属性
1.autoplay 自动播放
2.controls 控制条(播放,暂停)
3.height
4.width
5.src 视频路径
6.loop 循环播放
6.preload 预加载

video的方法,属性和事件

在所有属性中,只有 videoWidthvideoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

html音频格式

1.Ogg Vorbis
2.mp3
3.wav

audio标签属性

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持

html拖放

支持情况:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

增加拖放的步骤
1. 标签增加拖放的draggable属性,并且设置为True
2.拖动什么 ondragstart 设定需要拖动数据的类型 event.dataTransfer.setData("Text",event.target.id);
3.放到何处 ondragover 需要阻止元素的默认的事件event.preventDefault()
4.进行放置 ondrop

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

例子:








html画布

canvas标签
canvas定义了一片js绘图的区域,提供了一系列的绘图的函数和方法

html svg

svg是xml定义的的绘制矢量图
svg具体的教程

html地理定位

地理定位 navigator.geolocation.getCurrentPosition(showPosition)
错误消息

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

Web 存储

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储



Application Cache

manifest="demo.appcache"
  • 0CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

更新缓存:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

完整manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

Web Workers





Count numbers:



webworker在js中,所以无法访问

  • window 对象
  • document 对象
  • parent 对象

Server-Sent

Server-Sent 事件指的是网页自动获取来自服务器的更新。

webcode:

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "
"; };

php:


EventSource 有下面三个事件:
1.onopen 当通往服务器的连接被打开
2.onmessage 当接收到消息
3.onerror 当出现错误

html5 表单支持的类型

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

html5 新表单类型

链接
但支持度低

  • datalist
  • keygen
  • output

html5新属性

  • autocomplete 自动完成
  • autofocus 自动获得焦点
  • form 规定输入域属于一个或者多个表单
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) 重写 form 元素的某些属性设定
  • heightwidth input标签的高度和宽度
  • list
    限定输入域的列表



  • min, maxstep 输入域的最大,最小和步长
  • multiple 多选
  • pattern (regexp) 正则验证
  • placeholder hint提示
  • required 必填
  • novalidate 不验证输入域或者表单域

你可能感兴趣的:(html5笔记)