HTML5

一、h5新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

二、video元素(视频)

  1. video元素支持  三种视频格式:ogg/mpeg4/webm
  2. video元素 实例如下:
 <video src="movie.ogg" controls="controls"></video>
 <video controls="controls" width="320" height=“100”>
       <source src="demo.ogg" type="video/ogg">
       <source src="demo.mp4" type="video/mp4">
 </video>

      3、video标签的属性

属性 描述
autoplay autoplay 视频在就绪后马上播放
controls controls 向用户显示控件,比如播放按钮
width px 设置视频播放器的宽度
height px 设置视频播放器的高度
src url 要播放视频的链接
loop loop 当媒介文件完成播放后,再次开始播放
preload preload 视频在页面加载时进行加载,并预备播放。如果遇到属性’autoplay‘,就忽略此属性

     4、video 方法

          play() 开始 pause()暂停

三、audio元素(音频)

  1. audio元素支持 三种音频格式:ogg/mp3/wav

        

      2、audio元素 实例如下:

 <audio src="song.ogg" controls="controls"></audio>

      3、audio标签的属性,audio除width/height之外,同video一样

四、HTML5新的Input类型(email、url、number、range、search、color)

浏览器支持情况:

Input类型 -- email  在提交表单时,会自动验证 email 域的值。

<input type="email" name="email" />

Input类型 -- url  在提交表单时,会自动验证 url 域的值。

<input type="url" name="url" />

Input类型 -- number

<input type="number" name="points" min="1" max="100" value="50/>

属性:max---允许的最大值   min---允许的最小值   step---数字间隔  value---默认值

Input类型 -- range

<input type="range" name="points" min="1" max="10" />

属性:同number属性

Input类型 -- Date

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)

五、HTML5表单元素

  • datalist
  • keygen
  • output

六、HTML5表单属性

      涉及<form>和<input>元素的新属性。

新的 form 属性:

  • autocomplete  form 或 input 域应该拥有自动完成功能
  • novalidate

新的 input 属性:

  • autocomplete
  • autofocus   规定在页面加载时,域自动地获得焦点  适用于所有的input
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height 和 width
  • list
  • min, max 和 step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

 

posted on 2017-06-01 17:24  平平淡淡summer  阅读(178)  评论(0编辑  收藏  举报

导航