整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

一条时间线看HTML5与Flash十年兴衰

007年，苹果公司发布iPhone、OS系统，不支持Flash。此后的iPhone、iPod、iPad均不支持Flash。

2009年，Adobe推出Packager for iPone，用于把Flash游戏包装成iPhone应用。

然而苹果公司好像并不领情。

2010年4月，乔布斯发表公开信“Thoughts on Flash（Flash之我见）”，文内说明了乔布斯眼里Flash的落后之处，以及Flash给MAC造成的死机等问题，并表示Adobe应该注重开发更多HTML5工具。

2011年，Adobe放弃了Flash移动端的研发工作，这意味着Flash不再支持移动设备。

2012年，W3C小组宣布已经完成对HTML5标准以及Canvas 2D性能制定标准。

2014年10月，W3C（万维网联盟）宣布HTML5标准规范最终制定完成，历时八年，HTML5终于尘埃落定。

W3C CEO Jeff Jaffe博士表示：“HTML5将推动Web进入新的时代。不久以前，Web还只是上网看一些基础文档，而如今，Web是一个极大丰富的平台。我们已经进入一个稳定阶段，每个人都可以按照标准行事，并且可用于所有浏览器。如果我们不能携起手来，就不会有统一的Web。”

2015年1月，YouTuBe宣布弃用所有Adobe Flash视频播放器，将HTML5作为其在Chrome、IE、 Safari 8等主流浏览器的默认播放方式。

2015年2月，Google开始将旗下广告从Flash版本转移到HTML5。

2015年7月，Firefox浏览器封杀旧版Flash播放器。

2015年9月1日开始，Amazon公司旗下包括Amazon.com在内的所有广告不再使用Flash。

2015年12月22日，Facebook宣布不再使用Flash，自家网站的所有视频默认使用HTML5播放。

2015年12月，Adobe在官网发文宣布合并Flash与HTML5制作软件，更名Animate CC。并呼吁开发者放弃Flash，转移到HTML5平台上来。

2016年5月，Google Chrome宣布从9月开始屏蔽Flash内容，到12月Chrome将会全面支持HTML5。

2016年8月，Firefox浏览器在新一次升级中，默认禁止所有版本的Flash播放，用户可以自行开启。

一些公司也表明了下一步动作：

2017年1月，Google广告平台将不再允许投放Flash。

2007到现在，10年光阴，我们无法否认Flash曾经多么辉煌，但就如同“沉舟侧畔千帆过，病树前头万木春”，新事物产生，旧事物淘汰，Flash最终将会退出互联网的舞台。

在互联网行业不断发展变化的今天，HTML5将越来越大的发展空间也是可以肯定的。

就拿微信来说，2016年4月，微信客户端升级至X5 Blink 内核，更好的支持 HTML5/CSS3。近两年，各种利用HTML5制作的网页、小游戏逐渐进入大众的视野，通过这样的形式也让HTML5散发着青春与活力。

HTML5是否会完全取代原生APP，这个问题我们不得而知，但就目前来说把HTML5游戏做得更加好，使用户获得更好的体验，是我们在乎科技在乎的事。

TML5为了更好地处理今天的互联网应用，添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

HTML5的<canvas>标签可以定义图形，比如图表和其他图像。该标签是基于 JavaScript 的绘图 API。

如想完成这样一个任务，画一个包含时间轴的世界历史年表，如下图所示：

要完成上述任务，便可以使用HTML5+CSS+JS，代码如下：

<!DOCTYPE html>

<html><title>historyTidePrev</title>

<style type="text/css">

.left{/*total 974,竖线起始位置：436px*/

width:350px;

float:left;

padding-left:56px;

padding-right:30px;

}

.right{/*竖线起始位置：436px*/

width:500px;

float:left;

padding-left:38px;

}

p{

line-height:16px;

margin:0;

padding:0;

text-indent:-2em;

}

</style>

<script>

