H5的新特征

时间  2019-11-08
标签 h5 特征 繁體版
原文   原文链接

根据 Mozilla 的定义，原文以下：HTML5 is the latest evolution of the standard that defines HTML.javascript

准确的来讲：HTML5 是 HTML 标准的最新演进版本，便是对 HTML 标准的第五次修订，目前仍未完工。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各类媒体的嵌入。html

通俗的理解：就是在html4标准之上添加了一些新的标签（具备属性和行为）。java

那HTML5 到底添加了哪些标签呢？举例来讲有video标签, audio标签,和canvas标签，同时也集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。git

其它新的元素包括section标签, article标签, header标签, 和nav标签,是为了丰富文档的数据内容。新的属性的添加也是为了一样的目的。github

同时也有一些属性和元素被卸载掉了。一些元素，像a标签, 和menu标签被修改，从新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。web

下面的一段代码展现了一体个基本的Html5页面的结构json

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>　　

Html5新特性

HTML5 中的一些有趣的新特性：canvas

  • 增长了用于绘画的 canvas 元素
  • 增长了用于媒介回放的 video 和 audio 元素
  • 增长了对本地离线存储的更好的支持
  • 增长了新的特殊内容元素，好比 article、footer、header、nav、section
  • 增长了新的表单控件，好比 calendar、date、time、email、url、search

语义类

HTML5 中的节段和外观概要

HTML5 中新的外观概要和节段元素一览: <header>, <footer>, <nav>, <section>, <article>, <aside> 和 <hgroup>等。数组

使用 HTML5 的音频和视频

audio 和 video 元素嵌入并可以操做新的多媒体内容。浏览器

HTML5 的表单

看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，input 属性的一些新值 type 和新的 output 元素。

新的语义元素

除了区段，媒体和表单元素以外，众多的新元素，像 mark， figure， figcaption， data， time， output， progress， 或者 meter，也增长了有效的 HTML5 元素的数量。

iframe 的改进

使用 sandbox， seamless， 和 srcdoc 属性，做者们如今能够精确控制 iframe 元素的安全级别以及指望的渲染。

MathML

容许直接嵌入数学公式。

HTML5 兼容的解析器

用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，而且如今精确地定义了在全部状况下使用的行为，甚至当碰到无效的 HTML 这种状况。这就致使了 HTML5 兼容的浏览器之间极大的可预测性和互操做性。

连通性

Web Sockets

容许在页面和服务器之间创建持久链接并经过这种方法来交换非 HTML 数据。

Server-sent events

容许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

WebRTC

这项技术，其中的 RTC 表明的是即时通讯，容许链接到其余人，直接在浏览器中控制视频会议，而不须要一个插件或是外部的应用程序。

离线存储

离线资源：应用程序缓存

火狐全面支持 HTML5 离线资源规范。其余大多数针对离线资源仅提供了某种程度上的支持。

在线和离线事件

火狐 3 支持 WHATWG 在线和离线事件，这可让应用程序和扩展检测是否存在可用的网络链接，以及在链接创建和断开时能感知到。

WHATWG 客户端会话和持久化存储 (又名 DOM 存储)

客户端会话和持久化存储让 web 应用程序可以在客户端存储结构化数据。

IndexedDB

是一个为了可以在浏览器中存储大量结构化数据，而且可以在这些数据上使用索引进行高性能检索的 web 标准。

自 web 应用程序中使用文件

对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 web 应用程序能够访问由用户选择的本地文件。这包括使用 type file 的 input 元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。

多媒体

使用 HTML5 音视频

audio 和 video 元素嵌入并支持新的多媒体内容的操做。

WebRTC

这项技术，其中的 RTC 表明的是即时通讯，容许链接到其余人，直接在浏览器中控制视频会议，而不须要一个插件或是外部的应用程序

使用 Camera API

容许使用，操做计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.

Track 和 WebVTT

track 元素支持字幕和章节。WebVTT 一个文本轨道格式。

3D, 图像 效果

Canvas 教程

了解有关新的 canvas 元素以及如何在火狐中绘制图像和其余对象。

HTML5 针对 canvas 元素的文本 API

HTML5 文本 API 如今由 canvas 元素支持。

WebGL

WebGL 经过引入了一套很是地符合 OpenGL ES 2.0 而且能够用在 HTML5 canvas 元素中的 API 给 web 带来了 3D 图像功能。

SVG

一个基于 XML 的能够直接嵌入到 HTML 中的矢量图像格式。

设备访问

使用 Camera API

容许使用和操做计算机的摄像头，并从中存取照片。

触控事件

对用户按下触控屏的事件作出反应的处理程序。

使用地理位置服务

让浏览器使用地理位置服务定位用户的位置

检测设备方向

让用户在运行浏览器的设备变动方向时可以获得信息。这能够被用做一种输入设备（例如制做可以对设备位置作出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。

指针锁定 API

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

样式

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

新的背景样式特性

如今可使用 box-shadow 给逻辑框设置一个阴影，并且还能够设置 多背景。

更精美的边框

如今不只可使用图像来格式化边框，使用 border-image 和它关联的普通属性，并且能够经过 border-radius 属性来支持圆角边框。

为你的样式设置动画

