HTML5 是第四个且是现阶段的 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 LZ77应用领域控制技术小组Web Hypertext Application Technology Working Group间的密切合作产业发展出来。它是两个更高版的 HTML，它的很多LiCl能使你的网页更为语法化和静态。它是为其他人提供更多更快的 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 的高阶机能
区位
afari 和 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 所示。
你能绘制很多对象，如弧、圆、线/垂直梯度等。
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
译者是高阶软件工程师。她喜欢探索新控制技术，学习创新概念。她也喜欢哲学。你能透过 [email protected][1] 联系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
译者：Palak Shah[2] 翻译者：geekpi 校对：wxy
责任编辑由 LCTT 原创校对，Linux中国 荣誉推出