function scrol...(){

var scl=document.body.scrollHeight/2+30*14;

window.scrollBy(0,scl);

}

</script>

<canvas id="myCanvas2" width="974" height="29418" style="border:0px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

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

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

var canvasW=974;

var dingJiange=18; //顶端间隔 竖线起始位置(Y轴）

var diJiange=0; //底部间隔 竖线起始位置(Y轴）

var jianGe=dingJiange+diJiange;

var Xcor=436; //竖线X坐标的起始位置；

//因最小的字体需要12它，所以下面的定位需要达到12；

var nianPX=14; //一年间隔使用的像素；

var nianYprev=2100; //公元前有多少年开始

var nianYnex=0;//公元前后多少年结束

var nianYprevPx=nianYprev*nianPX; //公元前有多少年及像素；

var nianYnexPx=nianYnex*nianPX; //公元后有多少年及像素；

var Ycor=nianYprevPx+nianYnexPx; //竖线Y坐标的终点位置（长度）；

var nianL=8; //年线段的长度；

var nianL10=20; //10年线段的长度；

var nianL100=30; //100年线段的长度；

var fontsi=nianPX*3;//字体大小

var fontsi10=nianPX*4;

var fontsi100=nianPX*5;

//长竖线

ctx.beginPath();

ctx.moveTo(Xcor,dingJiange);

ctx.lineTo(Xcor,Ycor+diJiange);

ctx.stroke();

//年横线

for(i=dingJiange;i<=Ycor+diJiange;i+=nianPX){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.4)";

ctx.stroke();

}

//5年横线

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*5){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL*1.5,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.6)";

ctx.stroke();

}

//10年横线和文本

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*10){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL*2,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.8)";

ctx.stroke();

ctx.textAlign="right";

var varmid=(i-dingJiange)/nianPX;

if(varmid%100!=0){

ctx.font="12px 宋体"; //30px 可以写在里面

// Create gradient

var gradient=ctx.createLinearGradient(0,0,c.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// Fill with gradient

ctx.fillStyle=gradient;

ctx.fillText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*2,i+6);

}

}

//100年横线和文本

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*100){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL*3,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.9)";

ctx.stroke();

ctx.textAlign="right";

ctx.font="18px 宋体"; //30px 可以写在里面

// Create gradient

var gradient=ctx.createLinearGradient(0,0,c.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// Fill with gradient

ctx.strokeStyle=gradient;

ctx.strokeText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*3,i+8);

}

function txtL(year0,txt){

var xc=Xcor-nianL-65; //左边的线条从右边开始到左边结束的位置；

var xc2=10;//左边文本从左边开始的位置；

var yp;

if(year0>=0){

yp=dingJiange+nianYprevPx+year0*nianPX;

txt="" + year0 + "年," + txt;

}else{

yp=dingJiange+nianYprevPx+year0*nianPX;

yearp=year0*(-1);

txt="前" + yearp + "年," + txt;

}

ctx.fillStyle="#00f";

ctx.beginPath();

ctx.moveTo(Xcor-60,yp);

ctx.lineTo(xc+xc2-25,yp);

ctx.stroke();

ctx.font="12px Verdana";

ctx.fillStyle="#000";

ctx.textAlign="left";

//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容纳46个12px的字符(44*12=535)；

var txtN;//右边屏幕可容纳字符串个数；

var txtW=12*1;//手工算出是0.945;txtW是一个字符串的宽度；

txtN=Math.floor(xc/txtW);

if(txt.length>txtN){

var fortime=Math.ceil(txt.length/txtN);//需要循环的次数；

ctx.fillText(txt.substring(0,txtN),xc2,yp);

for(i=0;i<fortime;i++){

yp=yp+14;

txt=txt.substring(txtN);

var txt2=" "+txt.substring(0,txtN);

ctx.fillText(txt2,xc2,yp);

}

}else{

ctx.fillText(txt,xc2,yp);

}

}

