前端攻城獅HTML5自查手冊

Tusi發表於2019-04-11
前端HTML

前言

HTML5自2014年釋出以來，已經有快5個年頭了。但是很多人對H5有哪些新特性，相容性如何仍然是一頭霧水的。為了讓自己以後方便查閱，本文整理一下H5的相關知識點，不做深入的探討，錯誤之處還請指正！

HTML5標籤上的改動

HTML 5 參考手冊

廢棄或不支援的標籤

  • <acronym>

定義首字母縮略詞。HTML5 不支援 <acronym> 標籤。請使用 <abbr> 標籤代替它。

  • <applet>

可以嵌入Java語言編寫的小應用程式。HTML5 不支援 <applet> 標籤。請使用 <object> 標籤代替它。在 HTML 4.01 中，<applet> 元素 已廢棄。

  • <basefont>

只有 IE 9 和更早版本的 IE 瀏覽器支援 <basefont> 標籤。應該避免使用該標籤。在 HTML 4.01 中，<basefont> 元素 已廢棄。

  • <big>

用來製作更大的文字。HTML5 不支援 <big> 標籤。請用 CSS 代替。

  • <center>

對其所包括的文字進行水平居中。在 HTML 4.01 中，<center> 元素 已廢棄

  • <dir>

被用來定義目錄列表，類似ul，ol。在 HTML 4.01 中，<dir> 元素 已廢棄。

  • <font>

規定文字的字型、字型尺寸、字型顏色。在 HTML 4.01 中，<font> 元素 已廢棄。

  • <frame>

定義 中的子視窗（框架），必須放在<frameset>標籤中，且不能與<body>共存。HTML5 不支援 <frame> 標籤。

  • <frameset>

定義一個框架集，被用來組織一個或者多個<frame>元素。每個<frame>有各自獨立的文件。HTML5 不支援<frameset>標籤。

  • <isindex>

使瀏覽器顯示一個對話方塊，提示使用者輸入單行文字，該特性已經從 Web 標準中刪除。

  • <noframes>

可為那些不支援框架的瀏覽器顯示文字。HTML5 不支援 <noframes>標籤。

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
  <noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>
複製程式碼
  • <strike>

定義加刪除線文字。在 HTML 4.01 中，<strike> 元素 已廢棄。HTML5 不支援 <strike> 標籤。請用 <del> 標籤代替。

  • <tt>

定義打字機文字。HTML5 不支援<tt>標籤。請用 CSS 代替。

新增的標籤

IE 9+、Firefox、Opera、Chrome 和 Safari 都支援新增的大部分 H5 標籤。

結構標籤

  • <main>

規定文件的主要內容。在一個文件中，不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代：<article>、<aside>、<footer>、<header> 或 <nav>。所有瀏覽器都支援<main>標籤，除了 Internet Explorer。

  • <article>

定義獨立的內容，內容本身必須是有意義的且必須是獨立於文件的其餘部分。比如：論壇帖子，部落格文章，新聞故事，評論。

  • <aside>

常用作側邊欄。

  • <section>

定義了文件的某個區域。比如章節、頭部、底部或者文件的其他區域。

  • <header>

定義文件或者文件的一部分割槽域的頁首。

  • <hgroup>

被用來對標題元素進行分組。

  • <footer>

定義文件或者文件的一部分割槽域的頁尾。

  • <nav>

定義導航連結的部分。

媒體標籤

  • <audio>

定義聲音，比如音樂或其他音訊流。支援的3種檔案格式：MP3、Wav、Ogg。

  • <video>

定義視訊，比如電影片段或其他視訊流。支援三種視訊格式：MP4、WebM、Ogg。

  • <track>

為媒體元素（比如 <audio> and <video>）規定外部文字軌道。IE 10、Opera 和 Chrome 瀏覽器支援 <track> 標籤，其他瀏覽器不支援。

  • <source>

為媒體元素（比如 <audio> and <video>）定義媒體資源。

其他標籤

  • <canvas>

畫布，可以繪製豐富的圖形，賦予了html更多想象的空間。

  • <datalist>

配合<option>標籤製作下拉選單，與<select>不同的一點是，<datalist>支援輸入，模糊匹配。

  • <details>

