HTML 5 是什麼？

時間  2019-11-06
標籤 html 什麼 欄目 HTML 简体版
原文   原文鏈接

前言

做爲程序員，技術的落實與鞏固是必要的，所以想到寫個系列，名爲 why what or how 每篇文章試圖解釋清楚一個問題。javascript

此次的 why what or how 主題：如今幾乎全部人都知道了 HTML5 ，那麼 H5 到底相比於 HTML4 有什麼區別呢？php

升級版？標準版！

HTML5 作爲 HTML 標準的第 5 版，於 2014 年發佈，相信關注過 HTML5 的發展史的朋友都知道該版本是 WHATWG 和 W3C 握手言和後誕生的，是 W3C 組織與瀏覽器廠商相互妥協的結果，其中的絕大部分規範都由 WHATWG 組織所制定，以後由 W3C 採納併入標準中。css

但 HTML5 是 HTML4 的升級版嗎？html

是也不是，若是以版本的更迭來看，確實，HTML5 確實在 HTML4 以後誕生，可是 HTML5 本質上卻已經不一樣於 HTML4 了。前端

相信你們目前都還留有對 HTML4 的些許印象，在寫 HTML4 時須要加一段特殊的說明來聲明文檔類型的：html5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
複製代碼

該段聲明說明了該文檔基於 http://www.w3.org/TR/html4/strict.dtd 規範，從一個側面來看，該文檔僅僅是符合這種規範的文本而已，而這種規範被稱爲 SGML（標準通用標記語言）。java

接着在來看看 HTML5 的文檔聲明：ios

<!DOCTYPE html>
複製代碼

簡簡單單，清晰明瞭，說明該文檔是 HTML 文檔，並無基於規範。git

從瀏覽器的角度來對比，HTML5 以前的版本，瀏覽器必需要從 W3C 官網上獲取規範文件，才能解析文檔，而 HTML5 文檔能夠被瀏覽器直接識別。程序員

這些角度都代表了，HTML5 以前的 HTML 是 SGML 規範的一種實現，而 HTML5 倒是原本來本的 HTML，有本身的規範，所以 HTML5 能夠認爲是一種新的標準，該規標準誕生於 HTML4，卻不是 HTML4 的升級。

但無論是基於 SGML 的 HTML 版本，仍是 HTML5 版本，其語法內容都差很少。所以也不須要過多的糾結在這個問題上，實用主義者，能用好用就行~

語義化

在看過什麼是 CSS？以後（沒有的能夠看看），應該知道樣式的發展過程當中經歷了一個用標籤表達樣式的階段，該階段產生了一些樣式標籤，好比 <font> <center> <big> 等。但 HTML5 提出結構和樣式分離，樣式表達在 css 內，而 HTML 負責結構，樣式標籤正式宣告脫離舞臺，在 HTML5 的規範下，這些標籤正式被廢除，一些表明結構的標籤被提出並規範。

結構化，樣式脫離的 HTML 文檔，極大提升了文檔的表達力，無論是機器仍是人類都能更快的理解文檔的結構，這種文檔就被稱爲語義化文檔。

語義化主要體如今如下幾個方面：

結構標籤

寫過 HTML5 的都知道大概有哪些標籤新加了進來，這裏大體羅列一下

標籤 釋義
section 表明文檔組成的一部分，應該與 h[1-6] 結合使用，表示文檔結構。
article 表明文檔的獨立內容區域，該區域內容爲博文、報紙文章等內容。
main 表明文檔的主要內容區域。
aside 表明與內容主題略有相關的區域。
header 表明該文檔的介紹性區域。
footer 表明該文檔的頁腳，一般用於存放版權，做者等信息。
nav 表明文章導航區域。
figure 表明該區域內有多媒體內容，一般多媒體標籤做爲該標籤的子元素。
template 模板區域，能夠被 JavaScript 所使用。
video 經過該標籤能夠引用視頻，該標籤表明視頻能夠顯示的區域。
audio 經過該標籤能夠引用音頻，該標籤表明音頻能夠顯示的區域。
track 該標籤爲 video 提供了字幕。
mark 表明須要特殊注意的內容區域。
progress 該區域表明某項任務的進度。
meter 該區域表明某項內容的使用量，好比 CPU 使用量等。
time 該區域表明時間。
canvas 該區域表明能夠被 JavaScript 所控制的畫布。

