TML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，为了顺应整个互联网时代变迁，使得人们能够以更好的方式去进行网页结构搭建，HTML5应运而生。HTML5新增了如下几个方面你的特性：

一、语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css，以前的页面，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且w3c也在HTML5给出了几个新的语义化的标签。

语义化之后文档会有什么效果呢？就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。。

怎么知道自己的页面结构是否语义化，那就要看HTML布局结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的代码结构。也就是说，去掉CSS的装饰之后，整个HTML的结构阅读起来依旧主次分明，能够看清其整体的架构模块。这也就是，语义化之后我们想要HTML文档达到的效果。

其实语义化，也无非就是自己在使用标签的时候在合适的场景下选取合适的标签，比如h1~h5系列标签，在HTML中就是就是用来定义标题；而p标签，大部分情况下用以处理文字段落，table表格则适合做信息表格,等等。

我们对整个HTML结构进行语义化的规范操作有如下几个好处：

1，这样有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

2，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；

3，便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

HTML5中新增的语义化标签进一步加强了我们针对整个HTML结构进行语义化跟进的可操作性，使得我们网页布局的可阅读性更高。

常见的HTML5语义化标签及其使用场景如下：

<article>

定义页面独立的内容区域。

<aside>

定义页面的侧边栏内容。

<command>

定义命令按钮，比如单选按钮、复选框或按钮

<details>

用于描述文档或文档某个部分的细节

<dialog>

定义对话框，比如提示框

<summary>

标签包含 details 元素的标题

<figure>

规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption>

定义 <figure> 元素的标题

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义导航链接的部分。

<progress>

定义任何类型的任务的进度。

<section>

定义文档中的节（section、区段）。

<time>

定义日期或时间。

二、本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

三、连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

我们使用WebSocket 与Ajax的长轮询做对比，从而感受WebSocket 的优势所在，其对比图如下：

四、网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

video元素，在HTML5中专门用来播放网络上的视频或者电影。

audio元素，在HTML5中专门用来播放网络上的音频。

使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以。

浏览器的支持：

Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！

1，基本使用方法

audio元素只需要给他指定一个src属性：

<audio src="MP3.mp3" controls="controls"></audio>

对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替

<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>

video元素要设定好长宽和src属性就可以了：

<video width="750" height="400" src="time.mp4"></video>

同样对于不支持video的浏览器可以在中间加入替换文字：

<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>

source元素指定多个播放格式与编码：

source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。

使用方法：

<video>

<source src="video.m4v" type="video/mp4" />

<source src="video.webm" type="video/webm" />

<source src="video.ogv" type="video/ogg" />

<source src="video.mp4" />

</video>

各种设备对编码格式的支持情况：

webm(.webm)格式的视频 火狐4.0+、chrome6.0+、opera10.6+

mp4(.m4v)格式的视频 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+

ogg(.ogv)格式的视频 火狐3.5+、chrome3.0+、opera10.5+

mp4(.mp4)格式的视频 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+

2、viedo与audio的常用属性

audio元素和video元素的常用属性

src属性：在这个属性里面指定媒体数据的URL地址。

controls属性：指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。

width和height属性（video独有）：指定视频的宽度与高度。

autoplay属性：这个属性指定是否当我们网页加载完成之后就开始自动播放。

preload属性：这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。

preload属性的三个值：

none 表示不进行预加载。

metadata 表示只预加载媒体的元数据。

auto(默认值) 表示预加载全部的视频或者音频。

2，使用Javascript提供的方法操作多媒体。

Javascript为我们提供了丰富的方法，用以灵活控制多媒体文件，这样我们就可以根据实际的项目需求，定义自己的多媒体播放器。

其中controls属性经过设定，会在界面中显示一个浏览器自带的控制条。如果对于UI没有要求的需求，其内置控制器已经可以满足大部分的需求。隐藏控制条并模拟：那么实现一个自定义功能的播放器关键就在于，我们不使用原生的控制器，将其隐藏掉之后，在下方同样的位置通过HTML、CSS来模拟所需样式，同时通过js来调用video标签所暴露给我们的接口函数及属性，以及检测用户的操作行为来同步的模拟UI与视频播放数据的相应变化。

几个核心函数及属性的用法：

myVid=document.getElementById("video1");//控制视频开关

myVid.play() // 触发媒体文件的播放

myVid.pause() //触发媒体文件的暂停

myVid.currentTime=5; //返回或设定当前视频播放位置

myVid.duration // 返回视频总长度

myVid.volume //控制音量大小

myVid.muted //控制多媒体是否静音

五、三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 <canvas> 的实现示例。

