一、什么是HTML5
HTML5 是 HTML 標準的最新演進版本。 這個術(shù)語代表了兩個不同的概念:
它是一個新的 HTML 語言版本包含了新的元素,屬性和行為,同時包含了一系列可以被用來讓 Web 站點和應(yīng)用更加多樣化,功能更強大的技術(shù)。 這套技術(shù)往往被稱作 HTML5 和它的朋友們,通常簡稱為 HTML5。
從要對全部所有的 Web 開發(fā)人員有用這一點出發(fā),這個參考頁面鏈接了有關(guān) HTML5 技術(shù)的大量資源,并且基于它們各自的功能,把它們歸類成了若干組。
語義:能夠讓你更恰當?shù)孛枋瞿愕膬?nèi)容是什么。
連通性:能夠讓你和服務(wù)器之間通過創(chuàng)新的新技術(shù)方法進行通信。
離線 & 存儲:能夠讓網(wǎng)頁在客戶端本地存儲數(shù)據(jù)以及更高效地離線運行。
多媒體:使 video 和 audio 成為了在所有 Web 中的一等公民。
2D/3D 繪圖 & 效果:提供了一個更加分化范圍的呈現(xiàn)選擇。
性能 & 集成:提供了非常顯著的性能優(yōu)化和更有效的計算機硬件使用。
設(shè)備訪問 Device Access:能夠處理各種輸入和輸出設(shè)備。
樣式設(shè)計: 讓作者們來創(chuàng)作更加復(fù)雜的主題吧!
二、HTML5新增標簽
腳本:
<template> 通過JavaScript在運行時實例化內(nèi)容的容器
章節(jié):
<section> 定義文檔中的一個章節(jié),一般來說會有包含一個 heading
<nav>定義一個含有多個超鏈接的區(qū)域,這個區(qū)域包含轉(zhuǎn)到其他頁面,或者頁面內(nèi)部其他部分的鏈接列表
<article> 表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu),其意在成為可獨立分配的或可復(fù)用的結(jié)構(gòu)
<aside> 定義和頁面內(nèi)容聯(lián)度較低的內(nèi)容--如果被刪除,剩下的內(nèi)容仍然很合理
<header> 定義頁面或章節(jié)的頭部。它經(jīng)常包含logo、頁面標題和導(dǎo)航性的目錄
<footer> 定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址
<main> 定義文檔中主要或重要的獨一無二的內(nèi)容。一個文檔中不能出現(xiàn)一個以上的<main>標簽
組織內(nèi)容:
<figure> 代表一個和文檔有關(guān)的圖例
<figcaption> 代表一個圖例的說明
文字形式:
<data> 將一個指定內(nèi)容和機器可讀的翻譯聯(lián)系在一起。但如果內(nèi)容是與time和date相關(guān)的,一定要使用<time>
<time> 代表日期和時間值;機器可讀的等價形式通過datetime屬性指定
<mark> 代表一段需要被高亮的引用文字,用來表示上下文的關(guān)聯(lián)性
<ruby> 表示被ruby注釋標記的文本,如中文漢字和它的拼音
<rt> 代表ruby注釋,如中文拼音
<rp> 代表ruby注釋兩邊的額外插入文本,用于在不支持ruby注釋顯示的瀏覽器中提供友好的注釋顯示
<bdi> 代表需要脫離父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本
<wbr> 代表建議換行,當文本太長需要換行時將會在此處添加換行符
嵌入內(nèi)容:
<embed> 代表一個嵌入的外部資源,如應(yīng)用程序或交互內(nèi)容,換句話說,就是一個插件。如<embed type="video/quicktime" src="movie.mov" width="640" height="480">
<video> 代表一段視頻及其視頻文件和字幕,并提供了播放視頻的用戶界面
<audio> 代表一段聲音或音頻流。 <audio> 元素可以包含多個音頻資源, 這些音頻資源可以使用 src 屬性或者<source> 元素來進行描述
<source> 為<video>或<audio>這類媒體元素指定媒體源
<track> 為<video>或<audio>這類媒體元素指定文本軌道(字幕)
<canvas> 代表位圖區(qū)域,可以通過腳本在它上面實時呈現(xiàn)圖形,如圖表、游戲繪圖等
<svg> 定義一個嵌入式矢量圖
<math> 定義一段數(shù)學(xué)公式
表單:
<datalist> 代表提供給其他控件的一組預(yù)定義選項
<keygen> 代表一個密鑰對生成器控件
<output> 代表計算值
<meter> 代表滑動條
<progress> 代表進度條,用來顯示一項任務(wù)的完成進度
交互元素:
<details> 代表一個用戶可以(點擊)獲取額外信息或控件的小部件。與summary配合使用
<summary> 代表 <details> 元素的綜述或標題
<menuitem> 代表一個用戶可以點擊的菜單項
<menu> 代表菜單,呈現(xiàn)了一組用戶可執(zhí)行或激活的命令。這既包含了可能出現(xiàn)在屏幕頂端的列表菜單,也包含了那些隱藏在按鈕之下、當點擊按鈕后顯示出來的文本菜單。