35道HTML高頻題整理(附答案背誦版)

1、簡述 HTML5 新特性？

HTML5 是 HTML 的最新版本，它引入了很多新的特性和元素，以提供更豐富的網頁內容和更好的用戶體驗。以下是一些主要的新特性：

語義元素：HTML5 引入了新的語義元素，像 <article>, <section>, <nav>, <header>, <footer>, <aside>等。這些元素可以幫助更好地描述網頁的結構和內容。

例如，<nav> 元素可以用於包含頁面的主導航鏈接，而 <footer> 元素可以用於包含頁面的底部信息，如作者信息、版權信息等。
圖形和多媒體元素：HTML5 引入了 <canvas> 元素用於在網頁上繪製圖形，以及 <audio> 和 <video> 元素用於在網頁上嵌入音頻和視頻內容。

例如，<video> 元素可以用於在網頁上嵌入一個視頻播放器，而 <canvas> 元素可以用於在網頁上繪製動態圖形，如遊戲圖像。
表單控件：HTML5 增加了新的表單控件，如日期和時間選擇，電子郵件和網址輸入等，這使得網頁表單的創建變得更加方便。

例如，<input type="date"> 元素可以用於在表單中創建一個日期選擇器。
Web 存儲：HTML5 引入了本地存儲（localStorage）和會話存儲（sessionStorage），用於在用戶的瀏覽器上存儲數據。

例如，localStorage 可以用於在用戶關閉瀏覽器後仍然保持用戶的登錄狀態或購物車信息。
地理位置：HTML5 的地理位置 API 允許網站獲取用戶的地理位置信息。

例如，一些天氣網站可以使用地理位置 API 來自動顯示用戶當前位置的天氣。
WebSocket：HTML5 的 WebSocket API 提供了在網頁和服務器之間建立實時通信的能力。

例如，聊天應用或實時數據更新的應用可以使用 WebSocket 來實現。

以上只是 HTML5 的一部分新特性，還有更多的新特性等待開發者去發現和利用。

2、HTML5 爲什麼只需要寫 !DOCTYPE HTML？

在 HTML4 和 XHTML 中，我們需要寫出完整的 DOCTYPE，包括 DTD（文檔類型定義）的 URL，這是因爲這些版本的 HTML 與 SGML（標準通用標記語言）有關聯，需要引用 DTD 來解析文檔。例如，HTML 4.01 嚴格模式的 DOCTYPE 會是這樣：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

然而，HTML5 不再基於 SGML，因此不需要引用 DTD，所以 DOCTYPE 的聲明變得簡單了，只需要寫 <!DOCTYPE html>。這告訴瀏覽器該文檔是 HTML5 文檔，應該使用 HTML5 的規則來解析。

這種簡化的 DOCTYPE 同時也有助於提升網頁的兼容性，因爲所有現代瀏覽器都能正確地理解 <!DOCTYPE html>，並以標準模式渲染網頁，而不是怪異模式。

3、HTML5 有哪些新特性、移除了那些元素？

HTML5 引入了許多新的特性和元素，同時也移除了一些過時或不常用的元素。這些變化主要是爲了提高 HTML 的語義性，以及增強用戶體驗和交互性。

HTML5 的新特性和元素主要包括：

語義元素：如 <article>, <section>, <nav>, <header>, <footer>, <figure>, <figcaption>, <aside> 等。
表單元素和屬性：如新的輸入類型 <input type="email">, <input type="tel">, <input type="number">, <input type="range"> 等，以及 form 屬性如 placeholder, required, autocomplete, autofocus 等。
多媒體元素：<audio> 和 <video> 用於嵌入音頻和視頻。
圖形元素：<canvas> 用於在頁面上繪製圖形。
新的 API：如地理位置（Geolocation）、本地存儲（LocalStorage 和 SessionStorage）、應用緩存（Application Cache）、Web Workers、WebSocket 等。

HTML5 移除的元素主要包括：

純表現性元素：如 <font>, <center>, <big>, <small>, <strike>, <tt> 等。這些元素的功能可以通過 CSS 來實現，因此被移除。
過時的元素：如 <frame>, <frameset>, <noframes>。這些元素用於創建框架頁面，但現在已經被 CSS 的佈局功能取代。
冗餘的元素：如 <acronym>。這個元素的功能已經被 <abbr> 元素覆蓋。

