HTML5 學習小結

Ant發表於2020-04-06
HTML

HTML5 小結

使用HTML5也是斷斷續續的有些歷史了，但是沒有系統的總結過，最近發現公司的圖書館有不少藏書，就借了一本HTML5+CSS3的快速閱讀了一下，重溫了一些知識，順便做一下小結：

 

HTML5特性

相對於傳統網頁技術來說，首先我們得明白為什麼HTML5會出現。它帶來的改變和規範並不是一點小改動而已，在網頁技術的方方面面，甚至前端後端都有深遠的影響。比如：描述性更強的新標籤，增強多媒體支援，更強大的前端Web API介面，完善的本地儲存機制，配合CSS3的更精美的介面設計，可訪問性的提升……這些都是HTML5規範所帶來的變化，雖然還不是所有規範都被瀏覽器廠商支援，但它所考慮的方方面面，都正在被實現和加強中。筆者不想像傳統教材那樣分類解釋羅列，而是就自己所使用的和想嘗試著去使用的一些部分，做一些實用性小結。

 

文件型別

HTML5開發的網頁文件型別極其簡單，<!DOCTYPE html>就夠了，記得5年前還在反覆跟團隊強調使用XHTML那段冗長的文件型別宣告（現在已經完全不需要）：

<!DOCTYPEhtml PUBLIC “-//W3C/DTD XHTML 1.0 Transitional//EN“
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

文件型別有兩個作用：1、驗證器依據它來判斷應該採用何種規則來驗證程式碼。2、文件型別宣告能強制要求IE6/7/8等以“標準模式“來渲染頁面，在開發跨瀏覽器支援的時候尤為重要。

 

新標籤

傳統網頁開發從到處是table的年代進入到處是div的年代，以至於div被大量的濫用，只要新增一個元素就想都不想加一行div，所形成的頁面程式碼簡直無法看出整體框架（父層div子層也還是div），那個時候我們都是通過嚴格的縮排，再加上在主題框架的div結束標籤處加上<!—end of xxxDiv --> 這樣的註釋才能方便查詢。

 

當HTML5規範出現之後，它直接重新設計了定義整個網頁框架的許多新標籤，例如頭部用<header>，導航用<nav>，邏輯區域用<section>，完整的一塊內容用<article>，旁白用<aside>，頁尾用<footer>它們之間沒有什麼嚴格的父子聯絡，在一塊邏輯區域<section>的內部如果還設計有導航也可以再巢狀<header>、<nav>等。當為了相容某些還不支援HTML5的舊瀏覽器的時候，可以新增如下的JS程式碼預定義這些新增標籤：

<!—[if lt IE9]>
<script type=“text/javascript“>
document.createElement(‘nav’);
document.createElement(‘footer’);
document.createElement(‘header’)
….
</script>
<![endif]-->

Note:值得一提的是<aside>並不應該被用來做側邊欄，而是被設計用來展示與文章和<section>內容相關的部分，當要使用到側邊欄的時候可以再單獨增加一個<section>。

 

自定義屬性

當我們使用Bootstrap這種框架的時候，經常看到為了構建一個標準控制元件，在html元素程式碼中新增一些屬性，並且都以data-開頭，例如下一段程式碼使用了Bootstrap的popover動態的在圖片上新增冒泡說明：

<img src="img/date.png" id="dateImg" rel="popover"data-trigger='hover' data-placement="right" data-content="轉換資料庫儲存的long整數日期為可閱讀格式，並可反轉YYYY-MM-DD格式的日期為long整數" data-title="Date轉換器"/>

這些以data-開頭的自定義屬性，也是HTML5所提倡的，因為它可以被JS很方便的讀取例如jQuery的attr方法等。更加精簡的提供了一種內容展示資料包含在html中，邏輯特效等由JS+CSS來負責的解耦和思路。

 

更強大的表單元素

經常在前端開發表單的時候，被各種非原生的控制元件所折磨，例如日曆、滑塊、自填充搜尋、特點範圍數字、IP地址輸入、URL/Email輸入框等。這些帶一定規則的控制元件，在傳統方式下都必須由前端人員自行開發或者使用成型的JS庫才能支援。

 

HTML5認為這些控制元件越來越常用，所以索性就增加了這些新的控制元件型別：

<input type=”email”>
<input type=”number”>
<input type=”tel”>
<input type=”search”>
<input type=”date”>
<input type=”datetime”>
….

比較欣慰的是，不需要害怕它們在不支援HTML5的舊瀏覽器上會給開發造成麻煩，因為瀏覽器識別這些型別失敗的時候，會自動預設的使用text型別，所以本質上完全可以向前相容。

 

配合出現的CSS3特性

當HTML本身在進化的時候，CSS也在進化，隨著HTML5的日益流行，CSS3與之配合的特性也越來越被廣泛使用，許多時候甚至前端開發人員一直在使用(copy來的特效程式碼卻從未察覺到)，例如：

 

使用tr:nth-of-type(even)和tr:nth-of-type(odd)來將表格按奇數行、偶數行條紋化，已經很常見；

