一、HTML5概要

1.1、为什么需要HTML5

概念：

HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本，

旨在消除富 Internet 程序（RIA）对 Flash， Silverlight， JavaFX 一类浏览器插件的依赖。

1991年HTML1.0标准出现
1997年HTML4.0发布，4.0标准下的浏览器局限性
Flash (安全与稳定堪忧、耗电、触摸、不开放)
Silverlight
JavaApplet
2008年HTML5出现， W3C2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖，

让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很小，这并不符合一个好产品的演进规则。

1.2、HTML5与HTMl的区别

1)、在文档类型声明上
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html5:
<!doctype html>

2）、在文档声明上：
　html有很长的一段代码，并且很难记住这段代码，而html5却不同，只有简简单单的声明，这也方便人们的记忆。

3）、在结构语义上
html: 没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
html5: 在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer>。

1.3、HTML5现状及浏览器支持

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera；

1.4、HTML5特性

1、语义特性（Class：Semantic）

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

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

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

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

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

4、连接特性（Class: CONNECTIVITY）

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

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

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

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

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

7、性能、集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XML Http Request 2等技术，解决以前的跨域问题，帮Web应用和网站在多样化的环境中更快速工作。

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

1.5、HTML5优点与缺点

1.5.1、优点

1、提高可用性和改进用户的友好体验；

2、有几个新标签，有助于开发人员定义重要内容；

3、可给站点带来更多多媒体元素(视频和音频)；

4、可很好的替代FLASH和Silverlight；

5、当涉及网站抓取和索引时，SEO很友好；

6、可大量应用于移动应用程序和游戏；

7、可移植性好。

1.5.2、缺点

1.6、HTML5效果展示

1.7、HTML5学习与开发工具

二、HTML5新增标签

2.1、废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

2.2、新增的标签

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。
HTML5:<article></article>
HTML4:<div></div>

<aside>标签定义：侧边 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio> 标签定义声音，比如音乐或其他音频流。

HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>

<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

HTML5学习总结——HTML5入门与新增标签的更多相关文章

HTML5的文档结构和新增标签
一．HTML5 文档结构1.第一步:打开开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
html5学习之第一步：认识标签，了解布局
图1. Acme United的网页的规划 Header区的例子包含了页面标题和副标题,< header>标签被用来创建页面的Header区的内容.除了网页本身之外,< header ...
HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
html5学习笔记（1）-新标签
最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HT ...
HTML5学习笔记----html5与传统html区别
一. HTML5语法的改变该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...
Html5 学习之 Html5功能判断插件 Modernizr
---恢复内容开始--- Modernizr 浏览器对HTML5和CSS3开发的功能检测类库由于当前用户使用的浏览器版本较多,对H5和CSS3的支持也各不相同.前端的开发者,在使用一些新的特性的时候 ...
[html5] 学习笔记-html5音频视频
HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight 或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...
[html5] 学习笔记-html5增强的页面元素
在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...
HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签目录一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

随机推荐

Manager（管理器）
Manager(管理器) 索引意图结构参与者适用性效果实现实现方式(一):Manager 模式的示例实现. 意图将对一个类的所有对象的管理封装到一个单独的管理器类中. 这使得管理职责的 ...
Java、C#双语版HttpHelper类
Java.C#双语版HttpHelper类(解决网页抓取乱码问题) 在做一些需要抓取网页的项目时,经常性的遇到乱码问题.最省事的做法是去需要抓取的网站看看具体是什么编码,然后采用正确的编码进行解码 ...
bios和dos中断
1.字符功能调用类(Character-Oriented Function)01H.07H和08H —从标准输入设备输入字符02H —字符输出03H —辅助设备的输入04H —辅助设备的输出05H — ...
MongoDB的.Net驱动
mongo的驱动主要使用了两个,即samus和官方驱动. 个人感觉差别不大,且官方驱动也支持了LinQ.但在使用DBRef的时候,发现samus的驱动似乎不太好用,并没有达到想要的效果,也许是我的使用 ...
大数据之HBase
大数据之HBase数据插入优化之多线程并行插入实测案例一.引言: 上篇文章提起关于HBase插入性能优化设计到的五个参数,从参数配置的角度给大家提供了一个性能测试环境的实验代码.根据网友的反馈,基于 ...
Mahout之（三）相似性度量
User CF 和 Item CF 都依赖于相似度的计算,因为只有通过衡量用户之间或物品之间的相似度,才能找到用户的“邻居”,才能完成推荐.上文简单的介绍了相似性的计算,但不完全,下面就对常用的相似度 ...
ASP.NET Web API的消息处理管道："龙头"HttpServer
ASP.NET Web API的消息处理管道:"龙头"HttpServer 一般来说,对于构成ASP.NET Web API消息处理管道的所有HttpMessageHandler来 ...
大数据应用日志采集之Scribe演示实例完全解析
大数据应用日志采集之Scribe演示实例完全解析引子: Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它能够从各种日志源上收集日志,存储到一个中央存储系 ...
Mac下quick-cocos2d-x player 无法运行解决方案
今天打算在Mac开发我的游戏,因为游戏用的2.2.5版的player,没有安装版.在Mac上运行player时提示player文件已经损坏. 解决方法:在shell下执行如下指令即可 mv $QUIC ...
MVVM1
silverlight的数据校验大体分成3种类型: 数据是非必填的但是需要满足相应数据格式的数据是必填的且可能需要进行数据格式校验的其他(如数据的联动校验) 以下的数据校验方式针对第二种: 在相应 ...

HTML5学习总结——HTML5入门与新增标签