以上只是部分變化，還有更多的新特性和移除的元素。這些變化都是爲了讓 HTML 更加語義化，更加適應現代的網頁設計和開發需求。

4、如果把HTML5看做一個開放的平臺，那麼它構建的模塊有哪些？

如果我們將 HTML5 視爲一個開放的平臺，那麼它主要由以下幾個模塊組成：

語義化標籤：HTML5 引入了許多新的語義化標籤，如 <nav>、<article>、<section>、<header>、<footer> 等，這些標籤幫助開發者更好地組織和理解網頁結構。
多媒體支持：HTML5 提供了 <audio> 和 <video> 標籤，使得在網頁中嵌入音頻和視頻變得更加簡單。同時，HTML5 還提供了對於字幕、章節、音軌等更加豐富的支持。
圖形和動畫：HTML5 引入了 <canvas> 標籤，它是一個強大的圖形容器，可以用於繪製圖形、製作動畫，甚至開發遊戲。此外，HTML5 還支持 SVG 和 WebGL。
離線和存儲：HTML5 提供了本地存儲（localStorage）和會話存儲（sessionStorage），這使得網頁可以在瀏覽器端存儲用戶信息。此外，HTML5 的應用緩存（Application Cache）技術可以使得網頁在離線時仍然可用。
設備訪問：HTML5 提供了一系列 API，使得網頁可以訪問設備的功能，如地理位置（Geolocation API）、設備方向（Orientation API）、攝像頭和麥克風訪問（getUserMedia API）等。
連接：HTML5 提供了 WebSocket API，使得瀏覽器和服務器可以進行全雙工通信。此外，HTML5 還支持 Server-Sent Events，服務器可以主動向客戶端發送更新。
性能和集成：HTML5 提供了 Web Workers 技術，使得網頁可以在後臺線程中運行任務，不會阻塞用戶界面。此外，HTML5 還提供了對於拖放（Drag and Drop API）的原生支持。
CSS3：雖然不是 HTML5 的一部分，但 CSS3 是與 HTML5 同時發展的，它提供了對於顏色、字體、佈局、動畫等更加豐富的控制。
JavaScript：HTML5 平臺的核心部分，用於實現網頁的交互功能。

以上模塊共同構建了 HTML5 這個強大的開放平臺，使得開發者可以創建更加豐富、交互式的網頁和 Web 應用。

5、簡述HTML5的離線儲存？

HTML5的離線存儲主要指的是兩種技術：Web Storage（包括 LocalStorage 和 SessionStorage）和 Application Cache。

Web Storage：Web Storage 提供了兩種在客戶端存儲數據的方式。
- LocalStorage：數據存儲在瀏覽器的本地，沒有過期時間，即使關閉瀏覽器或電腦，數據也會一直存在，除非用戶主動刪除或者通過代碼進行刪除。這可以用來存儲一些持久的數據，比如用戶的個性化設置等。
- SessionStorage：數據存儲在瀏覽器的會話中，當會話結束（比如關閉瀏覽器或者關閉瀏覽器的某個標籤頁）時，數據會被清除。這可以用來存儲一些臨時的數據，比如用戶在一個網頁表單中填寫的信息。
這兩種方式都提供了5-10MB的存儲空間（具體取決於瀏覽器），並且提供了一些簡單的 API 來存儲和讀取數據。
Application Cache：Application Cache（應用緩存）是一種可以讓網頁在沒有網絡連接的情況下也能訪問的技術。通過在網頁的頭部添加一個 manifest 文件，可以指定需要緩存的資源（比如 HTML 文件、圖片、CSS 文件、JavaScript 文件等）。當用戶首次訪問這個網頁時，這些資源會被下載並存儲在瀏覽器的本地。然後，無論是否有網絡連接，瀏覽器都會從緩存中加載這些資源，而不是從網絡上下載。

這個技術可以用來開發離線應用，或者提高網頁的加載性能。不過，由於 Service Worker 的出現，Application Cache 在 HTML5 的最新標準中已經被廢棄，建議使用 Service Worker 和 Cache API 來實現類似的功能。

