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教程