关于 HTML5 你需要了解的基础知识

关于HTML5你需要了解的基础知识

关于HTML5你需要了解的根底知识

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

本文导航

-新标签和元素08%

-HTML5的高级功能16%

-地理位置16%

-网络存储33%

-应用缓存〔AppCache〕44%

-视频50%

-音频61%

-画布〔Canvas〕71%

-HTML5工具78%

编译自：opensourceforu/2022/06/introduction-to-html5/

作者：PalakShah

译者：geekpi

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

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

HTML5的新功能是：

新标签，如和

用于2D绘图的元素

本地存储

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

新媒体功能

地理位置

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

新标签和元素

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

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

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

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

图1：语义化元素

图2：表单元素

图3：图形元素

图4：媒体元素

HTML5的高级功能

地理位置

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

地理位置的一些用途是：

公共交通网站

出租车及其他运输网站

电子商务网站计算运费

旅行社网站

房地产网站

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

在线游戏

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

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

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

全球定位系统〔GPS〕是最准确的

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

GSM/CDMA蜂窝ID

用户输入

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

if(navigator.geolocation){

//dostuff

}

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

语法是：

getCurrentPosition(showLocation,ErrorHandler,options);

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

ErrorHandler〔可选〕：定义了在处理异步调用时发生错误时调用的回调办法。

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

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

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

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

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

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

图5：位置对象属性

网络存储

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

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

更平安

更快

存储更多的数据

存储的数据不会随每个效劳器请求一起发送。只有在被要求时才包括在内。这是HTML5Web存储超过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〕

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

应用缓存的优点是：

网页浏览可以脱机

页面加载速度更快

效劳器负载更小

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

...

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

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

用户去除它们

manifest被修改

缓存更新

视频

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

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

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

Thisbrowserdoesnotsupportthevideoelement.

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

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

Thisbrowserdoesnotsupportthevideoelement.

图6：Canvas的输出

音频

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

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

audio元素的使用如下所示：

Thisbrowserdoesnotsupporttheaudioelement.

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

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

Thisbrowserdoesnotsupporttheaudioelement.

画布〔Canvas〕

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

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

varc=document.getElementById("myCanvas");

varcxt=c.getContext("2d");

cxt.fillStyle="blue";

cxt.storkeStyle="red";

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

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

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

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

HTML5工具

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

下列是一些帮忙创立很棒的网站的必要工具。

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

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

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

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

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

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

Video.js：这是一款基于JavaScript的HTML5视频播放器