以上就是 HTML5 離線存儲的簡單介紹，這些技術可以幫助開發者創建更加快速、穩定和響應式的網頁和 Web 應用。

6、如何處理HTML5新標籤的瀏覽器兼容問題？

HTML5 提供了許多新的標籤，但不幸的是，一些舊的瀏覽器（如 IE8 及以下版本）並不支持這些新標籤。爲了在這些瀏覽器中使用 HTML5 新標籤，我們可以採取以下幾種方法：

HTML5 Shiv：HTML5 Shiv 是一個 JavaScript 庫，它使得舊的瀏覽器能夠識別並正確處理 HTML5 新標籤。你可以通過在 HTML 文檔的 <head> 中添加以下代碼來使用它：
```

```
這段代碼使用了條件註釋，只有在 IE9 以下版本的瀏覽器中才會加載這個 JavaScript 文件。
創建元素：你也可以直接使用 JavaScript 來創建 HTML5 新標籤，這樣舊的瀏覽器就能識別這些標籤了。例如：
```
document.createElement("section");
```
這種方式的問題是，你需要爲每一個你想使用的 HTML5 新標籤都寫一行這樣的代碼。
使用框架或庫：許多現代的 JavaScript 框架或庫，如 jQuery、Angular、React 等，都提供了一些方法來解決 HTML5 的瀏覽器兼容性問題。
CSS 重置：舊的瀏覽器可能不會爲 HTML5 新標籤應用任何樣式，所以你可能需要在 CSS 中爲這些標籤添加一些默認樣式。例如，你可以將這些標籤的 display 屬性設置爲 block：
```
article, aside, figure, footer, header, nav, section {
  display: block;
}
```

以上就是處理 HTML5 新標籤的瀏覽器兼容問題的一些方法。請注意，雖然這些方法可以解決一部分問題，但並不能保證 HTML5 的所有特性在所有瀏覽器中都能正常工作。因此，在使用 HTML5 新特性時，最好還是要做好充分的測試和兼容性處理。

7、如何區別HTML和HTML5？

HTML 和 HTML5 都是用於創建網頁和 Web 應用的標記語言，但 HTML5 提供了更多的特性和功能。以下是一些區別 HTML 和 HTML5 的主要方式：

語義標籤：HTML5 引入了一系列新的語義標籤，如 <header>, <footer>, <nav>, <section>, <article>, <aside> 等。這些標籤使得開發者可以更清晰地描述網頁內容的結構和含義。而在 HTML 中，我們通常使用 <div> 和 <span> 等非語義標籤來組織和樣式化內容。
多媒體和圖形支持：HTML5 提供了 <audio> 和 <video> 標籤用於在網頁中嵌入音頻和視頻，而在 HTML 中，我們通常需要使用 Flash 或其他插件來播放多媒體內容。此外，HTML5 還引入了 <canvas> 標籤，用於在網頁上繪製圖形和動畫。
表單控件和驗證：HTML5 增加了許多新的表單輸入類型，如 email, tel, number, date 等，以及表單驗證屬性，如 required, pattern 等。這些新特性使得創建和驗證表單變得更加方便。
新的 API：HTML5 提供了一系列新的 JavaScript API，如地理位置（Geolocation）、本地存儲（Web Storage）、離線應用緩存（Application Cache）、Web Workers、WebSocket 等。這些 API 使得網頁和 Web 應用可以提供更豐富的功能和更好的用戶體驗。
DOCTYPE 聲明：HTML5 的 DOCTYPE 聲明更加簡單，只需要寫 <!DOCTYPE html>。而在 HTML 4.01 中，DOCTYPE 聲明要複雜得多，需要包含對 DTD（文檔類型定義）的引用。

以上就是 HTML 和 HTML5 的一些主要區別。請注意，雖然 HTML5 提供了更多的特性和功能，但並不是所有的瀏覽器都完全支持 HTML5，所以在使用 HTML5 新特性時，需要考慮到瀏覽器的兼容性問題。

8、新的HTML5文檔類型和字符集是什麼？

HTML5 的文檔類型（doctype）和字符集（charset）定義更加簡潔。

