HTML5简介

HTML5简介

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search

1、音频视频播放

  视频已经在 Web 上广泛流行了,但是其格式几乎都是专有的。YouTube 使用 Flash,Microsoft 使用 Windows Media®,Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。

  HTML5新增<audio>和<video>标签使得浏览器不需要插件即可播放视频和音频。

对于以哪种格式和解码器作为首选,仍然有争议。可能会强力推荐或要求使用 Ogg Theora。还可以可选地支持 QuickTime 等专有格式和 MPEG-4 等受专利限制的格式。实际使用的格式很可能由市场决定,就像是 GIF、JPEG 和 PNG 格式那样(这些格式通过市场竞争压倒了 BMP、X-Bitmap 和 JPEG 2000 等竞争者,成为 img 元素的首选格式)。

2、动画 Canvas

  HTML 5 引进了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。下图为基于 HTML5 Canvas 对象的 Invaders 经典游戏。

 3、地理信息

QQ图片20161012092844.png

  点击地图中,黄色小人上方的圆圈,可以告诉 Google 地图你的地理位置。

  HTML5 的另一个功能是地理信息定位功能,一些浏览器提供了 geolocation API ,这个 API 也由 W3C 管理,可以结合 HTML5 实现你当前地理位置定位。Google Maps 在使用该功能,在 Google 地图上,有一个小圆圈,点击一下,就能告诉 Google 地图你现在的地理位置。目前,Geolocation API 并没有被众多桌面浏览器广泛采用(只有 Chrome 和 Firefox 3.6+ 采用了),但 Google Gears 插件可以帮助那些旧浏览器实现该功能。

  Twitter 借此实现地理信息感知的 tweets 消息,当浏览器支持geolocation API 的时候,会自动使用该 API,否则,则使用 Google Gears。

  4、硬件加速、WEB SOCKET

  5、本地离线应用程序(即使在 Internet 连接中断之后)

  6、本地存储

  相对于HTML4只能使用cookie在客户端存储数据,大小受限制,占用带宽,操作复杂的情况,HTML5支持使用Web Storage在客户端进行存储数据,容量更大,减轻带宽压力,操作简便。

  7、语义化标记

  HTML5的最大的意义在于改变了 Web 文档的结构方式,借助 header, footer, section, article 这些标签,我们可以实现更具结构化,语义化的 Web 文档。这样,搜索引擎可以更容易索引 Web 站点,我们也可以搜索到更快,更准确的信息。

另外,借助 Microdata, HTML5 还可以实现更强大的语义结构,这个标准化的数据格式(类似 microformats),可以让你的站点不仅能够提供数据,还能提供数据定义。Microdata 对浏览器和搜索引擎都意义深远,搜索引擎可以借助 Microdata 发现你网络中的好友,而浏览器则可以藉此连接到你的社会网络好友站点。

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

语义元素

HTML5 添加了很多语义元素如下所示:

QQ图片20161012092813.png

HTML5的优势

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

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

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

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

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

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

HTML5的不足

  1、HTML5 本身还在发展中,它不是用户应用的最迫切需求,更多是厂商试图改变软件生态格局的战略需求。

  2、HTML5的兼容性受限于各大浏览器表现,例如微软的IE和fireforx之间存在很多差别。

  3、HTML5需要一个成熟完整的开发环境,目前还缺少。

  4、HTML5功能的暴增,浏览器必须有一个高效的图形引擎和脚本引擎。

  5、HTML5需要杀手级应用来吸引和引导用户升级浏览器,最终完成HTML5终端的部署。

未来前景

  从2012年1月的数据来看,全球已有超过34%的网站使用了HTML5技术。除去IE6-8浏览器外,其他主流浏览器都支持HTML5,其中仅有iPhone/iPad不支持Flash。

  据IDC调查研究显示,2013年全球各地将有10亿人使用HTML5浏览器,将有200万开发人员为HTML5浏览器开发应用。HTML5在未来的5-10年中,将成为移动发展的一个重要因素。


继续学习
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <video width="320" height="240" controls> <source src="" type=""> <source src="" type=""> 你的浏览器不支持 video 标签。 </video> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

 唯有、努力

很好,很好!!努力学习

6年前    添加回复 0

烟雨江南

提高可用性和改进用户的友好体验; 新标签这将有助于开发人员定义重要的内容; 可以给站点带来更多的多媒体元素(视频和音频); 可以很好的替代FLASH和Silverlight; 当涉及到网站的抓取和索引的时候,对于SEO很友好; 大量应用于移动应用程序和游戏。

7年前    添加回复 0

女神的闺蜜爱上我

这就是HTML5

7年前    添加回复 0

哈哈哈

html5 很强大的样子啊

7年前    添加回复 0

我喜欢晴天

html5好多内容啊

7年前    添加回复 0

末日的春天

HTML5还在发展之中

7年前    添加回复 0

男神

第一节随便过一下,接着看

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~