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

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

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:语义化元素

图 1:语义化元素

图 2:表单元素

图 2:表单元素

图 3:图形元素

图 3:图形元素

图 4:媒体元素

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

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

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

图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 标签中,如下所示:

<htmlmanifest="test.appcache">

...

</html>

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

缓存的应用程序页面将一直保留,除非:

用户清除它们

manifest 被修改

缓存更新

视频

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/cbf14851fbae7e859917987d7c1da06e.html