類似於摺疊皮膚的一個控制元件，規定了使用者可見的或者隱藏的需求的補充細節。<summary>標籤可以為 <details> 定義標題。標題是可見的，使用者點選標題時，會顯示出 <details>。目前，只有 Chrome 和 Safari 6 支援 <details> 標籤。

  • <summary>

與<details>標籤配合使用。只有 Chrome 和 Safari 6 支援 <summary> 標籤。

  • <embed>

定義了一個容器，用來嵌入外部應用或者互動程式（外掛），例如flash等。

  • <figure>

規定獨立的流內容（影象、圖表、照片、程式碼等等）。

  • <figcaption>

<figcaption>元素被用來為<figure>元素定義標題。

  • <mark>

定義帶有記號的文字。請在需要突出顯示文字時使用<mark> 標籤。

  • <meter>

定義度量衡。僅用於已知最大和最小值的度量。不能作為一個進度條來使用。Firefox、Opera、Chrome 和 Safari 6 支援 <meter> 標籤。IE不支援該標籤。

  • <progress>

定義執行中的任務進度（程式）。有value和max屬性。

  • <output>

作為計算結果輸出顯示(比如執行指令碼的輸出)。配合兩個<input>使用，可實時求和。Internet Explorer 瀏覽器不支援 <output> 標籤。

  • <ruby>

定義 ruby 註釋（中文注音或字元）。

  • <rp>

在 ruby 註釋中使用，以定義不支援 ruby 元素的瀏覽器所顯示的內容。

  • <rt>

定義字元（中文注音或字元）的解釋或發音。

  • <time>

定義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的。用datetime屬性對標籤中的文字作時間解釋。

  • <bdi>

允許您設定一段文字，使其脫離其父元素的文字方向設定。具體應用不詳。

讓IE8及以下版本也支援H5新標籤

我們經常會用到<main>、<article>、<aside>、<footer>、<header> 、<nav>來進行頁面佈局，那麼如何解決IE8及以下版本支援這些標籤呢？只要利用createElement讓瀏覽器識別這些標籤，並在css中給他們設定一些屬性即可，比如display:block。現成的解決方案就是htmlshiv.js。

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
複製程式碼

如果有列印需求，則需要html5shiv-printshiv.js，它包含 html5shiv.js 的全部功能，並且額外支援 IE6-8 網頁列印時 HTML5 元素樣式化。

HTML5屬性上的改動

新增的屬性

IE 9+、Firefox、Opera、Chrome 和 Safari 都支援新增的大部分 H5 屬性，特殊情況會在每一項處有說明。

HTML5標準屬性

  • contenteditable

規定是否允許使用者編輯內容。可用於製作富文字等功能。相容性較好，見下圖。

contenteditable相容性良好

  • contextmenu

規定了元素的上下文選單。當使用者右擊元素時將顯示上下文選單。contextmenu 屬性的值是需要開啟的<menu>元素的 id。相容性不好，目前只有 Firefox 瀏覽器支援 contextmenu 屬性。

  • data-*

管理自定義屬性。自定義屬性可通過元素的dataset進行訪問。如ele.dataset.customAttr。

相容性見下圖，IE6~8也支援data-*，但是不能通過dataset訪問，必須用getAttribute訪問。

h5自定義屬性相容性

  • draggable

規定元素是否可拖動。連結和影象預設是可拖動的。

<element draggable="true|false|auto">
複製程式碼

主要關注的內容有屬性draggable，事件ondragstart，事件ondragover，事件ondrop，資料屬性dataTransfer，以及dataTransfer下的兩個方法setData和getData。

簡單demo可以參考HTML5拖放教程。

  • hidden

hidden 屬性規定對元素進行隱藏。IE相容性不太好，避免使用，用css替代即可。

hidden屬性相容性

  • spellcheck

規定是否對元素內容進行拼寫檢查。啟用後會對單詞進行拼寫檢查，不正確的單詞會有波浪線提示。 Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 瀏覽器支援 spellcheck 屬性。

<element spellcheck="true|false">
複製程式碼

更豐富的表單

input支援更多type

HTML5 中的新型別：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。其實也是一種語義化的表現。