可能有些朋友會納悶，這些東西其實吧，也不是那麼的重要，用 div + css 也都能實現，並且各個瀏覽器上表現的還都一致，還不用考慮兼容問題。那麼爲何這裏還提呢？

試想一個問題？

若是你是瀏覽器，或者說是解析 HTML5 文本內容的程序，你會怎麼看待 HTML4 與 HTML5 ？

首先第一個須要解決的問題：顯示頁面，二者都能解析，生成樹狀結構，併成功的顯示頁面，這也是大部分用戶所須要的。在這方面二者平局，HTML5 沒有任何的優點。

那麼如今第二個問題，識別該文檔，這或許不是大部分用戶的需求，但小部分用戶並不意味着人數少。

相信大部分朋友都有使用搜索引擎的習慣，那麼搜索引擎是如何幫你找到這個網頁的呢？

搜索引擎經過適當的策略解析經過爬蟲抓取到的網頁內容，將該文章進行分類，經過用戶給的搜索詞進行匹配，最終將結果呈現給用戶，爬蟲的解析策略，面對 HTML4 時，須要識別出特定的 div 而這個特定的 div 該如何去找呢？經驗？特定字符串？面對 HTML4 ，只能獲得一個個的 div 而哪一個 div ，emmm... 很差找。面對 HTML5 呢？程序從結構就能大體理解文檔的結構，進而識別出該篇文章的大致內容。

問題二能夠簡單認爲：咱們須要生成文章大綱，一篇文章能夠有幾部分的內容組成，而規範這些內容的就是大綱，相信有寫過文章的都知道大綱的做用，能夠清醒的表達出內容，那麼 HTML4 呢，一堆 div 分不清哪一個是主體，哪一個是次要內容，但 HTML5 呢，結構清晰，解析程序也能很快的生成文檔的大綱。

大綱只能用在搜索引擎嗎？並非，閱讀設備就很須要大綱生成目錄，無障礙設備能夠識別到文檔的主體內容等等。

看到這裏，相信你們對於語義化標籤的重要性也有了瞭解，使用成本幾乎爲 0，但文檔的清晰程度卻上了一個層級，幹嗎不用呢？

新增的表單類型

表單類型（type）表明了改表單內容的類型，新增瞭如下幾個

  • tel
  • search
  • url
  • email
  • date
  • time
  • number
  • range
  • color

新的標籤屬性

屬性 示例 含義
target <base target="..."> base 標籤新增 target屬性，雖然以前已經被普遍的使用了。
charset <meta charset="utf-8"> meta 標籤新增 charset 屬性，規範文檔所使用的字符集。
placeholder <input placeholder="..."> 可輸入的表單元素新增 placeholder 屬性，表明默認內容。
form <input form=1> 表單元素新增 form 屬性，表明關聯的 form 表單，而不須要在 form 標籤內。
contenteditable <div contenteditable> 表明該元素可編輯。
data-* <div data-a="..."> 與該元素相關聯的數據，可在 JavaScript 中獲取。

以上爲 HTML5 語義化的具體呈現，但願你們擁抱並使用 HTML5 的新標籤。

多媒體

HTML5 的上一代標準 HTML4 於 1999 年發佈，當時互聯網還處於圖文混排的時代，通信也不是很發達，數據的交互受限於網速，可是近 20 年來數據通信的高速發展圖文混排已經不能知足用戶的需求了，因爲瀏覽器並不支持視頻促成了 Flash/ActionScript 的發展，可是因爲 Flash 的繁瑣（須要裝插件）以及安全問題，Apple 拒絕使用 Flash，以後各大瀏覽器廠商也開始重視 Flash 的安全問題，提出了多媒體標籤，直到 HTML5 規範化了多媒體應用。

