Web培训

热门话题:

Web前端培训 > Web职场 > 正文

Web前端开发知识点之HTML5概述

发布：Web前端培训
来源：Web职场
时间：2020-11-11 16:54

今天小编要跟大家分享的文章是关于Web前端开发知识点之HTML5概述。正在学习和从事Web前端学习和工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

HTML5发源于World Wide Web Consortium(简称W3C)，是Web标准的一种。它诞生于2004年8月W3C关于Web应用程序以及复合文档(Compound Documents)的研讨会上，并于2010年正式推出。自推出以来，它便以惊人的速度被迅速推广，就连微软也因此为下一代IE9做了标准上的改进。HTML5是Web开发世界的一次重大改变，代表着未来趋势。其目标是能够创建更简单的Web程序。书写出更简洁的HTML代码。

HTML5的诞生具有划时代、革命性的意义，它正在被大面积地推广及使用。通过对Internet Explore，Google，Firefox，Safari，Opera等主流Web浏览器发展策略的调查发现，它们均在对HTML5的支持上采取了相应的措施。

Web前端开发知识点之HTML5概述

HTM15具有以下6点优势：

1、跨平台运行、易用性

HTML5最主要的优势在于其适合众多平台，从PC浏览器到手机、平板电脑，甚至未来的智能电视，只要设备浏览器支持HTML5，HTML5应用或游戏在该平台中就可直接运行，这使得应用HTML5创建网站更加简单。新的HTML主体结构元素和非主体结构元素如“article”、“section”、“nav”、“aside”、“time”、“pubdate”、“header”、“footer”、“address”等，使得文档的结构更清晰明确，读者更易访问内容。例如，之前使用“div”，即使定义了“class”或者“id”也难以让读者清楚知道其真正的含义。使用新的语义学的定义标签，可更好地了解HTML文档，并创造出更人性化的用户体验。

2、支持多媒体播放

以前涉及多媒体播放，普遍的做法就是使用Flash或其他第三方自主开发的播放器应用，较为复杂且难以使用。而HTMI5支持直接在浏览器中播放音频和视频文件，不需要使用Adobe Flash这样的插件。HTML5通过标签<video>和<audio>来访问视频和音频资源。早期播放媒体需要使用<embed>和<object>标签，并且为了它们能正确播放必须赋予许多的参数，这使媒体标签非常复杂。而HTML5中的视频和音频标签将它们视为图片：<video src=" "/>关于其他参数(如宽度和高度)或者自动播放功能，则只需要像其他HTML.标签一样定义：<video src="url" width="640px" height="380px" autoplay/>。

3、更清晰的代码

使用HTML5可写出简单、优雅、容易阅读且富于描述的代码。符合语义学的代码允许将样式和内容分离。以下是一个典型的拥有简单导航的header代码：

<h1> Header Text</h1>

<ul>

</ul>

</div></div>

使用HTML5后会使得代码更简单且富有含义：

<h1>Header Text</h1>

<nav>

<ul>

</ul>

</nav>

</header>

HTML5中,可通过使用语义学的HTML header标签描述内容来解决“div"及其"class"定义的问题。之前需要大量使用"div"来定义每一个页面内容区域。但是，使用新的<section>，<article>，<header>，<footer>，<aside>和<nav>标签之后，代码会更加清晰，易于阅读。为了保持简洁，<link>和<script>元素不再需要type属性。使用HTMI5之前的代码如下：

使用HTML5之后，可使用以下缩简后的版本：

将上述信息添加到一个文档中，HTML5页面将类似于以下形式：

<!DOCTYPE html>

<html>

<head>

<title>Document Name</title>

</head>

<body>

<p>Your content</p>

</body>

</html>

4、本地存储

Web Storage是HTML5引入的一个非常重要的功能，可在客户端本地存储数据，类似HTML4的Cookie，但它是为了提供更大容量存储而设计的，可实现的功能要比Cookie强大得多。Cookie的大小是受限的，被限制在4KB，而针对Web Storage，官方建议为每个网站最大为5MB。同时，每次请求新的页面时，Cookie都会被发送过去。而HTML5的storage是本地存储，网站在页面加载完毕后可通过JavaScript来获取这些数据。

Web Storage只能提供存储简单数据结构的数据，而对复杂的Web应用数据却无能为力。于是，HTML5还提供了一个浏览器端的数据库支持，允许用户直接通过JS的API在浏览器端创建一个本地的数据库，并且支持标准的SQL的增删改查(CRUD)操作，让离线的Web应用能更方便地存储结构化数据。原本必须要保存在服务器数据库中的内容，可直接保存在客户端本地，这将大大减轻服务器端的负担，同时加快访问数据的速度。本地存储类似于比较老的技术——Cookie和客户端数据库的融合，但由于支持多个Windows存储，因此拥有更好的安全性和更强的性能，即使在浏览器关闭后也可以进行保存。

能够保存数据到用户浏览器中意味着可简单地创建一些应用特性。例如，保存用户信息，缓存数据，以及加载用户上一次的应用状态等。

5、更好的互动-绘制图形

用户往往希望与客户端有更好的互动，特别是喜欢对用户有反馈的动态网站，用户可以享受互动的过程。输入<canvas>，HTML5的画图标签可做更多的互动和动画，达到以往使用Flash才能实现的效果，甚至还可应用于开发游戏。

除了<canvas>，HTML5同样也拥有很多API允许开发人员创建更好的用户体验和更动态化的Web应用程序。例如，Drag and Drop(DaD)，OfMine storage database，Browser history management，document editing，Timed media playback等。

6、跨浏览器支持

目前，主流的浏览器都支持HTML5，如Chrome，Firefox，Safari，IE9，Opera等，并且在创建HTML5 DOCTYPE声明后，即使像IE6这样非常老的浏览器都可以使用。但是，旧版浏览器能够识别DOCTYPE，并不意味它可以处理HTML5标签和功能。不过幸运的是，HTML5已使网页开发变得十分的简单易行，旧版IE浏览器也可通过添加JavaScript代码来使用新的元素：

<!--[if It IE 9]>

</script >

<![endif]-->

以上就是小编今天为大家分享的关于Web前端开发知识点之HTML5概述的文章，希望本篇文章能够对正在从事Web前端工和学的小伙伴们有所帮助，想要了解更多Web前端知识记得关注达内 Web培训官网，最后祝愿小伙伴们工作顺利。

文章来源：原创凯哥的故事

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】