值 描述
color 定義拾色器。相容性很差，對IE，Edge，Safari等瀏覽器不友好，詳細情況見相容性
date 定義 date 控制元件（包括年、月、日，不包括時間）。相容性很差。
datetime 定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）。相容性很差。
datetime-local 定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。相容性很差。
month 定義 month 和 year 控制元件（不帶時區）。相容性很差。
week 定義 week 和 year 控制元件（不帶時區）。相容性很差。
time 定義用於輸入時間的控制元件（不帶時區）。相容性很差。
email 定義用於 e-mail 地址的欄位。會對郵箱進行格式檢查。支援IE10以上，詳細情況見相容性
number 定義用於輸入數字的欄位。在各個瀏覽器上有一些差異
number相容性
range 定義滑塊。支援IE10以上，詳細情況見相容性
search 定義用於輸入搜尋字串的文字欄位。支援IE10以上，但是在UI表現上與text沒有差別。檢視詳情
tel 定義用於輸入電話號碼的欄位。支援IE10以上，詳細情況見相容性
url 定義用於輸入 URL 的欄位。會對url進行格式檢查。支援IE10以上，詳細情況見相容性

其他表單控制元件屬性

屬性 描述
placeholder 可描述輸入欄位預期值的簡短的提示資訊，支援IE10以上，適用於下面的 input 型別：text、search、url、tel、email 和 password。
autofocus 頁面載入時自動獲得焦點，支援IE10以上。
multiple 規定允許使用者輸入到 input 元素的多個值。適用於以下 input 型別：email 和 file。常見於上傳檔案時選擇多個檔案。
form 規定 input 元素所屬的一個或多個表單的 id 列表，以空格分隔。可以實現將 input 放在 form 標籤外部。但是不支援IE。
required 規定必需在提交表單之前填寫輸入欄位，支援IE10以上。
maxlength 規定 input 元素中允許的最大字元數，適用於text型別。
minlength 規定 input 元素中允許的最小字元數，適用於text型別。
max 規定 input 元素的最大值，max 和 min 屬性適用於以下 input 型別：number、range、date、datetime、datetime-local、month、time 和 week。支援IE10以上，不支援firefox，其中IE10不支援max用於date 和 time型別。
min 規定 input 元素的最小值。
pattern 規定 input 元素的正規表示式校驗。適用於下面的 input 型別：text、search、url、tel、email 和 password。應該配合 title 屬性提示使用者。

HTML5其他新特性

支援IE9+

音視訊

標籤 描述
source 為媒體元素（比如 video 和 audio）定義媒體資源。主要定義其 src 屬性和 type 屬性，src 規定媒體檔案的 URL，type 規定媒體資源的 MIME 型別。
audio 定義音訊。對mp3檔案的相容性最好。
audio媒體支援
video 定義視訊。對MP4檔案的相容性最好。
video媒體支援

畫布canvas

可以說是前端高階部分了，這裡一言難盡，慢慢學習吧。支援IE9+。與之相關的svg也是支援IE9+。

Web儲存

主要包括sessionStorage和localStorage，操作的API都類似，區別是sessionStorage是會話級儲存，localStorage是持久化儲存。相容性挺好，支援IE8+。

地理定位geolocation

navigator下的一個屬性，鑑於該特性可能侵犯使用者的隱私，除非使用者同意，否則使用者位置資訊是不可用的。支援IE9+。

HTML5 Application Cache

實現網頁離線訪問的利器。支援IE10+。相關的最新技術還有PWA等。

Web Worker

讓js也能做多執行緒的事情，相關內容可以參考Web Worker 使用教程。MDN上也有比較詳細的解釋。

HTML 5 伺服器傳送事件 EventSource

EventSource 介面用於接收伺服器傳送的事件。它通過HTTP連線到一個伺服器，以text/event-stream 格式接收事件, 不關閉連線(即長連線)。相容性不是很好，IE和Edge直接廢了。不過有一個相容方案 event-source-polyfill。

HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。對IE10+能較好相容，對於不相容的瀏覽器，也有很多優雅降級方案，一般是降級成ajax輪詢等，像socket.io。

通知介面Notification

Notifications API 的通知介面用於向使用者顯示桌面通知。檢視具體用法。相容性不是很好，但是用起來網站的逼格高不少，如果是IE就直接放棄吧。

相關文章