HTML5

一.HTML5简介

*本文结合基本HTML5的权威书籍中的内容,根据自己的理解,向大家列举了一些HTML5中的新标签,希望大家能够喜欢,如有不足,也希望提出建议,大家共同进步。*

HTML5 是HTML标准的最新演进版本。 这个术语代表了两个不同的概念:

它是一个新的 HTML 语言版本包含了新的元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们,通常简称为 HTML5。从要对全部所有的 Web 开发人员有用这一点出发,这个参考页面链接了有关 HTML5 技术的大量资源,并且基于它们各自的功能,把它们归类成了若干组。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

  • 语义:能够让你更恰当地描述你的内容是什么。
  • 连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
  • 离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。
  • 多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。
  • 绘图 :提供了一个更加分化范围的呈现选择。
  • 性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 样式设计: 让我们来创作更加复杂的主题吧!

二.语义

1.HTML5中的节段和提纲
HTML5 中新的提纲和节段元素一览: <section>,<article>,<nav>,<header>,<footer>,<aside>和<hgroup>.

2.使用HTML5的音频和视频
<audio> 和 <video> 元素嵌入和允许操作新的多媒体内容。

3.HTML5的表单
看一下 HTML5 中对 web 表单的改进:强制验证 API,一些新的属性,<input>属性type的一些新值 ,新的<output>元素。

4.新的语义元素
除了节段,媒体和表单元素之外,还有众多的新元素,例如``, <figure>,<data>,<time>, <progress>,<main>,这增加了有效的HTML5元素的数量。

三.连通性

1.Web Sockets
允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。

2.Server-sent events
允许服务器向客户端推送事件,而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

3.WebRTC
这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,直接在浏览器中控制视频会议,而不需要一个插件或是外部的应用程序。

四.离线 & 存储

1.离线资源:应用程序缓存
火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。

2.在线和离线事件
Firefox 3 支持 WHATWG 在线和离线事件,这可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。

3.DOM储存
客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).

4.IndexedDB
是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 Web 标准。

五.多媒体

1.使用HTML5的音频和视频
<audio> 和 <video> 元素嵌入和允许操作新的多媒体内容。

2.WebRTC
这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,在浏览器中直接控制视频会议,而不需要一个插件或是外部的应用程序。

3.使用Carmera API
允许使用,操作计算机摄像头,并从中存储图像。

六.图像

1.canvas

<canvas>元素

可被用来通过脚本(通常是JavaScript)绘制图形。比如,它可以被用来绘制 图形,制作图片集合,甚至用来实现动画效果。你可以在元素标签内写入可提供替代的的代码内容,这些内容将会在在旧的、不支 持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。

2.WebGL

WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5<canvas>元素中的 API 给 Web 带来了 3D 图像功能。

七.性能 & 集成

1.Web Workers
能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。

2.XMLHttpRequestLevel 2
允许异步读取页面的某些部分,允许其显示动态内容,根据时间和用户行为而有所不同。这是在 Ajax背后的技术。

3.即时编译的 JavaScript 引擎
新一代的 JavaScript 引擎功能更强大,性能更杰出。

4.History API
允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。

5.拖放
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

6.HTML中的焦点管理
支持新的 HTML5 activeElementhasFocus 属性。

7.基于Web的协议处理程序
你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

8.requestAnimationFrame
允许控制动画渲染以获得更优性能。

9.全屏API
为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。

10.指针锁定API
允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

11.在线和离线事件
为了构建一个良好的具有离线功能的 web 应用程序,你需要知道什么时候你的应用程序确实离线了。顺便提一句,在你的应用程序又再回到在线状态时你也需要知道。

八.样式

CSS已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 CSS3, 尽管 CSS 已经不再是很难触动的规范,并且不同的模块并不全部位于 level 3:其中一些位于 level 1 而另一些位于 level 4,覆盖了所有中间的层次。

1.新的背景样式特性
现在可以使用 box-shadow给逻辑框设置一个阴影,而且还可以设置多背景。

2.更精美的边框
现在不仅可以使用图像来格式化边框,使用border-image和它关联的普通属性,而且可以通过 border-radius属性来支持圆角边框。

3.为你的样式设置动画
使用transitions以在不同的状态间设置动画,或者使用 animations 在页面的某些部分设置动画而不需要一个触发事件,你现在可以在页面中控制移动元素了。 

4.排版方面的改进
作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation, 还可以给它设置一个阴影或者更精细地控制它的 decorations。感谢新的 @font-face 规则,现在我们可以下载并应用自定义的字体了。

5.新的展示性布局
为了提高设计的灵活性,新的布局被添加了进来: 

1.align-items

2.align-self

3.flex

4.flex-basis

5.flex-direction

6.flex-flow

7.flex-grow

8.flex-wrap

9.justify-content

本文由金沙官网线上发布于Web前端,转载请注明出处:HTML5

您可能还会对下面的文章感兴趣: