前端知识点总结——H5

前端知识点总结——H5

1.html5新特性

(1)新的语义标签
(2)增强型表单*
(3)音频和视频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖动API
(8)Web Worker
(9)Web Storage
(10)Web Socket

2.增强型表单

1.新input type
H4:text;checkbox;password;radio;submit;reset;File;
H5:email;url;number;search;color;date;month;week

2.新的表单元素
H4:input;button;select;textarea
H5:datalist;progress;meter;output

3.html5新特性—datalist(数据列表)

<datalist id=”list3”>     datalist本身不可见
  <option>xxx</option>
  <option>yyy</option>
</datalist>
<input type=”text” list=”list3”/> 
datalist为input提供输入建议列表

3.1: html5新特性—progress(进度条)

左右晃动进度条
具有指定进度值进度条

3.2: html5新特性—meter(刻度尺)

Meter：用于标示一个值所值的范围:不可接受(红色),可以接受(黄色),非常优秀(绿)
薪水:
<meter min=”最小值” max=”最大值” low=”下限” high=”上限”
最佳值=”” value=”当前值”>

3.3: html5新特性—output

output:输出，语义标签,没有任何外观样式，样式等同于span
商品单价: 3.50
购买数量:
小计:7.00

3.4:html5新特性—(表单元素新属性)

H4:type;id;value;name;style;readyonly;disabled;checked
H5:
(1) placeholder 占位符
(2) autofocus 自动获取输入焦点
(3) multiple 允许输入框中输入多个值，用逗号分值
(4) form 用于把输入域放置在表单外部

(5) required 必填空 (6) maxlength 字符串最大长度 (7) minlength 字符串最小长度 (8) min 指定数值最小值 (9) max 指定数值最大值 (10) pattern 指定输入内容符合正则表达式

3.5 html5新特性–视频与音频 (重点)

 Flash被H5取代
 Flash绘图(AS/Flex)   ->    canvas/svg
 Flash动画            ->    canvas/svg 定时器
 Flash视频和音频播放   ->    video/audio
 Flash 客户端存储      ->    webstorage

3.6:H5新特性—视频播放

<video src=”x.mp4”></video>
  <video>
    <source src=”x.mp4”></source>
    <source src=”x.ogg”></source>
    <source src=”x.webm”></source>
    您的浏览器版本太低，请升级
  </video>

它本身是一个300*150的inline-block元素
成员属性:
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略

auto: 预加载一定时长视频和元数据

  metadata:    仅预加载元素数(尺寸，时长，第一帧画面)
  none:        不加载任何内容

js对象属性:

currentTime  当前播放时长
duration     总时长
paused:     当前视频是否处理暂停状态
volume（0~1）  音量

playbackRate: 回放速率: 大于1快播 小于1慢放
js 成员方法