HTML5是HTML的第五个也是目前的版本，HTML是一种用于在万维网上构建和呈现内容的标记语言。这篇文章将帮助读者理解它。

HTML5是W3C和Web超文本应用技术工作组合作开发的。它是HTML的更高版本，它的很多新元素可以让你的页面更加语义化、动态化。它的开发是为了给每个人提供更好的网络体验。HTML5提供了很多功能，使Web更具动态性和交互性。

HTML5的新特性是：

新标签，如标题和部分

2D绘画的画布元素

本地存储

新的窗体控件，如日历、日期和时间

新媒体功能

地理位置

HTML5不是正式标准(LCTT翻译：HTML5在2014年成为“推荐标准”)，所以不是所有浏览器都支持它或它的部分功能。开发HTML5背后最重要的一个原因就是为了防止用户下载安装Silverlight、Flash等多个插件。

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

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

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

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

HTML5需要了解的基础知识

图1:语义元素

HTML5需要了解的基础知识

图2:表单元素

HTML5需要了解的基础知识

图3:图形元素

HTML5需要了解的基础知识

图4:媒体元素

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

地理位置的一些用途包括：

公共交通网站

出租车和其他交通网站

电子商务网站计算运费

旅行社网站

房地产网站

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

网络游戏

该网站的主页提供了当地的标题和天气

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

工作原理：地理位置通过扫描常见的位置信息来源来工作，包括以下内容：

全球定位系统是最的

网络信号——IP地址、射频识别、无线网络和蓝牙媒体访问控制地址

全球移动通信系统/码分多址蜂窝标识

用户输入

该应用编程接口提供了一个非常方便的功能来检测浏览器中的地理位置：

//做东西

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

语法是：

定义用于检索位置信息的回调方法。

ErrorHandler(可选):定义在处理异步调用时发生错误时要调用的回调方法。

选项：定义一组用于检索位置信息的选项。

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

描述位置的大地测量学直接指向纬度和经度。

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

如下表1所示，每个属性/参数都有大地测量和土木表示。

HTML5需要了解的基础知识

图5包含位置对象返回的一组属性。

HTML5需要了解的基础知识

图5:位置对象属性

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

与Cookie相比，Web存储的优势在于：

更安全的

更快的

存储更多数据

存储的数据不会随每个服务器请求一起发送。仅在需要时才包括在内。这是HTML5 Web存储相对于Cookie的一大优势。

有两种类型的网络存储对象：

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

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

工作原理：本地存储和会话存储对象创建一个键值对。例如：键='名称'，值='帕拉克'。

这些都是以字符串的形式存储的，但是如果需要的话，可以使用JavaScript函数如parseInt()和parseFloat()进行转换。

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

存储一个值：

localStorage.setItem('key1 '，' value 1 ')；

local storage[' key 1 ']=' value 1 '；

获取一个值：

alert(LocalStorage . GetItem(' key 1 '))；

警报(LocalStorage[' key 1 '])；

删除一个值：-RemoveItem(' key 1 ')；

删除所有值：

local storage . clear()；

有了HTML5 AppCache，我们就可以让Web应用在没有互联网连接的情况下离线工作。除了IE以外的所有浏览器都可以使用AppCache(从现在开始)。

应用程序缓存的优点是：

网页浏览可以离线

页面加载速度更快

服务器负载较小

缓存清单是一个简单的文本文件，它列出了浏览器应该缓存以供脱机访问的资源。清单属性可以包含在文档的HTML标记中，如下所示：

.

/html

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

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

用户清除它们

清单已修改

缓存更新

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

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

HTML5需要了解的基础知识

以下示例显示了视频元素的使用：

超文本标记语言

身体

视频src=' vdeo . ogg ' width=' 320 ' height=' 240 ' controls=' controls '

此浏览器不支持视频元素。

/视频

/body

/html

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

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

source src=' vdeo . ogg ' type=' video/ogg '/

source src=' vdeo . MP4 ' type=' video/MP4 '/

source src=' vdeo . webm ' type=' video/webm '/

此浏览器不支持视频元素。

/视频

HTML5需要了解的基础知识

图6:画布输出

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

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

HTML5需要了解的基础知识

音频元素的使用如下：

超文本标记语言

身体

audio src=' song . ogg ' controls=' controls '

此浏览器不支持音频元素。

/视频

/body

/html

这个例子使用Ogg文件，可以在Firefox，Opera，Chrome中使用。为了使音频在未来版本的Safari和Chrome中工作，我们必须添加一个MP3和Wav文件。

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

source src=' song . ogg ' type=' audio/ogg '/

source src=' song . MP3 ' type=' audio/mpeg '/

此浏览器不支持音频元素。

/音频

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

画布元素不具备绘制元素的功能。我们可以用JavaScript来画画。所有的图都要用JavaScript。

var c=document . getelementbyid(' my canvas ')；

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:用于测试代码。它减少了保存代码并将其加载到屏幕上所需的时间。将代码粘贴到编辑器中以获得结果。它非常容易使用，并为一些代码提供自动完成，这使得开发和测试更快更容易。

字体拖动器：在浏览器中预览自定义的网页字体。它直接加载字体，这样你就可以知道它看起来是否正确。还提供了拖放界面，允许您拖动字形、网页打开字体和矢量图形来立即测试它们。

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

Modernizr:这是一个开源工具，为访问者的浏览器提供更好的体验。使用这个工具，可以检查访问者的浏览器是否支持HTML5功能，并加载相应的脚本。

Adobe Edge Animate:对于必须处理交互式HTML动画的HTML5开发人员来说，这是一个有用的工具。用于数字出版、网络、广告。该工具允许用户创建可以跨多个设备运行的完美动画。

Video.js:这是一个基于JavaScript的HTML5视频播放器。如果你想给你的网站添加视频，你应该使用这个工具。它使视频看起来很好，是网站的一部分。

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

HTML5重置：这个工具允许开发者用HTML5重写旧网站的代码。您可以使用这些工具为您网站的访问者提供良好的网络体验。

帕拉克沙阿

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

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