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技术的更多相关文章

  1. 浅谈Hybrid技术的设计与实现第三弹——落地篇

    前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...

  2. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  3. 浅谈Hybrid技术的设计与实现

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...

  4. (转)浅谈Hybrid技术的设计与实现

    转载地址:https://www.cnblogs.com/yexiaochai/p/4921635.html 前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hyb ...

  5. [原创]浅谈H5页面性能优化方法

    [原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

  6. 浅谈Hybrid技术的设计与实现【转】

    https://www.cnblogs.com/yexiaochai/p/4921635.html 前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术 ...

  7. 浅谈PHP技术应用

    序号:1210-41 黑龙江省高等教育自学考试 本科毕业论文 题    目    浅谈PHP技术 学员姓名    夏滟 专    业    计算机及应用 准考证号    010311192585 指导 ...

  8. [原创]浅谈H5页面性能测试

    [原创]浅谈H5页面性能测试 H5页面我想各位都不陌生,随着移动互联网兴起,不管是App,还是H5都火起来了,最突出的2个表现是ios/android/前端等工程师薪水大涨,尤其是资深前端工程师40W ...

  9. [原创]浅谈H5页面测试介绍

    [原创]浅谈H5页面测试介绍 目前移动互联网非常火热,除了各种App,H5也是非常热,由于H5跨平台,且版本更新容易,做为引流或获客是非常好的一种简单低成本平台:今天来谈谈H5页面测试都要测试什么? ...

随机推荐

  1. Sql Server 2016 创建内存数据库

    官方教程:https://docs.microsoft.com/en-us/sql/relational-databases/in-memory-oltp/survey-of-initial-area ...

  2. window cmd 自动补全

    1. 用命令里输入regedit注册表 WIN+R 快捷输入 regedit regedit2. 键值改为9(十进制) HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Co ...

  3. Spring AOP-xml配置

    在spring AOP(一)中介绍了AOP的基本概念和几个术语,现在学习一下在XML中如何配置AOP. 在XML中AOP的配置元素有以下几种: AOP配置元素 描述 <aop:config> ...

  4. Juery插件-- jquery.cookie.js

    1.引入jquery <script src="scripts/jquery-1.8.8.js" type="text/javascript">&l ...

  5. 如何让A20,android开机自动启动C程序【转】

    本文转载自:http://blog.csdn.net/u011258134/article/details/50749174 如何让A20,android开机自动启动C程序 2014-12-26 11 ...

  6. Java GET和POST请求

    从表面来看GET和POST请求: GET请求是在url后直接附上请求体,url和请求体之间用"?"分割,不同参数之间用"&"分隔,%XX中的XX为该符号 ...

  7. 步入C编程的第一天

    我想学ruby以后开发网站,但ruby是高级语言,隐藏了许多底层的东西,因此先熟悉c语言 首先c程序的文件名是以.c结尾的 c程序的格式: 第一行#include<stdio.h> #是一 ...

  8. fatal error C1902: 程序数据库管理器不匹配;请检查安装解决

    http://blog.sina.com.cn/s/blog_9f4bc8e301015uhz.html 1.错误提示:VS2008编译错误fatal error C1902: 程序数据库管理器不匹配 ...

  9. 最短路——Dijkstra和Floyd

    Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要 ...

  10. Linux 设备树 dts

    1. dtb反编译成dts文件命令:./kernel-4.4/scripts/dtc/dtc_overlay -I dtb -O dts out/target/product/m863ur100_p0 ...