更多课程 选择中心

Web培训
达内IT学院

400-111-8989

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代码:

<div id="header">

<h1> Header Text</h1>

<div id="nav">

<ul>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

</ul>

</div></div>

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

<header>

<h1>Header Text</h1>

<nav>

<ul>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

</ul>

</nav>

</header>

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

<link href ="../css/main.css" rel="stylesheet" type="text/css"/>

<script src="../js/main.js" type="text/javascript"></script>

使用HTML5之后,可使用以下缩简后的版本:

<link href ="../css/main.css" rel="stylesheet"/>

<script src="../js/main.js"></script>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document Name</title>

<link href="../css/main.css" rel="stylesheet"/>

<script src="../js/main.js"></script>

</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 src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script >

<![endif]-->

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

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

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

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:Web前端开发知识点之JavaScript对象
下一篇:Web前端开发知识之HTML5常用标签简介

Web前端工程师必备的工作技能有哪些

Web前端的主流框架有哪些

零基础小白该如何高效的学习Web前端技术

Web初学者要了解的Web前端小知识

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省