語法
- HTML5 不再基于 SGML( Standard Generalized Markup Language)。
- HTML5 中 DOCTYPE 聲明簡化很多。
HTML5 新增元素
結構元素
- section: 表示頁面中的一個內容區塊，比如章節、頁眉、頁腳或頁面中的其他部分；
- article: 代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。
- aside: 表示 article 內容之外，與 article 元素的內容相關的輔助信息。
- header: 表示一個內容區塊或整個頁面的標題。
- footer: 頁面或一個內容區塊的腳注。
- nav: 導航鏈接部分。
- figure: 表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。
- main: 表示頁面主要內容。
其他元素
- video: 定義視頻。
- audio: 定義音頻。
- embed: 插入各種多媒體，格式可以是 midi, wav, aiff, au, mp3 等。
- mark: 呈現高亮文字。
- time: 表示日期和時間。
- canvas: 表示圖形。該元素本身沒有行為，僅僅提供一塊畫布，把繪圖 API 展示給 JS, 以使得腳本繪制內容。
- output: 表示不同類型的輸出。
- source: 定義媒介資源。
以上元素在 HTML4 中可以用其他方式表示。
在 HTML4 中不存在，HTML5 新增的功能
- progress: 來顯示 JS 中耗費時間的函數的進程。
- ruby: 注音。
- rt: 字符的解釋或發音。
- rp: 在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。
- meter: 度量。
- wbr: 軟換行；與 br 的區別：br 必須換行；wbr 表示當瀏覽器窗口或父級元素寬度足夠時不換行。
- details: 表示用戶要求得到并可以得到的細節信息。
- detalist: 表示可選數據的列表。
- dialog: 對話框
新增 input 元素的類型
- email
- url
- number
- range
- Data Pickers
- data
- month
- week
- time
- datetime
- datetime-local
廢除的元素
能用 CSS 替代的元素
諸如 basefont, big, center, font, s, strike, tt, u 等純展示型的元素，HTML5 中將其廢除，使用 CSS 樣式表替代。
frame 框架
由于 frame 框架對網頁可用性存在負面影響，HTML5 不再支持 frame 框架，只支持 iframe 框架，或者由服務器方創建的由多個頁面組成的負面。
HTML5 廢棄了 frameset, frame, noframes 三個元素。
只有部分瀏覽器支持的元素
對于 applet, bgsound, blink, marquee 等元素，它們只有部分瀏覽器支持，所以在 HTML5 中被廢棄。
其他被廢棄的元素
- rb, 被 ruby 替代。
- acronym, 被 abbr 替代。
- dir, 被 ul 替代。
- isindex, 被 form 與 input 組合方式替代。
- listing, 被 pre 替代。
- xmp, 被 code 替代。
- nextid, 被 guids 替代。
- plaintext, 被 "text/plian" MIME 類型替代。
新增的屬性與廢棄的屬性
太多了，寫出來沒意義，需要時查就好。
全局屬性
HTML5 中新增了全局屬性的概念。
全局屬性：可以對任何元素都使用的屬性。
- contentEditable: 允許用戶編輯元素中的內容。
- designMode: 指定整個頁面是否可被編輯。只能在 JS 腳本中被修改。各個瀏覽器出于安全考慮，對 desinMode 屬性的支持情況不盡相同。
- hidden: 通知瀏覽器不渲染該元素，使該元素出于不可見的狀態。但是元素內容還是被瀏覽器創建，即允許使用 JS 腳本控制。
- spellcheck: 對輸入內容進行拼寫和檢查。
- tabindex: 當敲擊 Tab 鍵讓窗口或頁面中的控件獲得焦點。每一個 tabindex 表示該控件是第幾個被訪問到的。
新增事件
略
只監聽一次事件
HTML5 中元素對象的 addEventListener 方法增加了第三個參數屬性 once, 用來讓事件監聽器只監聽一次。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>讓事件只監聽一次</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div>
<input type="button" id='button' value="click me">
</div>
<script>
document.getElementById("button").addEventListener('click', function(){
alert('the first time click');
}, { once:true});
</script>
</body>
</html>
// 上述 button 按鈕只有在第一次點擊時起作用。
|