文檔類型：HTML5 的文檔類型只需寫 <!DOCTYPE html>，它告訴瀏覽器這是一個 HTML5 文檔。這與 HTML 4.01 和 XHTML 1.0 的文檔類型相比，更加簡潔。
```
<!DOCTYPE html>
```
字符集：HTML5 推薦使用 UTF-8 字符集，它可以表示任何字符在世界上的任何語言。字符集的定義也變得更加簡潔。
```
<meta charset="UTF-8">
```

這兩個定義通常位於 HTML 文檔的 <head> 部分的開始位置。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 其他元數據... -->
</head>
<body>
    <!-- 頁面內容... -->
</body>
</html>

這種簡化的文檔類型和字符集定義使 HTML5 更易於理解和使用，同時也提高了網頁的兼容性，因爲所有現代瀏覽器都能正確地理解這些定義。

9、簡述HTML5新增了哪些功能API？

HTML5 引入了許多新的 API，以實現更豐富的網頁功能和更好的用戶體驗。以下是一些主要的新 API：

Canvas API：用於在網頁上繪製圖形，如線條、形狀、圖片等。這個 API 還支持動畫，因此可以用來開發網頁遊戲。
Video 和 Audio API：用於在網頁上嵌入和控制視頻和音頻內容。
Geolocation API：用於獲取和使用用戶的地理位置信息。例如，可以用來顯示用戶當前位置的地圖或天氣。
Drag and Drop API：用於實現拖放功能。例如，可以用來創建可以拖動的網頁元素，或者實現文件上傳的拖放功能。
LocalStorage 和 SessionStorage API：用於在用戶的瀏覽器上存儲數據。例如，可以用來保存用戶的登錄狀態，或者保存用戶在表單中輸入的數據。
Web Workers API：用於在後臺線程中運行 JavaScript 代碼，以避免阻塞用戶界面。例如，可以用來執行耗時的計算任務，或者加載和處理大量的數據。
WebSocket API：用於在網頁和服務器之間建立實時通信連接。例如，可以用來實現聊天應用，或者實時更新網頁的數據。
History API：用於操作瀏覽器的歷史記錄。例如，可以用來實現單頁應用（SPA）的路由功能。

以上只是 HTML5 的一部分新 API，還有更多的新 API 等待開發者去發現和利用。

10、HTML5的form如何關閉自動補全功能？

在HTML5中，如果我們想要關閉表單的自動補全(auto-complete)功能，我們可以使用autocomplete屬性，並將其值設置爲off。這樣，瀏覽器就不會自動補全用戶的輸入。

例如，如果我們有一個登錄表單，我們可能不希望瀏覽器自動補全用戶的用戶名和密碼。在這種情況下，我們可以這樣做：

<form autocomplete="off">
  <label for="username">用戶名:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">密碼:</label><br>
  <input type="password" id="pwd" name="pwd">
  <input type="submit" value="提交">
</form>

在這個例子中，autocomplete="off"告訴瀏覽器不要自動補全這個表單中的任何輸入字段。然而，需要注意的是，雖然大部分現代瀏覽器都支持這個屬性，但並非所有瀏覽器都會尊重這個設置。一些瀏覽器可能仍然會嘗試自動補全輸入，尤其是在處理用戶名和密碼字段時。

11、如何在HTML5頁面中嵌入音頻？

在HTML5中，我們可以使用<audio>標籤來嵌入音頻。這是一個基本的例子：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

在這個例子中，<audio>標籤創建了一個音頻播放器，controls屬性添加了播放、暫停和音量等控制功能。

<source>標籤用於指定音頻文件的來源，src屬性定義了音頻文件的URL，type屬性定義了音頻文件的格式。

如果用戶的瀏覽器不支持<audio>標籤，那麼它會顯示標籤內部的內容，即"您的瀏覽器不支持 audio 元素。"

需要注意的是，不同的瀏覽器可能支持不同的音頻格式，因此可能需要提供多種格式的音頻文件，以確保在所有瀏覽器中都可以播放。例如：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的瀏覽器不支持 audio 元素。
</audio>

在這個例子中，如果瀏覽器不支持MP3格式，它會嘗試加載OGG格式的音頻文件。

12、如何在HTML5頁面中嵌入視頻？