使用td:nth-child(n+2)或者tr:nth-child(2n+4)來全域性控制部分單元格的對其方式也很好用；

使用p:last-child{border-bottom: 1px solid gray}來給段落結束之後加上一行分割線

使用相容不同瀏覽器的圓角樣式：

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;padding:8px;

使用相容不同瀏覽器的連結漸變效果：

-webkit-transition:color 0.5s;
-moz-transition:color 0.5s;
-o-transition:color 0.5s; transition: color 0.5s;
使用@font-face（實際Css2就已經引入），讓Web伺服器獲得一種方式可以向瀏覽器終端傳輸製作好的字型檔案，從而使得前端呈現出各式各樣好看的字型效果

字型制作轉換詳見：http://www.fontsquirrel.com/fontface/generator

Web免費開源的字型還可以上Google Font: http://www.google.com/fonts

 

更典型的如使用:after和:before選擇器來遍歷一些元素統一加上特定的附屬樣式，再通過first-child和last-child來修正，這種方式在國外的網站特別是導航設計中經常被用，把原本由Js或者冗長的Html所實現的效果，藉助CSS3的高階選擇器簡單的就給替代了。

 

可訪問性WIA-ARIA規範

WIA-ARIA是富因特網應用的可訪問性規範，HTML5規範定義每一個元素都支援WIA ARIA標誌角色。筆者曾經下載過一些國外優秀HTML5網頁作品時就經常見到在一些網頁元素上都帶有role屬性，後來才知道這個角色屬性是專門提供給螢幕閱讀器閱讀所使用的，當具有不同的role屬性時，螢幕閱讀器可以不必自上而下的閱讀，而是自由的更具role屬性來挑選障礙人士最需要知道的部分閱讀。

 

媒體查詢-響應式佈局

現在移動終端螢幕尺寸前期八怪，能上網的裝置就能訪問網頁，本來設計好的佈局如果要根據不同訪問裝置的尺寸來自適應呈現，就需要藉助HTML5的媒體查詢特性：

@media only screen and (max-device-width: 480px)
body{…}
當終端訪問網頁，媒體查詢到終端裝置解析度尺寸資訊的時候，後面的Css定製就會被觸發。

 

同樣也可以在Css宣告的時候使用媒體查詢的特性：

<linkrel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:960px)”>
在媒體查詢這個特性出來之後，逐漸形成了一個概念叫響應式佈局（Ethan Marcotte在2010年5月份提出），其原理也是充分使用了媒體查詢，獲取訪問終端的各種型號資料，然後提供不同的Css樣式來以最佳的方式將網頁呈現在不同型別的聯網裝置上。

 

越來越多的前端框架、外掛也開始支援響應式佈局，幫助儘量少的增加人工編碼利用外掛框架自動根據媒體查詢的結果來調整樣式。其實這裡也想再次強調前端開發在設計開發網頁的時候，Html元素和Css樣式儘量隔離的重要性。

 

富客戶端API

筆者曾經使用過一段時間的WebSocket，簡潔而實用的瀏覽器與後端實時互動新的協議。建立連線之後前後端都可以通過onMessage來監聽互相發過來的訊息，這讓筆者感覺在Js中開發邏輯程式碼跟後端開發完全相同的感覺，都是onMessage分發訊息，辨別型別，交給不同的handler，處理不同的邏輯。對於前端來說不同的handler與頁面不同模組的元素打交道，對於後端來說不同handler與資料庫或者不同的業務層模組打交道，整個Web應用開發顯得更加清晰明瞭。

 

更重要的是WebSocket使得服務端向瀏覽器的主動推送變為可能，這無形中可以增加許多美好設計的可能。悲催的是筆者當初使用的時候，遇到許多瀏覽器都不支援WebSocket，最近聽說最方便的一種相容方式是在不支援WebSocket的瀏覽器上，藉助Flash套接字來實現實時通訊。可以參考web-socket.js庫：http://github.com/gimite/web-socket.js

 

在使用的時候除了引入Js檔案還需要制定一個WebSocketMain檔案路徑只想WebSocketMain.swf，這樣實時通訊即使在不支援WebSocket的瀏覽器上也可以由Flash套接字代替完成，不影響其他任何程式碼。

 

除了WebSocket，HTML5規範還設計了許多資料儲存的方式，其緣由是分擔伺服器計算資源到瀏覽器端，並且提供更好的實時體驗：

  • LocalStorage– 以key/value格式儲存，與某個域繫結，資料可跨瀏覽器會話儲存
  • SessionStorage– 以key/value格式儲存，與某個域繫結，資料在會話結束時被清楚
  • WebSQL Database – 完整的關係型資料庫，支援通過事務進行表格的CRUD
  • OfflineWeb Applications – 定義快取檔案為了方便在脫離網際網路環境下可以繼續使用Web應用

 

大概就總結到這裡了，其他HTML5特性例如Canvas、視訊、音訊等也很強大，但筆者使用和接觸得不多。等以後有機會用到再談吧。


相關文章