HTML5新增标签一览

假期借了一本书，把HTML5 的新功能看了一遍，做了一个简要的笔记，总结一下，当成学习笔记发上来。

笔记有些地方可能说话方式只能写的人能读懂，不过大多数地方都做了表格总结方法和说明。

• Input新成员

  新增type

  • Emial
  • Url
  • Number
  • date,time，datetime，month，week等表示不同形式的时间

   

   

  新增属性

  • placeHolder
  • Required
  • Pattern
  • Autocomplete

   

  针对type为number的input，有属性：mix，max，step

• 多媒体新增标签

  新增标签

  Voide

  Audio

   

   

  新增属性：

  属性	值	含义
  Src	Url	表示媒体资源的链接
  Controls	Controls	表示是否出现控制的控件
  Loop	Loop	表示是否循环
  Preload	Preload	表示是否预加载
  Autoplay	Autoplay	表示是否自动播放
  Poster	Url	表示视频资源在没有播放时显示的封面地址
  Muted	Boolean	表示视频是否输出声音
  Height Width	Px	表示视频的高宽

   

  用JS控制的属性

  属性	值	含义
  Volume	0.0-1.0	音量
  Duration	Number	返回播放的总时长的秒数
  Ended	Boolean	返回是否已播放结束
  Paused	Boolean	设置或返回是否已播放暂停
  currentTime	Number	设置或返回当前播放的秒数
  mediaGroup	String	设置或返回当前媒体所属的组合

  相关的方法

•  

  Play();

  pause();

  load();//重新加载资源

  canplayType(String);返回浏览器是否支持传入的格式，返回可能是probably，maybe，以及空字符串表示不支持

  addTextTrack();//向媒体增添文字轨道

   

  相关的事件

  事件	说明
  Onloadstart	当浏览器开始查找媒体资源
  Ondurationchange	当媒体的时常改变时
  Onloadedmetadata	浏览器已加载元数据
  Onloadeddata	浏览器已加载当前帧的数据
  Onprogress	浏览器开始下载音频视频
  Oncanplay	浏览器可以播放媒体
  Oncanplaythrough	浏览器可不因缓冲而停顿地播放媒体
  至以上，媒体加载阶段的事件依次触发完成
  Onabort	媒体加载已放弃
  Onerror	媒体加载出现错我
  Onpause	当暂停时
  Onplay	当播放时
  Onratechange	当播放速度变化时
  Ontimeupdate	当播放位置变更时
  Onvolumechange	当音量变化时

• 离线存储/本地存储

  Web储存和应用缓存

  • Web Storage Web储存——储存简单数据

  本地储存 LocalStorage/会话储存 SessionStorage

  本地储存在不主动删除的情况下不会过期、失效而且储存空间比Cookie大得多

  会话储存和本地储存基本一致，但是会话储存的数据只存在于一个Session会话的过程中

   

  方法、属性	说明
  key（n）	返回第n个变量的key
  getItem（key）	通过key返回对应的value，与localStorage.k/sessionStorage.k功能一样
  setItem（k，v）	设置一对键值对，与localStorage.k=v/sessionStorage.k=v功能一样
  removeItem（k）	删除一对键值对  与delete localStorage.k/delete sessionStorage.k 功能一样
  Clear()	清空所有变量
  Length	返回当前已经存储的变量数量

   

  localStorage、sessionStorage是浏览器内建的对象，直接调用即可 。

  Eg:localStorage.siteCount==1?localStorage.siteCount++:localStorage.siteCount=1;

  上例等同于localStorage.getItem(siteCount)==1?localStorage.setItem(siteCount,2):localStorage.setItem(siteCount,1);

   

  sessionStorage 使用相同

   

  • 应用缓存（manifest）——储存资源文件（CSS,JS,图片等）

  应用缓存通过向浏览器发送当前页面的.manifest文件，告知浏览器当前页面需要缓存的资源、永不缓存的资源，以及访问不到时的回退页面

  使用方法

  1. 配置Web服务器的MIME-type，使其可以支持.manifest文件类型

  .manifest的MIME类型是：text/cache-manifest

  2. 在页面中配置，当前页面的应用缓存文件

  <!DOCTYPEhtml>

  <htmlmanifest="test.manifest">

  ……

  </html>

  3. 书写manifest文件内容

  规则：

  关键字	说明
  CACHE MANIFEST	.manifest文件以这个关键词开始
  CACHE	此标题下资源将缓存
  NETWORK	此标题下资源不会缓存，会联网下载
  FALLBACK	此标题下规定当页面无法访问时的回退页面
  #	此后的内容为注释，可以通过更改注释实现.manifest文件的更新，重新缓存.manifest文件

   

  一个示例：

  CACHEMANIFEST

  CACHE:

  #gasfsadsf

  style.css

  NETWORK:

  jQuery.js

   

   

   

  HTML5 本地储存

  1. Web IndexedDB：索引数据库API，储存数据库，通过JS增删改查，重点，但是没看懂
  2. Web Sql Database：借用了SQL的实现，核心方法有OpenDatabase、transaction、executeSql 现在已经不推荐了

• SVG矢量图

  SVG：符合XML的，通过文本描述图片的技术，优点是文件机器可读，容易交互，效果多种，缺点是文件较大，支持度不高

  //表示没学会这个东西，以下仅作简单记录

  SVG技术在HTML上映射为一系列的标签：

  • SVG形状标签
    • 矩形<rect>
    • 圆形<circle>
    • 椭圆<ellipse>
    • 线<line>
    • 折线<polyline>
    • 多边形<polygon>
    • 路径<path>
  • SVG滤镜：以下标签放在<filter> </filter>内
    • <feGaussianBlur>：高斯模糊滤镜
    • <feColorMatrix>：色彩转换滤镜
    • <feImage>：用于填充引用图形（？）
    • <feBlend>用于合并图形，属性in、in2指定两个图形
    • <feOffset>：位移滤镜，常用作创建阴影
    • <feDiffuseLighting>：定义一个远光源
    • <feFlood>：创建一个指定颜色和不透明度的矩形
  • <defs>：表示预定义
  • SVG渐变
    • 线性渐变<linearGradient>
    • 放射渐变<radialGradient>