浅谈H5技术

Posted 海的味道

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈H5技术相关的知识,希望对你有一定的参考价值。

1.什么是H5:html5将成为HTML、XHTML以及HTML  DOM的新标准。目前仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持。

2.背景:HTML5 是 W3C 与 WHATWG 合作的结果。

3.一些规定:

  a.新特性应该基于 HTML、CSS、DOM 以及 javascript

  b.减少对外部插件的需求(比如 Flash)

  c. 更优秀的错误处理

  d.更多取代脚本的标记

  e.HTML5 应该独立于设备

  f.开发进程应对公众透明

4.新特性:

  4.1.用于绘画的 canvas 元素

    4.1.1.canvas元素:HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    4.1.2.使用方法:

      a.创建canvas:<canvas id="myCanvas" width="200" height="100">warning</canvas>

      b.通过 JavaScript 来绘制:<script type="text/javascript">

                     var c=document.getElementById("myCanvas");

                     var cxt=c.getContext("2d");

                       cxt.fillStyle="#FF0000";

                    cxt.fillRect(0,0,150,75); </script>

  4.2. 用于媒介回放的 video 和 audio 元素

    4.2.1.audio元素:HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流.

      4.2.1.1.audio支持的三种视频格式在浏览器中的支持情况:

      4.2.1.2.<audio> 标签的属性:

      4.2.1.3.语法:<audio src="音频路径" controls="controls"> </audio>controls属性供添加播放,暂停和音量控制。

      4.2.1.4.例子:<audio controls="controls">

              <source src="song.ogg" type="audio/ogg">

               <source src="song.mp3" type="audio/mpeg">

            Your browser does not support the audio tag. </audio>

           说明:<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的,为了确保不大部分的浏览器都可以适用。 audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

     4.2.2.vidio元素:直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

      4.2.2.1.audio支持的三种视频格式在浏览器中的支持情况:

      4.2.2.2.<video> 标签的属性:

      4.2.2.3.语法:<video src="视频路径" controls="controls"> </video>

      4.2.2.4.案例:<video width="320" height="240" controls="controls">

                <source src="movie.ogg" type="video/ogg">

                <source src="movie.mp4" type="video/mp4">

             Your browser does not support the video tag. </video>

  4.3.对本地离线存储的更好的支持

  4.4.新的特殊内容元素,比如 article、footer、header、nav、section

  4.5. 新的表单控件,比如 calendar、date、time、email、url、search

 

以上是关于浅谈H5技术的主要内容,如果未能解决你的问题,请参考以下文章

火的不行的前端你必须知道浅谈node.js

小段浅谈HTML5

JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架

H5基础标签浅谈

原创浅谈webview——惊鸿一瞥

什么是H5技术???