相關多媒體標籤

建議查看英文的相關文檔，中文的翻譯文檔好像尚未及時跟進。

除了多媒體標籤的更新，這裏同時還列舉下一些與顯示相關的內容：

  • Canvas

畫布，可使用 JavaScript 在改元素規定的區域內進行繪畫，文檔說明。

  • WebGL

光柵化的圖片繪畫引擎，主要用於 3D 製做，文檔說明，以及WebGL 理論基礎

  • Camera API

經過Camera API，你可使用手機的攝像頭拍照，而後把拍到的照片發送給當前網頁。

  • SVG

如今能夠直接在 HTML5 文檔中寫 SVG（可縮放矢量圖形），一種用於描述基於二維的矢量圖形的，基於 XML 的標記語言。文檔說明。

  • MathML

MathML（Mathematical Markup Language），是一種基於 XML 的標記語言，用以描述數學公式，但目前瀏覽器的支持力度有點低。具體能夠查看文檔說明

通訊

HTML5 以前，JavaScript 只能經過 XMLHttpRequest 與後端程序進行交互，隨着 HTML5 標準的提出，前端可使用各類各樣的姿式與後端進行溝通，數據的交互變的簡單，靈活。

fetch

XMLHttpRequest，雖然在實際開發中幾乎很難使用到它，可是對於它的封裝庫咱們卻常用，好比 axios $.ajax 。雖說封裝的庫下降使用成本，但源頭是複雜的，並且 XMLHttpRequest 是基於回調的異步模式，雖然 axios 進行了 Promise 化，但畢竟不是原生支持。所以一個基於 Promise 的請求 API 於 HTML5 標準內提出：fetch。

一個簡單的 fetch 例子

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });
複製代碼

fetch 支持兩個參數，

  1. 資源地址
  2. 請求參數，用於設置請求方式，請求頭，請求體等內容，一個 JavaScript 對象。

學習資源：

WebSocket

在 HTML5 出現以前，作一個實時聊天的 web 項目是極其困難的，因爲以前的版本僅支持瀏覽器主動向服務器進行發送內容，必須先有請求才能有服務器響應的數據，簡單的來講服務器並不能主動將數據提交給客戶端。

面對這些需求，你們的作法一般是輪詢，經過前端設置一個定時器，每隔固定的時間去請求服務器資源，即便服務器並無發生數據更新。這浪費了極大的服務器資源，那麼有沒有一種方式支持服務器推送呢？

有！WebSocket 是 HTML5 新增的一種協議，目的是在瀏覽器和服務器之間創建一個雙向數據通道，瀏覽器能夠推送數據到服務端，服務端也能夠推送數據到客戶端。WebSocket 對於前端來講僅是一個簡單的 API，最重要的是服務端的支持。

WebSocket 的客戶端代碼示例

// 建立連接
const socket = new WebSocket('ws://localhost:8080');

// 連接開啓事件
socket.addEventListener('open', function (event) {
    // 向服務端推送數據
    socket.send('Hello Server!');
});

// 服務端推送事件，event.data 即爲服務端推送的數據
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
複製代碼

至於服務端如何實現，不一樣的語言有不一樣的實現，比較出名的是 Node 下的 Socket.IO，若是擔憂服務端語言實現困難，不妨用 Node 搭建中間層，使用 Node 進行與客戶端的溝通，並將數據交由服務端程序處理。固然也能夠查看 MDN 的文章：編寫 WebSocket 服務器

一些資源

EventSource

fetch 實現了請求的 Promise 化，WebSocket 實現了雙工通訊，那麼 EventSource 又是什麼？

簡單的來講，EventSource 實現了服務端對客戶端的單向通訊，能夠理解爲客戶端是訂閱者，服務端是內容發佈者，也就是發佈訂閱模式的實現。

一個簡單的例子

// 開始訂閱
var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