function txtR(year0,txt){

var xc=Xcor+nianL100;

var yp;

if(year0>=0){

yp=dingJiange+nianYprevPx+year0*nianPX;

txt="" + year0 + "年，" + txt;

}else{

yp=dingJiange+nianYprevPx+year0*nianPX;

yearp=year0*(-1);

txt="前" + yearp + "年，" + txt;

}

ctx.fillStyle="#00f";

ctx.beginPath();

ctx.moveTo(Xcor+3,yp);

ctx.lineTo(xc,yp);

ctx.stroke();

ctx.font="12px Verdana";

ctx.fillStyle="#000";

ctx.textAlign="left";

//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容纳46个12px的字符(44*12=535)；

var txtN;//右边屏幕可容纳字符串个数；

var txtW=12*1;//手工算出是0.945;txtW是一个字符串的宽度；

txtN=Math.floor((canvasW-xc)/txtW);

if(txt.length>txtN){

var fortime=Math.ceil(txt.length/txtN);//需要循环的次数；

ctx.fillText(txt.substring(0,txtN-4),xc,yp);

for(i=0;i<fortime;i++){

yp=yp+14;

txt=txt.substring(txtN-4);

var txt2=" "+txt.substring(0,txtN-4);

ctx.fillText(txt2,xc,yp);

}

}else{

ctx.fillText(txt,xc,yp);

}

}

txtR(-580,"毕达哥拉斯(约-580～-500年)古希腊数学家、哲学家创立毕达哥拉斯学派，提出毕达哥拉斯定理、数和谐说和灵魂轮回说。");

txtR(-563,"释迦牟尼约-563～前483年佛教创始人建立了完整的佛教教义学说。");

txtL(-551,"孔子-551.9.28--479.4.11，春秋时期鲁国人.");

txtR(-552,"孙武齐国乐安人,汉族.公元前527年，年仅25岁的孙武完成旷世圣书——《孙子兵法》。");

txtR(-427,"公元前427～前348／347)年古希腊哲学家柏拉图创立“学园派”，建立以“理念论”为核心的客观唯心主义哲学体系。");

txtR(-384,"前4世纪，希腊亚里士多德(公元前384年-公元前322年)对数学、动物学等进行综合研究。");

txtR(-0,"");

txtR(-0,"");

</script>

</body>

</html>

TML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。 -- Palak Shah

本文导航

  • -新标签和元素 …… 08%

  • -HTML5 的高级功能 …… 16%

  • -地理位置 …… 16%

  • -网络存储 …… 33%

  • -应用缓存（AppCache） …… 44%

  • -视频 …… 50%

  • -音频 …… 61%

  • -画布（Canvas） …… 71%

  • -HTML5 工具 …… 78%

编译自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

译者： geekpi

HTML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。

HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML，它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能，使 Web 更加动态和交互。

HTML5 的新功能是：

  • 新标签，如 <header> 和 <section>

  • 用于 2D 绘图的 <canvas> 元素

  • 本地存储

  • 新的表单控件，如日历、日期和时间

  • 新媒体功能

  • 地理位置

HTML5 还不是正式标准（LCTT 译注：HTML5 已于 2014 年成为“推荐标准”），因此，并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。

新标签和元素

  • 语义化元素： 图 1 展示了一些有用的语义化元素。

  • 表单元素： HTML5 中的表单元素如图 2 所示。

  • 图形元素： HTML5 中的图形元素如图 3 所示。

  • 媒体元素： HTML5 中的新媒体元素如图 4 所示。

图 1：语义化元素

图 2：表单元素

图 3：图形元素

图 4：媒体元素

HTML5 的高级功能

地理位置

这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

  • 公共交通网站

  • 出租车及其他运输网站

  • 电子商务网站计算运费

  • 旅行社网站

  • 房地产网站

  • 在附近播放的电影的电影院网站

  • 在线游戏

  • 网站首页提供本地标题和天气

  • 工作职位可以自动计算通勤时间

