HTML5 - 面試題

HTML5 是 HTML 標準的下一個主要修訂版本，取代了 HTML 4.01、XHTML 1.0 和 XHTML 1.1。HTML5 是用於在全球資訊網上構建和呈現內容的標準。

HTML5 引入了一些新的元素和屬性，有助於構建現代網站。以下是 HTML5 中引入的一些重要特性：

• 新的語義元素 - 例如 <header>、<footer> 和 <section>。

• 表單 2.0 - 對 HTML 網頁表單的改進，其中為 <input> 標籤引入了新的屬性。

• 持久本地儲存 - 無需藉助第三方外掛即可實現。

• WebSocket - 一種用於 Web 應用程式的下一代雙向通訊技術。

• 伺服器傳送事件 - HTML5 引入了從 Web 伺服器流向 Web 瀏覽器的事件，稱為伺服器傳送事件 (SSE)。

• Canvas - 支援可以使用 JavaScript 程式設計的二維繪圖表面。

• 音訊和影片 - 您可以在網頁上嵌入音訊或影片，無需藉助第三方外掛。

• 地理位置 - 現在訪問者可以選擇與您的 Web 應用程式共享其物理位置。

• 微資料 - 允許您建立超出 HTML5 的詞彙表，並使用自定義語義擴充套件您的網頁。

• 拖放 - 將專案從一個位置拖放到同一網頁上的另一個位置。

最新版本的 Apple Safari、Google Chrome、Mozilla Firefox 和 Opera 都支援許多 HTML5 功能，Internet Explorer 9.0 也將支援一些 HTML5 功能。

預裝在 iPhone、iPad 和 Android 手機上的移動 Web 瀏覽器都對 HTML5 提供了良好的支援。

是的！HTML5 儘可能地設計為向後相容現有 Web 瀏覽器。新功能建立在現有功能之上，並允許您為舊版瀏覽器提供後備內容。

建議使用幾行 JavaScript 檢測對各個 HTML5 功能的支援。

不！

此標籤表示通用文件或應用程式部分。它可以與 h1-h6 一起使用以指示文件結構。

此標籤表示文件的獨立內容部分，例如部落格文章或報紙文章。

此標籤表示與頁面其餘部分略微相關的部分內容。

此標籤表示部分的頁首。

此標籤表示部分的頁尾，可以包含有關作者、版權資訊等的資訊。

此標籤表示文件中用於導航的部分。

此標籤可用於標記對話。

此標籤可用於將標題與某些嵌入式內容（例如圖形或影片）關聯起來。

自定義資料屬性以 data- 開頭，其名稱將根據您的需求而定。以下是一個簡單的示例：

<div class="example" data-subject="physics" data-level="complex">
   ...
</div>

以上將是完全有效的 HTML5，其中包含兩個名為 data-subject 和 data-level 的自定義屬性。您可以像獲取標準屬性一樣，使用 JavaScript API 或 CSS 獲取這些屬性的值。

Web 表單 2.0 是對 HTML4 中的表單功能的擴充套件。HTML5 中的表單元素和屬性提供了比 HTML4 更高的語義標記程度，並消除了 HTML4 中所需的許多繁瑣的指令碼編寫和樣式設定。

它表示根據 ISO 8601 編碼的日期和時間（年、月、日、時、分、秒、秒的小數部分），時區設定為 UTC。

它表示根據 ISO 8601 編碼的日期和時間（年、月、日、時、分、秒、秒的小數部分），沒有時區資訊。

它表示根據 ISO 8601 編碼的日期（年、月、日）。

它表示由根據 ISO 8601 編碼的年份和月份組成的日期。

它表示由根據 ISO 8601 編碼的年份和週數組成的日期。

它表示根據 ISO 8601 編碼的時間（時、分、秒、秒的小數部分）。

此控制元件僅接受數值。step 屬性指定精度，預設為 1。

range 型別用於應包含一定範圍數字值的輸入欄位。

這僅接受電子郵件值。此型別用於應包含電子郵件地址的輸入欄位。如果您嘗試提交簡單的文字，它會強制您以 email@example.com 的格式輸入電子郵件地址。

這僅接受 URL 值。此型別用於應包含 URL 地址的輸入欄位。如果您嘗試提交簡單的文字，它會強制您以 http://www.example.com 格式或 http://example.com 格式輸入 URL 地址。

HTML5 引入了一個新的元素 <output>，用於表示不同型別的輸出結果，例如指令碼編寫的輸出。

HTML5 引入了一個名為 placeholder 的新屬性。<input> 和 <textarea> 元素上的此屬性為使用者提供了有關可以在欄位中輸入什麼的提示。佔位符文字不得包含回車符或換行符。

這是一個簡單的單步模式，可以在文件載入時使用 JavaScript 輕鬆程式設計，自動聚焦特定表單欄位。

HTML5 引入了一個名為 required 的新屬性，它要求輸入控制元件必須有值。

是的！HTML5 允許使用 <svg>...</svg> 標籤直接嵌入 SVG。

是的！HTML5 的 HTML 語法允許在文件中使用 <math>...</math> 標籤使用 MathML 元素。

cookie 具有以下缺點：

• cookie 包含在每個 HTTP 請求中，從而透過傳輸相同的資料來減慢 Web 應用程式的速度。