// 服務端發佈數據回調
evtSource.onmessage = function(event) {
    // event.data 即爲服務端發佈的數據
    console.log('Message from server ', event.data);
}
複製代碼

一樣的前端代碼很簡單，服務端須要實現該通訊方式須要有必定的成本。具體能夠查看一下文檔

WebRTC

WebRTC（網頁即時通訊），是一個支持網頁瀏覽器進行實時語音對話或視頻對話的 API。因爲該 API 目前並未歸入標準中，這裏就不過多的深刻了，能夠經過如下文檔進行了解：

存儲

在 HTML5 出現以前，前端開發者僅能經過 cookie 來存儲用戶在不一樣頁面之間跳轉的數據，但使用 cookie 來存儲數據其意義上是不對的，不能說 cookie 能夠在同域名下通用，就讓它來攜帶各類各樣的數據，cookie 應該是用來標誌用戶身份的。HTML5 出現以後，規範了數據的存儲，cookie 也回到了原始的用途。

storage

相信你們對於該 API 已經熟悉的不能在熟悉了，storage 分爲兩部分，sessionStorage 與 localStorage，擁有一樣的方法：

  • setItem
  • getItem
  • removeItem
  • clear

localStorage 會將數據永久的存儲下來（固然用戶能夠主動清楚），sessionStorage 中設置的數據當用戶關閉頁面後會清除。

IndexedDB

小型的數據由 storage 已經夠用，那麼瀏覽器端如何進行大量數據的存儲呢？IndexedDB 就是 HTML5 給出的答案。IndexedDB 是瀏覽器內置的一個數據庫，用於存儲結構化數據。但這個數據庫是異步存取數據的，說實話有點難使用，若是使用他，那基本上全部的代碼都在 then 方法裏了。考慮使用吧。

能夠經過使用 IndexedDB進行學習和使用。

DOM 的更新

query

  • querySelector 使用 CSS 選擇器進行選擇元素，僅選取匹配元素中的第一個。
  • querySelectorAll 使用 CSS 選擇器進行選擇元素，返回全部匹配的元素。

data-*

能夠經過在標籤上使用 data-* 設置與元素綁定的數據，JavaScript 能夠經過 dataset 獲取或設置。

<p id="title" data-text="hello"></p>
複製代碼
const p = document.querySelector('#title');
p.dataset.text // hello
複製代碼

元素添加

  • prepend 在規定標籤的最前面添加元素
  • append 在規定標籤最後面添加元素

element 相關

  • firstElementChild 獲取規定標籤中的第一個子元素
  • lastElementChild 獲取規定標籤中的最後一個子元素
  • previousElementSibling 獲取前一個兄弟元素
  • nextElementSibling 獲取後一個兄弟元素

類名操做

  • Node.classList.add 添加類名
  • Node.classList.remove 移除類名
  • Node.classList.toggle 切換類名
  • Node.classList.contains 檢測是否有類名

拖拽

在 HTML4 中想實現元素拖拽，咱們須要這樣一個過程，獲取元素，設置元素定位，與須要被拖入的元素進行碰撞檢測，檢測完成後進行拖入操做。在 HTML5 中規範了這一過程。

相關事件

  • dragstart 設置在拖動元素上，標誌拖動開始
  • dragenter 設置在拖入元素上，標誌有元素開始拖入到該元素內
  • dragover 設置在拖入元素上，標誌元素徹底拖入該元素
  • dragleave 設置在拖入元素上，標誌元素即將梨塊該元素
  • drop 設置在拖入元素上，標誌拖動元素放下

拖動元素與拖入元素能夠經過 e.dataTransfer.getData(xxx) e.dataTransfer.setData(xxx, xxx) 進行數據交互。

MutationObserver

MutationObserver 字面意思爲變更觀察器，用來觀察文檔節點的變更。相關文章

最後

DOM 中，接觸最多的也就這些內容了，更爲詳細的內容能夠經過DOM STANDARD查看。

BOM 的新增