工作原理： 地理位置通过扫描位置信息的常见源进行工作，其中包括以下：

  • 全球定位系统（GPS）是最准确的

  • 网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址

  • GSM/CDMA 蜂窝 ID

  • 用户输入

该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。

语法是：

getCurrentPosition(showLocation, ErrorHandler, options);

  • showLocation：定义了检索位置信息的回调方法。

  • ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法。

  • options （可选）： 定义了一组用于检索位置信息的选项。

我们可以通过两种方式向用户提供位置信息：测地和民用。

  1. 描述位置的测地方式直接指向纬度和经度。

  2. 位置信息的民用表示法是人类可读的且容易理解。

如下表 1 所示，每个属性/参数都具有测地和民用表示。

图 5 包含了一个位置对象返回的属性集。

图5：位置对象属性

网络存储

在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。

与 Cookie 相比，Web 存储的优点是：

  • 更安全

  • 更快

  • 存储更多的数据

  • 存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。

有两种类型的 Web 存储对象：

  1. 本地 - 存储没有到期日期的数据。

  2. 会话 - 仅存储一个会话的数据。

如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对。比如： key="Name"， value="Palak"。

这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换。

下面给出了使用 Web 存储对象的语法：

  • 存储一个值：

  • localStorage.setItem("key1", "value1");

  • localStorage["key1"] = "value1";

  • 得到一个值：

  • alert(localStorage.getItem("key1"));

  • alert(localStorage["key1"]);

  • 删除一个值： -removeItem("key1");

  • 删除所有值：

  • localStorage.clear();

应用缓存（AppCache）

使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）。

应用缓存的优点是：

  • 网页浏览可以脱机

  • 页面加载速度更快

  • 服务器负载更小

cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中，如下所示：

<html manifest="test.appcache">

...

</html>

它应该在你要缓存的所有页面上。

缓存的应用程序页面将一直保留，除非：

  1. 用户清除它们

  2. manifest 被修改

  3. 缓存更新

视频

在 HTML5 发布之前，没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。

目前，video 元素支持三种视频格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件。

video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，如下所示：

<video width="320" height="240" controls="controls">

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

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

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

图6：Canvas 的输出

音频

对于音频，情况类似于视频。在 HTML5 发布之前，在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

目前，HTML5 audio 元素支持三种音频格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>

<html>

<body>

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

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件。

audio 元素允许多个 source 元素，它可以链接到不同的音频文件。浏览器将使用第一个识别的格式，如下所示：

<audio controls="controls">

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

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

This browser does not support the audio element.

</audio>

画布（Canvas）

要在网页上创建图形，HTML5 使用 画布 API。我们可以用它绘制任何东西，并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案。此外，画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。

<script type="text/javascript">

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

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

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上脚本的输出如图 6 所示。

你可以绘制许多对象，如弧、圆、线/垂直梯度等。

HTML5 工具

为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助。它们提高了网页设计的可用性。

以下是一些帮助创建很棒的网站的必要工具。

  • HTML5 Maker： 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。

  • Liveweave： 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易。

  • Font dragr： 在浏览器中预览定制的 Web 字体。它会直接载入该字体，以便你可以知道看起来是否正确。也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试。

  • HTML5 Please： 可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等。

  • Modernizr： 这是一个开源工具，用于给访问者浏览器提供最佳体验。使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本。

  • Adobe Edge Animate： 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画，可以跨多个设备运行。

  • Video.js： 这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站，你应该使用此工具。它使视频看起来不错，并且是网站的一部分。

  • The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后，你的代码将被检查，并将提供所有错误和警告。

  • HTML5 Reset： 此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。

Palak Shah

作者是高级软件工程师。她喜欢探索新技术，学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

点击“了解更多”可访问文内链接


在线咨询
上一篇：纯CSS实现棱形链条的Loading特效 46/117
下一篇：正确发送统计数据到服务器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 宝丰县 卢湾区 赣县 耿马傣族佤族自治县 泾川县 安陆市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服