整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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 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 所示，每个属性/参数都具有测地和民用表示。
图 5 包含了一个位置对象返回的属性集。
图5：位置对象属性
网络存储在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。
与 Cookie 相比，Web 存储的优点是：
更安全
更快
存储更多的数据
存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。
有两种类型的 Web 存储对象：
本地 - 存储没有到期日期的数据。
会话 - 仅存储一个会话的数据。
如何工作： 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>
它应该在你要缓存的所有页面上。
缓存的应用程序页面将一直保留，除非：
用户清除它们
manifest 被修改
缓存更新
视频在 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 所示。
你可以绘制许多对象，如弧、圆、线/垂直梯度等。
为了有效操作，所有熟练的或业余的 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中国 荣誉推出
TML（HyperText Markup Language，超文本标记语言）是一种用于定义网页内容的含义和结构的标记语言。除此之外，网页还需要 CSS 描述网页的展示效果和 JavaScript实现与用户的交互性。它不是编程语言。
HTML 是由 Tim Berners-Lee 和同事 Daniel W.Connolly 于 1990 年创立的一种标记语言。当时，Tim Berners-Lee 发明了万维网，并且为了方便阅读网页，又发明了 HTML、HTTP、URL，使用自制的浏览器去访问网页。HTML 中元素的设计深受 CERN 内部的 SGML 为基础的文件格式 SGMLguid影响。
在Tim Berners-Lee 与 1990年发明了 HTML 后，经过了24年时间，到 2014年才发展到HTML 5，之间经历了HTML 2.0、HTML 3.2、HTML 4.0、HTML4.01，直到HTML 5 这几个版本。
Tim Berners-Lee加入的互联网工程任务组（IETF）于 1993 年发布首个HTML规范的提案，并于6个月后过期，IETF创建了一个HTML工作组，并在 1995年完成 HTML 2.0，这是第一个HTML规范，而之前的版本只是草案阶段，非正式版本。
而之后HTML标准的发展因为竞争利益遭到停歇，因此，从 1996 年开始，就一直由W3C组织维护HTML规范了，W3C 组织将标准化发布到 4.0版本后，终于在 2000年成为国际标准。
然而，发布了四个版本后，业界普遍认为 HTML 已经到了穷途末路，因此也将焦点转移到了XML和XHTML上，因此，HTML迫切需要添加新功能，指定新规范，从而扭转这一切。
就在这种情况下，一组人在 2004 年成立了 WHATWG，并创立了 HTML5 规范，同时也开始专门针对 Web 应用开发新功能，Web 2.0 就是在这时被发明的。在 2006 年，W3C 又重新介入 HTML，并与 WHATWG 合作共同，最终在 2008 年发布了 HTML5 工作草案。而在 HTML 5 规范还未定稿的情况下，各大浏览器厂商都开始将自家产品升级以支持 HTML 5 的新功能了。最终在 2014 年 10月 28 日完成标准化。
HTML 5 是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。但 HTML 5 并不是颠覆性的革新。而是要保持一切新特性平滑过渡。
因为在 HTML 5 之前，在网页上看视频等，只能使用插件，如 Adobe 开发的 Flash，但浏览器厂商不想在自家产品上使用插件，因此，HTML 5 中的一个新特性就是让浏览器直接处理那些原来要使用 Flash 的富内容。
HTML 经过这些年的发展，已经走向成熟，是前端开发中不可或缺的一环，而 HTML 5 标准还没有到最终版本，现在仍处在完善阶段。前端要学习的还有很多，大家要加油！
TML5是移动互联网的未来吗？
自2010年乔布斯公开支持并在iOS禁止Flash后，在多数开发者心中，这开始变成一个肯定的答案。
2010年到2011年，HTML5概念被热炒，受到追捧，甚至不少人预言HTML5应用将会替代原生app。但或许是当初被捧得太高，而不论是生态环境还是技术支持都远远算不上成熟，HTML5游戏在短暂热捧之后遭遇诸多问题，随后开始陷入冰谷，当初使用HTML5开发游戏的团队纷纷转型——HTML5或许将是未来，但现在谈论还为时过早。
在被遗忘一段时间之后，现在，一些专注于游戏领域的HTML5引擎服务提供商正在重整旗鼓（详见今日推送的第二篇文章），这让我们不由再次回头审视HTML5游戏走过的整个路程，并开始思考一个问题：在HTML5那条通往“未来”的遥远道路上，它正站在一个什么样的位置上？
■过去
2010年4月，苹果公司宣布禁止FlashPlayer登陆iOS系统，鼓励开发者使用HTML5技术，这一举动引起了轩然大波，乔布斯甚至为此撰写了一篇长文《关于Flash的几点思考》进行回应。当年十月，Zynga收购了HTML5游戏引擎开发商Dextrose，并在随后发布了第一款HTML5游戏《MafiaWarsAtlanticCity》。
从2011年开始，HTML5的概念开始火爆，在这一年，诸多大厂纷纷出击这一领域进行布局，MOTO投资了HTML5游戏公司Moblyng，迪士尼收购了HTML5游戏引擎公司RocketPack。
Facebook社交游戏开发商Wooga也在当年宣布进军HTML5和iOS游戏领域。
在同一年，Unity确认支持HTML5，Facebook收购HTML5技术团队Strobe，将自身在移动端的发力重心放在HTML5上。同年，手游大厂EA、Popcap、Gameloft也相继发布了自己的HTML5游戏。
在2011年底，还有一件重要的事情，Adobe宣布停止在Android系统更新FlashPlayer，并推荐开发者使用HTML5技术开发移动Web应用。
就在看起来形势一片大好HTML5概念火热的时候，哀歌从2012年开始唱响。
在2012年开年之际，此前MOTO投资的HTML5游戏开发商Moblyng倒闭是第一个音符，随后在六月，Wooga宣布停止开发HTML5游戏，他们曾经推出一款HTML5游戏《MagicLand：Island》，但是玩家玩这个游戏的总次数只有130万次，留存率仅5%，相比之下，他们在iOS平台推出的《DiamondDash》则获得了1800万次的下载。
为这支哀歌谱下强音的是Facebook的失败。在2012年9月，扎克伯格在接受采访时表示：“Facebook曾经错误地将赌注押在了HTML5上，这是我们最大的战略错误，致使我们错失了移动市场的发展良机。”
在那之后，曾经被捧上高位打上未来标签的HTML5技术在移动端狠狠摔落，HTML5开始淡出视野。
总结下来，HTML5在移动游戏领域所遭遇的困境，主要是由于四个原因：
1、技术不成熟，开发生态不完整
2、没有合适的载体，浏览器渲染性能低下
3、没有成熟的生态环境（渠道，运营商）
4、受制于网络环境
这些原因最终造成了游戏功能和表现受限，体验大打折扣。
在2013年底，下一代JavaScript标准规范ES6草案锁定并正式发布。
■现在
目前HTML5的框架和库都普遍偏于Web应用的制作，专注于游戏的偏少，比较流行的HTML5框架包括CreateJS，JQuery，AngularJS和Node.js，专注于HTML5游戏的引擎有Impact、Phaser、Pixi、Createjs、EaselJSPhaser、Turbulenz、GameClosure、Coco2d-HTML5和Egret等。
现在主流网站几乎全部支持HTML5标准，几乎所有流行的网站都采用了HTML5技术。但是在移动设备上，还尚未出现非常成熟的HTML5应用或游戏，这一市场还在刚刚起步。游戏方面，此前有一二三国、修仙三国、三国喵喵传等游戏，而目前，墨麟、游戏谷、光年互动等开发商正在开发HTML5游戏。
正在发生的另外一些事情：
1.各浏览器对HTML5标准化的支持正在慢慢趋于一致
2.硬件的变革正在不断推动采用HTML5技术制作的复杂应用和游戏的用户体验的快速提升
3.Web游戏类型在3G/4G网络下的数据发送接收速度正在变得相对高效，但目前国内总体网络质量仍不乐观
4.逐渐涌现出的HTML5游戏引擎和制作工具，开始降低H5游戏制作成本，并提高游戏开发效率
5.混生应用出现，上层使用h5开发，底层使用c++渲染，性能得到很大提升，这种方式是当前阶段的主流
6.一些巨头正在尝试引领这个市场，腾讯的手机QQ空间的安卓版应用，在前段时间将“玩吧”菜单放置在了底部菜单栏的一级入口；在玩吧中，现在已经上线了不少HTML5游戏，不仅有休闲游戏，也有一些卡牌类的中重度游戏，同时在安装QQ空间首次登录时，会自动进入一个名为“让童年飞”的HTML5休闲游戏，腾讯正在尝试引导用户尝试这些HTML5游戏，不过总体来说，内容还处于匮乏阶段，玩吧目前仅提供13款游戏；此外还有百度轻应用等。
看起来一切正在往前有序推进，不过站在游戏开发者角度来说又是什么看法？
在一些开发者看来，HTML5游戏开发快、易调试、跨平台、推广成本更低的特点，或许会是其优势所在，但是问题的核心在于如果不能在游戏体验上给予玩家更多好处，那么就没有太多的理由去看好，基于这点才会有市场，别的都是业内臆想。
而对于游戏玩家来说，内容才是永远的核心。
■未来
HTML5的成熟条件是什么？
*请认真填写需求信息，我们会在24小时内与您取得联系。
