HTML5 快速學習一

時間 2019-11-09

標籤 html5 html 快速學習欄目 HTML5 简体版

原文原文鏈接

關注HTML5有一段時間了，一直沒系統的去學習過。 html

對於HTML5的理解，以前停留在一些新的標籤，一些api能夠完成部分js完成的事情，僅此而已。 web

前段時間HTML5定稿了，看了一些這方面的報道，進行了系統的學習，HTML5能作的遠比你想象的多。編程

是時候開始學習了。 canvas

本系列內容主要參考"HTML5高級程序設計"和W3SCHOOL. api

本文是系列的第一篇： HTML5初窺。瀏覽器

文章提綱

概述
HTML5發展史 & 設計理念
HTML5新功能快速預覽
總結

概述

隨着將來桌面移動化進程的逐漸普及，移動設備與桌面設備使用的技術架構不可避免會有趨同的走勢，HTML5 是惟一通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平臺的跨平臺語言，是時候採用HTML5+CSS3+JS構建新的Web應用了。 ruby

做爲下一代Web語言，HTML5再也不只是一種標記語言，它爲下一代Web提供了全新的框架和平臺，包括提供免插件的音頻視頻、圖像動畫、本地存儲及更多酷炫的功能，是Web可以輕鬆實現native的體驗。架構

HTML5發展史&設計理念

HTML5發展史 框架

我把HTML5的發展史歸納成三句話，詳細內容有興趣本身查閱，我就很少說了。 ide

1993年HTML首次以因特網草案的形式發佈，從2.0，3.2，4.0直到1999年的4.01版，4.01後開始停滯不前，W3C掌握着HTML規範的控制權。

一組人2004年成立了WHATWA(Web Hypertext Application Technology Working Group), 他們創立了HTML5規範, 同時針對Web應用開發新功能。（Web 2.0就是這個時候被髮明的）

2006年,W3C又從新介入HTML，並於2008年發佈了HTML5的工做草案，上個月正式定稿。

HTML5設計理念

1. 兼容性

支持現有文檔並保持平滑過渡。

例如Google分析了上百萬的頁面，從中分析出DIV標籤的通用ID名稱，發現其中重複量很大，不少開發人員都喜歡用DIV id="header"來標記頁眉區域。HTML5因而直接定義了一個<header>標籤。

2. 實用性（效率和用戶優先）

HTML5規範是基於用戶優先準則編寫的，其宗旨是"用戶至上"，這意味着遇到沒法解決的衝突時，規範會把用戶放到第一位，其次是頁面做者，再次是實現者（瀏覽器）,最後才考慮到理論的純粹性。

3. 化繁爲簡

主要作了如下改進：

以瀏覽器原生能力代替複雜的js代碼;

新的簡化的DOCTYPE;

新的簡化的字符集聲明;

簡單而強大的HTML5 API;

4. 通用訪問性

這個原則分爲三個概念。

可訪問性：出於對殘障人士考慮，HTML5和WAI(Web Accessibility Initiative)和ARIA（Accessible Rich Internet Applications）作了緊密結合，WAI-ARIA中以屏幕閱讀器爲基礎的元素已經被添加到HTML中。

媒體中立：若是可能的話，HTML5的功能在全部不一樣的設備和平臺上應該都能正常運行。

支持全部語種：例如，新的<ruby>元素支持在東亞頁面排版中會用到的Ruby註釋。

Note

<ruby>定義和用法：

<ruby> 標籤訂義 ruby 註釋（中文註音或字符）。

在東亞使用，顯示的是東亞字符的發音。

與 <ruby> 以及 <rt> 標籤一同使用：

ruby 元素由一個或多個字符（須要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

HTML5新功能快速預覽

新的DOCTYPE和字符集

根據上面提到的HTML5設計準則化繁爲簡，Web頁面的DOCTYPE被極大的簡化了。

HTML4 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE>

誰能記得住？

請看HTML5 DOCTYPE

<!DOCTYPE html>

跟DOCTYPE同樣，字符集的聲明也被簡化了。

如今成了

新元素和舊元素

HTML5標記元素根據內容類型的不一樣，分紅7大類：

內嵌

像文檔中添加其餘類型的內容，例如audio、video、canvas和iframe等

流

在文檔和應用的body中使用的元素，例如form、h1和small等

標題

段落標題，例如h一、h2和hgroup等

交互

與用戶交互的內容，例如button和textarea等

元數據

一般出如今頁面的head中，設置頁面其餘部分的表現和行爲，例如script、style和title等

短語

文本和文本標記元素，例如mark、kbd、sub和sup等

片斷

用於定義文檔中片斷的元素，例如article、aside和title等

語義化標記

HTML5新的片斷類元素介紹

header

標記頭部區域的內容（用於整個頁面或頁面中的一塊區域）

footer

標記腳部區域的內容（用於整個頁面或頁面中的一塊區域）

section

web頁面中的一塊區域

article

獨立的文章內容

aside

相關內容或引文

nav

導航類輔助內容

下面是一個標籤位置的示意圖

使用Selectors API簡化選取操做

除了語義化元素外，HTML5還引入了一種用於查找頁面DOM元素的快捷方式。

HTML5以前查找元素的js舉例：

函數：getElementById()

舉例：<div id="foo"> getElementById("foo")

HTML5有了新的Selectors API, 能夠用更精確的方式來指定但願獲取的元素，而沒必要再用標準的DOM的方式循環遍歷。使用方式相似於CSS中使用的選擇規則同樣。舉例：

函數1：querySelector()

描述：根據指定的選擇規則，返回在頁面中找到的第一個匹配元素

示例：querySelector("input.error")

結果：返回第一個CSS類名爲"error"的文本選擇框

------------

函數2：querySelectorAll()

描述：根據指定規則返回頁面中全部相匹配的元素

示例：querySelectorAll("#results td")

結果：返回id值爲results的元素下全部的單元格

Note

1. 能夠爲Selector API函數同時指定多個規則，例如

//選擇文檔中名爲highClass或lowClass的第一個元素

var x= document.querySelector(".highClass",".lowClass");

2. Selectors API不只僅只是方便，在遍歷DOM的時候，

Selectors API一般會比之前的遍歷搜索更快，瀏覽器對選擇器匹配進行了高度優化。

window.JSON

JSON做爲js語法的一個子集，它將數據表示爲對象字面量。

因爲其語法簡單和在js編程中與生俱來的兼容性，JSON變成了HTML5應用內部數據交換的事實標準。

典型的JSON API包含兩個函數，parse()和stringify(), 分別用於將字符串序列化成DOM對象和將DOM對象轉換成字符串。

若是舊的瀏覽器使用JSON，須要js庫。

在js中執行解析和序列化效率每每不高，因此爲了提升執行速度，新的瀏覽器原生擴展了對JSON的支持，能夠直接經過js來調用JSON了。

總結

本文首先介紹了HTML5的一些重要特色，HTML的歷史和設計理念。

最後對HTML5的新功能進行了快速預覽。

趕忙抽時間學習HTML5吧！

好了，今天就到這裏。

歡迎你們多多評論，讓下一篇文章更好：）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。