html5新特性总结

1.canvas绘图

  • 矩形和线条的绘制fillStyle,strokeStyle,路径beginPath,moveTo,lineTo,fill,stroke,closePath
  • 插入图片drawImage
  • 像素操作ImageData
  • 文字写入font,fillText,strokeText
  • 颜色渐变CanvasGradient对象createLinearGradient,createRadialGradient

2.Form type= 

  • number:限制输入的数字 max min step
  • url:验证url格式
  • email:验证email格式
  • telephone:电话
  • color:获取颜色
  • range:创建滑块min max step
  • Date Pickers date(日月年) month(月年) week(周年) time(hour&minute)datetime(时间日月年) datetimelocal
  • list  datalist(下拉列表)

3. 视频与音频

  • video
    •   支持Ogg,Mpeg4,webM
    •   autoplay controls preload
  • audio
    •   Ogg Vorbis,MP3,Wav
    •   autoplay,controls

4. web 存储

  • localstorage
  • sessionstorage

5.其他:

1. 新的文档类型

<!DOCTYPE html>

2. link 与script不需要类型了

<link rel="stylesheet" href="a/b/c.css" />
<script src="a.js" />

3. 语义化标签header、footer、Hgroup、nav、article、section、aside……

4.有用的标签:

  • 高亮文本的标签<mark>
  • 小字体排版的标签<small>用于footer中的版权信息
  • figure与figcaption,将图像与文字描述联系起来

5.有用的属性

  • placeholder:占位符
  • required:必要属性
  • autofocus:自动聚焦
  • contenteditable:内容可编辑
  • 正则表达式:pattern
  • input:type为email,在客户端验证邮箱;range:创建滑块,有min,max,step属性,可以通过after/before显示属性

6. local storage:客户端存储,永久存储大的数据段,知道主动删掉

7. audio:有controls进度条属性

8. video:有preload预加载、controls进度条属性

 placeholder

<input type="text" name="desplaceholder" placeholder="bxwlysy" />

 required必要属性

<input type="text" name="desrequire" required />

 audio 

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3"/>
</audio>

firefox支持.ogg webkit支持.mp3 ie不支持,opera10及以下支持.wav

video preload controls

原文地址:https://www.cnblogs.com/danranysy/p/4734534.html