前端攻城獅HTML5自查手冊

時間 2019-12-07

標籤前端攻城 html5 html 自查手冊欄目 HTML5 简体版

原文原文鏈接

前言

HTML5自2014年發佈以來，已經有快5個年頭了。可是不少人對H5有哪些新特性，兼容性如何仍然是一頭霧水的。爲了讓本身之後方便查閱，本文整理一下H5的相關知識點，不作深刻的探討，錯誤之處還請指正！css

HTML5標籤上的改動

HTML 5 參考手冊html

廢棄或不支持的標籤

<acronym>

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

<applet>

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

<basefont>

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

<big>

用來製做更大的文本。HTML5 不支持 <big> 標籤。請用 CSS 代替。github

<center>

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

<dir>

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

<font>

規定文本的字體、字體尺寸、字體顏色。在 HTML 4.01 中，<font> 元素已廢棄。正則表達式

<frame>

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

<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種文件格式：MP三、Wav、Ogg。

<video>

定義視頻，好比電影片斷或其餘視頻流。支持三種視頻格式：MP四、WebM、Ogg。

<track>

爲媒體元素（好比 <audio> and <video>）規定外部文本軌道。IE 十、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

規定是否容許用戶編輯內容。可用於製做富文本等功能。兼容性較好，見下圖。

contextmenu

規定了元素的上下文菜單。當用戶右擊元素時將顯示上下文菜單。contextmenu 屬性的值是須要打開的<menu>元素的 id。兼容性很差，目前只有 Firefox 瀏覽器支持 contextmenu 屬性。

data-*

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

兼容性見下圖，IE6~8也支持data-*，可是不能經過dataset訪問，必須用getAttribute訪問。

draggable

規定元素是否可拖動。連接和圖像默認是可拖動的。

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

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

簡單demo能夠參考HTML5拖放教程。

hidden

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

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	定義用於輸入數字的字段。在各個瀏覽器上有一些差別
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文件的兼容性最好。
video	定義視頻。對MP4文件的兼容性最好。