使用 CSS Transitions 以在不一样的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不须要一个触发事件，你如今能够在页面中控制移动元素了。

排版方面的改进

做者拥有更高的控制已达到更佳的排版。他们不但能够控制 text-overflow 和 hyphenation， 并且也能够给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 @font-face 规则，如今咱们能够下载并应用自定义的字体了。

新的展现性布局

为了提升设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。

性能 & 集成

Web Workers

可以把 JavaScript 计算委托给后台线程，经过容许这些活动以防止使交互型事件变得缓慢。

XMLHttpRequest Level 2

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

即时编译的 JavaScript 引擎

新一代的 JavaScript 引擎功能更强大，性能更杰出。

History API

容许对浏览器历史记录进行操做。这对于那些交互地加载新信息的页面尤为有用。

conentEditable 属性：把你的网站改变成 wiki！

HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。

拖放

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

HTML 中的焦点管理

支持新的 HTML5 activeElement 和 hasFocus 属性。

基于 Web 的协议处理程序

你如今可使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

requestAnimationFrame

容许控制动画渲染以得到更优性能。

全屏 API

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

指针锁定 API

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

在线和离线事件

 

为了构建一个良好的具备离线功能的 web 应用程序，你须要知道何时你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也须要知道。

JSON（JavaScript Object Notation）是Javascript专家大牛Douglas Crockford（克劳福德）发明的一种轻量的数据格式。虽然他的语法部分参考了javascript的一些特性，能够称做Javascript的一个子集，可是他是能够独立于任何语言以外的一种通用的数据格式（文本格式），相比XML来讲具备更轻量的特色。

简单来讲，他是：

  • JavaScript 对象表示法（JavaScript Object Notation）。
  • 它是一种存储和交换文本信息的语法。相似 XML。
  • 它独立于语言层面（javascript）以外,能够被不少语言调用。相似XML。
  • 它比 XML 更小、更快，更易解析。

JSON能够表示三种类型的值：

第一种：简单值,包括字符串、数值、布尔值和null。可是不支持undefined。

"hello, world!"
23
true
null

第二种：数组值

["name",23]

第三种：对象值

{
	"name"   :  "hello",
	"age"    :  23
}

JSON中数组和对象页能够相互嵌套，好比：

[
	{
		"name"   :  "hello",
		"age"    :  23,
		"year"   : [2001, 2002, 2003, 2004]
	},
	{
		"name"   :  "hello",
		"age"    :  23,
		"year"   : [
					{
						"name"   :  "hello",
						"age"    :  23
					}, 2002, 2003, 2004]
	},
	{
		"name"   :  "hello",
		"age"    :  23
	},
	{
		"name"   :  "hello",
		"age"    :  23,
		"year"   : [[1,2,3], 2002, 2003, [10,11,12]]
	}
]

可是对比javascript语法，咱们可以看出他的语法特色：

  • 只能使用双引号（单引号是不被容许的，会报语法错误）；
  • 对象的属性必须加上双引号；
  • 没有变量，没有操做符，没有赋值语句，也没有分号；

JSON的解析和序列化

JSON在WEB开发中很是流行，以致于成为了事实标准，甩开XML十条街不止的缘由，除了跟Javascript有类似的语法以外，还有一个很重要的缘由就是可以很是方便的经过很简单地两个函数在javascript对象和json数据之间互相置换：

  • stringify()—— 该方法将javascript对象序列化成JSON字符串；
  • parse()—— 该方法将JSON字符串解析成javascript对象；

ECMAScript5标准定义了一个专门处理json的解析和序列化的对象—— JSON对象

JSON的序列化

var text = {
	name : "hello,world",
	age  :  25,
	year :  2014
};

var json_text = JSON.stringify(text);
console.log(json_text);    // {"name":"hello,world","age":25,"year":2014}

stringify()方法能够接受两个参数，两个参数都是可选的。第一个参数是过滤器，过滤后能够只包含数组或者函数中须要的值；

var text = {
	name : "hello,world",
	age  :  25,
	year :  2014
};

var json_text = JSON.stringify(text ,["age","year"]);
console.log(json_text);    // {"age":25,"year":2014}

第二个参数是定义是否缩进，若是是数字，表明缩进的空格数（最大是10），而且包含换行；若是是字符串，会被当作缩进符；

var text = {
	name : "hello,world",
	age  :  25,
	year :  2014
};

var json_text = JSON.stringify(text ,["age","year"],4);
console.log(json_text);    
/* { "age": 25, "year": 2014 } */

若是定义第二个参数时，须要缺省第一个参数，能够用null代替；

var text = {
	name : "hello,world",
	age  :  25,
	year :  2014
};

var json_text = JSON.stringify(text ,null,4);
console.log(json_text);    
/* { "name": "hello,world", "age": 25, "year": 2014 } */

JSON的解析

var text = {
	name : "hello,world",
	age  :  25,
	year :  2014
};
var json_text = JSON.stringify(text);

var json_text_data = JSON.parse(json_text);

console.log(typeof text);             // object
console.log(typeof json_text_data);   // object
console.log(text===json_text_data);   // false

虽然text和json_text_data都是对象，而且具备相同的属性，可是他们是两个独立的、没有任何关系的对象。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程