HTML5 入门--1

 

HTML5概述：

 * 声明：<!DOCTYPEhtml>

 视频处理：

 * 在HTML5中如何使用视频处理：

   * 概述：

     * 目前HTML页面中播放视频，使用Flash技术实现

       * 浏览器原生不支持Flash，使用ActiveX组件

       * Flash技术比较耗资源，性能不好

       * 移动智能操作系统不支持Flash

     * HTML5提供视频播放功能：

       * 提供video元素实现视频处理

       * 性能比较Flash好很多

       * 对移动智能操作系统支持很好

     * video元素浏览器兼容性不是很好

       * IE浏览器(8或更早版本)不支持

     * video元素支持的视频格式：

       * OGG格式：Theora 视频和 Vorbis 音频解码器，扩展名为".ogg"

       * MP4格式：H.264 视频和 AAC 音频解码器，扩展名为".mp4"

       * WebM格式：VP8视频和 Ogg Vorbis 音频解码器，扩展名为".webm"

   * 如何使用video元素：

     * 注意：

       * HTML页面使用的声明必须是HTML5版本

     * 使用source元素为浏览器提供备选视频格式

       * source元素必须要定义在video元素中

       * source元素使用src属性指定载入视频

       * 使用source元素时，video元素不要指定src属性

       * 一个video元素中允许使用多个source元素

     * 当浏览器不支持video元素时，可以在video元素中使用文本作为提示

   * video元素的特有属性：

     * autoplay属性：表示当前视频自动播放

     * controls属性：表示当前视频显示控制按钮

     * loop属性：表示当前视频允许重复播放

     * poster属性：表示视频播放之前，显示一张图片

 * 通过编程方式实现视频处理：

   * 事件：

     * play事件：开始播放视频时触发

     * pause事件：暂停播放视频时触发

     * ended事件：视频播放完毕时触发

     * canplay事件：当前视频可播放时触发

     * error事件：当前视频播放出错时触发

   * 方法：

     * play( )

     * pause( )

   * 属性：

     * 用作判断：

       * paused：判断当前视频是否暂停或播放状态

       * ended：判断当前视频是否播放完毕

     * 与视频时长：

       * duration：获取当前视频的时长

       * currentTime：获取或设置当前视频的播放位置(时间点)

音频处理：

 * 在HTML5中如何使用音频处理：

   * 概述：与video元素一致

   * audio元素

     * src属性：指定载入音频文件的路径

     * 包含source元素

   * audio元素的属性：与video元素一致

 * 通过编程方式实现音频处理：

   * 事件：

     * play

     * pause

     * ended

   * 方法：

     * play()

     * pause()

HTML5表单元素：

 * input新类型：

   * email类型

     * 电子邮件：包含"@"即可

   * search类型

   * url类型

     * 网址：包含"http://"即可

   * tel类型

     * 只能手机端运行时，提示电话号码的键盘

   * number类型

     * min属性：设置当前数字最小值

     * max属性：设置当前数字最大值

     * step属性：默认为1，每次增加或减少的步长

   * range类型

     * min属性：设置当前数字最小值

     * max属性：设置当前数字最大值

     * step属性：默认为1，每次增加或减少的步长

     * value属性：设置当前范围的初始值(当前值)

   * color类型

   * 时间类型：

     * date类型

     * week类型

     * month类型

     * datetime类型

     * datetime-local类型

 * 表单新元素：

   * datalist元素

     * 作用：预设值一些数据内容(并不显示在HTML页面中)

     * 用法：

       <datalist id="mylist">

       <option value=""lable="" />

       </datalist>

     * 好处：

       * HTML = 数据 + 结构

       * 将HTML中的数据与结构进行分离

   * progress元素：

     * 作用：表示一个任务的完成进度

     * 属性：

       * max属性：进度达到多少值表示完成

       * value属性：表示当前完成的进度

   * meter元素

     * 属性：

       * max属性：设置最大值

       * min属性：设置最小值

       * value属性：当前值

       * low属性：设置低于该值后警告

       * high属性：设置高于该值后警告

   * output元素：

     * 作用：用于显示表单元素处理的结果

     * 属性：

       * for属性：可选，提高代码可读性

HTML5表单属性：

 * Placeholder属性

   * 作用：input文本框的默认显示内容

 * Multiple属性

   * 作用：input文本框输入多个值(多个值之间逗号隔开)

 * Autofocus属性

   * 作用：自动获取焦点

 * Form属性

   * 作用：在表单外定义表单元素