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

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

      <!DOCTYPEhtml>

      <htmlmanifest="test.manifest">

      ……

      </html>

      1. 书写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>用于合并图形,属性inin2指定两个图形
        • <feOffset>:位移滤镜,常用作创建阴影
        • <feDiffuseLighting>:定义一个远光源
        • <feFlood>:创建一个指定颜色和不透明度的矩形
      • <defs>:表示预定义
      • SVG渐变
        • 线性渐变<linearGradient>
        • 放射渐变<radialGradient>

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值