在什麼是 JAVASCRIPT中，咱們提到過 BOM 並無相關的標準去規範它，HTML5 中一些沒有歸到 DOM 中 API 更新就歸到這。

Web Workers

咱們都知道 JavaScript 是以單線程的形式運行在客戶端，這就避免不了當進行大規模的數據運算時所帶來的堵塞問題，爲解決這一問題 HTML5 提出了 Web Workers 的概念，並最終歸入規範。使用 Web Workers 能夠將於頁面渲染無關的數據運算代碼放入另外一個線程，線程間經過 postMessage 發送數據，經過 onmessage 回調獲取數據。

一個簡單的例子

// workers.js
let i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout(timedCount, 500);
}
timedCount();
複製代碼
const w = new Worker("workers.js");
w.onmessage=function(event){
    console.log('Message from worker ', event.data);
};
複製代碼

相關資源：

目前大火的 PWA 應用，其核心 Service Worker 其實也是 Web Workers 的一個實現。 Service Worker 使用編程的方式來進行資源的緩存，與後臺進行數據同步等內容。雖然該內容已在很多的瀏覽器上實現，但標準仍在草案階段，等出標準規範在詳細介紹。

相關資源

History

在 HTML5 以前，前端開發者只能經過 history 對象進行前進後退的動做，但卻不能在不刷新當前頁面的狀況下進行 url 修改，在 HTML5 以前，單頁應用僅能經過 hash 模式進行路由管理，但經過 HTML5 新提出的 history API ，單頁應用就能像正常應用那樣管理頁面的 url 了。經過如下 3 個方法便可：

  • pushState 不刷新頁面導航到指定 URL 併產生歷史記錄。
  • replaceState 不刷新頁面並將頁面當前 URL 替換爲指定 URL，不產生歷史記錄。
  • popstate 事件 在當前頁面點擊返回時，window 對象會觸發該事件，可使用 addEventListener 進行監聽。

相關資源

requestAnimationFrame

通知瀏覽器，在下一次重繪以前調用指定 callback。因爲重繪與屏幕刷新率掛鉤，所以該 API 的調用也與屏幕刷新率掛鉤，可使用該 API 進行一些複雜運算的分解，將任務放在每次刷新的間隔中，這樣就不會產生屏幕要刷新了但瀏覽器卻能及時繪製出頁面的尷尬狀況出現，使得頁面顯示平滑，不掉幀。所以該 API 的出現促進了 Canvas 的發展，而 Canvas 的發展又促進了頁遊的發展。

  • requestAnimationFrame(callback)

若是想實現相似定時器的效果，只須要在 callback 中再次調用 requestAnimationFrame 便可。

相關資源

全屏 API

  • Element.requestFullscreen() 將當前元素全屏展現
  • Document.exitFullscreen() 取消全屏顯示

相關資源

獲取地理位置信息

  • navigator.geolocation.watchPosition() 監聽地理位置信息，當發生改變時，觸發回調
  • navigator.geolocation.getCurrentPosition() 獲取地理位置信息

以上兩方法都須要傳入，成功回調和失敗回調，分別爲參一和參二。

相關資源

CSS3

在什麼是 CSS？中，咱們提到過，CSS 標準被 W3C 採納，並最終成爲 HTML 標準的一部分，所以 CSS 內容的更新也算是 HTML5 更新的一部分。

這部分單獨說吧。

總結

慣例，問幾個問題

  • HTML5 涵蓋了那幾方便麪的更新？
  • 通訊方式有什麼新姿式？
  • 語義化的體現，以及語義化的做用？
  • js 如何更好的處理數據而不影響頁面渲染？
  • 單頁應用的 history 是基於那些 api 實現的？

談談感覺

隨着 HTML5 的更新，前端在也不是切圖仔，瀏覽器也開始作爲了一個 GUI 工具存在，而不只是爲了展現頁面。相信隨着技術的發展，當通信延遲下降到必定程度後，喬幫主的設想 all in browser 將會成爲現實。

參考

最後的最後

該系列全部問題由 minimo 提出，愛你喲~~~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程