使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识。一些过时的浏览器不支持<canvas> 元素，但是所有的新版本主流浏览器都支持它。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像（ creates graphics on the fly）

随着大数据等领域的发展及应用，canvas绘图在数据可视化方面扮演了重要的角色，可以让我们灵活地通过各种形式展示数据，提高数据的可读性，增强产品的数据能力。

下图展示了canvas在数据可视化方面的应用效果：

综上，HTML5新功能的出现，使得前端在很多新的应用领域发挥出了更加强大的能力，也让很多已有项目在表现形式上有了更好的选择。私信【前端】领取web前端开发/html5学习视频。

TML5的新特性

1. 语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

2. 本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益 于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要 的技术之一)和API说明文档。

3. 设备兼容特性 (Class: DEVICE ACCESS)

4. 连接特性(Class: CONNECTIVITY)

5. 网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音 功能相得益彰。

6. 三维、图形及特效特性(Class: 3D, Graphics & Effects)

7. 性能与集成特性(Class: Performance & Integration)

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术, 帮助您的Web应用和网站在多样化的环境中更快速的工作。

HTML5的优缺点

优点：

1、 网络标准

HTML5本身是由W3C推荐出来的,它的开发是通过谷歌、苹果、诺基亚、中国移动等几百家公司一起酝酿的技术,这个技术最大的好处 在于它是一个公开的技术。换句话说,每一个公开的标准都可以根据 W3C的资料库找寻根源。另一方面,W3C通过的HTML5标准也就意 味着每一个浏览器或每一个平台都会去实现。

2、 多设备、跨平台

3、 即时更新。

4、提高可用性和改进用户的友好体验;

5、 有几个新的标签,这将有助于开发人员定义重要的内容;

6、 可以给站点带来更多的多媒体元素(视频和音频);

7、可以很好的替代FLASH和Silverlight;

8、 涉及到网站的抓取和索引的时候,对于SEO很友好;

9、被大量应用于移动应用程序和游戏。

缺点：

1、 安全:

像之前Firefox4的web socket和透明代理的实现存在严重的安全问 题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗 取用户的信息和资料,另外http的机制导致了web应用安全性有所欠缺, 这将在很长时间内成为问题。

2、 完善性:

html5 还在成熟和发展中,像之前曾经支持的web sql database, w3c已经决定不再维护。许多特性各浏览器的支持程度也不一样,而地理定位API在国内的前途还不清晰。

3、 技术门槛:

html5简化开发者工作的同时代表了有许多新的属性和API需 要开发者学习,想web worker、web socket、web storage 等新特性要求 对于后台的技术需要有一定的了解,甚至需要深入了解其后面原理和逻辑,而canvas要求视觉和图像算法的一些知识,传统的前端开发者需要 掌握更多算法、视觉、后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战

4、 性能:

某些平台上的引擎问题导致html5性能低下,同时在不加入GPU加 速的情况下,html5处理复杂音视频,动画的性能不尽如人意。

5、 浏览器兼容性问题：

这是html5最大缺点,IE9以下浏览器几乎全军覆没,而其他浏览器虽然支持很好,但不是很全。

下期预告：

HTML5学习笔记三：HTML5语法规则

番外篇：昨天写了第一篇文章，阅读量还算可以，感谢收藏Tommy文章和订阅Tommy say的童鞋！对于我的每一篇文章都可以在下面评论交流，我看到后也会和大家互动回答的哦！

当今互联网时代的发展里，Web前端发展已经占据了很大面积，基于Web前端开发基础上，html5已经迅速崛起。近几年来，HTML5移动开发技术如此火爆，已是大势所趋，市场对于HTML5开发人才需求也在不断增加，学习HTML5开发技术的人员也是越来越多。那么我们在学习HTML5技术时，应该了解什么？学习武汉HTML5开发需要了解哪些知识？下面千锋武汉HTML5培训专家就来为大家指点迷津。

首先，明确HTML5是什么？

HTML5是HTML经过第五次重大修改，用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本。HTML5的具体定义为：“万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。”

其次，明确HTML5技术特点

NO1.本地存储特性

基于HTML5开发的网页app拥有更短的启动时间，更快的联网速度，这些全得益于HTML5appCache，以及本地存储功能。

NO2.语义特性

HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

NO3.连接特性

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

NO4.设备兼容特性

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

NO5.三维、图形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

NO6.网页多媒体特性

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

NO7.CSS3特性

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

NO8.性能与集成特性

没有用户会永远等待你的Loading——HTML5会通过2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

以上就是，入门HTML5必须要了解的一些知识。HTML5技术毋庸置疑未来将成为web前端的主流开发技术，所以我们一定要抓住时代发展的机遇，如果对这方面感兴趣赶紧学起来!!!