HTML5 是第五个且是当前的 HTML 版本,它是用于在万维网上构建和呈现内容的标记措辞。
本文将帮助读者理解它。
-- Palak Shah

本文导航

-新标签和元素 …… 08%

-HTML5 的高等功能 …… 16%

html5网站基础关于 HTML5 你须要懂得的基本常识 jQuery

-地理位置 …… 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 所示,每个属性/参数都具有测地和民用表示。

图 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

作者是高等软件工程师。
她喜好探索新技能,学习创新观点。
她也喜好哲学。
你可以通过 palak311@gmail.com[1] 联系她。

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

作者:Palak Shah[2] 译者:geekpi 校正:wxy

本文由 LCTT 原创编译,Linux中国 名誉推出

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