• cookie 包含在每個 HTTP 請求中，從而透過網際網路傳送未加密的資料。

• cookie 的資料量限制約為 4 KB。不足以儲存所需資料。

HTML5 引入了 sessionStorage 屬性，網站可以使用它將資料新增到會話儲存中，並且該視窗（即會話）中開啟的同一網站的任何頁面都可以訪問它，並且一旦關閉視窗，會話就會丟失。

HTML5 引入了 localStorage 屬性，它可用於訪問頁面的本地儲存區域，沒有時間限制，並且無論何時使用該頁面，此本地儲存都可用。

會話終止後，瀏覽器會立即刪除會話儲存資料。

本地儲存資料沒有時間限制。要清除本地儲存設定，需要呼叫 `localStorage.remove('key')`；其中 'key' 是要刪除的值的鍵。如果要清除所有設定，需要呼叫 `localStorage.clear()` 方法。

HTML5 以及 WHATWG Web Applications 1.0 引入了從 Web 伺服器流向 Web 瀏覽器的事件，它們被稱為伺服器傳送事件 (SSE)。使用 SSE，您可以將 DOM 事件持續地從 Web 伺服器推送到訪問者的瀏覽器。

事件流方法開啟與伺服器的持久連線，在有新資訊可用時將資料傳送到客戶端，無需持續輪詢。

伺服器傳送事件標準化了我們如何將資料從伺服器流式傳輸到客戶端。

要在 Web 應用程式中使用伺服器傳送事件，需要向文件中新增一個 `` 元素。

`` 元素的 src 屬性應指向一個 URL，該 URL 應提供一個永續性 HTTP 連線，該連線傳送包含事件的資料流。

該 URL 將指向一個 PHP、PERL 或任何 Python 指令碼，這些指令碼將負責持續傳送事件資料。

伺服器端指令碼應傳送 Content-type 頭，指定型別為 text/event-stream，如下所示：

print "Content-Type: text/event-stream\n\n";

設定 Content-Type 後，伺服器端指令碼將傳送一個 Event - 標籤，後跟事件名稱。以下示例將傳送 Server-Time 作為事件名稱，以換行符結尾。

print "Event: server-time\n";

最後一步是使用 Data - 標籤傳送事件資料，後跟整數或字串值，以換行符結尾，如下所示：

$time = localtime();
print "Data: $time\n";

WebSockets 是一種用於 Web 應用程式的下一代雙向通訊技術，它透過單個套接字執行，並透過 HTML 5 相容瀏覽器中的 JavaScript 介面公開。

一旦您與 Web 伺服器建立了 Web Socket 連線，您可以透過呼叫 send() 方法將資料從瀏覽器傳送到伺服器，並透過 onmessage 事件處理程式接收從伺服器到瀏覽器的資料。

以下是建立新的 WebSocket 物件的 API。

這裡第一個引數 url 指定要連線到的 URL。第二個屬性 protocol 是可選的，如果存在，則指定伺服器必須支援才能成功連線的子協議。

只讀屬性 readyState 表示連線的狀態。它可以具有以下值：

• 值為 0 表示連線尚未建立。

• 值為 1 表示連線已建立並且可以進行通訊。

• 值為 2 表示連線正在進行關閉握手。

• 值為 3 表示連線已關閉或無法開啟。

只讀屬性 bufferedAmount 表示使用 send() 方法排隊的 UTF-8 文字的位元組數。

HTML5 元素 `` 提供了一種簡單而強大的方法，可以使用 JavaScript 繪製圖形。它可以用來繪製圖表、製作照片合成或進行簡單的（和不那麼簡單的）動畫。

HTML5 支援 `

您可以使用 `` 標籤來指定媒體以及媒體型別和許多其他屬性。一個音訊元素允許多個 source 元素，瀏覽器將使用第一個識別的格式。

HTML5 支援 `

• Ogg - 使用 Thedora 影片編解碼器和 Vorbis 音訊編解碼器的 Ogg 檔案。

• mpeg4 - 使用 H.264 影片編解碼器和 AAC 音訊編解碼器的 MPEG4 檔案。

您可以使用 `` 標籤來指定媒體以及媒體型別和許多其他屬性。一個音訊元素允許多個 source 元素，瀏覽器將使用第一個識別的格式。

HTML5 地理位置 API 允許您與您最喜歡的網站共享您的位置。Javascript 可以捕獲您的經緯度，並可以傳送到後端 Web 伺服器，並執行諸如查詢本地企業或在地圖上顯示您的位置之類的精細位置感知操作。

如今，大多數瀏覽器和移動裝置都支援地理位置 API。地理位置 API 與全域性 navigator 物件的新屬性（即 Geolocation 物件）一起工作，可以按如下方式建立：

geolocation 物件是一個服務物件，允許小部件檢索有關裝置地理位置的資訊。

此方法檢索使用者的當前地理位置。

此方法定期檢索有關裝置當前地理位置的更新。

此方法取消正在進行的 watchPosition 呼叫。

Web Workers 執行所有計算密集型任務，而不會中斷使用者介面，通常在單獨的執行緒上執行。

Web Workers 允許長時間執行的指令碼不會被響應點選或其他使用者互動的指令碼中斷，並允許執行長時間任務而不會產生影響以保持頁面響應。