在HTML5中，我們可以使用<video>標籤來嵌入視頻。這是一個基本的例子：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的瀏覽器不支持 video 標籤。
</video>

在這個例子中，<video>標籤創建了一個視頻播放器，controls屬性添加了播放、暫停、音量等控制功能。

width和height屬性用於設置視頻播放器的尺寸。

<source>標籤用於指定視頻文件的來源，src屬性定義了視頻文件的URL，type屬性定義了視頻文件的格式。

如果用戶的瀏覽器不支持<video>標籤，那麼它會顯示標籤內部的內容，即"您的瀏覽器不支持 video 標籤。"

需要注意的是，不同的瀏覽器可能支持不同的視頻格式，因此可能需要提供多種格式的視頻文件，以確保在所有瀏覽器中都可以播放。例如，如果瀏覽器不支持MP4格式，它會嘗試加載OGG格式的視頻文件。

13、HTML5引入了哪些新的表單屬性？

HTML5引入了一些新的表單屬性，這些屬性提供了更好的輸入控制和驗證。以下是一些重要的新屬性：

placeholder - 在用戶輸入之前，可以在輸入字段中顯示提示信息。例如：

<input type="text" name="name" placeholder="請輸入您的名字">

required - 這個屬性要求輸入字段必須填寫。如果在提交表單時該字段爲空，則瀏覽器會顯示錯誤信息。例如：

<input type="text" name="email" required>

pattern - 這個屬性允許你定義輸入字段的正則表達式模式。這在需要限制輸入格式（如電話號碼或郵件地址）時非常有用。例如：

<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

autofocus - 這個屬性讓頁面加載時自動將焦點設置到特定的輸入字段上。例如：

<input type="text" name="username" autofocus>

autocomplete - 這個屬性允許瀏覽器自動完成或預填充輸入字段。例如：

<input type="text" name="email" autocomplete="on">

multiple - 這個屬性允許用戶在文件輸入字段中選擇多個文件。例如：

<input type="file" name="files" multiple>

除了這些新的屬性，HTML5還引入了一些新的輸入類型（如email、date、number、range、color等），以提供更好的輸入控制。

14、HTML5應用緩存和常規的HTML瀏覽器緩存有什麼差別？

HTML5的應用緩存（Application Cache）與傳統的瀏覽器緩存（Browser Cache）在許多方面有所不同，主要區別在於他們的目標和控制方式：

目標：傳統的瀏覽器緩存主要是爲了提高網頁的加載速度，通過保存用戶最近請求過的文件（如圖片、腳本等）來減少網絡請求。而HTML5的應用緩存的目標則更爲廣泛，它不僅可以提高加載速度，還可以使得應用在離線狀態下仍然可用。
控制：傳統的瀏覽器緩存主要由瀏覽器自動管理，網站開發者對其控制能力有限。而HTML5的應用緩存則可以由開發者精細控制，開發者可以通過創建一個緩存清單（manifest文件），來明確指定哪些文件應該被緩存，哪些文件需要從網絡加載，哪些文件在無網絡連接時有備用資源等。
更新：在傳統的瀏覽器緩存中，當文件的過期時間到達或者緩存空間不足時，文件會被自動刪除。而在HTML5的應用緩存中，只有當manifest文件發生改變時，瀏覽器纔會重新下載所有的文件。

需要注意的是，儘管應用緩存可以在離線時提供一些很好的功能，但是它也有一些複雜性和困擾性，因此現在很多開發者已經開始採用Service Worker和Cache API來實現離線功能和資源的精細控制。

由於內容太多，更多內容以鏈接形勢給大家，點擊進去就是答案了

15. 爲什麼HTML5裏面不需要DTD ？

16. 哪些瀏覽器支持HTML5？

17. H5本地存儲和會話（事務）存儲之間的區別是什麼？

18. 簡述HTML5中的應用緩存？

19. 如果把HTML5看成一個開放平臺，它的構建模塊有哪些？

20. HTML5爲什麼只需要寫<！doctype htm>？

21. HTML5應用程序緩存爲應用帶來什麼優勢？

22. 簡述Web Worker和 WebSocket的作用？

23. 如何讓 Websocket兼容低版本瀏覽器？

24. HTML5爲瀏覽器提供了哪些數據存儲方案？