浅谈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

原文地址:https://www.cnblogs.com/g177w/p/8586252.html

时间: 2024-11-04 19:59:22

浅谈H5技术的相关文章

【开源】浅谈Hybrid技术的设计与实现第二弹

前言 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) PS:据说加个开源在前面阅读量高点,于是就试试咯...... 上文说了很多关于Hybrid的概要设计,可以算得上大而全,有说明有demo有代码,对于想接触Hybrid的朋友来说应该有一定帮助,但是对于进阶的朋友可能就不太满足了,他们会想了解其中的每一个细节,甚至是一些Native的实现,小钗这里继续抛砖引玉,希望接下来的内容对各位有一定帮助. 进入今天的内容之前我们首先谈谈两个相关技术Ionic与React Nativ

浅谈Hybrid技术的设计与实现

浅谈Hybrid技术的设计与实现 前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP. 作为一种混合开发的模式,Hybrid APP底层依赖于Native提供的容器(UIWebview),上层使用Html&Css&JS做业务开发,底层透明化.上层多多样化,这种场景非常有利于前端介入,非

浅谈PHP技术应用

序号:1210-41 黑龙江省高等教育自学考试 本科毕业论文 题    目    浅谈PHP技术 学员姓名    夏滟 专    业    计算机及应用 准考证号    010311192585 指导教师    马大龙 学    院    地理科学学院 哈 尔 滨 师 范 大 学 2012年10月1日 目    录 摘  要………………………………………………………………………………1 一.PHP技术简介…………………………………………………………………1 二.PHP开发语言的特点…………………

浅谈信息加密技术和算法

1单向散列加密 单向散列加密是指通过对不同输入长度的信息进行散列计算,得到固定长度的输出,这个散列计算过程是单向的,不可逆的.常用的单向散列算法有MD5,SHA等. 比如网站中,用户密码,一般可以进行MD5加密后保存,用户登录时,对用户输出的密码进行加密后和数据库密文进行比较,如果一致,则验证成功. 为了加强计算的安全性,可以对数据加上密钥,增加破解的难度. 推荐使用 apache common的 commons-codec的 jar包 比如(commons-codec-1.8.jar)    

浅谈h5移动端页面的适配问题

一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其是在不懂前端的人眼中,一味的追求响应式布局,我觉得复杂的布局项目做响应式还不如做二套样式,因为响应式的样式混在一起真的维护起来是恨费劲的.可能我说的不对,但是发表 一点点自己的看法.说道这里就想说一下移动端的布局,有很多人就是想把手机端得程序兼容ipad,我就觉得这个很不可思议为什么要这么做得,命名

横向浅谈移动技术------( 原生,混合,web --- 谁能问鼎移动开发的明天)

目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式.谈论那种模式最好实际上事非常无聊的事情. 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网等).餐饮(饿了吗.美团等)……反正只要是个企业,无论规

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

前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP. 作为一种混合开发的模式,Hybrid APP底层依赖于Native提供的容器(UIWebview),上层使用Html&Css&JS做业务开发,底层透明化.上层多多样化,这种场景非常有利于前端介入,非常适合业务快速迭代,于是Hybri

【ASP.NET 系列】浅谈缓存技术在ASP.NET中的运用

本篇文章虽不谈架构,但是Cache又是架构中不可或缺的部分,因此,在讲解Cache的同时,将会提及到部分架构知识,关于架构部分,读者可以不用理解,或者直接跳过涉及架构部分的内容, 你只需关心Cache即可,具体的架构,会在后续文章中与大家分享,如果你感兴趣,只需关注即可. 一   为什么要在ASP.NET 项目中引入缓存 1. 我们先来考虑一个问题,通常,面临高并发问题时,我们应该怎么处理? 下图为常规的处理思路和方法 2.为什么引入Cache呢? 我们知道,造成高并发的根本原因是大量读写的问题

浅谈CDN技术的性能与优势

从淘宝架构中的CDN入手分析 使用CDN和反向代理提高网站性能.由于淘宝的服务器不能分布在国内的每个地方,所以不同地区的用户访问需要通过互联路由器经过不同长度的路径来访问服务器,返回路径也一样,所以数据传输时间比较长.对于这种情况,常常使用CDN解决,CDN将数据内容缓存到运营商的机房,用户访问时先从最近的运营商获取数据,这样大大减少了网络访问的路径. 在这里简单介绍一下CDN的原理.CDN的全称Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可