HTML5

本文內容參考於“HTML5｜W3scool”教程

簡介

是最新的 HTML 標準，擁有新的語義、圖形以及多媒體元素

提供了新的 API 簡化了 web 應用程式的搭建

是跨平臺的，被設計為在不同型別的硬體（PC、平板、手機、電視機等等）之上執行

例項

申明HTML5文件型別

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title of the document</title>

</head>

<body>

Content of the document......

</body>

</html>

新特性

  1. 語義元素
<header>

<footer>

<article>

<section>
  1. 表單控制元件

數字、數字、日期、時間、日曆和滑塊

  1. 影象支援
<canvas>

<svg>

詳細內容建議檢視“HTML5 Canvas｜W3scool”

  1. 多媒體支援
<video>

<audio>
  1. API
本地儲存

sessionStorage約5M，短期儲存- 關閉瀏覽器視窗自動清除

localStorage約20M，永久儲存- 需手動刪除

// 只能儲存字串，可以將物件 JSON.stringify() 編碼後儲存

// [api] 指代可選 sessionStorage/localStorage

window.[api].getItem(key)

window.[api].setItem(key, value)

window.[api].removeItem(key)

window.[api].clear()
高頻考點：storage和cookie的區別？

儲存位置不同：cookie資料始終在同源的http請求中攜帶，即cookie在瀏覽器和伺服器間來回傳遞，sessionStorage和localStorage僅在本地儲存。

儲存容量不同：cookie資料不能超過4k，而sessionStorage和localStorage可以達到5M或更大。

資料有效期不同：sessionStorage：僅在當前瀏覽器視窗關閉前有效；localStorage：永久有效；cookie：過期時間內有效。

作用域不同：sessionStorage不能在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage、cookie支援在所有同源視窗中共享。

未完待續...