前端基礎問題整理-HTML相關

時間 2019-12-06

標籤前端基礎問題整理 html 相關欄目 HTML 简体版

原文原文鏈接

`DOCTYPE`的做用以及常見的`DOCTYPE`類型

<!DOCTYPE>聲明位於文檔中的最前面的位置,處於 <html> 標籤以前,用來告知瀏覽器頁面目前的文件是用哪一種版本的HTML(或XML)撰寫。css

常見類型

HTML 5
<!DOCTYPE html>html

HTML 4.01
三種文檔類型:Strict、Transitional、Frameset。前端

XHTML 1.0
三種XML文檔類型:Strict、Transitional、Frameset。web

瀏覽器標準模式和怪異模式之間的區別

標準模式:嚴格遵循W3C標準來呈現網頁的渲染模式。ajax
怪異模式:兼容舊版本瀏覽器,不會嚴格遵循W3C標準的網頁的一種渲染模式chrome

每一個HTML文檔的首行都是一個文檔聲明,這種文檔聲明是用來表示後面的那些個頁面標籤遵循哪個原則的,這是HTML5的文檔類型聲明：瀏覽器

<!DOCTYPE html>

這個是XHTML 1.0嚴格模式的文檔類型聲明：服務器

<!DOCTYPE html PUBLIC "-//W3C//DTD *XHTML 1.0* Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

保留文檔類型聲明主要是歷史緣由,沒有文檔聲明的話大多數瀏覽器都將會轉換到爲怪異模式(quirk mode),這種模式下瀏覽器會以老版本的瀏覽器使用的規則來渲染頁面,而且不一樣瀏覽器的怪異模式仍是不同的,咱們在平時碼代碼時應該儘可能迴避這種錯誤。cookie

在添加了文檔類型聲明以後,瀏覽器使用的就是標準模式(standard mode),這種狀況下瀏覽器會用W3C的標準來渲染網頁。網絡

附上兩篇
Mozilla Quirks Mode Behavior
怪異模式（Quirks Mode）對 HTML 頁面的影響

`HTML`和`XHTML`有什麼區別?

XHTML中的標籤都必須被正確地嵌套,HTML中的某些標籤能夠彼此不正確的嵌套。
XHTML中的全部標籤必需要關閉。
XHTML中規範定義：標籤名和屬性對大小寫敏感,全部XHTML標籤名必須用小寫字母。
XHTML文檔必須擁有根元素。
XHTML中標籤的屬性值要使用雙引號"。

若是頁面使用`'application/xhtml+xml'`會有什麼問題嗎？

使用xhtml,頁面結構中必須包含head標籤,而且每一個標籤結構都要關閉,包括空標籤。全部標籤都要小寫。使用了'application/xhtml+xml'以後,部分老瀏覽器不會支持。

使用`data-`屬性的好處是什麼？

經過data-能夠自定義屬性,能夠經過HTMLElement.dataset獲取這些屬性的值,data-中-後接自定義屬性的名字,例如data-url。實際開發中能夠利用這一點在生成DOM結構時把數據儲存在自定義屬性中,經過一系列交互操做,能夠再得到這些數據,而不用再去ajax去後臺取得數據。

`cookies`、`sessionStorage`和`localStorage`的區別。

sessionStorage和localStorage是web storage的兩種儲存方式,其中sessionStorage是會話級別儲存,在瀏覽器或頁面關閉時數據就會銷燬,而localStorage是持久化的本地儲存,不刻意去刪除數據,數據是不會銷燬的。以上這兩種方式只是客戶端的儲存,不會涉及到服務器儲存。與之相比,每次發送HTTP請求時會將cookie添加到Cookie頭字段,發送給服務器。

在儲存量方面也有差別,單個cookie保存的數據不能超過4K,而localStorage和sessionStorage通常有5-10M。

除此以外,每一個域名下cookie的個數會有限制,依據瀏覽器不一樣會有不一樣,而localStorage數量是無限制的。

`<script>`、`<script async>`和`<script defer>`的區別

<script>加載js文件會阻塞頁面的渲染和交互,而<script async>和<script defer>都是異步加載js文件,期間不會才生阻塞,區別在於<script async>是加載完以後自動執行,<script defer>須要等到頁面加載以後再執行。

爲何一般將`css`的`<link>`放置在`<head></head>`之間,而將`js`的`<script>`放置在`</body>`以前?有哪些例外嗎?

瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,因此在當瀏覽器在渲染HTML遇到了<script>標籤會先去執行標籤內的代碼(若是是使用src屬性加載的外鏈文件,則先下載再執行),在這個過程當中,頁面渲染和交互都會被阻塞。因此將<script>放在</body>以前,當頁面渲染完成再去執行<script>。

通常但願DOM還沒加載必須須要先加載的js會放置在<head>中,有些加了defer、async的<script>也會放在<head>中。